Agent Skills: Next.js Patterns

Next.js Patterns

App Router

We use the Next.js 15 App Router located in app/.

Pages

• Location: app/[route]/page.tsx
• Component: Default export function.
• Client vs Server: Use "use client" directive at the top for components requiring state (useState, useEffect) or browser APIs. otherwise default to Server Components.

Layouts

• Location: app/layout.tsx (Root), app/[route]/layout.tsx (Nested).
• Purpose: Wrappers for pages, holding navigation, fonts, and metadata.

Navigation

• Use Link from next/link for internal navigation.
• Use 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');

Data Fetching

• Server Components: Fetch directly using await fetch() or DB calls.
• Client Components: Use useEffect or SWR/TanStack Query (if added later). Currently using standard fetch in useEffect.

Font Optimization

• We use next/font/google (e.g., Poppins) in app/layout.tsx.
• Variable fonts are passed to body className.

Metadata

• Define export const metadata: Metadata = { ... } in page.tsx or layout.tsx for SEO.