Next.js Full Stack Patterns

When to use this skill

• Building features in Next.js (App Router).
• Creating API endpoints (Route Handlers).
• Implementing Server Actions for mutations.

1. App Router Structure

• Colocation: Keep related files (helpers, components, styles) inside the route segment folder unless they are truly shared.
• Pages: page.tsx should remain light; import client/server components for the UI.
• Layouts: Use layout.tsx for shared UI (nav, unrelated to route params) and template.tsx if you need state reset on navigation.

2. Server Components (RSC)

• Default: All components are Server Components by default.
• Data Fetching: Fetch data directly in RSCs (async/await). No useEffect needed.
• Secrets: Server components can safely access process.env secrets.

3. Server Actions

• Mutations: Use Server Actions ('use server') for form submissions and simple mutations.
• Validation: Validate inputs (Zod) inside the action before processing.
• Revalidation: Use revalidatePath or revalidateTag to update cache after mutation.

4. Middleware

• Auth: Use middleware for route protection (redirecting unauthenticated users).
• Performance: Keep middleware lightweight (Edge runtime compatible).