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.
- 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.
- 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.
- 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.
- Middleware
-
Auth: Use middleware for route protection (redirecting unauthenticated users).
-
Performance: Keep middleware lightweight (Edge runtime compatible).