Next.js Batch3 FAQ & Answers

Route handlers are App Router's API endpoints for creating server-side HTTP handlers using Web Request/Response APIs. Create route.ts (or route.js) in any app directory route segment - cannot coexist with page.ts at same level. Supported HTTP methods: GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS - export async function with method name. Example: export async function GET(request: Request) { const data = await fetchData(); return Response.json(data); }. Accessing request data: request.json() for JSON body, request.formData() for forms, request.headers for headers, request.nextUrl.searchParams for query params. Route parameters: access dynamic segments via params: async function GET(request: Request, { params }: { params: { id: string } }). Response types: Response.json() for JSON, new Response() for custom, NextResponse for advanced (cookies, headers). CORS: set headers manually - headers: { 'Access-Control-Allow-Origin': '*' }. Streaming: support streaming responses for large data. Webhooks: handle third-party webhooks without bodyParser config (works out of box). Edge Runtime: export const runtime = 'edge' for global distribution. Caching: GET requests cached by default in Next.js 14, NOT cached in Next.js 15 (use export const dynamic = 'force-static' to cache). Server Actions vs Route Handlers (2025 guidance): use Server Actions for form submissions and mutations (progressive enhancement, automatic revalidation, simpler), use Route Handlers for: (1) External API calls from client, (2) RESTful endpoints for third-party integrations, (3) Webhooks from external services, (4) Custom authentication flows, (5) File uploads/downloads. Best practices: keep handlers small and focused (single responsibility), implement proper error handling with try/catch, use TypeScript for type safety (Request, Response types), validate input data (never trust client), return meaningful error responses (status codes, messages), add CORS headers for cross-origin requests, use Edge Runtime for global latency reduction, implement logging for debugging (Pino recommended). Security: validate API keys/auth tokens, sanitize inputs to prevent injection, rate limit endpoints to prevent abuse, use environment variables for secrets. Production patterns: error handling wrapper - try { } catch (error) { return Response.json({ error: 'Message' }, { status: 500 }); }, structured logging for monitoring, input validation with Zod schemas. Performance: route handlers run on server only (no client bundle impact), use edge for <50ms global latency, cache GET endpoints when possible. Common mistake: mixing page.ts and route.ts in same segment (not allowed), not validating inputs (security risk), returning non-serializable data (causes errors).

Next.js 15 introduces MAJOR caching changes - breaking from previous versions. Four cache layers: (1) Request Memoization (React feature) - deduplicates identical requests within single render pass, automatic for fetch() with same URL/options, lasts only during server render. (2) Data Cache (server-side) - persists fetch results across requests and deploys. CRITICAL CHANGE: Next.js 15 defaults to cache: 'no-store' (NOT cached) vs Next.js 14 defaulting to cache: 'force-cache' (cached). Explicit opt-in required: fetch(url, { cache: 'force-cache' }) or route-level export const dynamic = 'force-static'. (3) Full Route Cache (server-side) - caches entire rendered route (HTML + RSC payload) at build time for static routes. Next.js 15 opts OUT segments by default - must explicitly enable caching. (4) Router Cache (client-side) - in-memory cache of visited routes and prefetched routes, improves navigation performance. Invalidate with router.refresh(). Revalidation strategies: time-based - fetch(url, { next: { revalidate: 3600 } }) or export const revalidate = 3600, on-demand - revalidatePath('/blog'), revalidateTag('posts'). Tag-based caching (recommended 2025): fetch(url, { next: { tags: ['products'] } }), then revalidateTag('products') for surgical cache invalidation. Opting out of caching: per-request - cache: 'no-store', per-route - export const dynamic = 'force-dynamic' or export const revalidate = 0, per-component - noStore() function (experimental). Data Cache interactions: revalidating Data Cache invalidates Full Route Cache (render depends on data), but invalidating Full Route Cache does NOT affect Data Cache. New Next.js 15 features: dynamicIO flag excludes data fetching from pre-renders unless explicitly cached (opt-in), 'use cache' directive caches individual async functions (fine-grained control). Best practices 2025: (1) Understand default is NO caching - explicitly cache what you need, (2) Use tag-based invalidation for complex dependencies, (3) Implement 'use cache' for expensive computations, (4) Monitor cache hit rates in production, (5) Document caching strategy per route. Performance: proper caching reduces server load 60-90%, improves response times 80-95% for cached content. Router Cache: stores visited routes for instant back/forward navigation, prefetches linked routes (on viewport) for faster navigation, cleared on router.refresh() or hard navigation. Production debugging: check X-Nextjs-Cache header (HIT, MISS, STALE) to verify caching behavior. Common mistakes: assuming fetch() is cached (it's NOT in Next.js 15), not setting explicit cache strategies (results in always-dynamic pages), over-caching dynamic data (stale content issues), not using tags for invalidation (cache invalidation becomes difficult).

Next.js supports multiple authentication approaches with significant 2025 security updates. Popular libraries: NextAuth.js/Auth.js (50+ providers, sessions, JWT, middleware integration), Clerk (drop-in UI, user management, organizations), Auth0 (enterprise SSO, MFA), Lucia (lightweight, 100% typesafe), Supabase Auth (backend + auth combined). CRITICAL 2025 PATTERN: Due to CVE-2025-29927, authentication MOVED from middleware to Data Access Layer. Recommended architecture: (1) Data Access Layer - centralize auth checks in server-side functions called from Server Components/Actions, validate user/session before data access. (2) Server Component auth - check auth in layout.tsx: const session = await auth(); if (!session) redirect('/login'). (3) Server Actions - validate session in mutations: async function updateProfile(data) { const session = await auth(); if (!session) throw new Error('Unauthorized'); }. (4) Middleware - ONLY for lightweight routing (redirect unauthenticated to /login), NOT for business logic. NextAuth.js implementation: install next-auth@beta (v5 for App Router), create auth.ts config with providers, wrap app in SessionProvider (client), check session in Server Components with await auth(). Session storage: secure HTTP-only cookies (recommended), JWT tokens for stateless (validate expiry, use short TTL), database sessions (revocable, more secure). OAuth pattern: NextAuth handles provider integration (Google, GitHub, Discord), callback URLs configured in provider dashboard, PKCE flow for security. Edge-compatible auth: use Auth.js with lazy initialization - separate configs for edge middleware (no adapter) vs API routes (with database adapter). Magic link pattern: send one-time link to email, verify token on callback, create session. Protecting routes: layout.tsx check in Server Component (recommended 2025), middleware redirect (lightweight only), route groups for auth boundaries - (authenticated)/dashboard/layout.tsx. Progressive enhancement: Server Actions work without JavaScript, forms submit via POST, client-side enhances with optimistic UI. Best practices 2025: (1) NEVER put auth logic in middleware (security risk), (2) Use Data Access Layer for all sensitive checks, (3) Implement CSRF protection (Next.js automatic for Server Actions), (4) Use secure session cookies (httpOnly, secure, sameSite), (5) Set short session TTL (15-30 minutes), (6) Implement refresh tokens for long-lived access, (7) Add MFA for sensitive operations. Security checklist: validate sessions on every protected request, never trust client-side auth state, use environment variables for secrets, rotate secrets regularly, implement rate limiting for login endpoints, log authentication events, use prepared statements for database queries (prevent SQL injection). Production patterns: session middleware in layout.tsx (server check), client-side useSession hook for UI state, API route protection with session validation, webhook signature verification for third-party auth. Common mistakes: checking auth only in middleware (insecure), storing sensitive data in localStorage (XSS risk), not validating sessions server-side (client can forge), using long-lived sessions without refresh (security risk).

Route handlers are App Router's API endpoints for creating server-side HTTP handlers using Web Request/Response APIs. Create route.ts (or route.js) in any app directory route segment - cannot coexist with page.ts at same level. Supported HTTP methods: GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS - export async function with method name. Example: export async function GET(request: Request) { const data = await fetchData(); return Response.json(data); }. Accessing request data: request.json() for JSON body, request.formData() for forms, request.headers for headers, request.nextUrl.searchParams for query params. Route parameters: access dynamic segments via params: async function GET(request: Request, { params }: { params: { id: string } }). Response types: Response.json() for JSON, new Response() for custom, NextResponse for advanced (cookies, headers). CORS: set headers manually - headers: { 'Access-Control-Allow-Origin': '*' }. Streaming: support streaming responses for large data. Webhooks: handle third-party webhooks without bodyParser config (works out of box). Edge Runtime: export const runtime = 'edge' for global distribution. Caching: GET requests cached by default in Next.js 14, NOT cached in Next.js 15 (use export const dynamic = 'force-static' to cache). Server Actions vs Route Handlers (2025 guidance): use Server Actions for form submissions and mutations (progressive enhancement, automatic revalidation, simpler), use Route Handlers for: (1) External API calls from client, (2) RESTful endpoints for third-party integrations, (3) Webhooks from external services, (4) Custom authentication flows, (5) File uploads/downloads. Best practices: keep handlers small and focused (single responsibility), implement proper error handling with try/catch, use TypeScript for type safety (Request, Response types), validate input data (never trust client), return meaningful error responses (status codes, messages), add CORS headers for cross-origin requests, use Edge Runtime for global latency reduction, implement logging for debugging (Pino recommended). Security: validate API keys/auth tokens, sanitize inputs to prevent injection, rate limit endpoints to prevent abuse, use environment variables for secrets. Production patterns: error handling wrapper - try { } catch (error) { return Response.json({ error: 'Message' }, { status: 500 }); }, structured logging for monitoring, input validation with Zod schemas. Performance: route handlers run on server only (no client bundle impact), use edge for <50ms global latency, cache GET endpoints when possible. Common mistake: mixing page.ts and route.ts in same segment (not allowed), not validating inputs (security risk), returning non-serializable data (causes errors).

Next.js 15 introduces MAJOR caching changes - breaking from previous versions. Four cache layers: (1) Request Memoization (React feature) - deduplicates identical requests within single render pass, automatic for fetch() with same URL/options, lasts only during server render. (2) Data Cache (server-side) - persists fetch results across requests and deploys. CRITICAL CHANGE: Next.js 15 defaults to cache: 'no-store' (NOT cached) vs Next.js 14 defaulting to cache: 'force-cache' (cached). Explicit opt-in required: fetch(url, { cache: 'force-cache' }) or route-level export const dynamic = 'force-static'. (3) Full Route Cache (server-side) - caches entire rendered route (HTML + RSC payload) at build time for static routes. Next.js 15 opts OUT segments by default - must explicitly enable caching. (4) Router Cache (client-side) - in-memory cache of visited routes and prefetched routes, improves navigation performance. Invalidate with router.refresh(). Revalidation strategies: time-based - fetch(url, { next: { revalidate: 3600 } }) or export const revalidate = 3600, on-demand - revalidatePath('/blog'), revalidateTag('posts'). Tag-based caching (recommended 2025): fetch(url, { next: { tags: ['products'] } }), then revalidateTag('products') for surgical cache invalidation. Opting out of caching: per-request - cache: 'no-store', per-route - export const dynamic = 'force-dynamic' or export const revalidate = 0, per-component - noStore() function (experimental). Data Cache interactions: revalidating Data Cache invalidates Full Route Cache (render depends on data), but invalidating Full Route Cache does NOT affect Data Cache. New Next.js 15 features: dynamicIO flag excludes data fetching from pre-renders unless explicitly cached (opt-in), 'use cache' directive caches individual async functions (fine-grained control). Best practices 2025: (1) Understand default is NO caching - explicitly cache what you need, (2) Use tag-based invalidation for complex dependencies, (3) Implement 'use cache' for expensive computations, (4) Monitor cache hit rates in production, (5) Document caching strategy per route. Performance: proper caching reduces server load 60-90%, improves response times 80-95% for cached content. Router Cache: stores visited routes for instant back/forward navigation, prefetches linked routes (on viewport) for faster navigation, cleared on router.refresh() or hard navigation. Production debugging: check X-Nextjs-Cache header (HIT, MISS, STALE) to verify caching behavior. Common mistakes: assuming fetch() is cached (it's NOT in Next.js 15), not setting explicit cache strategies (results in always-dynamic pages), over-caching dynamic data (stale content issues), not using tags for invalidation (cache invalidation becomes difficult).

Next.js supports multiple authentication approaches with significant 2025 security updates. Popular libraries: NextAuth.js/Auth.js (50+ providers, sessions, JWT, middleware integration), Clerk (drop-in UI, user management, organizations), Auth0 (enterprise SSO, MFA), Lucia (lightweight, 100% typesafe), Supabase Auth (backend + auth combined). CRITICAL 2025 PATTERN: Due to CVE-2025-29927, authentication MOVED from middleware to Data Access Layer. Recommended architecture: (1) Data Access Layer - centralize auth checks in server-side functions called from Server Components/Actions, validate user/session before data access. (2) Server Component auth - check auth in layout.tsx: const session = await auth(); if (!session) redirect('/login'). (3) Server Actions - validate session in mutations: async function updateProfile(data) { const session = await auth(); if (!session) throw new Error('Unauthorized'); }. (4) Middleware - ONLY for lightweight routing (redirect unauthenticated to /login), NOT for business logic. NextAuth.js implementation: install next-auth@beta (v5 for App Router), create auth.ts config with providers, wrap app in SessionProvider (client), check session in Server Components with await auth(). Session storage: secure HTTP-only cookies (recommended), JWT tokens for stateless (validate expiry, use short TTL), database sessions (revocable, more secure). OAuth pattern: NextAuth handles provider integration (Google, GitHub, Discord), callback URLs configured in provider dashboard, PKCE flow for security. Edge-compatible auth: use Auth.js with lazy initialization - separate configs for edge middleware (no adapter) vs API routes (with database adapter). Magic link pattern: send one-time link to email, verify token on callback, create session. Protecting routes: layout.tsx check in Server Component (recommended 2025), middleware redirect (lightweight only), route groups for auth boundaries - (authenticated)/dashboard/layout.tsx. Progressive enhancement: Server Actions work without JavaScript, forms submit via POST, client-side enhances with optimistic UI. Best practices 2025: (1) NEVER put auth logic in middleware (security risk), (2) Use Data Access Layer for all sensitive checks, (3) Implement CSRF protection (Next.js automatic for Server Actions), (4) Use secure session cookies (httpOnly, secure, sameSite), (5) Set short session TTL (15-30 minutes), (6) Implement refresh tokens for long-lived access, (7) Add MFA for sensitive operations. Security checklist: validate sessions on every protected request, never trust client-side auth state, use environment variables for secrets, rotate secrets regularly, implement rate limiting for login endpoints, log authentication events, use prepared statements for database queries (prevent SQL injection). Production patterns: session middleware in layout.tsx (server check), client-side useSession hook for UI state, API route protection with session validation, webhook signature verification for third-party auth. Common mistakes: checking auth only in middleware (insecure), storing sensitive data in localStorage (XSS risk), not validating sessions server-side (client can forge), using long-lived sessions without refresh (security risk).