, }) ``` ### When to Use Dynamic Imports | Scenario | Approach | |----------|----------| | Heavy library (chart, editor, map) | `dynamic(() => import(...))` | | Browser-only library (uses `window`) | `dynamic(() => import(...), { ssr: false })` | | Modal or dialog content | `dynamic(() => import(...))` — loads on demand | | Above-the-fold content | Do NOT dynamic import — use regular import | ### Library-level Code Splitting ```tsx // Only import what you need import { format } from 'date-fns' // Tree-shakeable import { debounce } from 'lodash-es' // ES module version ``` Avoid importing entire libraries (`import _ from 'lodash'`). Use tree-shakeable ES module versions. ## Bundle Size Optimization ### Analyze the Bundle ```bash # Turbopack bundle analyzer (16.1+): interactive treemap on port 4000 next experimental-analyze # Write static analysis files instead next experimental-analyze --output ``` The analyzer filters by route, shows import chains, and provides separate client/server views. The older `@next/bundle-analyzer` (`ANALYZE=true`) is webpack-based and only works with `next build --webpack`. ### Common Bundle Bloaters | Issue | Fix | |-------|-----| | Large icon library | Import individual icons: `import { Search } from 'lucide-react'` | | Full lodash import | Use `lodash-es` or individual imports: `import debounce from 'lodash/debounce'` | | Moment.js | Replace with `date-fns` or `dayjs` | | CSS-in-JS runtime | Use Tailwind CSS or CSS Modules (zero runtime) | | Heavy markdown parser | Use `next-mdx-remote` or dynamic import | ### Keep Client Components Small Every component marked `'use client'` adds to the client JavaScript bundle. Strategies: - Extract only the interactive part into a Client Component - Keep data fetching and static rendering in Server Components - Use composition (pass Server Components as `children` to Client Components) ## React Compiler Automatic memoization without manual `useMemo`/`useCallback`. Stable since Next.js 16, but not enabled by default: ```ts // next.config.ts const nextConfig = { reactCompiler: true, // requires: npm install babel-plugin-react-compiler@latest } ``` The Babel-based compiler increases build time. Next.js 16.3 adds an experimental Rust-based compiler that runs inside Turbopack (34-46% faster dev-to-ready-page vs Babel): ```ts const nextConfig = { experimental: { turbopackRustReactCompiler: true }, // 16.3+ } ``` `create-next-app` offers a `--react-compiler` flag for new projects. ## Core Web Vitals ### LCP (Largest Contentful Paint) - Set `priority` on the hero/banner image - Preload critical fonts with `next/font` - Avoid layout shifts that delay the largest element - Use `` to stream non-critical content ### FID/INP (First Input Delay / Interaction to Next Paint) - Minimize client-side JavaScript - Use Server Components for non-interactive UI - Defer heavy computations with `requestIdleCallback` or Web Workers - Avoid blocking the main thread during hydration ### CLS (Cumulative Layout Shift) - Always specify image dimensions (`width`/`height` or `fill`) - Use `next/font` to prevent font-swap layout shifts - Reserve space for dynamic content with CSS `min-height` - Avoid injecting content above existing content ## Rendering Strategy Selection | Content Type | Strategy | Implementation | |-------------|----------|----------------| | Marketing pages | Static (SSG) | Default (no dynamic data) | | Blog posts | ISR | `export const revalidate = 3600` | | Product pages | ISR | `export const revalidate = 60` + `revalidateTag` on update | | User dashboard | Dynamic + Streaming | `` boundaries | | Search results | Dynamic | Access `searchParams` | | Authenticated pages | Dynamic | Access `cookies()` | ## Script Optimization ```tsx import Script from 'next/script' // Analytics — load after page is interactive