Next.js Draft Mode: Headless CMS Preview URLs and Live Editing in App Router (2026)
Enable Next.js Draft Mode in the App Router with draftMode(), signed __prerender_bypass cookies, and secure preview URLs for Sanity, Contentful, and DatoCMS.
All Articles
Migrate from Create React App to Next.js 16: A Practical Migration Playbook (2026)
A practical playbook for migrating Create React App to Next.js 16 in 2-5 days: route conversion, env vars, testing, and the gotchas that break builds.
Next.js Instrumentation Hook: OpenTelemetry Traces and Custom Spans (2026)
Wire OpenTelemetry into Next.js with instrumentation.ts, @vercel/otel, custom spans, and onRequestError. Real traces you can actually read in prod.
Type-Safe Environment Variables in Next.js with @t3-oss/env-nextjs and Zod (2026)
Stop shipping empty API keys. Validate Next.js env vars at build time with @t3-oss/env-nextjs and Zod 4: server/client split, Turbopack, and Docker deployments.
Next.js Content Security Policy: Nonces, Middleware, and Strict CSP (2026)
Learn how to add a strict Content Security Policy to your Next.js App Router app: per-request nonces in middleware, strict-dynamic, style-src pitfalls, and report-only rollout.
Next.js next/font Guide: Google Fonts, Local Fonts, and Zero Layout Shift (2026)
Self-host Google Fonts with next/font in Next.js 16 and hit zero layout shift. Covers local fonts, variable fonts, Tailwind integration, and the real gotchas.
Pages Router to App Router Migration: A Practical Next.js 16 Playbook
A route-by-route playbook for moving Pages Router to App Router in Next.js 16. Covers data fetching, layouts, API routes, auth, and effort estimates.
Next.js Bundle Analyzer: Reduce JavaScript Bundle Size in App Router (2026)
Find the heavy chunks in your Next.js app, then cut First Load JS by 30 to 60 percent. Install @next/bundle-analyzer, read the treemap, then use next/dynamic, Server Components, and optimizePackageImports to ship under 130 KB per route in Next.js 16.
Next.js Sentry Integration: Error Tracking, Source Maps, and Server Component Capture (2026)
Adding Sentry to a Next.js app takes one command. Here is how to capture Server Component errors, upload source maps with Turbopack, and bypass ad blockers in Next.js 16.
Next.js Monorepo with Turborepo and pnpm: Workspaces, Shared Packages, and CI Caching (2026)
Set up a Next.js 16 monorepo with Turborepo and pnpm. Workspace structure, shared UI packages, Vercel remote caching, and CI config that actually scales.
Next.js Edge Runtime vs Node Runtime: Performance, Limits, and When to Use Each (2026)
Next.js Edge Runtime vs Node.js Runtime in 2026: cold starts, the 4 MB limit, which database drivers work on the Edge, and the exact rules I use to pick one per route.
Next.js vs Astro 2026: Framework Comparison and Migration Playbook
A practical 2026 comparison of Next.js 16 and Astro 5: rendering models, performance, SEO, and a day-by-day migration playbook in both directions.