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).