next-js-patterns

name	next-js-patterns
description	Best practices and patterns for Next.js App Router, Server Actions, and Routing in this project.

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.