Partial Prerendering in Next.js 16, Explained on a Real Page
What partial prerendering does to a real Next.js page: what becomes static HTML, what streams, where the Suspense boundaries go, and the build errors to expect.
Writing
Next.js: what we have had to fix
107 write-ups from production, newest first. Each one is a problem hit on a real project and how it was diagnosed and fixed.
Next.js 16 Cache Components: use cache, cacheLife, cacheTag
Cache Components in Next.js 16 in practice: where use cache goes, how cacheLife profiles behave, when cacheTag earns its keep, and the build errors.
Typed Routes in Next.js 16: Dynamic hrefs That Compile
Statically typed links catch broken hrefs at build time. How typedRoutes works in Next.js 16, dynamic hrefs that satisfy it, redirects.
Turbopack Build Failures: OOM, Linked Packages, CSS HMR
The Turbopack failures we have hit on Next.js 16: out-of-memory builds, symlinked packages not resolving, CSS Modules not hot-reloading, loader config.
React Compiler in Production: Gains and What It Broke
Running the React Compiler on real Next.js sites: what it memoises, the measured effect, the patterns it refused to compile, the one bug it exposed.
Next.js on Vercel: instrumentation, after() and Lost Work
Why background work in a serverless function silently disappears, how after() keeps it alive, what instrumentation.ts is for, and making side effects reliable.
INP in React Apps: Hydration, Third Parties, Measure First
Why React sites fail INP: hydration blocking early taps, wide re-renders, third-party scripts on the main thread. What to measure first and the fixes in order.
Design Tokens in CSS Read by Next.js and a Python Checker
One tokens.css file as the source of truth for colour, spacing and type, read by the Next.js app at runtime and parsed by a Python script that enforces it in.
Core Web Vitals: WordPress vs Next.js, What Differs
Same metrics, different failure modes. Where WordPress and Next.js sites typically fail LCP, INP and CLS, why, and what the platform does and does not decide.
A Booking Form With Server Actions, Zod and React Hook Form
A booking request form in Next.js: one Zod schema on client and server, React Hook Form for instant validation, a server action that saves.
Headless WordPress With Next.js: When It Pays Off
The business case for and against decoupling WordPress from its front end: what you gain in speed and control, what you pay in plugins and cost, and who wins.
Link Prefetching at Scale: When It Hammers Your RSC Endpoint
A page with two hundred links prefetches two hundred routes. How next/link prefetching works, when it becomes a cost, and how to tune lists and mega-menus.
Next.js Image Optimisation: sizes, priority, quality and LCP
Getting next/image right for LCP: the sizes attribute most sites get wrong, when to use priority, quality and format trade-offs, and the check that proves it.
Hydration Mismatches With Streaming Suspense: A Diagnosis
What a hydration mismatch means under streaming, six causes on a business site from dates to browser extensions, how to find the element, and the fix for each.
Next.js 16 Environment Variables: Build, Runtime and Edge
Which Next.js environment variables are baked in at build, which are read per request, what NEXT_PUBLIC_ does, how the Edge runtime differs, and safe patterns.
Headless WordPress With Next.js: Data, Caching and Previews
WordPress as the editor, Next.js as the front end: WPGraphQL, fetching with cache tags, webhooks on publish, draft previews, media, and where teams regret it.
generateStaticParams for Hundreds of Routes Without OOM
Prerendering hundreds of pages without a twenty-minute build or an out-of-memory failure: fetch once, tune workers, leave the long tail dynamic, measure it.
When Not to Use Next.js: An Honest Guide for Business Sites
Next.js is our default and still the wrong choice for many business sites. When WordPress, a static generator or a hosted builder serves the client better.
Next.js Preview Mode for Draft Content From a Headless CMS
Letting editors see unpublished content on the real site with Next.js draft mode: a secured preview route, draft fetching, and keeping previews uncached.
Next.js Metadata API, Sitemaps and Structured Data
SEO plumbing for an App Router site: generateMetadata from one registry, canonical and Open Graph defaults, sitemap.ts, JSON-LD and the checks that catch drift.
Next.js Forms With Server Actions and useActionState
A contact form built the App Router way: a server action that validates and sends, useActionState for pending and errors, progressive enhancement and spam.
Cache Components in Next.js 16 for a Business Website
How Cache Components change caching for a marketing site: what use cache does, how cacheLife maps to page types, dynamic edges and prerender mistakes.
React 19.2 useActionState Pending Stuck After Navigation
React 19.2 useActionState leaves isPending true after a Next.js redirect or router.push? Here is why the state never resets and the pattern that fixes it.
FCP Regression After Enabling React Compiler in Next.js 16
First Contentful Paint regressed after turning on reactCompiler in Next.js 16? Here is why the runtime cache pushes paint and the boundary fix that recovers it.
Next.js 16 Link Prefetch Hammering Your RSC Endpoint
Next.js 16 Link prefetch flooding your RSC endpoint on hover? Here is why the new heuristic fires too eagerly and the prefetch={false} fix that holds.
React 19.2 ref as Prop Breaking forwardRef Libraries Fix
React 19.2 ref-as-prop colliding with legacy forwardRef components from your UI library? Here is why the double-ref bug fires and the wrapper that fixes it.
Open Graph Image Stale After Vercel Deploy: Cache Fix
Open Graph image showing the old version after deploy on Vercel? Here is why Facebook, Slack, and LinkedIn keep the stale image and the cache-bust that works.
Next.js 16 typedRoutes Dynamic href TypeScript Errors
Next.js 16 typedRoutes throwing 'string is not assignable to Route' on dynamic Link hrefs? Why the new validator rejects template strings and the fix.
Next.js 16.3 typedRoutes Catch-all Build TypeError Fix
Next.js 16.3 typedRoutes throwing a TypeError on catch-all dynamic routes after the upgrade? Here is why the segment tuple type fails and the helper fix.
Next.js 16 Link Prefetch Flooding Vercel Edge Requests
Next.js 16 Link prefetch is blowing through your Vercel Edge request budget? Here is why hover-prefetch fires twice and the config that brings it back to sane.
GA4 Scroll Events Not Firing in Next.js App Router
GA4 enhanced measurement scroll events stop firing after the first route in Next.js App Router. Here is why the listener detaches and the exact fix.
Next.js 16 PPR searchParams Breaking Static Shell Fix
Partial Prerendering in Next.js 16 rendering pages fully dynamic? Here is why searchParams kills the static shell and the Suspense pattern that fixes it.
noindex Detected in robots meta False Positive GSC Fix
Search Console reporting 'noindex detected in robots meta' on pages that are clearly indexable? Here is the App Router metadata bug behind it and the fix.
Next.js 16 PPR Build Error: Unsupported Segment Config Fix
Next.js 16 build failing after enabling experimental.ppr with 'unsupported segment config'? Here is why the route errors and the migration that ships.
Next.js Server Action 413 Payload Too Large: Upload Fix
Next.js Server Action throws 413 Content Too Large for file uploads after deploying to Vercel? Here is why the 4 MB body limit fires and how to fix it.
GA4 Scroll Tracking Double Counting Events: The Fix
GA4 reporting double the scroll events for every page view? Here is why enhanced measurement duplicates with App Router and the precise setting that fixes it.
React 19.1 useActionState Pending Stuck After Redirect
React 19.1 useActionState pending flag stays true after a server action redirect in Next.js 16? Here is the cause and a reliable workaround that resets it.
Next.js 16 revalidatePath Not Working in Route Handler
Next.js 16 revalidatePath not invalidating cache from a Route Handler? Here is why the path argument mismatch happens and the canonical fix that holds.
Next.js 16 useActionState Returning Stale State Fix
Next.js 16 useActionState returning the previous submission state after a navigation back? Here is why the hook caches it and the fix that resets cleanly.
React 19 useActionState Not Resetting Form After Success
React 19 useActionState returns success but the form shows old input values. Here is why the state persists and the form-key pattern that resets it cleanly.
Next.js 16 PPR Dynamic Holes Re-rendering Every Request
Next.js 16 Partial Prerendering ships a static shell, but the dynamic holes re-render every visit instead of caching. Here is why and the exact fix.
Next.js 16.2 typedRoutes Link Href TypeScript Errors Fix
Next.js 16.2 typedRoutes throwing 'Route is not a known route' errors on Link href after upgrade? Here is why the type narrows and how to satisfy the checker.
Product Schema priceValidUntil Missing: Rich Snippet Fix
Google flagging Product schema for missing priceValidUntil and dropping price rich snippets? The exact field, format, and Next.js fix that restores them.
Next.js 16 PPR Static Shell Flashing on Dynamic Routes
Next.js 16 PPR shell flashing skeleton before dynamic content paints? Here is why the prerender slot leaks and the Suspense boundary fix that stops it.
Next.js 16 Server Action redirect() Caught in try/catch
Next.js 16 server action redirect() silently swallowed by a try/catch and the user stays on the form? Here is the NEXT_REDIRECT error and the rethrow fix.
Next.js 16.2 useActionState Loses Form State on Navigation
Next.js 16.2 wiping useActionState after a Server Action redirect? Here is why the hook resets across navigation and the pattern that keeps state intact.
Next.js 16 typedRoutes Link href Type Error Fix
Next.js 16 build failing with 'Type string is not assignable to type Route' on Link href? Here is why typedRoutes got stricter and the migration that compiles.
Next.js 16 PPR Breaking Cookies Read in Layout Components
Next.js 16 Partial Prerendering crashes when you call cookies() in a layout? Why the static shell evaluates first, and the suspense boundary that fixes it.
Next.js 16 PPR: Static Shell Returning Stale Data on Vercel
Next.js 16 PPR is serving a stale static shell while the dynamic hole renders fresh? Here is why the prerender baked the wrong data and the fix that ships.
Indexed Not Submitted in Sitemap: GSC Spike on Next.js Sites
Search Console is reporting hundreds of 'Indexed, not submitted in sitemap' URLs on a Next.js site? Here is what is leaking and the sitemap fix that holds.
Next.js 16 Form Component Redirect After Action Not Firing
Next.js 16 Form component leaves the user on the same URL after a server action redirect? Here is the navigation reason it ignores and the fix that ships.
Next.js 16 unstable_cache Migration Build Errors
Next.js 16 build failing after replacing unstable_cache with 'use cache'? Here is why the closure error fires and the exact migration pattern that compiles.
Page With Redirect in Search Console: The Next.js Fix
Page with redirect in Search Console keeping your Next.js pages out of the index? Here is why your canonical URL redirects and how to fix it for good.
Next.js 16 next start 500 Error After Turbopack Build
Next.js 16 next build passes but next start returns a 500 with Cannot find module? Turbopack quietly ignored your custom webpack config. Here is the real fix.
Next.js _rsc URLs Indexed by Google: The Crawl Fix
Next.js _rsc URLs showing up in Search Console as duplicates or alternate canonicals? Here is why App Router prefetch leaks them and how to stop the crawl.
Next.js 16 Image Qualities Not Configured Error Fix
Next.js 16 throwing an unconfigured qualities error or blurry images after upgrade? Here is why images.qualities now defaults to 75 and the config fix.
Next.js Windows SCSS Imports from node_modules Failing: Fix
Next.js Windows SCSS imports from node_modules are breaking again in webpack mode. Here is the workaround path I would use until upstream lands a fix.
Next.js cacheComponents Mapbox Crash on Route Reappear: Fix
Next.js cacheComponents can break Mapbox, video players, and other imperative widgets on back navigation. Here is the fix path I trust in production today.
React 19.2 useOptimistic Not Resetting After Server Action
React 19.2 useOptimistic state stuck after a server action returns? Here is the key, transition, and revalidatePath fix that lets the UI reset cleanly.
next/script afterInteractive Blocking INP on Mobile
next/script strategy='afterInteractive' still pushing INP past 500ms on mobile? Here is the lazyOnload, worker, and onLoad fix that drops it back under 200ms.
Next.js 16 instrumentation.ts Not Running on Vercel
Next.js 16 instrumentation.ts register hook silent on Vercel after upgrade? Here is the runtime, location, and onRequestError fix that gets it firing again.
Next.js 16.2 Turbopack Build Out of Memory on Vercel
Next.js 16.2 Turbopack production build crashing with JavaScript heap out of memory on Vercel? Here is what changed and the build config that gets it green.
Hreflang Tags Wrong After Next.js App Router i18n
Hreflang tags wrong or missing after a Next.js App Router i18n migration? Search Console flagging no-return-tag errors? Here is the metadata fix to ship.
Next.js 16.2 searchParams Promise TypeError in Components
Next.js 16.2 searchParams returning a Promise and breaking your pagination or filter components? Here is the await pattern that fixes the TypeError fast.
Next.js bfcache Not Restoring Page on Back Navigation Fix
Next.js page failing back/forward cache and re-rendering on browser back? Most causes are unload listeners, open WebSockets, or Cache-Control no-store.
Next.js 16 forbidden() Helper Returning 500 Instead of 403
Next.js 16 forbidden() and unauthorized() helpers returning 500 in production? You need forbidden.tsx and unauthorized.tsx files in the route segment.
Next.js 16 OG Image ImageResponse 500 Error in Production
Next.js 16 ImageResponse route returning 500 in production but fine locally? Here is the font fetch, edge runtime, and cache fix that solves it for good.
robots.txt Blocking next/image on Vercel: The Real Fix
Google Search Console flagging your next/image URLs as blocked by robots.txt on Vercel deployments? Here is why it happens and the exact rule to ship.
Next.js 16 Turbopack CSS Modules HMR Not Updating Fix
Next.js 16 Turbopack not picking up CSS module changes after save? Here is why HMR silently breaks for barrel imports and the workaround to ship today.
Next.js 16 Image remotePatterns Wildcard Not Working
Next.js 16 next/image throwing 400 on subdomain wildcards in remotePatterns? Use the new array syntax and explicit pathnames to unblock builds today.
Duplicate Without User-Selected Canonical Fix Next.js
Search Console flagging 'Duplicate without user-selected canonical' on Next.js pages? Set explicit canonicals in generateMetadata and recover indexing fast.
Next.js 16 dynamicIO Uncached Fetch Build Error Fix
Next.js 16 build failing with uncached IO fetch errors under dynamicIO? Wrap data in use cache, Suspense, or connection() to unblock prerender builds.
Sitemap Lastmod Wrong Date in Next.js 16 App Router
Sitemap.xml lastmod stuck at build time in Next.js 16 App Router? Here is why generateSitemaps caches the value and the per-route revalidate fix that ships.
Next.js 16.2 Dynamic OG Image 404 in Production Fix
Next.js 16.2 dynamic OG image returning 404 in production but working in dev? Here is why ImageResponse breaks on Vercel and the runtime fix that ships.
Next.js after() Function Not Running in Production Fix
Next.js after() callback fires in dev but never runs in production on Vercel? Fix the cache directive, runtime, and proxy interaction with working code.
React useFormStatus Pending Stuck After Server Action
React 19.2 useFormStatus pending stuck on true after a Server Action returns? Here is why redirect, throw, and nested forms break it, with a real fix.
CLS From Skeleton Loaders in Suspense Fallback Fix
Cumulative Layout Shift spiking from Suspense skeleton loaders in Next.js 16? Match the skeleton dimensions to real content with a working CSS pattern.
Next.js 16 ISR Memory Leak: Off-Heap Buffer Growth
Next.js 16.2.4 ISR memory leak symptoms usually show up as rising external and arrayBuffers usage. Here is the diagnosis path I trust on self-hosted apps.
Next.js 16.2 Default Error Page Showing in Production: Fix
Next.js 16.2 default error page showing in production? Fix misplaced error boundaries, redirect failures, and fallback UI leaks before users see them.
Next.js 16 Streaming Suspense Hydration Mismatch Fix
Next.js 16 Suspense hydration mismatch after streaming render? Fix the date, async data, and use cache patterns causing client/server divergence.
Soft 404 Errors on Next.js Dynamic Routes: Real Fix
Google Search Console flagging Next.js dynamic routes as soft 404 in 2026? Fix 200 status fallbacks, missing notFound() throws, and thin streaming renders.
Next.js Parallel Routes 404 After Production Build Fix
Next.js 16 parallel routes returning 404 only after a production build? Fix default.tsx slots, route group conflicts, and async params with working code.
next/image priority Not Preloading Hero: LCP Fix
next/image with priority not generating a preload link and tanking your hero LCP score? Fix the missing preload hint and PPR boundary issue with code.
Next.js 16 cookies() Async Error in Route Handlers Fix
Next.js 16 throwing 'cookies() should be awaited' inside your App Router route handlers? Fix the async API and silent Set-Cookie failure with working code.
Vercel Speed Insights No Data After Next.js 16: Fix
Vercel Speed Insights showing no data after Next.js 16 upgrade? Fix the missing beacon, CSP block, and the SpeedInsights component placement with code.
Next.js 16 cookies().set() Lost After redirect(): Fix
Next.js 16 cookies().set() not persisting after redirect() in a Server Action? Fix the async cookies API, Set-Cookie header drop, and the proxy.ts gotcha.
Next.js Parallel Routes Default Slot 404: Real Fix
Next.js parallel routes throwing a 404 on hard refresh in production? Fix the missing default.tsx slot, layout fallback, and App Router gotcha with code.
Next.js 16 Image priority Deprecated: Real LCP Fix
Next.js 16 deprecated the priority prop on next/image. Migrate to preload, fix the LCP regression, and stop accidentally preloading every product hero image.
Next.js 16 Build useState Null Error: Static Gen Fix
Next.js 16 build failing with Cannot read properties of null reading useState during static generation? Fix the React 19.2 dedupe bug with working code.
Next.js 16 generateStaticParams Not Generating Routes Fix
Next.js 16 generateStaticParams returning data but not building static pages? The four real causes and how to force prerender at build time, with code.
Next.js cookies() Async TypeError After Upgrade: Fix
Next.js cookies() throwing TypeError after upgrading to 15 or 16? Fix the async API change in Server Components, Server Actions, and Route Handlers fast.
LCP Preload Hint Picking the Wrong Image: Real Fix
LCP regressed because the browser preloads the wrong image with next/image priority? Fix fetchpriority, srcset, and preload candidate selection with code.
next/font CLS Layout Shift in Next.js 16: Real Fix
next/font causing CLS layout shift in Next.js 16 after the upgrade? Fix font fallback metrics, size-adjust, and display swap settings with working code.
Next.js 16 proxy.ts Not Running in Production: Fix
Next.js 16 proxy.ts not running in production after migrating from middleware.ts? Fix matcher format, file location, and the runtime config with code.
Next.js Turbopack Linked Package Reload Fix
Next.js Turbopack linked package reload issues usually come from symlink watching and package transpilation. Here is the 16.2.4 fix path I use today safely.
Next.js App Router Render-Blocking CSS Fix
Next.js App Router render-blocking CSS can crush LCP when globals and library styles leak into initial chunks. Here is the fix I use on production builds.
Next.js ViewTransition Not Working in App Router: Fix
Next.js ViewTransition not animating in the App Router? The real fix for flashes, full reloads, broken shared elements, and transitions that never start.
Next.js 16 Proxy.ts Middleware Migration Errors: Fix
Next.js 16 replaces middleware.ts with proxy.ts and breaks redirects, rewrites, and matchers on upgrade. Here is the migration path that actually works.
Next.js Contact Form with Resend and Server Actions
A practical production setup for a Next.js contact form using React Hook Form, Zod, Server Actions, and Resend, including spam protection and error handling.
Next.js 16 Async Params TypeError in Dynamic Routes
Next.js 16 throwing 'params is a Promise' TypeError in dynamic routes after upgrade? Here is the root cause and migration fix with working code.
CLS Spike from next/font Local Fallback in Next.js 16
CLS regression spiking from next/font fallback after upgrading to Next.js 16? Here is the root cause and adjustFontFallback fix with working code.
Next.js 16 Server Actions Invalid Error in Production
Next.js 16 Server Actions throwing 'Invalid Server Action' in production after deploy? Here is the cause and fix with working code for Vercel builds.
Next.js use cache Returning Stale Data After Deploy
Next.js 16 use cache keeps serving old data after a production deploy. Here is why it happens and the exact revalidateTag fix with working code.
Next.js 16 revalidateTag Not Working: Production Fix
Next.js 16 revalidateTag not updating cached data in production? Fix missing cacheTag calls, tag mismatches, and cacheLife expire traps that freeze cache.
GA4 Page Views Not Tracking in Next.js App Router
GA4 page views not firing on client-side navigation in Next.js App Router? Track route changes with usePathname, useSearchParams, and a manual gtag event.
GA4 Double-Counting Page Views in Next.js App Router
GA4 is firing two page_view events per navigation in the Next.js App Router. Here is the root cause and the exact fix with a working listener.
Next.js vs WordPress: Which Should You Use in 2026?
A practical comparison of Next.js and WordPress for business websites. Covering performance, SEO, cost, and when each platform makes the most sense.
We take Next.js work on subcontract and direct.
Fixed price for a defined scope, on live sites, with a rollback path. Agencies and in-house teams welcome.
Hire me for Next.js