Menu
Best practices and patterns for Next.js App Router, Server Actions, and Routing in this project.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Documentation for the FastAPI backend, endpoints, and dependency injection.
Overview of the project's tech stack, directory structure, and architectural patterns.
Guide to using Better Auth for client and server-side authentication.
Validates and analyzes Docusaurus MDX chapters for structure, pedagogical quality, and component usage.
Details of the RAG Chatbot, including UI and backend logic.
Interaction with NeonDB Postgres using Drizzle ORM.
| name | Next.js Patterns |
| description | Best practices and patterns for Next.js App Router, Server Actions, and Routing in this project. |
We use the Next.js 15 App Router located in app/.
app/[route]/page.tsx"use client" directive at the top for components requiring state (useState, useEffect) or browser APIs. otherwise default to Server Components.app/layout.tsx (Root), app/[route]/layout.tsx (Nested).Link from next/link for internal navigation.useRouter from next/navigation for programmatic navigation (inside Client Components).import Link from "next/link";
import { useRouter } from "next/navigation";
// Link
<Link href="/dashboard">Dashboard</Link>
// Router
const router = useRouter();
router.push('/login');
await fetch() or DB calls.useEffect or SWR/TanStack Query (if added later). Currently using standard fetch in useEffect.next/font/google (e.g., Poppins) in app/layout.tsx.body className.export const metadata: Metadata = { ... } in page.tsx or layout.tsx for SEO.