clownnvd/nextjs

Next.js 16 Skill Index

Quick Reference

| Category | File | Covers | |----------|------|--------| | Getting Started | installation | create-next-app, manual setup, CLI prompts, TypeScript, linting, aliases | | Getting Started | project-structure | folders, routing files, metadata files, colocation, organization strategies | | Getting Started | layouts-and-pages | pages, layouts, nesting, dynamic segments, searchParams, Link, PageProps/LayoutProps | | Getting Started | linking-and-navigating | Link, prefetching, streaming, loading.tsx, useLinkStatus, history API | | Getting Started | server-and-client-components | RSC vs Client, 'use client', composition, context, server-only, env safety | | Getting Started | cache-components | PPR, cacheComponents, use cache, cacheLife, Suspense, Activity, migration | | Getting Started | fetching-data | fetch, ORM, use() streaming, SWR, deduplication, React.cache, parallel/sequential | | Getting Started | updating-data | Server Actions, 'use server', forms, revalidate, redirect, refresh, cookies | | Getting Started | caching-and-revalidating | fetch cache, cacheTag, revalidateTag, updateTag, revalidatePath, decision guide | | Getting Started | error-handling | expected vs uncaught, useActionState, notFound, error.tsx, global-error, reset | | Getting Started | css | Tailwind setup, CSS Modules, global CSS, external, ordering, dev vs prod | | Getting Started | images | next/image, local/remote, fill, blur placeholder, remotePatterns, props | | Getting Started | fonts | next/font, Google self-host, local fonts, variable fonts, Tailwind CSS 4 | | Getting Started | metadata-and-og-images | static/dynamic metadata, generateMetadata, file conventions, ImageResponse, OG images | | Getting Started | route-handlers | route.ts, HTTP methods, caching, cache components, params, NextRequest/NextResponse | | Getting Started | proxy | proxy.ts (replaces middleware.ts), matcher, redirects, rewrites, headers, auth checks | | Getting Started | deploying | Node.js server, Docker, static export, adapters (Vercel, Cloudflare, etc.) | | Guide | analytics | useReportWebVitals, Web Vitals metrics, Google Analytics | | Guide | authentication | sign-up, sessions (JWT/DB), DAL pattern, auth checks | | Guide | backend-for-frontend | Route Handlers as API, webhooks, proxy, security | | Guide | caching | 4 mechanisms, static/dynamic, Data Cache, Router Cache | | Guide | ci-build-caching | .next/cache for 11 CI providers | | Guide | content-security-policy | nonce-based CSP, proxy setup, SRI | | Guide | css-in-js | styled-jsx, styled-components, registry pattern | | Guide | custom-server | next() setup, caveats, static optimization | | Guide | data-security | DAL, server-only, taintUniqueValue, Server Actions | | Guide | debugging | VS Code launch.json, browser DevTools, WebStorm | | Guide | draft-mode | route handler setup, CMS integration, isEnabled | | Guide | environment-variables | .env load order, NEXT_PUBLIC_, runtime vs build-time | | Guide | forms | Server Actions, Zod, useActionState, useOptimistic | | Guide | incremental-static-regeneration | time-based, on-demand, revalidatePath/Tag | | Guide | instrumentation | instrumentation.ts, register(), onRequestError | | Guide | internationalization | locale routing, dictionaries, server/client i18n | | Guide | json-ld | structured data, schema.org, script injection | | Guide | lazy-loading | next/dynamic, React.lazy, named exports, SSR skip | | Guide | local-development | HTTPS, Turbopack, Docker, memory, absolute imports | | Guide | mcp | Next.js MCP server, IDE integration, tools | | Guide | mdx | @next/mdx, remote MDX, custom components, plugins | | Guide | memory-usage | webpack workers, heap profiling, cache/sourcemaps | | Guide | migrating | Pages→App Router, CRA→Next, Vite→Next | | Guide | multi-tenant | subdomain, path-based, custom domains | | Guide | multi-zones | micro-frontends, assetPrefix, rewrites, cross-zone | | Guide | open-telemetry | @vercel/otel, NodeSDK, spans, custom attributes | | Guide | package-bundling | bundle analyzer, optimizePackageImports, externals | | Guide | prefetching | auto, manual, hover, extended, PPR integration | | Guide | production-checklist | optimizations, best practices, pre-launch checks | | Guide | progressive-web-apps | manifest, push notifications, service worker | | Guide | redirecting | redirect(), permanentRedirect(), config, proxy | | Guide | sass | .scss/.sass, sassOptions, sass-embedded, variables | | Guide | scripts | next/script, loading strategies, event handlers | | Guide | self-hosting | reverse proxy, image optimization, caching, CDN | | Guide | single-page-applications | SPA patterns, use(), SWR, shallow routing, static export | | Guide | static-exports | output: 'export', supported/unsupported features | | Guide | tailwind-v3-css | Tailwind v3 setup, config, directives | | Guide | testing | Vitest, Jest, Playwright, Cypress, test types | | Guide | cypress | E2E + component testing, cypress.config.ts, CI scripts | | Guide | jest | next/jest, jest-dom, snapshot testing, module aliases | | Guide | playwright | E2E, multi-browser, webServer, playwright.config.ts | | Guide | vitest | unit testing, @vitejs/plugin-react, vite-tsconfig-paths | | Guide | third-party-libraries | @next/third-parties, GTM, GA, Maps, YouTube | | Guide | upgrading | v14→v15→v16, codemods, upgrade workflow | | Guide | videos | video/iframe embed, Suspense, Vercel Blob, Mux |

Next.js 16 Breaking Changes (from 15)

| Change | Next.js 15 | Next.js 16 | |--------|-----------|-----------| | Caching | unstable_cache | "use cache" directive | | Cache profiles | N/A | cacheLife('hours') presets | | Cache tags | revalidateTag(tag) | cacheTag(tag) + updateTag(tag) | | Revalidation | revalidateTag(tag) | revalidateTag(tag, cacheLifeProfile) | | Fresh read | N/A | refresh() for uncached data | | Middleware | middleware.ts (Edge) | proxy.ts (Node.js runtime) | | PPR / dynamicIO | experimental.ppr, experimental.dynamicIO | cacheComponents: true | | React Compiler | experimental.reactCompiler | top-level reactCompiler: true | | Turbopack | opt-in (--turbopack) | stable, default for dev + build | | params/searchParams | sync objects | Promise -- must await | | Parallel routes | optional default | explicit default.tsx required | | Node.js | 18.17+ | 20+ required | | TypeScript | 4.5+ | 5+ required |

Migration Command

# Migrate middleware.ts to proxy.ts
npx @next/codemod@canary middleware-to-proxy

# Upgrade to Next.js 16
npx @next/codemod@latest upgrade

next.config.ts (Next.js 16)

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  cacheComponents: true,    // replaces experimental.ppr + dynamicIO
  reactCompiler: true,      // no longer experimental
  // turbopack is default, no config needed
}

export default nextConfig

Key Conventions

• Server Components are the default -- add 'use client' only when needed
• Use "use cache" at top of file or function for caching
• Use proxy.ts for request-level middleware (Node.js runtime)
• Await params and searchParams in all page/layout components
• Provide default.tsx for every parallel route slot
• Use Zod for all input validation in server actions and API routes
• Handle errors with try/catch, never silent returns