[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-openai-nextjs":3,"mdc-6k1646-key":39,"related-repo-openai-nextjs":9857,"related-org-openai-nextjs":9977},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":28,"repoUrl":29,"updatedAt":30,"license":31,"forks":32,"topics":33,"repo":34,"sourceUrl":37,"mdContent":38},"nextjs","build Next.js App Router applications","Next.js App Router expert guidance. Use when building, debugging, or architecting Next.js applications — routing, Server Components, Server Actions, Cache Components, layouts, middleware\u002Fproxy, data fetching, rendering strategies, and deployment on Vercel.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},"openai","OpenAI","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fopenai.png",[12,16,19,22,25],{"name":13,"slug":14,"type":15},"React","react","tag",{"name":17,"slug":18,"type":15},"Architecture","architecture",{"name":20,"slug":21,"type":15},"Next.js","next-js",{"name":23,"slug":24,"type":15},"Web Development","web-development",{"name":26,"slug":27,"type":15},"Frontend","frontend",3992,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fplugins","2026-04-06T18:40:27.660074",null,465,[],{"repoUrl":29,"stars":28,"forks":32,"topics":35,"description":36},[],"OpenAI Plugins","https:\u002F\u002Fgithub.com\u002Fopenai\u002Fplugins\u002Ftree\u002FHEAD\u002Fplugins\u002Fvercel\u002Fskills\u002Fnextjs","---\nname: nextjs\ndescription: Next.js App Router expert guidance. Use when building, debugging, or architecting Next.js applications — routing, Server Components, Server Actions, Cache Components, layouts, middleware\u002Fproxy, data fetching, rendering strategies, and deployment on Vercel.\nmetadata:\n  priority: 5\n  docs:\n    - \"https:\u002F\u002Fnextjs.org\u002Fdocs\"\n    - \"https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fapp\"\n  sitemap: \"https:\u002F\u002Fnextjs.org\u002Fsitemap.xml\"\n  pathPatterns:\n    - 'next.config.*'\n    - 'next-env.d.ts'\n    - 'app\u002F**'\n    - 'pages\u002F**'\n    - 'src\u002Fapp\u002F**'\n    - 'src\u002Fpages\u002F**'\n    - 'tailwind.config.*'\n    - 'postcss.config.*'\n    - 'tsconfig.json'\n    - 'tsconfig.*.json'\n    - 'apps\u002F*\u002Fapp\u002F**'\n    - 'apps\u002F*\u002Fpages\u002F**'\n    - 'apps\u002F*\u002Fsrc\u002Fapp\u002F**'\n    - 'apps\u002F*\u002Fsrc\u002Fpages\u002F**'\n    - 'apps\u002F*\u002Fnext.config.*'\n  bashPatterns:\n    - '\\bnext\\s+(dev|build|start|lint)\\b'\n    - '\\bnext\\s+experimental-analyze\\b'\n    - '\\bnpx\\s+create-next-app\\b'\n    - '\\bbunx\\s+create-next-app\\b'\n    - '\\bnpm\\s+run\\s+(dev|build|start)\\b'\n    - '\\bpnpm\\s+(dev|build)\\b'\n    - '\\bbun\\s+run\\s+(dev|build)\\b'\n  promptSignals:\n    phrases:\n      - \"next.js\"\n      - \"nextjs\"\n      - \"app router\"\n      - \"server component\"\n      - \"server action\"\n    allOf:\n      - [middleware, next]\n      - [layout, route]\n    anyOf:\n      - \"pages router\"\n      - \"getserversideprops\"\n      - \"use server\"\n    noneOf: []\n    minScore: 6\n---\n\n# Next.js (v16+) — App Router\n\nYou are an expert in Next.js 16 with the App Router. Always prefer the App Router over the legacy Pages Router unless the user's project explicitly uses Pages Router.\n\n## Critical Pattern: Lazy Initialization for Build-Safe Modules\n\nNever initialize database clients (Neon, Drizzle), Redis (Upstash), or service SDKs (Resend, Slack) at module scope.\n\nDuring `next build`, static generation can evaluate modules before runtime env vars are present, which causes startup crashes. Always initialize these clients lazily inside getter functions.\n\n```ts\nimport { drizzle } from 'drizzle-orm\u002Fneon-http'\nimport { neon } from '@neondatabase\u002Fserverless'\n\nlet _db: ReturnType\u003Ctypeof drizzle> | null = null\n\nexport function getDb() {\n  if (!_db) _db = drizzle(neon(process.env.DATABASE_URL!))\n  return _db\n}\n```\n\nApply the same lazy singleton pattern to Redis and SDK clients (`getRedis()`, `getResend()`, `getSlackClient()`) instead of creating them at import time.\n\n## Scaffolding\n\nWhen running `create-next-app`, **always** pass `--yes` to skip interactive prompts (React Compiler, import alias) that hang in non-interactive shells:\n\n```bash\nnpx create-next-app@latest my-app --yes --typescript --tailwind --eslint --app --src-dir --import-alias \"@\u002F*\" --turbopack --use-npm\n```\n\n**If the target directory contains ANY non-Next.js files** (`.git\u002F`, config files, etc.), you **MUST** add `--force`. Without it, `create-next-app` will fail with \"The directory contains files that could conflict\" and block scaffolding. **Check the directory first** — if it has anything in it, use `--force`:\n\n```bash\nnpx create-next-app@latest . --yes --force --typescript --tailwind --eslint --app --src-dir --import-alias \"@\u002F*\" --turbopack --use-npm\n```\n\n### Geist Font Fix (Tailwind v4 + shadcn)\n\n`shadcn init` rewrites `globals.css` with `--font-sans: var(--font-sans)` in `@theme inline` — a circular reference that falls back to Times\u002Fserif. Even `var(--font-geist-sans)` doesn't work because Tailwind v4's `@theme inline` resolves at **CSS parse time**, not runtime.\n\n**Two fixes required after `create-next-app` + `shadcn init`:**\n\n1. **Use literal font names in `globals.css`** (not CSS variable references):\n\n```css\n@theme inline {\n  \u002F* CORRECT — literal names that @theme can resolve at parse time *\u002F\n  --font-sans: \"Geist\", \"Geist Fallback\", ui-sans-serif, system-ui, sans-serif;\n  --font-mono: \"Geist Mono\", \"Geist Mono Fallback\", ui-monospace, monospace;\n}\n```\n\n2. **Move font variable classNames from `\u003Cbody>` to `\u003Chtml>`** in layout.tsx:\n\n```tsx\n\u002F\u002F app\u002Flayout.tsx — CORRECT\n\u003Chtml lang=\"en\" className={`${geistSans.variable} ${geistMono.variable}`}>\n  \u003Cbody className=\"antialiased\">\n```\n\n```tsx\n\u002F\u002F app\u002Flayout.tsx — WRONG (default scaffold output)\n\u003Chtml lang=\"en\">\n  \u003Cbody className={`${geistSans.variable} ${geistMono.variable} antialiased`}>\n```\n\n**Always apply both fixes** after running `create-next-app` + `shadcn init` with Tailwind v4.\n\n## UI Defaults for App Router Pages\n\nWhen building pages, layouts, and route-level UI in this stack, default to shadcn\u002Fui + Geist instead of raw Tailwind scaffolding.\n- Start from theme tokens: `bg-background text-foreground`, not ad-hoc palette classes.\n- Use Geist Sans for interface text and Geist Mono for code, metrics, IDs, timestamps.\n- Reach for shadcn primitives first: Button, Input, Textarea, Card, Tabs, Table, Dialog, AlertDialog, Sheet, DropdownMenu, Badge, Separator, Skeleton.\n- For product, admin, and AI surfaces, default to dark mode with restrained accents and designed empty\u002Floading\u002Ferror states.\n- Common route compositions: Settings route (Tabs+Card+form), Dashboard route (filter bar+Card+Table), Mobile nav (Sheet+Button).\n\n## Key Architecture\n\nNext.js 16 uses React 19.2 features and the App Router (file-system routing under `app\u002F`). Ensure React **19.2.4+** for security patches (see CVE section below).\n\n### File Conventions\n- `layout.tsx` — Persistent wrapper, preserves state across navigations\n- `page.tsx` — Unique UI for a route, makes route publicly accessible\n- `loading.tsx` — Suspense fallback shown while segment loads\n- `error.tsx` — Error boundary for a segment\n- `not-found.tsx` — 404 UI for a segment\n- `route.ts` — API endpoint (Route Handler)\n- `template.tsx` — Like layout but re-mounts on navigation\n- `default.tsx` — Fallback for parallel routes\n\n### Routing\n- Dynamic segments: `[id]`, catch-all: `[...slug]`, optional catch-all: `[[...slug]]`\n- Route groups: `(group)` — organize without affecting URL\n- Parallel routes: `@slot` — render multiple pages in same layout\n- Intercepting routes: `(.)`, `(..)`, `(...)`, `(..)(..)` — modal patterns\n\n## Server Components (Default)\n\nAll components in the App Router are Server Components by default. They:\n- Run on the server only, ship zero JavaScript to the client\n- Can directly `await` data (fetch, DB queries, file system)\n- Cannot use `useState`, `useEffect`, or browser APIs\n- Cannot use event handlers (`onClick`, `onChange`)\n\n```tsx\n\u002F\u002F app\u002Fusers\u002Fpage.tsx — Server Component (default)\nexport default async function UsersPage() {\n  const users = await db.query('SELECT * FROM users')\n  return \u003CUserList users={users} \u002F>\n}\n```\n\n## Client Components\n\nAdd `'use client'` at the top of the file when you need interactivity or browser APIs.\n\n```tsx\n'use client'\nimport { useState } from 'react'\n\nexport function Counter() {\n  const [count, setCount] = useState(0)\n  return \u003Cbutton onClick={() => setCount(count + 1)}>{count}\u003C\u002Fbutton>\n}\n```\n\n**Rule**: Push `'use client'` as far down the component tree as possible. Keep data fetching in Server Components and pass data down as props.\n\n## Server Actions \u002F Server Functions\n\nAsync functions marked with `'use server'` that run on the server. Use for mutations.\n\n```tsx\n\u002F\u002F app\u002Factions.ts\n'use server'\n\nexport async function createUser(formData: FormData) {\n  const name = formData.get('name') as string\n  await db.insert('users', { name })\n  revalidatePath('\u002Fusers')\n}\n```\n\nUse Server Actions for:\n- Form submissions and data mutations\n- In-app mutations with `revalidatePath` \u002F `revalidateTag`\n\nUse Route Handlers (`route.ts`) for:\n- Public APIs consumed by external clients\n- Webhooks\n- Large file uploads\n- Streaming responses\n\n## Cache Components (Next.js 16)\n\nThe `'use cache'` directive enables component and function-level caching.\n\n```tsx\n'use cache'\n\nexport async function CachedUserList() {\n  cacheLife('hours') \u002F\u002F Configure cache duration\n  cacheTag('users')  \u002F\u002F Tag for on-demand invalidation\n  const users = await db.query('SELECT * FROM users')\n  return \u003CUserList users={users} \u002F>\n}\n```\n\n### Cache Scope Variants\n\n`'use cache'` supports scope modifiers that control where cached data is stored:\n\n```tsx\n\u002F\u002F Default — cached in the deployment's local data cache\n'use cache'\n\n\u002F\u002F Remote cache — shared across all deployments and regions (Vercel only)\n'use cache: remote'\n\n\u002F\u002F Private cache — per-request cache, never shared between users\n'use cache: private'\n```\n\n| Variant | Shared across deployments? | Shared across users? | Use case |\n|---------|---------------------------|---------------------|----------|\n| `'use cache'` | No (per-deployment) | Yes | Default, most use cases |\n| `'use cache: remote'` | Yes | Yes | Expensive computations shared globally |\n| `'use cache: private'` | No | No | User-specific cached data (e.g., profile) |\n\n### Cache Handler Configuration\n\nNext.js 16 uses `cacheHandlers` (plural) to configure separate handlers for different cache types:\n\n```ts\n\u002F\u002F next.config.ts\nconst nextConfig = {\n  cacheHandlers: {\n    default: require.resolve('.\u002Fcache-handler-default.mjs'),\n    remote: require.resolve('.\u002Fcache-handler-remote.mjs'),\n    fetch: require.resolve('.\u002Fcache-handler-fetch.mjs'),\n  },\n}\n```\n\n**Important**: `cacheHandlers` (plural, Next.js 16+) replaces `cacheHandler` (singular, Next.js 15). The singular form configured one handler for all cache types. The plural form allows per-type handlers (`default`, `remote`, `fetch`). Using the old singular `cacheHandler` in Next.js 16 triggers a deprecation warning.\n\n### Cache Invalidation\n\nInvalidate with `updateTag('users')` from a Server Action (immediate expiration, Server Actions only) or `revalidateTag('users', 'max')` for stale-while-revalidate from Server Actions or Route Handlers.\n\n**Important**: The single-argument `revalidateTag(tag)` is deprecated in Next.js 16. Always pass a `cacheLife` profile as the second argument (e.g., `'max'`, `'hours'`, `'days'`).\n\n| Function | Context | Behavior |\n|----------|---------|----------|\n| `updateTag(tag)` | Server Actions only | Immediate expiration, read-your-own-writes |\n| `revalidateTag(tag, 'max')` | Server Actions + Route Handlers | Stale-while-revalidate (recommended) |\n| `revalidateTag(tag, { expire: 0 })` | Route Handlers (webhooks) | Immediate expiration from external triggers |\n\n## Proxy (formerly Middleware)\n\nIn Next.js 16, `middleware.ts` is renamed to `proxy.ts`. It runs **exclusively on the Node.js runtime** — the Edge runtime is not supported in proxy and cannot be configured.\n\n**File location**: Place `proxy.ts` at the same level as your `app\u002F` directory:\n- Standard project: `proxy.ts` at project root\n- With `--src-dir` (or `srcDir: true`): `src\u002Fproxy.ts` (inside `src\u002F`, alongside `app\u002F`)\n\nIf you place `proxy.ts` in the wrong location, Next.js will silently ignore it and no request interception will occur.\n\n**Constraints**:\n- Proxy can only **rewrite**, **redirect**, or **modify headers** — it cannot return full response bodies. Use Route Handlers for that.\n- Config flags are renamed: `skipMiddlewareUrlNormalize` → `skipProxyUrlNormalize`.\n- Keep it light: use for high-level traffic control (e.g., redirecting users without a session cookie). Detailed auth should live in Server Components or Server Actions.\n- **OpenNext note**: OpenNext doesn't support `proxy.ts` yet — keep using `middleware.ts` if self-hosting with OpenNext.\n\n```ts\n\u002F\u002F proxy.ts (or src\u002Fproxy.ts if using src directory)\nimport type { NextRequest } from 'next\u002Fserver'\n\nexport function proxy(request: NextRequest) {\n  \u002F\u002F Rewrite, redirect, set headers, etc.\n}\n\nexport const config = { matcher: ['\u002Fdashboard\u002F:path*'] }\n```\n\n## Upgrading\n\nUse the built-in upgrade command (available since 16.1.0):\n\n```bash\npnpm next upgrade        # or npm\u002Fyarn\u002Fbun equivalent\n```\n\nFor versions before 16.1.0: `npx @next\u002Fcodemod@canary upgrade latest`\n\nIf your AI coding assistant supports MCP, the **Next.js DevTools MCP** can automate upgrade and migration tasks.\n\n## What's New in Next.js 16.1\n\nNext.js 16.1 (December 2025, latest stable patch: 16.1.6) builds on 16.0 with developer experience improvements:\n\n1. **Turbopack File System Caching (Stable)** — Compiler artifacts are now cached on disk between `next dev` restarts, delivering up to 14× faster startup on large projects. Enabled by default, no config needed. File system caching for `next build` is planned next.\n2. **Bundle Analyzer (Experimental)** — New built-in bundle analyzer works with Turbopack. Offers route-specific filtering, import tracing, and RSC boundary analysis to identify bloated dependencies in both server and client bundles. Enable with `experimental.bundleAnalyzer: true` in `next.config`.\n3. **`next dev --inspect`** — Debug your dev server without global `NODE_OPTIONS=--inspect`. Applies the inspector only to the relevant process.\n4. **`next upgrade` command** — New CLI command to simplify version upgrades: `npx @next\u002Fcodemod@canary upgrade latest`.\n5. **Transitive External Dependencies** — Turbopack correctly resolves and externalizes transitive deps in `serverExternalPackages` without extra config.\n6. **20 MB smaller installs** — Streamlined Turbopack caching layer reduces `node_modules` footprint.\n\n## React 19.2 Features\n\nNext.js 16+ uses React 19.2. These features are available in App Router applications:\n\n### `useEffectEvent` Hook\n\nCreates a stable function that always accesses the latest props and state without triggering effect re-runs. Use when your effect needs to read a value but shouldn't re-run when that value changes:\n\n```tsx\n'use client'\nimport { useEffect, useEffectEvent } from 'react'\n\nfunction ChatRoom({ roomId, theme }: { roomId: string; theme: string }) {\n  const onConnected = useEffectEvent(() => {\n    showNotification(`Connected to ${roomId}`, theme) \u002F\u002F reads latest theme\n  })\n\n  useEffect(() => {\n    const connection = createConnection(roomId)\n    connection.on('connected', onConnected)\n    connection.connect()\n    return () => connection.disconnect()\n  }, [roomId]) \u002F\u002F theme is NOT a dependency — onConnected reads it via useEffectEvent\n}\n```\n\nCommon use cases: logging with current state, notifications using current theme, callbacks that need fresh values but aren't the trigger for the effect.\n\n### `\u003CActivity>` Component\n\nPreserves component state when hiding and showing UI, without unmounting. Solves the classic tradeoff between unmounting (loses state) and CSS `display:none` (effects keep running):\n\n```tsx\n'use client'\nimport { Activity, useState } from 'react'\n\nfunction TabContainer() {\n  const [activeTab, setActiveTab] = useState('inbox')\n\n  return (\n    \u003Cdiv>\n      \u003Cnav>\n        \u003Cbutton onClick={() => setActiveTab('inbox')}>Inbox\u003C\u002Fbutton>\n        \u003Cbutton onClick={() => setActiveTab('drafts')}>Drafts\u003C\u002Fbutton>\n      \u003C\u002Fnav>\n      \u003CActivity mode={activeTab === 'inbox' ? 'visible' : 'hidden'}>\n        \u003CInboxPanel \u002F>\n      \u003C\u002FActivity>\n      \u003CActivity mode={activeTab === 'drafts' ? 'visible' : 'hidden'}>\n        \u003CDraftsPanel \u002F>\n      \u003C\u002FActivity>\n    \u003C\u002Fdiv>\n  )\n}\n```\n\nUse for: tabbed interfaces, modals, sidebars, background tasks — anywhere you need to maintain component state without keeping everything actively rendered. When `mode=\"hidden\"`, effects are suspended (not running in the background).\n\n### View Transitions API\n\nReact 19.2 supports the browser View Transitions API for animating elements across navigations. Next.js 16 has built-in support — elements can animate between route changes without manual transition logic.\n\nKey change: `useId` now generates IDs with `_r_` prefix (instead of `:r:`) to be valid for `view-transition-name` and XML 1.0 names.\n\n## Layout Deduplication During Prefetching\n\nNext.js 16 deduplicates shared layouts during prefetching. When multiple `\u003CLink>` components point to routes with a shared layout, the layout is downloaded **once** instead of separately for each link.\n\n**Impact**: A page with 50 product links that share a layout downloads ~198KB instead of ~2.4MB — a 92% reduction in prefetch network transfer.\n\nCombined with **incremental prefetching**, Next.js only fetches route segments not already in cache, cancels prefetch requests when links leave the viewport, re-prefetches on hover or viewport re-entry, and re-prefetches when data is invalidated.\n\n## Bundle Analyzer (`next experimental-analyze`)\n\nBuilt-in bundle analyzer that works with Turbopack (available since Next.js 16.1):\n\n```bash\n# Analyze and serve results in browser\nnext experimental-analyze --serve\n\n# Analyze with custom port\nnext experimental-analyze --serve --port 4001\n\n# Write analysis to .next\u002Fdiagnostics\u002Fanalyze (no server)\nnext experimental-analyze\n```\n\nFeatures:\n- Route-specific filtering between client and server bundles\n- Full import chain tracing — see exactly why a module is included\n- Traces imports across RSC boundaries and dynamic imports\n- No application build required — analyzes module graph directly\n\nSave output for comparison: `cp -r .next\u002Fdiagnostics\u002Fanalyze .\u002Fanalyze-before-refactor`\n\n**Legacy**: For projects not using Turbopack, use `@next\u002Fbundle-analyzer` with `ANALYZE=true npm run build`.\n\n## Next.js 16.2 (Canary)\n\nNext.js 16.2 is currently in canary (latest: 16.2.0-canary.84, March 2026). Key areas in development:\n\n1. **Turbopack File System Caching for `next build`** — Extending the stable `next dev` FS cache to production builds for faster CI.\n2. **Proxy refinements** — Continued iteration on `proxy.ts` (the Node.js-runtime replacement for `middleware.ts` introduced in 16.0). The proxy API is stabilizing with improved request context and streaming support.\n3. **React Compiler optimizations** — Further automatic memoization improvements building on the stable React Compiler in 16.0.\n\n> **Note**: Canary releases are not recommended for production. Track progress at the [Next.js Changelog](https:\u002F\u002Fnext-changelog.vercel.app\u002F) or [GitHub Releases](https:\u002F\u002Fgithub.com\u002Fvercel\u002Fnext.js\u002Freleases).\n\n## DevTools MCP\n\nNext.js 16 includes **Next.js DevTools MCP**, a Model Context Protocol integration for AI-assisted debugging. It enables AI agents to diagnose issues, explain behavior, and suggest fixes within your development workflow. If your AI coding assistant supports MCP, DevTools MCP can also automate upgrade and migration tasks.\n\n## Breaking Changes in Next.js 16\n\n1. **Async Request APIs**: `cookies()`, `headers()`, `params`, `searchParams` are all async — must `await` them\n2. **Proxy replaces Middleware**: Rename `middleware.ts` → `proxy.ts`, runs on Node.js only (Edge not supported)\n3. **Turbopack is top-level config**: Move from `experimental.turbopack` to `turbopack` in `next.config`\n4. **View Transitions**: Built-in support for animating elements across navigations\n5. **Node.js 20.9+ required**: Dropped support for Node 18\n6. **TypeScript 5.1+ required**\n\n## React 19 Gotchas\n\n### `useRef()` Requires an Initial Value\n\nReact 19 strict mode enforces that `useRef()` must be called with an explicit initial value. Omitting it causes a type error or runtime warning:\n\n```tsx\n\u002F\u002F WRONG — React 19 strict mode complains\nconst ref = useRef()       \u002F\u002F ❌ missing initial value\nconst ref = useRef\u003CHTMLDivElement>()  \u002F\u002F ❌ still missing\n\n\u002F\u002F CORRECT\nconst ref = useRef\u003CHTMLDivElement>(null)  \u002F\u002F ✅\nconst ref = useRef(0)                     \u002F\u002F ✅\n```\n\nThis affects all `useRef` calls in client components. The fix is always to pass an explicit initial value (usually `null` for DOM refs).\n\n## Security: Critical CVEs\n\nMultiple vulnerabilities affect **all Next.js App Router applications** (13.4+, 14.x, 15.x, 16.x). Upgrade immediately.\n\n### CVE-2025-66478 \u002F CVE-2025-55182 — Remote Code Execution (CVSS 10.0, Critical)\n\nA deserialization vulnerability in the React Server Components (RSC) \"Flight\" protocol allows unauthenticated remote code execution via crafted HTTP requests. Near-100% exploit reliability against default configurations. **Actively exploited in the wild.** No workaround — upgrade is required. Rotate all application secrets after patching.\n\n- Affects: Next.js App Router applications (15.x, 16.x, 14.3.0-canary.77+)\n- Does NOT affect: Pages Router apps, Edge Runtime, Next.js 13.x, stable Next.js 14.x\n\n### CVE-2025-55184 — Denial of Service (CVSS 7.5, High)\n\nSpecially crafted HTTP requests cause the server process to hang indefinitely, consuming CPU and blocking legitimate users. No authentication required, low attack complexity.\n\n### CVE-2025-55183 — Source Code Exposure (CVSS 5.3, Medium)\n\nMalformed HTTP requests can trick Server Actions into returning their compiled source code instead of the expected response. Environment variables are not exposed, but any hardcoded secrets in Server Action code can leak.\n\n### CVE-2026-23864 — Denial of Service via Memory Exhaustion (CVSS 7.5, High)\n\nDisclosed January 26, 2026. The original DoS fix for CVE-2025-55184 was incomplete — additional vectors allow specially crafted HTTP requests to Server Function endpoints to crash the server via out-of-memory exceptions or excessive CPU usage. No authentication required.\n\n### CVE-2025-29927 — Middleware Authorization Bypass (CVSS 9.1, Critical)\n\nAn attacker can bypass middleware-based authorization by sending a crafted `x-middleware-subrequest` header, skipping all middleware logic. This affects any Next.js application that relies on `middleware.ts` (or `proxy.ts` in 16+) as the **sole** authorization gate. Patched in Next.js 14.2.25, 15.2.3, and all 16.x releases.\n\n**Mitigation**: Never rely on middleware\u002Fproxy as the only auth layer. Always re-validate authorization in Server Components, Server Actions, or Route Handlers. If you cannot patch immediately, block `x-middleware-subrequest` at your reverse proxy or WAF.\n\n### Patched Versions\n\n| Release Line | Minimum Safe Version (all CVEs) |\n|---|---|\n| 14.x | `next@14.2.35` |\n| 15.0.x | `next@15.0.5` |\n| 15.1.x | `next@15.1.9` |\n| 15.2.x | `next@15.2.6` |\n| 15.3.x | `next@15.3.6` |\n| 15.4.x | `next@15.4.8` |\n| 15.5.x | `next@15.5.7` |\n| 16.0.x | `next@16.0.11` |\n| 16.1.x | `next@16.1.5` |\n\nUpgrade React to at least **19.0.1** \u002F **19.1.2** \u002F **19.2.1** for the RCE fix (CVE-2025-55182), and **19.2.4+** to fully address all DoS vectors (CVE-2025-55184, CVE-2025-67779, CVE-2026-23864).\n\n```bash\n# Upgrade to latest patched versions\nnpm install next@latest react@latest react-dom@latest\n```\n\nVercel deployed WAF rules automatically for hosted projects, but **WAF is defense-in-depth, not a substitute for patching**.\n\n## Rendering Strategy Decision\n\n| Strategy | When to Use |\n|----------|-------------|\n| SSG (`generateStaticParams`) | Content rarely changes, maximum performance |\n| ISR (`revalidate: N`) | Content changes periodically, acceptable staleness |\n| SSR (Server Components) | Per-request fresh data, personalized content |\n| Cache Components (`'use cache'`) | Mix static shell with dynamic parts |\n| Client Components | Interactive UI, browser APIs needed |\n| Streaming (Suspense) | Show content progressively as data loads |\n\n### Rendering Strategy Guidance\n\n```\nChoosing a rendering strategy?\n├─ Content changes less than once per day?\n│  ├─ Same for all users? → SSG (`generateStaticParams`)\n│  └─ Personalized? → SSG shell + client fetch for personalized parts\n│\n├─ Content changes frequently but can be slightly stale?\n│  ├─ Revalidate on schedule? → ISR with `revalidate: N` seconds\n│  └─ Revalidate on demand? → `revalidateTag()` or `revalidatePath()`\n│\n├─ Content must be fresh on every request?\n│  ├─ Cacheable per-request? → Cache Components (`'use cache'` + `cacheLife`)\n│  ├─ Personalized per-user? → SSR with Streaming (Suspense boundaries)\n│  └─ Real-time? → Client-side with SWR\u002FReact Query + SSR for initial load\n│\n└─ Mostly static with one dynamic section?\n   └─ Partial Prerendering: static shell + Suspense for dynamic island\n```\n\n### Caching Strategy Matrix\n\n| Data Type | Strategy | Implementation |\n|-----------|----------|----------------|\n| Static assets (JS, CSS, images) | Immutable cache | Automatic with Vercel (hashed filenames) |\n| API responses (shared) | Cache Components | `'use cache'` + `cacheLife('hours')` |\n| API responses (per-user) | No cache or short TTL | `cacheLife({ revalidate: 60 })` with user-scoped key |\n| Configuration data | Edge Config | `@vercel\u002Fedge-config` (\u003C 5ms reads) |\n| Database queries | ISR + on-demand | `revalidateTag('products')` on write |\n| Full pages | SSG \u002F ISR | `generateStaticParams` + `revalidate` |\n| Search results | Client-side + SWR | `useSWR` with stale-while-revalidate |\n\n### Image Optimization Pattern\n\n```tsx\n\u002F\u002F BEFORE: Unoptimized, causes LCP & CLS issues\n\u003Cimg src=\"\u002Fhero.jpg\" \u002F>\n\n\u002F\u002F AFTER: Optimized with next\u002Fimage\nimport Image from 'next\u002Fimage';\n\u003CImage src=\"\u002Fhero.jpg\" width={1200} height={600} priority alt=\"Hero\" \u002F>\n```\n\n### Font Loading Pattern\n\n```tsx\n\u002F\u002F BEFORE: External font causes CLS\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter\" rel=\"stylesheet\" \u002F>\n\n\u002F\u002F AFTER: Zero-CLS with next\u002Ffont\nimport { Inter } from 'next\u002Ffont\u002Fgoogle';\nconst inter = Inter({ subsets: ['latin'] });\n```\n\n### Cache Components Pattern\n\n```tsx\n\u002F\u002F BEFORE: Re-fetches on every request\nasync function ProductList() {\n  const products = await db.query('SELECT * FROM products');\n  return \u003Cul>{products.map(p => \u003Cli key={p.id}>{p.name}\u003C\u002Fli>)}\u003C\u002Ful>;\n}\n\n\u002F\u002F AFTER: Cached with automatic revalidation\n'use cache';\nimport { cacheLife } from 'next\u002Fcache';\n\nasync function ProductList() {\n  cacheLife('hours');\n  const products = await db.query('SELECT * FROM products');\n  return \u003Cul>{products.map(p => \u003Cli key={p.id}>{p.name}\u003C\u002Fli>)}\u003C\u002Ful>;\n}\n```\n\n### Optimistic UI Pattern\n\n```tsx\n\u002F\u002F Instant feedback while Server Action processes\n'use client';\nimport { useOptimistic } from 'react';\n\nfunction LikeButton({ count, onLike }) {\n  const [optimisticCount, addOptimistic] = useOptimistic(count);\n  return (\n    \u003Cbutton onClick={() => { addOptimistic(count + 1); onLike(); }}>\n      {optimisticCount} likes\n    \u003C\u002Fbutton>\n  );\n}\n```\n\n## OG Image Generation\n\nNext.js supports file-based OG image generation via `opengraph-image.tsx` and `twitter-image.tsx` special files. These use `@vercel\u002Fog` (built on Satori) to render JSX to images at the Edge runtime.\n\n### File Convention\n\nPlace an `opengraph-image.tsx` (or `twitter-image.tsx`) in any route segment to auto-generate social images for that route:\n\n```tsx\n\u002F\u002F app\u002Fblog\u002F[slug]\u002Fopengraph-image.tsx\nimport { ImageResponse } from 'next\u002Fog'\n\nexport const runtime = 'edge'\nexport const alt = 'Blog post'\nexport const size = { width: 1200, height: 630 }\nexport const contentType = 'image\u002Fpng'\n\nexport default async function Image({\n  params,\n}: {\n  params: Promise\u003C{ slug: string }>\n}) {\n  const { slug } = await params\n  const post = await fetch(`https:\u002F\u002Fapi.example.com\u002Fposts\u002F${slug}`).then(r => r.json())\n\n  return new ImageResponse(\n    (\n      \u003Cdiv\n        style={{\n          fontSize: 48,\n          background: 'linear-gradient(to bottom, #000, #111)',\n          color: 'white',\n          width: '100%',\n          height: '100%',\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          padding: 48,\n        }}\n      >\n        {post.title}\n      \u003C\u002Fdiv>\n    ),\n    { ...size }\n  )\n}\n```\n\n### Key Points\n\n- **`ImageResponse`** — Import from `next\u002Fog` (re-exports `@vercel\u002Fog`). Renders JSX to PNG\u002FSVG images.\n- **Edge runtime** — OG image routes run on the Edge runtime by default. Export `runtime = 'edge'` explicitly for clarity.\n- **Exports** — `alt`, `size`, and `contentType` configure the generated `\u003Cmeta>` tags automatically.\n- **Static or dynamic** — Without params, the image is generated at build time. With dynamic segments, it generates per-request.\n- **Supported CSS** — Satori supports a Flexbox subset. Use inline `style` objects (no Tailwind). `display: 'flex'` is required on containers.\n- **Fonts** — Load custom fonts via `fetch` and pass to `ImageResponse` options: `{ fonts: [{ name, data, style, weight }] }`.\n- **Twitter fallback** — If no `twitter-image.tsx` exists, `opengraph-image.tsx` is used for Twitter cards too.\n\n### When to Use\n\n| Approach | When |\n|----------|------|\n| `opengraph-image.tsx` file | Dynamic per-route OG images with data fetching |\n| Static `opengraph-image.png` file | Same image for every page in a segment |\n| `generateMetadata` with `openGraph.images` | Point to an external image URL |\n\n## Deployment on Vercel\n\n- Zero-config: Vercel auto-detects Next.js and optimizes\n- `vercel dev` for local development with Vercel features\n- Server Components → Serverless\u002FEdge Functions automatically\n- Image optimization via `next\u002Fimage` (automatic on Vercel)\n- Font optimization via `next\u002Ffont` (automatic on Vercel)\n\n## Common Patterns\n\n### Data Fetching in Server Components\n```tsx\n\u002F\u002F Parallel data fetching\nconst [users, posts] = await Promise.all([\n  getUsers(),\n  getPosts(),\n])\n```\n\n### Streaming with Suspense\n```tsx\nimport { Suspense } from 'react'\n\nexport default function Page() {\n  return (\n    \u003Cdiv>\n      \u003Ch1>Dashboard\u003C\u002Fh1>\n      \u003CSuspense fallback={\u003CSkeleton \u002F>}>\n        \u003CSlowDataComponent \u002F>\n      \u003C\u002FSuspense>\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n### Error Handling\n```tsx\n\u002F\u002F app\u002Fdashboard\u002Ferror.tsx\n'use client'\n\nexport default function Error({ error, reset }: {\n  error: Error & { digest?: string }\n  reset: () => void\n}) {\n  return (\n    \u003Cdiv>\n      \u003Ch2>Something went wrong\u003C\u002Fh2>\n      \u003Cbutton onClick={() => reset()}>Try again\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n## Official Documentation\n\n- [Next.js Documentation](https:\u002F\u002Fnextjs.org\u002Fdocs)\n- [App Router](https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fapp\u002Fgetting-started)\n- [Routing](https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fapp\u002Fbuilding-your-application\u002Frouting)\n- [Data Fetching](https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fapp\u002Fbuilding-your-application\u002Fdata-fetching)\n- [Rendering](https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fapp\u002Fbuilding-your-application\u002Frendering)\n- [Caching](https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fapp\u002Fbuilding-your-application\u002Fcaching)\n- [Deploying](https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fapp\u002Fgetting-started\u002Fdeploying)\n- [Upgrading](https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fapp\u002Fguides\u002Fupgrading)\n- [GitHub: Next.js](https:\u002F\u002Fgithub.com\u002Fvercel\u002Fnext.js)\n",{"data":40,"body":90},{"name":4,"description":6,"metadata":41},{"priority":42,"docs":43,"sitemap":46,"pathPatterns":47,"bashPatterns":63,"promptSignals":71},5,[44,45],"https:\u002F\u002Fnextjs.org\u002Fdocs","https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fapp","https:\u002F\u002Fnextjs.org\u002Fsitemap.xml",[48,49,50,51,52,53,54,55,56,57,58,59,60,61,62],"next.config.*","next-env.d.ts","app\u002F**","pages\u002F**","src\u002Fapp\u002F**","src\u002Fpages\u002F**","tailwind.config.*","postcss.config.*","tsconfig.json","tsconfig.*.json","apps\u002F*\u002Fapp\u002F**","apps\u002F*\u002Fpages\u002F**","apps\u002F*\u002Fsrc\u002Fapp\u002F**","apps\u002F*\u002Fsrc\u002Fpages\u002F**","apps\u002F*\u002Fnext.config.*",[64,65,66,67,68,69,70],"\\bnext\\s+(dev|build|start|lint)\\b","\\bnext\\s+experimental-analyze\\b","\\bnpx\\s+create-next-app\\b","\\bbunx\\s+create-next-app\\b","\\bnpm\\s+run\\s+(dev|build|start)\\b","\\bpnpm\\s+(dev|build)\\b","\\bbun\\s+run\\s+(dev|build)\\b",{"phrases":72,"allOf":77,"anyOf":84,"noneOf":88,"minScore":89},[73,4,74,75,76],"next.js","app router","server component","server action",[78,81],[79,80],"middleware","next",[82,83],"layout","route",[85,86,87],"pages router","getserversideprops","use server",[],6,{"type":91,"children":92},"root",[93,102,108,115,120,134,451,479,485,513,600,652,728,735,792,813,833,961,988,1142,1265,1288,1294,1299,1336,1342,1362,1368,1459,1465,1555,1561,1566,1627,1777,1783,1796,2022,2039,2045,2058,2296,2301,2328,2340,2363,2369,2382,2597,2603,2613,2705,2820,2826,2839,3056,3110,3116,3137,3184,3277,3283,3311,3335,3393,3405,3414,3491,3678,3684,3689,3719,3730,3742,3748,3753,3885,3891,3896,3908,3913,4372,4377,4389,4402,5020,5033,5039,5044,5081,5087,5107,5117,5129,5142,5147,5247,5252,5275,5286,5310,5316,5321,5380,5413,5419,5430,5436,5564,5570,5582,5594,5782,5802,5808,5820,5826,5838,5851,5857,5862,5868,5873,5879,5884,5890,5923,5940,5946,6121,6151,6194,6205,6211,6330,6336,6346,6352,6548,6554,6756,6762,6964,6970,7508,7514,7825,7831,7860,7866,7884,8765,8771,8951,8956,9040,9046,9094,9100,9106,9215,9221,9449,9455,9756,9762,9852],{"type":94,"tag":95,"props":96,"children":98},"element","h1",{"id":97},"nextjs-v16-app-router",[99],{"type":100,"value":101},"text","Next.js (v16+) — App Router",{"type":94,"tag":103,"props":104,"children":105},"p",{},[106],{"type":100,"value":107},"You are an expert in Next.js 16 with the App Router. Always prefer the App Router over the legacy Pages Router unless the user's project explicitly uses Pages Router.",{"type":94,"tag":109,"props":110,"children":112},"h2",{"id":111},"critical-pattern-lazy-initialization-for-build-safe-modules",[113],{"type":100,"value":114},"Critical Pattern: Lazy Initialization for Build-Safe Modules",{"type":94,"tag":103,"props":116,"children":117},{},[118],{"type":100,"value":119},"Never initialize database clients (Neon, Drizzle), Redis (Upstash), or service SDKs (Resend, Slack) at module scope.",{"type":94,"tag":103,"props":121,"children":122},{},[123,125,132],{"type":100,"value":124},"During ",{"type":94,"tag":126,"props":127,"children":129},"code",{"className":128},[],[130],{"type":100,"value":131},"next build",{"type":100,"value":133},", static generation can evaluate modules before runtime env vars are present, which causes startup crashes. Always initialize these clients lazily inside getter functions.",{"type":94,"tag":135,"props":136,"children":141},"pre",{"className":137,"code":138,"language":139,"meta":140,"style":140},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { drizzle } from 'drizzle-orm\u002Fneon-http'\nimport { neon } from '@neondatabase\u002Fserverless'\n\nlet _db: ReturnType\u003Ctypeof drizzle> | null = null\n\nexport function getDb() {\n  if (!_db) _db = drizzle(neon(process.env.DATABASE_URL!))\n  return _db\n}\n","ts","",[142],{"type":94,"tag":126,"props":143,"children":144},{"__ignoreMap":140},[145,195,233,243,303,310,339,428,442],{"type":94,"tag":146,"props":147,"children":150},"span",{"class":148,"line":149},"line",1,[151,157,163,169,174,179,184,190],{"type":94,"tag":146,"props":152,"children":154},{"style":153},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[155],{"type":100,"value":156},"import",{"type":94,"tag":146,"props":158,"children":160},{"style":159},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[161],{"type":100,"value":162}," {",{"type":94,"tag":146,"props":164,"children":166},{"style":165},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[167],{"type":100,"value":168}," drizzle",{"type":94,"tag":146,"props":170,"children":171},{"style":159},[172],{"type":100,"value":173}," }",{"type":94,"tag":146,"props":175,"children":176},{"style":153},[177],{"type":100,"value":178}," from",{"type":94,"tag":146,"props":180,"children":181},{"style":159},[182],{"type":100,"value":183}," '",{"type":94,"tag":146,"props":185,"children":187},{"style":186},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[188],{"type":100,"value":189},"drizzle-orm\u002Fneon-http",{"type":94,"tag":146,"props":191,"children":192},{"style":159},[193],{"type":100,"value":194},"'\n",{"type":94,"tag":146,"props":196,"children":198},{"class":148,"line":197},2,[199,203,207,212,216,220,224,229],{"type":94,"tag":146,"props":200,"children":201},{"style":153},[202],{"type":100,"value":156},{"type":94,"tag":146,"props":204,"children":205},{"style":159},[206],{"type":100,"value":162},{"type":94,"tag":146,"props":208,"children":209},{"style":165},[210],{"type":100,"value":211}," neon",{"type":94,"tag":146,"props":213,"children":214},{"style":159},[215],{"type":100,"value":173},{"type":94,"tag":146,"props":217,"children":218},{"style":153},[219],{"type":100,"value":178},{"type":94,"tag":146,"props":221,"children":222},{"style":159},[223],{"type":100,"value":183},{"type":94,"tag":146,"props":225,"children":226},{"style":186},[227],{"type":100,"value":228},"@neondatabase\u002Fserverless",{"type":94,"tag":146,"props":230,"children":231},{"style":159},[232],{"type":100,"value":194},{"type":94,"tag":146,"props":234,"children":236},{"class":148,"line":235},3,[237],{"type":94,"tag":146,"props":238,"children":240},{"emptyLinePlaceholder":239},true,[241],{"type":100,"value":242},"\n",{"type":94,"tag":146,"props":244,"children":246},{"class":148,"line":245},4,[247,253,258,263,269,274,278,283,288,293,298],{"type":94,"tag":146,"props":248,"children":250},{"style":249},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[251],{"type":100,"value":252},"let",{"type":94,"tag":146,"props":254,"children":255},{"style":165},[256],{"type":100,"value":257}," _db",{"type":94,"tag":146,"props":259,"children":260},{"style":159},[261],{"type":100,"value":262},":",{"type":94,"tag":146,"props":264,"children":266},{"style":265},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[267],{"type":100,"value":268}," ReturnType",{"type":94,"tag":146,"props":270,"children":271},{"style":159},[272],{"type":100,"value":273},"\u003Ctypeof",{"type":94,"tag":146,"props":275,"children":276},{"style":165},[277],{"type":100,"value":168},{"type":94,"tag":146,"props":279,"children":280},{"style":159},[281],{"type":100,"value":282},">",{"type":94,"tag":146,"props":284,"children":285},{"style":159},[286],{"type":100,"value":287}," |",{"type":94,"tag":146,"props":289,"children":290},{"style":265},[291],{"type":100,"value":292}," null",{"type":94,"tag":146,"props":294,"children":295},{"style":159},[296],{"type":100,"value":297}," =",{"type":94,"tag":146,"props":299,"children":300},{"style":159},[301],{"type":100,"value":302}," null\n",{"type":94,"tag":146,"props":304,"children":305},{"class":148,"line":42},[306],{"type":94,"tag":146,"props":307,"children":308},{"emptyLinePlaceholder":239},[309],{"type":100,"value":242},{"type":94,"tag":146,"props":311,"children":312},{"class":148,"line":89},[313,318,323,329,334],{"type":94,"tag":146,"props":314,"children":315},{"style":153},[316],{"type":100,"value":317},"export",{"type":94,"tag":146,"props":319,"children":320},{"style":249},[321],{"type":100,"value":322}," function",{"type":94,"tag":146,"props":324,"children":326},{"style":325},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[327],{"type":100,"value":328}," getDb",{"type":94,"tag":146,"props":330,"children":331},{"style":159},[332],{"type":100,"value":333},"()",{"type":94,"tag":146,"props":335,"children":336},{"style":159},[337],{"type":100,"value":338}," {\n",{"type":94,"tag":146,"props":340,"children":342},{"class":148,"line":341},7,[343,348,354,359,364,369,373,377,381,386,391,395,400,405,410,414,419,423],{"type":94,"tag":146,"props":344,"children":345},{"style":153},[346],{"type":100,"value":347},"  if",{"type":94,"tag":146,"props":349,"children":351},{"style":350},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[352],{"type":100,"value":353}," (",{"type":94,"tag":146,"props":355,"children":356},{"style":159},[357],{"type":100,"value":358},"!",{"type":94,"tag":146,"props":360,"children":361},{"style":165},[362],{"type":100,"value":363},"_db",{"type":94,"tag":146,"props":365,"children":366},{"style":350},[367],{"type":100,"value":368},") ",{"type":94,"tag":146,"props":370,"children":371},{"style":165},[372],{"type":100,"value":363},{"type":94,"tag":146,"props":374,"children":375},{"style":159},[376],{"type":100,"value":297},{"type":94,"tag":146,"props":378,"children":379},{"style":325},[380],{"type":100,"value":168},{"type":94,"tag":146,"props":382,"children":383},{"style":350},[384],{"type":100,"value":385},"(",{"type":94,"tag":146,"props":387,"children":388},{"style":325},[389],{"type":100,"value":390},"neon",{"type":94,"tag":146,"props":392,"children":393},{"style":350},[394],{"type":100,"value":385},{"type":94,"tag":146,"props":396,"children":397},{"style":165},[398],{"type":100,"value":399},"process",{"type":94,"tag":146,"props":401,"children":402},{"style":159},[403],{"type":100,"value":404},".",{"type":94,"tag":146,"props":406,"children":407},{"style":165},[408],{"type":100,"value":409},"env",{"type":94,"tag":146,"props":411,"children":412},{"style":159},[413],{"type":100,"value":404},{"type":94,"tag":146,"props":415,"children":416},{"style":165},[417],{"type":100,"value":418},"DATABASE_URL",{"type":94,"tag":146,"props":420,"children":421},{"style":159},[422],{"type":100,"value":358},{"type":94,"tag":146,"props":424,"children":425},{"style":350},[426],{"type":100,"value":427},"))\n",{"type":94,"tag":146,"props":429,"children":431},{"class":148,"line":430},8,[432,437],{"type":94,"tag":146,"props":433,"children":434},{"style":153},[435],{"type":100,"value":436},"  return",{"type":94,"tag":146,"props":438,"children":439},{"style":165},[440],{"type":100,"value":441}," _db\n",{"type":94,"tag":146,"props":443,"children":445},{"class":148,"line":444},9,[446],{"type":94,"tag":146,"props":447,"children":448},{"style":159},[449],{"type":100,"value":450},"}\n",{"type":94,"tag":103,"props":452,"children":453},{},[454,456,462,464,470,471,477],{"type":100,"value":455},"Apply the same lazy singleton pattern to Redis and SDK clients (",{"type":94,"tag":126,"props":457,"children":459},{"className":458},[],[460],{"type":100,"value":461},"getRedis()",{"type":100,"value":463},", ",{"type":94,"tag":126,"props":465,"children":467},{"className":466},[],[468],{"type":100,"value":469},"getResend()",{"type":100,"value":463},{"type":94,"tag":126,"props":472,"children":474},{"className":473},[],[475],{"type":100,"value":476},"getSlackClient()",{"type":100,"value":478},") instead of creating them at import time.",{"type":94,"tag":109,"props":480,"children":482},{"id":481},"scaffolding",[483],{"type":100,"value":484},"Scaffolding",{"type":94,"tag":103,"props":486,"children":487},{},[488,490,496,497,503,505,511],{"type":100,"value":489},"When running ",{"type":94,"tag":126,"props":491,"children":493},{"className":492},[],[494],{"type":100,"value":495},"create-next-app",{"type":100,"value":463},{"type":94,"tag":498,"props":499,"children":500},"strong",{},[501],{"type":100,"value":502},"always",{"type":100,"value":504}," pass ",{"type":94,"tag":126,"props":506,"children":508},{"className":507},[],[509],{"type":100,"value":510},"--yes",{"type":100,"value":512}," to skip interactive prompts (React Compiler, import alias) that hang in non-interactive shells:",{"type":94,"tag":135,"props":514,"children":518},{"className":515,"code":516,"language":517,"meta":140,"style":140},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx create-next-app@latest my-app --yes --typescript --tailwind --eslint --app --src-dir --import-alias \"@\u002F*\" --turbopack --use-npm\n","bash",[519],{"type":94,"tag":126,"props":520,"children":521},{"__ignoreMap":140},[522],{"type":94,"tag":146,"props":523,"children":524},{"class":148,"line":149},[525,530,535,540,545,550,555,560,565,570,575,580,585,590,595],{"type":94,"tag":146,"props":526,"children":527},{"style":265},[528],{"type":100,"value":529},"npx",{"type":94,"tag":146,"props":531,"children":532},{"style":186},[533],{"type":100,"value":534}," create-next-app@latest",{"type":94,"tag":146,"props":536,"children":537},{"style":186},[538],{"type":100,"value":539}," my-app",{"type":94,"tag":146,"props":541,"children":542},{"style":186},[543],{"type":100,"value":544}," --yes",{"type":94,"tag":146,"props":546,"children":547},{"style":186},[548],{"type":100,"value":549}," --typescript",{"type":94,"tag":146,"props":551,"children":552},{"style":186},[553],{"type":100,"value":554}," --tailwind",{"type":94,"tag":146,"props":556,"children":557},{"style":186},[558],{"type":100,"value":559}," --eslint",{"type":94,"tag":146,"props":561,"children":562},{"style":186},[563],{"type":100,"value":564}," --app",{"type":94,"tag":146,"props":566,"children":567},{"style":186},[568],{"type":100,"value":569}," --src-dir",{"type":94,"tag":146,"props":571,"children":572},{"style":186},[573],{"type":100,"value":574}," --import-alias",{"type":94,"tag":146,"props":576,"children":577},{"style":159},[578],{"type":100,"value":579}," \"",{"type":94,"tag":146,"props":581,"children":582},{"style":186},[583],{"type":100,"value":584},"@\u002F*",{"type":94,"tag":146,"props":586,"children":587},{"style":159},[588],{"type":100,"value":589},"\"",{"type":94,"tag":146,"props":591,"children":592},{"style":186},[593],{"type":100,"value":594}," --turbopack",{"type":94,"tag":146,"props":596,"children":597},{"style":186},[598],{"type":100,"value":599}," --use-npm\n",{"type":94,"tag":103,"props":601,"children":602},{},[603,608,609,615,617,622,624,630,632,637,639,644,646,651],{"type":94,"tag":498,"props":604,"children":605},{},[606],{"type":100,"value":607},"If the target directory contains ANY non-Next.js files",{"type":100,"value":353},{"type":94,"tag":126,"props":610,"children":612},{"className":611},[],[613],{"type":100,"value":614},".git\u002F",{"type":100,"value":616},", config files, etc.), you ",{"type":94,"tag":498,"props":618,"children":619},{},[620],{"type":100,"value":621},"MUST",{"type":100,"value":623}," add ",{"type":94,"tag":126,"props":625,"children":627},{"className":626},[],[628],{"type":100,"value":629},"--force",{"type":100,"value":631},". Without it, ",{"type":94,"tag":126,"props":633,"children":635},{"className":634},[],[636],{"type":100,"value":495},{"type":100,"value":638}," will fail with \"The directory contains files that could conflict\" and block scaffolding. ",{"type":94,"tag":498,"props":640,"children":641},{},[642],{"type":100,"value":643},"Check the directory first",{"type":100,"value":645}," — if it has anything in it, use ",{"type":94,"tag":126,"props":647,"children":649},{"className":648},[],[650],{"type":100,"value":629},{"type":100,"value":262},{"type":94,"tag":135,"props":653,"children":655},{"className":515,"code":654,"language":517,"meta":140,"style":140},"npx create-next-app@latest . --yes --force --typescript --tailwind --eslint --app --src-dir --import-alias \"@\u002F*\" --turbopack --use-npm\n",[656],{"type":94,"tag":126,"props":657,"children":658},{"__ignoreMap":140},[659],{"type":94,"tag":146,"props":660,"children":661},{"class":148,"line":149},[662,666,670,675,679,684,688,692,696,700,704,708,712,716,720,724],{"type":94,"tag":146,"props":663,"children":664},{"style":265},[665],{"type":100,"value":529},{"type":94,"tag":146,"props":667,"children":668},{"style":186},[669],{"type":100,"value":534},{"type":94,"tag":146,"props":671,"children":672},{"style":186},[673],{"type":100,"value":674}," .",{"type":94,"tag":146,"props":676,"children":677},{"style":186},[678],{"type":100,"value":544},{"type":94,"tag":146,"props":680,"children":681},{"style":186},[682],{"type":100,"value":683}," --force",{"type":94,"tag":146,"props":685,"children":686},{"style":186},[687],{"type":100,"value":549},{"type":94,"tag":146,"props":689,"children":690},{"style":186},[691],{"type":100,"value":554},{"type":94,"tag":146,"props":693,"children":694},{"style":186},[695],{"type":100,"value":559},{"type":94,"tag":146,"props":697,"children":698},{"style":186},[699],{"type":100,"value":564},{"type":94,"tag":146,"props":701,"children":702},{"style":186},[703],{"type":100,"value":569},{"type":94,"tag":146,"props":705,"children":706},{"style":186},[707],{"type":100,"value":574},{"type":94,"tag":146,"props":709,"children":710},{"style":159},[711],{"type":100,"value":579},{"type":94,"tag":146,"props":713,"children":714},{"style":186},[715],{"type":100,"value":584},{"type":94,"tag":146,"props":717,"children":718},{"style":159},[719],{"type":100,"value":589},{"type":94,"tag":146,"props":721,"children":722},{"style":186},[723],{"type":100,"value":594},{"type":94,"tag":146,"props":725,"children":726},{"style":186},[727],{"type":100,"value":599},{"type":94,"tag":729,"props":730,"children":732},"h3",{"id":731},"geist-font-fix-tailwind-v4-shadcn",[733],{"type":100,"value":734},"Geist Font Fix (Tailwind v4 + shadcn)",{"type":94,"tag":103,"props":736,"children":737},{},[738,744,746,752,754,760,762,768,770,776,778,783,785,790],{"type":94,"tag":126,"props":739,"children":741},{"className":740},[],[742],{"type":100,"value":743},"shadcn init",{"type":100,"value":745}," rewrites ",{"type":94,"tag":126,"props":747,"children":749},{"className":748},[],[750],{"type":100,"value":751},"globals.css",{"type":100,"value":753}," with ",{"type":94,"tag":126,"props":755,"children":757},{"className":756},[],[758],{"type":100,"value":759},"--font-sans: var(--font-sans)",{"type":100,"value":761}," in ",{"type":94,"tag":126,"props":763,"children":765},{"className":764},[],[766],{"type":100,"value":767},"@theme inline",{"type":100,"value":769}," — a circular reference that falls back to Times\u002Fserif. Even ",{"type":94,"tag":126,"props":771,"children":773},{"className":772},[],[774],{"type":100,"value":775},"var(--font-geist-sans)",{"type":100,"value":777}," doesn't work because Tailwind v4's ",{"type":94,"tag":126,"props":779,"children":781},{"className":780},[],[782],{"type":100,"value":767},{"type":100,"value":784}," resolves at ",{"type":94,"tag":498,"props":786,"children":787},{},[788],{"type":100,"value":789},"CSS parse time",{"type":100,"value":791},", not runtime.",{"type":94,"tag":103,"props":793,"children":794},{},[795],{"type":94,"tag":498,"props":796,"children":797},{},[798,800,805,807,812],{"type":100,"value":799},"Two fixes required after ",{"type":94,"tag":126,"props":801,"children":803},{"className":802},[],[804],{"type":100,"value":495},{"type":100,"value":806}," + ",{"type":94,"tag":126,"props":808,"children":810},{"className":809},[],[811],{"type":100,"value":743},{"type":100,"value":262},{"type":94,"tag":814,"props":815,"children":816},"ol",{},[817],{"type":94,"tag":818,"props":819,"children":820},"li",{},[821,831],{"type":94,"tag":498,"props":822,"children":823},{},[824,826],{"type":100,"value":825},"Use literal font names in ",{"type":94,"tag":126,"props":827,"children":829},{"className":828},[],[830],{"type":100,"value":751},{"type":100,"value":832}," (not CSS variable references):",{"type":94,"tag":135,"props":834,"children":838},{"className":835,"code":836,"language":837,"meta":140,"style":140},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","@theme inline {\n  \u002F* CORRECT — literal names that @theme can resolve at parse time *\u002F\n  --font-sans: \"Geist\", \"Geist Fallback\", ui-sans-serif, system-ui, sans-serif;\n  --font-mono: \"Geist Mono\", \"Geist Mono Fallback\", ui-monospace, monospace;\n}\n","css",[839],{"type":94,"tag":126,"props":840,"children":841},{"__ignoreMap":140},[842,860,869,919,954],{"type":94,"tag":146,"props":843,"children":844},{"class":148,"line":149},[845,850,855],{"type":94,"tag":146,"props":846,"children":847},{"style":153},[848],{"type":100,"value":849},"@theme",{"type":94,"tag":146,"props":851,"children":852},{"style":165},[853],{"type":100,"value":854}," inline ",{"type":94,"tag":146,"props":856,"children":857},{"style":159},[858],{"type":100,"value":859},"{\n",{"type":94,"tag":146,"props":861,"children":862},{"class":148,"line":197},[863],{"type":94,"tag":146,"props":864,"children":866},{"style":865},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[867],{"type":100,"value":868},"  \u002F* CORRECT — literal names that @theme can resolve at parse time *\u002F\n",{"type":94,"tag":146,"props":870,"children":871},{"class":148,"line":235},[872,877,882,887,891,896,900,905,909,914],{"type":94,"tag":146,"props":873,"children":874},{"style":165},[875],{"type":100,"value":876},"  --font-sans: \"Geist\"",{"type":94,"tag":146,"props":878,"children":879},{"style":159},[880],{"type":100,"value":881},",",{"type":94,"tag":146,"props":883,"children":884},{"style":165},[885],{"type":100,"value":886}," \"Geist Fallback\"",{"type":94,"tag":146,"props":888,"children":889},{"style":159},[890],{"type":100,"value":881},{"type":94,"tag":146,"props":892,"children":893},{"style":265},[894],{"type":100,"value":895}," ui-sans-serif",{"type":94,"tag":146,"props":897,"children":898},{"style":159},[899],{"type":100,"value":881},{"type":94,"tag":146,"props":901,"children":902},{"style":265},[903],{"type":100,"value":904}," system-ui",{"type":94,"tag":146,"props":906,"children":907},{"style":159},[908],{"type":100,"value":881},{"type":94,"tag":146,"props":910,"children":911},{"style":265},[912],{"type":100,"value":913}," sans-serif",{"type":94,"tag":146,"props":915,"children":916},{"style":165},[917],{"type":100,"value":918},";\n",{"type":94,"tag":146,"props":920,"children":921},{"class":148,"line":245},[922,927,931,936,940,945,949],{"type":94,"tag":146,"props":923,"children":924},{"style":165},[925],{"type":100,"value":926},"  --font-mono: \"Geist Mono\"",{"type":94,"tag":146,"props":928,"children":929},{"style":159},[930],{"type":100,"value":881},{"type":94,"tag":146,"props":932,"children":933},{"style":165},[934],{"type":100,"value":935}," \"Geist Mono Fallback\"",{"type":94,"tag":146,"props":937,"children":938},{"style":159},[939],{"type":100,"value":881},{"type":94,"tag":146,"props":941,"children":942},{"style":265},[943],{"type":100,"value":944}," ui-monospace",{"type":94,"tag":146,"props":946,"children":947},{"style":159},[948],{"type":100,"value":881},{"type":94,"tag":146,"props":950,"children":951},{"style":165},[952],{"type":100,"value":953}," monospace;\n",{"type":94,"tag":146,"props":955,"children":956},{"class":148,"line":42},[957],{"type":94,"tag":146,"props":958,"children":959},{"style":165},[960],{"type":100,"value":450},{"type":94,"tag":814,"props":962,"children":963},{"start":197},[964],{"type":94,"tag":818,"props":965,"children":966},{},[967,986],{"type":94,"tag":498,"props":968,"children":969},{},[970,972,978,980],{"type":100,"value":971},"Move font variable classNames from ",{"type":94,"tag":126,"props":973,"children":975},{"className":974},[],[976],{"type":100,"value":977},"\u003Cbody>",{"type":100,"value":979}," to ",{"type":94,"tag":126,"props":981,"children":983},{"className":982},[],[984],{"type":100,"value":985},"\u003Chtml>",{"type":100,"value":987}," in layout.tsx:",{"type":94,"tag":135,"props":989,"children":993},{"className":990,"code":991,"language":992,"meta":140,"style":140},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F app\u002Flayout.tsx — CORRECT\n\u003Chtml lang=\"en\" className={`${geistSans.variable} ${geistMono.variable}`}>\n  \u003Cbody className=\"antialiased\">\n","tsx",[994],{"type":94,"tag":126,"props":995,"children":996},{"__ignoreMap":140},[997,1005,1103],{"type":94,"tag":146,"props":998,"children":999},{"class":148,"line":149},[1000],{"type":94,"tag":146,"props":1001,"children":1002},{"style":865},[1003],{"type":100,"value":1004},"\u002F\u002F app\u002Flayout.tsx — CORRECT\n",{"type":94,"tag":146,"props":1006,"children":1007},{"class":148,"line":197},[1008,1013,1018,1023,1028,1032,1037,1041,1046,1051,1056,1061,1065,1070,1075,1080,1085,1089,1093,1098],{"type":94,"tag":146,"props":1009,"children":1010},{"style":159},[1011],{"type":100,"value":1012},"\u003C",{"type":94,"tag":146,"props":1014,"children":1015},{"style":350},[1016],{"type":100,"value":1017},"html",{"type":94,"tag":146,"props":1019,"children":1020},{"style":249},[1021],{"type":100,"value":1022}," lang",{"type":94,"tag":146,"props":1024,"children":1025},{"style":159},[1026],{"type":100,"value":1027},"=",{"type":94,"tag":146,"props":1029,"children":1030},{"style":159},[1031],{"type":100,"value":589},{"type":94,"tag":146,"props":1033,"children":1034},{"style":186},[1035],{"type":100,"value":1036},"en",{"type":94,"tag":146,"props":1038,"children":1039},{"style":159},[1040],{"type":100,"value":589},{"type":94,"tag":146,"props":1042,"children":1043},{"style":249},[1044],{"type":100,"value":1045}," className",{"type":94,"tag":146,"props":1047,"children":1048},{"style":159},[1049],{"type":100,"value":1050},"={",{"type":94,"tag":146,"props":1052,"children":1053},{"style":159},[1054],{"type":100,"value":1055},"`${",{"type":94,"tag":146,"props":1057,"children":1058},{"style":165},[1059],{"type":100,"value":1060},"geistSans",{"type":94,"tag":146,"props":1062,"children":1063},{"style":159},[1064],{"type":100,"value":404},{"type":94,"tag":146,"props":1066,"children":1067},{"style":165},[1068],{"type":100,"value":1069},"variable",{"type":94,"tag":146,"props":1071,"children":1072},{"style":159},[1073],{"type":100,"value":1074},"}",{"type":94,"tag":146,"props":1076,"children":1077},{"style":159},[1078],{"type":100,"value":1079}," ${",{"type":94,"tag":146,"props":1081,"children":1082},{"style":165},[1083],{"type":100,"value":1084},"geistMono",{"type":94,"tag":146,"props":1086,"children":1087},{"style":159},[1088],{"type":100,"value":404},{"type":94,"tag":146,"props":1090,"children":1091},{"style":165},[1092],{"type":100,"value":1069},{"type":94,"tag":146,"props":1094,"children":1095},{"style":159},[1096],{"type":100,"value":1097},"}`",{"type":94,"tag":146,"props":1099,"children":1100},{"style":159},[1101],{"type":100,"value":1102},"}>\n",{"type":94,"tag":146,"props":1104,"children":1105},{"class":148,"line":235},[1106,1111,1116,1120,1124,1128,1133,1137],{"type":94,"tag":146,"props":1107,"children":1108},{"style":159},[1109],{"type":100,"value":1110},"  \u003C",{"type":94,"tag":146,"props":1112,"children":1113},{"style":350},[1114],{"type":100,"value":1115},"body",{"type":94,"tag":146,"props":1117,"children":1118},{"style":249},[1119],{"type":100,"value":1045},{"type":94,"tag":146,"props":1121,"children":1122},{"style":159},[1123],{"type":100,"value":1027},{"type":94,"tag":146,"props":1125,"children":1126},{"style":159},[1127],{"type":100,"value":589},{"type":94,"tag":146,"props":1129,"children":1130},{"style":186},[1131],{"type":100,"value":1132},"antialiased",{"type":94,"tag":146,"props":1134,"children":1135},{"style":159},[1136],{"type":100,"value":589},{"type":94,"tag":146,"props":1138,"children":1139},{"style":159},[1140],{"type":100,"value":1141},">\n",{"type":94,"tag":135,"props":1143,"children":1145},{"className":990,"code":1144,"language":992,"meta":140,"style":140},"\u002F\u002F app\u002Flayout.tsx — WRONG (default scaffold output)\n\u003Chtml lang=\"en\">\n  \u003Cbody className={`${geistSans.variable} ${geistMono.variable} antialiased`}>\n",[1146],{"type":94,"tag":126,"props":1147,"children":1148},{"__ignoreMap":140},[1149,1157,1192],{"type":94,"tag":146,"props":1150,"children":1151},{"class":148,"line":149},[1152],{"type":94,"tag":146,"props":1153,"children":1154},{"style":865},[1155],{"type":100,"value":1156},"\u002F\u002F app\u002Flayout.tsx — WRONG (default scaffold output)\n",{"type":94,"tag":146,"props":1158,"children":1159},{"class":148,"line":197},[1160,1164,1168,1172,1176,1180,1184,1188],{"type":94,"tag":146,"props":1161,"children":1162},{"style":159},[1163],{"type":100,"value":1012},{"type":94,"tag":146,"props":1165,"children":1166},{"style":350},[1167],{"type":100,"value":1017},{"type":94,"tag":146,"props":1169,"children":1170},{"style":249},[1171],{"type":100,"value":1022},{"type":94,"tag":146,"props":1173,"children":1174},{"style":159},[1175],{"type":100,"value":1027},{"type":94,"tag":146,"props":1177,"children":1178},{"style":159},[1179],{"type":100,"value":589},{"type":94,"tag":146,"props":1181,"children":1182},{"style":186},[1183],{"type":100,"value":1036},{"type":94,"tag":146,"props":1185,"children":1186},{"style":159},[1187],{"type":100,"value":589},{"type":94,"tag":146,"props":1189,"children":1190},{"style":159},[1191],{"type":100,"value":1141},{"type":94,"tag":146,"props":1193,"children":1194},{"class":148,"line":235},[1195,1199,1203,1207,1211,1215,1219,1223,1227,1231,1235,1239,1243,1247,1251,1256,1261],{"type":94,"tag":146,"props":1196,"children":1197},{"style":159},[1198],{"type":100,"value":1110},{"type":94,"tag":146,"props":1200,"children":1201},{"style":350},[1202],{"type":100,"value":1115},{"type":94,"tag":146,"props":1204,"children":1205},{"style":249},[1206],{"type":100,"value":1045},{"type":94,"tag":146,"props":1208,"children":1209},{"style":159},[1210],{"type":100,"value":1050},{"type":94,"tag":146,"props":1212,"children":1213},{"style":159},[1214],{"type":100,"value":1055},{"type":94,"tag":146,"props":1216,"children":1217},{"style":165},[1218],{"type":100,"value":1060},{"type":94,"tag":146,"props":1220,"children":1221},{"style":159},[1222],{"type":100,"value":404},{"type":94,"tag":146,"props":1224,"children":1225},{"style":165},[1226],{"type":100,"value":1069},{"type":94,"tag":146,"props":1228,"children":1229},{"style":159},[1230],{"type":100,"value":1074},{"type":94,"tag":146,"props":1232,"children":1233},{"style":159},[1234],{"type":100,"value":1079},{"type":94,"tag":146,"props":1236,"children":1237},{"style":165},[1238],{"type":100,"value":1084},{"type":94,"tag":146,"props":1240,"children":1241},{"style":159},[1242],{"type":100,"value":404},{"type":94,"tag":146,"props":1244,"children":1245},{"style":165},[1246],{"type":100,"value":1069},{"type":94,"tag":146,"props":1248,"children":1249},{"style":159},[1250],{"type":100,"value":1074},{"type":94,"tag":146,"props":1252,"children":1253},{"style":186},[1254],{"type":100,"value":1255}," antialiased",{"type":94,"tag":146,"props":1257,"children":1258},{"style":159},[1259],{"type":100,"value":1260},"`",{"type":94,"tag":146,"props":1262,"children":1263},{"style":159},[1264],{"type":100,"value":1102},{"type":94,"tag":103,"props":1266,"children":1267},{},[1268,1273,1275,1280,1281,1286],{"type":94,"tag":498,"props":1269,"children":1270},{},[1271],{"type":100,"value":1272},"Always apply both fixes",{"type":100,"value":1274}," after running ",{"type":94,"tag":126,"props":1276,"children":1278},{"className":1277},[],[1279],{"type":100,"value":495},{"type":100,"value":806},{"type":94,"tag":126,"props":1282,"children":1284},{"className":1283},[],[1285],{"type":100,"value":743},{"type":100,"value":1287}," with Tailwind v4.",{"type":94,"tag":109,"props":1289,"children":1291},{"id":1290},"ui-defaults-for-app-router-pages",[1292],{"type":100,"value":1293},"UI Defaults for App Router Pages",{"type":94,"tag":103,"props":1295,"children":1296},{},[1297],{"type":100,"value":1298},"When building pages, layouts, and route-level UI in this stack, default to shadcn\u002Fui + Geist instead of raw Tailwind scaffolding.",{"type":94,"tag":1300,"props":1301,"children":1302},"ul",{},[1303,1316,1321,1326,1331],{"type":94,"tag":818,"props":1304,"children":1305},{},[1306,1308,1314],{"type":100,"value":1307},"Start from theme tokens: ",{"type":94,"tag":126,"props":1309,"children":1311},{"className":1310},[],[1312],{"type":100,"value":1313},"bg-background text-foreground",{"type":100,"value":1315},", not ad-hoc palette classes.",{"type":94,"tag":818,"props":1317,"children":1318},{},[1319],{"type":100,"value":1320},"Use Geist Sans for interface text and Geist Mono for code, metrics, IDs, timestamps.",{"type":94,"tag":818,"props":1322,"children":1323},{},[1324],{"type":100,"value":1325},"Reach for shadcn primitives first: Button, Input, Textarea, Card, Tabs, Table, Dialog, AlertDialog, Sheet, DropdownMenu, Badge, Separator, Skeleton.",{"type":94,"tag":818,"props":1327,"children":1328},{},[1329],{"type":100,"value":1330},"For product, admin, and AI surfaces, default to dark mode with restrained accents and designed empty\u002Floading\u002Ferror states.",{"type":94,"tag":818,"props":1332,"children":1333},{},[1334],{"type":100,"value":1335},"Common route compositions: Settings route (Tabs+Card+form), Dashboard route (filter bar+Card+Table), Mobile nav (Sheet+Button).",{"type":94,"tag":109,"props":1337,"children":1339},{"id":1338},"key-architecture",[1340],{"type":100,"value":1341},"Key Architecture",{"type":94,"tag":103,"props":1343,"children":1344},{},[1345,1347,1353,1355,1360],{"type":100,"value":1346},"Next.js 16 uses React 19.2 features and the App Router (file-system routing under ",{"type":94,"tag":126,"props":1348,"children":1350},{"className":1349},[],[1351],{"type":100,"value":1352},"app\u002F",{"type":100,"value":1354},"). Ensure React ",{"type":94,"tag":498,"props":1356,"children":1357},{},[1358],{"type":100,"value":1359},"19.2.4+",{"type":100,"value":1361}," for security patches (see CVE section below).",{"type":94,"tag":729,"props":1363,"children":1365},{"id":1364},"file-conventions",[1366],{"type":100,"value":1367},"File Conventions",{"type":94,"tag":1300,"props":1369,"children":1370},{},[1371,1382,1393,1404,1415,1426,1437,1448],{"type":94,"tag":818,"props":1372,"children":1373},{},[1374,1380],{"type":94,"tag":126,"props":1375,"children":1377},{"className":1376},[],[1378],{"type":100,"value":1379},"layout.tsx",{"type":100,"value":1381}," — Persistent wrapper, preserves state across navigations",{"type":94,"tag":818,"props":1383,"children":1384},{},[1385,1391],{"type":94,"tag":126,"props":1386,"children":1388},{"className":1387},[],[1389],{"type":100,"value":1390},"page.tsx",{"type":100,"value":1392}," — Unique UI for a route, makes route publicly accessible",{"type":94,"tag":818,"props":1394,"children":1395},{},[1396,1402],{"type":94,"tag":126,"props":1397,"children":1399},{"className":1398},[],[1400],{"type":100,"value":1401},"loading.tsx",{"type":100,"value":1403}," — Suspense fallback shown while segment loads",{"type":94,"tag":818,"props":1405,"children":1406},{},[1407,1413],{"type":94,"tag":126,"props":1408,"children":1410},{"className":1409},[],[1411],{"type":100,"value":1412},"error.tsx",{"type":100,"value":1414}," — Error boundary for a segment",{"type":94,"tag":818,"props":1416,"children":1417},{},[1418,1424],{"type":94,"tag":126,"props":1419,"children":1421},{"className":1420},[],[1422],{"type":100,"value":1423},"not-found.tsx",{"type":100,"value":1425}," — 404 UI for a segment",{"type":94,"tag":818,"props":1427,"children":1428},{},[1429,1435],{"type":94,"tag":126,"props":1430,"children":1432},{"className":1431},[],[1433],{"type":100,"value":1434},"route.ts",{"type":100,"value":1436}," — API endpoint (Route Handler)",{"type":94,"tag":818,"props":1438,"children":1439},{},[1440,1446],{"type":94,"tag":126,"props":1441,"children":1443},{"className":1442},[],[1444],{"type":100,"value":1445},"template.tsx",{"type":100,"value":1447}," — Like layout but re-mounts on navigation",{"type":94,"tag":818,"props":1449,"children":1450},{},[1451,1457],{"type":94,"tag":126,"props":1452,"children":1454},{"className":1453},[],[1455],{"type":100,"value":1456},"default.tsx",{"type":100,"value":1458}," — Fallback for parallel routes",{"type":94,"tag":729,"props":1460,"children":1462},{"id":1461},"routing",[1463],{"type":100,"value":1464},"Routing",{"type":94,"tag":1300,"props":1466,"children":1467},{},[1468,1495,1508,1521],{"type":94,"tag":818,"props":1469,"children":1470},{},[1471,1473,1479,1481,1487,1489],{"type":100,"value":1472},"Dynamic segments: ",{"type":94,"tag":126,"props":1474,"children":1476},{"className":1475},[],[1477],{"type":100,"value":1478},"[id]",{"type":100,"value":1480},", catch-all: ",{"type":94,"tag":126,"props":1482,"children":1484},{"className":1483},[],[1485],{"type":100,"value":1486},"[...slug]",{"type":100,"value":1488},", optional catch-all: ",{"type":94,"tag":126,"props":1490,"children":1492},{"className":1491},[],[1493],{"type":100,"value":1494},"[[...slug]]",{"type":94,"tag":818,"props":1496,"children":1497},{},[1498,1500,1506],{"type":100,"value":1499},"Route groups: ",{"type":94,"tag":126,"props":1501,"children":1503},{"className":1502},[],[1504],{"type":100,"value":1505},"(group)",{"type":100,"value":1507}," — organize without affecting URL",{"type":94,"tag":818,"props":1509,"children":1510},{},[1511,1513,1519],{"type":100,"value":1512},"Parallel routes: ",{"type":94,"tag":126,"props":1514,"children":1516},{"className":1515},[],[1517],{"type":100,"value":1518},"@slot",{"type":100,"value":1520}," — render multiple pages in same layout",{"type":94,"tag":818,"props":1522,"children":1523},{},[1524,1526,1532,1533,1539,1540,1546,1547,1553],{"type":100,"value":1525},"Intercepting routes: ",{"type":94,"tag":126,"props":1527,"children":1529},{"className":1528},[],[1530],{"type":100,"value":1531},"(.)",{"type":100,"value":463},{"type":94,"tag":126,"props":1534,"children":1536},{"className":1535},[],[1537],{"type":100,"value":1538},"(..)",{"type":100,"value":463},{"type":94,"tag":126,"props":1541,"children":1543},{"className":1542},[],[1544],{"type":100,"value":1545},"(...)",{"type":100,"value":463},{"type":94,"tag":126,"props":1548,"children":1550},{"className":1549},[],[1551],{"type":100,"value":1552},"(..)(..)",{"type":100,"value":1554}," — modal patterns",{"type":94,"tag":109,"props":1556,"children":1558},{"id":1557},"server-components-default",[1559],{"type":100,"value":1560},"Server Components (Default)",{"type":94,"tag":103,"props":1562,"children":1563},{},[1564],{"type":100,"value":1565},"All components in the App Router are Server Components by default. They:",{"type":94,"tag":1300,"props":1567,"children":1568},{},[1569,1574,1587,1607],{"type":94,"tag":818,"props":1570,"children":1571},{},[1572],{"type":100,"value":1573},"Run on the server only, ship zero JavaScript to the client",{"type":94,"tag":818,"props":1575,"children":1576},{},[1577,1579,1585],{"type":100,"value":1578},"Can directly ",{"type":94,"tag":126,"props":1580,"children":1582},{"className":1581},[],[1583],{"type":100,"value":1584},"await",{"type":100,"value":1586}," data (fetch, DB queries, file system)",{"type":94,"tag":818,"props":1588,"children":1589},{},[1590,1592,1598,1599,1605],{"type":100,"value":1591},"Cannot use ",{"type":94,"tag":126,"props":1593,"children":1595},{"className":1594},[],[1596],{"type":100,"value":1597},"useState",{"type":100,"value":463},{"type":94,"tag":126,"props":1600,"children":1602},{"className":1601},[],[1603],{"type":100,"value":1604},"useEffect",{"type":100,"value":1606},", or browser APIs",{"type":94,"tag":818,"props":1608,"children":1609},{},[1610,1612,1618,1619,1625],{"type":100,"value":1611},"Cannot use event handlers (",{"type":94,"tag":126,"props":1613,"children":1615},{"className":1614},[],[1616],{"type":100,"value":1617},"onClick",{"type":100,"value":463},{"type":94,"tag":126,"props":1620,"children":1622},{"className":1621},[],[1623],{"type":100,"value":1624},"onChange",{"type":100,"value":1626},")",{"type":94,"tag":135,"props":1628,"children":1630},{"className":990,"code":1629,"language":992,"meta":140,"style":140},"\u002F\u002F app\u002Fusers\u002Fpage.tsx — Server Component (default)\nexport default async function UsersPage() {\n  const users = await db.query('SELECT * FROM users')\n  return \u003CUserList users={users} \u002F>\n}\n",[1631],{"type":94,"tag":126,"props":1632,"children":1633},{"__ignoreMap":140},[1634,1642,1676,1735,1770],{"type":94,"tag":146,"props":1635,"children":1636},{"class":148,"line":149},[1637],{"type":94,"tag":146,"props":1638,"children":1639},{"style":865},[1640],{"type":100,"value":1641},"\u002F\u002F app\u002Fusers\u002Fpage.tsx — Server Component (default)\n",{"type":94,"tag":146,"props":1643,"children":1644},{"class":148,"line":197},[1645,1649,1654,1659,1663,1668,1672],{"type":94,"tag":146,"props":1646,"children":1647},{"style":153},[1648],{"type":100,"value":317},{"type":94,"tag":146,"props":1650,"children":1651},{"style":153},[1652],{"type":100,"value":1653}," default",{"type":94,"tag":146,"props":1655,"children":1656},{"style":249},[1657],{"type":100,"value":1658}," async",{"type":94,"tag":146,"props":1660,"children":1661},{"style":249},[1662],{"type":100,"value":322},{"type":94,"tag":146,"props":1664,"children":1665},{"style":325},[1666],{"type":100,"value":1667}," UsersPage",{"type":94,"tag":146,"props":1669,"children":1670},{"style":159},[1671],{"type":100,"value":333},{"type":94,"tag":146,"props":1673,"children":1674},{"style":159},[1675],{"type":100,"value":338},{"type":94,"tag":146,"props":1677,"children":1678},{"class":148,"line":235},[1679,1684,1689,1693,1698,1703,1707,1712,1716,1721,1726,1730],{"type":94,"tag":146,"props":1680,"children":1681},{"style":249},[1682],{"type":100,"value":1683},"  const",{"type":94,"tag":146,"props":1685,"children":1686},{"style":165},[1687],{"type":100,"value":1688}," users",{"type":94,"tag":146,"props":1690,"children":1691},{"style":159},[1692],{"type":100,"value":297},{"type":94,"tag":146,"props":1694,"children":1695},{"style":153},[1696],{"type":100,"value":1697}," await",{"type":94,"tag":146,"props":1699,"children":1700},{"style":165},[1701],{"type":100,"value":1702}," db",{"type":94,"tag":146,"props":1704,"children":1705},{"style":159},[1706],{"type":100,"value":404},{"type":94,"tag":146,"props":1708,"children":1709},{"style":325},[1710],{"type":100,"value":1711},"query",{"type":94,"tag":146,"props":1713,"children":1714},{"style":350},[1715],{"type":100,"value":385},{"type":94,"tag":146,"props":1717,"children":1718},{"style":159},[1719],{"type":100,"value":1720},"'",{"type":94,"tag":146,"props":1722,"children":1723},{"style":186},[1724],{"type":100,"value":1725},"SELECT * FROM users",{"type":94,"tag":146,"props":1727,"children":1728},{"style":159},[1729],{"type":100,"value":1720},{"type":94,"tag":146,"props":1731,"children":1732},{"style":350},[1733],{"type":100,"value":1734},")\n",{"type":94,"tag":146,"props":1736,"children":1737},{"class":148,"line":245},[1738,1742,1747,1752,1756,1760,1765],{"type":94,"tag":146,"props":1739,"children":1740},{"style":153},[1741],{"type":100,"value":436},{"type":94,"tag":146,"props":1743,"children":1744},{"style":159},[1745],{"type":100,"value":1746}," \u003C",{"type":94,"tag":146,"props":1748,"children":1749},{"style":265},[1750],{"type":100,"value":1751},"UserList",{"type":94,"tag":146,"props":1753,"children":1754},{"style":249},[1755],{"type":100,"value":1688},{"type":94,"tag":146,"props":1757,"children":1758},{"style":159},[1759],{"type":100,"value":1050},{"type":94,"tag":146,"props":1761,"children":1762},{"style":165},[1763],{"type":100,"value":1764},"users",{"type":94,"tag":146,"props":1766,"children":1767},{"style":159},[1768],{"type":100,"value":1769},"} \u002F>\n",{"type":94,"tag":146,"props":1771,"children":1772},{"class":148,"line":42},[1773],{"type":94,"tag":146,"props":1774,"children":1775},{"style":159},[1776],{"type":100,"value":450},{"type":94,"tag":109,"props":1778,"children":1780},{"id":1779},"client-components",[1781],{"type":100,"value":1782},"Client Components",{"type":94,"tag":103,"props":1784,"children":1785},{},[1786,1788,1794],{"type":100,"value":1787},"Add ",{"type":94,"tag":126,"props":1789,"children":1791},{"className":1790},[],[1792],{"type":100,"value":1793},"'use client'",{"type":100,"value":1795}," at the top of the file when you need interactivity or browser APIs.",{"type":94,"tag":135,"props":1797,"children":1799},{"className":990,"code":1798,"language":992,"meta":140,"style":140},"'use client'\nimport { useState } from 'react'\n\nexport function Counter() {\n  const [count, setCount] = useState(0)\n  return \u003Cbutton onClick={() => setCount(count + 1)}>{count}\u003C\u002Fbutton>\n}\n",[1800],{"type":94,"tag":126,"props":1801,"children":1802},{"__ignoreMap":140},[1803,1819,1855,1862,1886,1939,2015],{"type":94,"tag":146,"props":1804,"children":1805},{"class":148,"line":149},[1806,1810,1815],{"type":94,"tag":146,"props":1807,"children":1808},{"style":159},[1809],{"type":100,"value":1720},{"type":94,"tag":146,"props":1811,"children":1812},{"style":186},[1813],{"type":100,"value":1814},"use client",{"type":94,"tag":146,"props":1816,"children":1817},{"style":159},[1818],{"type":100,"value":194},{"type":94,"tag":146,"props":1820,"children":1821},{"class":148,"line":197},[1822,1826,1830,1835,1839,1843,1847,1851],{"type":94,"tag":146,"props":1823,"children":1824},{"style":153},[1825],{"type":100,"value":156},{"type":94,"tag":146,"props":1827,"children":1828},{"style":159},[1829],{"type":100,"value":162},{"type":94,"tag":146,"props":1831,"children":1832},{"style":165},[1833],{"type":100,"value":1834}," useState",{"type":94,"tag":146,"props":1836,"children":1837},{"style":159},[1838],{"type":100,"value":173},{"type":94,"tag":146,"props":1840,"children":1841},{"style":153},[1842],{"type":100,"value":178},{"type":94,"tag":146,"props":1844,"children":1845},{"style":159},[1846],{"type":100,"value":183},{"type":94,"tag":146,"props":1848,"children":1849},{"style":186},[1850],{"type":100,"value":14},{"type":94,"tag":146,"props":1852,"children":1853},{"style":159},[1854],{"type":100,"value":194},{"type":94,"tag":146,"props":1856,"children":1857},{"class":148,"line":235},[1858],{"type":94,"tag":146,"props":1859,"children":1860},{"emptyLinePlaceholder":239},[1861],{"type":100,"value":242},{"type":94,"tag":146,"props":1863,"children":1864},{"class":148,"line":245},[1865,1869,1873,1878,1882],{"type":94,"tag":146,"props":1866,"children":1867},{"style":153},[1868],{"type":100,"value":317},{"type":94,"tag":146,"props":1870,"children":1871},{"style":249},[1872],{"type":100,"value":322},{"type":94,"tag":146,"props":1874,"children":1875},{"style":325},[1876],{"type":100,"value":1877}," Counter",{"type":94,"tag":146,"props":1879,"children":1880},{"style":159},[1881],{"type":100,"value":333},{"type":94,"tag":146,"props":1883,"children":1884},{"style":159},[1885],{"type":100,"value":338},{"type":94,"tag":146,"props":1887,"children":1888},{"class":148,"line":42},[1889,1893,1898,1903,1907,1912,1917,1921,1925,1929,1935],{"type":94,"tag":146,"props":1890,"children":1891},{"style":249},[1892],{"type":100,"value":1683},{"type":94,"tag":146,"props":1894,"children":1895},{"style":159},[1896],{"type":100,"value":1897}," [",{"type":94,"tag":146,"props":1899,"children":1900},{"style":165},[1901],{"type":100,"value":1902},"count",{"type":94,"tag":146,"props":1904,"children":1905},{"style":159},[1906],{"type":100,"value":881},{"type":94,"tag":146,"props":1908,"children":1909},{"style":165},[1910],{"type":100,"value":1911}," setCount",{"type":94,"tag":146,"props":1913,"children":1914},{"style":159},[1915],{"type":100,"value":1916},"]",{"type":94,"tag":146,"props":1918,"children":1919},{"style":159},[1920],{"type":100,"value":297},{"type":94,"tag":146,"props":1922,"children":1923},{"style":325},[1924],{"type":100,"value":1834},{"type":94,"tag":146,"props":1926,"children":1927},{"style":350},[1928],{"type":100,"value":385},{"type":94,"tag":146,"props":1930,"children":1932},{"style":1931},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[1933],{"type":100,"value":1934},"0",{"type":94,"tag":146,"props":1936,"children":1937},{"style":350},[1938],{"type":100,"value":1734},{"type":94,"tag":146,"props":1940,"children":1941},{"class":148,"line":89},[1942,1946,1950,1955,1960,1965,1970,1974,1979,1984,1989,1993,1998,2002,2007,2011],{"type":94,"tag":146,"props":1943,"children":1944},{"style":153},[1945],{"type":100,"value":436},{"type":94,"tag":146,"props":1947,"children":1948},{"style":159},[1949],{"type":100,"value":1746},{"type":94,"tag":146,"props":1951,"children":1952},{"style":350},[1953],{"type":100,"value":1954},"button",{"type":94,"tag":146,"props":1956,"children":1957},{"style":249},[1958],{"type":100,"value":1959}," onClick",{"type":94,"tag":146,"props":1961,"children":1962},{"style":159},[1963],{"type":100,"value":1964},"={()",{"type":94,"tag":146,"props":1966,"children":1967},{"style":249},[1968],{"type":100,"value":1969}," =>",{"type":94,"tag":146,"props":1971,"children":1972},{"style":325},[1973],{"type":100,"value":1911},{"type":94,"tag":146,"props":1975,"children":1976},{"style":165},[1977],{"type":100,"value":1978},"(count ",{"type":94,"tag":146,"props":1980,"children":1981},{"style":159},[1982],{"type":100,"value":1983},"+",{"type":94,"tag":146,"props":1985,"children":1986},{"style":1931},[1987],{"type":100,"value":1988}," 1",{"type":94,"tag":146,"props":1990,"children":1991},{"style":165},[1992],{"type":100,"value":1626},{"type":94,"tag":146,"props":1994,"children":1995},{"style":159},[1996],{"type":100,"value":1997},"}>{",{"type":94,"tag":146,"props":1999,"children":2000},{"style":165},[2001],{"type":100,"value":1902},{"type":94,"tag":146,"props":2003,"children":2004},{"style":159},[2005],{"type":100,"value":2006},"}\u003C\u002F",{"type":94,"tag":146,"props":2008,"children":2009},{"style":350},[2010],{"type":100,"value":1954},{"type":94,"tag":146,"props":2012,"children":2013},{"style":159},[2014],{"type":100,"value":1141},{"type":94,"tag":146,"props":2016,"children":2017},{"class":148,"line":341},[2018],{"type":94,"tag":146,"props":2019,"children":2020},{"style":159},[2021],{"type":100,"value":450},{"type":94,"tag":103,"props":2023,"children":2024},{},[2025,2030,2032,2037],{"type":94,"tag":498,"props":2026,"children":2027},{},[2028],{"type":100,"value":2029},"Rule",{"type":100,"value":2031},": Push ",{"type":94,"tag":126,"props":2033,"children":2035},{"className":2034},[],[2036],{"type":100,"value":1793},{"type":100,"value":2038}," as far down the component tree as possible. Keep data fetching in Server Components and pass data down as props.",{"type":94,"tag":109,"props":2040,"children":2042},{"id":2041},"server-actions-server-functions",[2043],{"type":100,"value":2044},"Server Actions \u002F Server Functions",{"type":94,"tag":103,"props":2046,"children":2047},{},[2048,2050,2056],{"type":100,"value":2049},"Async functions marked with ",{"type":94,"tag":126,"props":2051,"children":2053},{"className":2052},[],[2054],{"type":100,"value":2055},"'use server'",{"type":100,"value":2057}," that run on the server. Use for mutations.",{"type":94,"tag":135,"props":2059,"children":2061},{"className":990,"code":2060,"language":992,"meta":140,"style":140},"\u002F\u002F app\u002Factions.ts\n'use server'\n\nexport async function createUser(formData: FormData) {\n  const name = formData.get('name') as string\n  await db.insert('users', { name })\n  revalidatePath('\u002Fusers')\n}\n",[2062],{"type":94,"tag":126,"props":2063,"children":2064},{"__ignoreMap":140},[2065,2073,2088,2095,2142,2203,2260,2289],{"type":94,"tag":146,"props":2066,"children":2067},{"class":148,"line":149},[2068],{"type":94,"tag":146,"props":2069,"children":2070},{"style":865},[2071],{"type":100,"value":2072},"\u002F\u002F app\u002Factions.ts\n",{"type":94,"tag":146,"props":2074,"children":2075},{"class":148,"line":197},[2076,2080,2084],{"type":94,"tag":146,"props":2077,"children":2078},{"style":159},[2079],{"type":100,"value":1720},{"type":94,"tag":146,"props":2081,"children":2082},{"style":186},[2083],{"type":100,"value":87},{"type":94,"tag":146,"props":2085,"children":2086},{"style":159},[2087],{"type":100,"value":194},{"type":94,"tag":146,"props":2089,"children":2090},{"class":148,"line":235},[2091],{"type":94,"tag":146,"props":2092,"children":2093},{"emptyLinePlaceholder":239},[2094],{"type":100,"value":242},{"type":94,"tag":146,"props":2096,"children":2097},{"class":148,"line":245},[2098,2102,2106,2110,2115,2119,2125,2129,2134,2138],{"type":94,"tag":146,"props":2099,"children":2100},{"style":153},[2101],{"type":100,"value":317},{"type":94,"tag":146,"props":2103,"children":2104},{"style":249},[2105],{"type":100,"value":1658},{"type":94,"tag":146,"props":2107,"children":2108},{"style":249},[2109],{"type":100,"value":322},{"type":94,"tag":146,"props":2111,"children":2112},{"style":325},[2113],{"type":100,"value":2114}," createUser",{"type":94,"tag":146,"props":2116,"children":2117},{"style":159},[2118],{"type":100,"value":385},{"type":94,"tag":146,"props":2120,"children":2122},{"style":2121},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[2123],{"type":100,"value":2124},"formData",{"type":94,"tag":146,"props":2126,"children":2127},{"style":159},[2128],{"type":100,"value":262},{"type":94,"tag":146,"props":2130,"children":2131},{"style":265},[2132],{"type":100,"value":2133}," FormData",{"type":94,"tag":146,"props":2135,"children":2136},{"style":159},[2137],{"type":100,"value":1626},{"type":94,"tag":146,"props":2139,"children":2140},{"style":159},[2141],{"type":100,"value":338},{"type":94,"tag":146,"props":2143,"children":2144},{"class":148,"line":42},[2145,2149,2154,2158,2163,2167,2172,2176,2180,2185,2189,2193,2198],{"type":94,"tag":146,"props":2146,"children":2147},{"style":249},[2148],{"type":100,"value":1683},{"type":94,"tag":146,"props":2150,"children":2151},{"style":165},[2152],{"type":100,"value":2153}," name",{"type":94,"tag":146,"props":2155,"children":2156},{"style":159},[2157],{"type":100,"value":297},{"type":94,"tag":146,"props":2159,"children":2160},{"style":165},[2161],{"type":100,"value":2162}," formData",{"type":94,"tag":146,"props":2164,"children":2165},{"style":159},[2166],{"type":100,"value":404},{"type":94,"tag":146,"props":2168,"children":2169},{"style":325},[2170],{"type":100,"value":2171},"get",{"type":94,"tag":146,"props":2173,"children":2174},{"style":350},[2175],{"type":100,"value":385},{"type":94,"tag":146,"props":2177,"children":2178},{"style":159},[2179],{"type":100,"value":1720},{"type":94,"tag":146,"props":2181,"children":2182},{"style":186},[2183],{"type":100,"value":2184},"name",{"type":94,"tag":146,"props":2186,"children":2187},{"style":159},[2188],{"type":100,"value":1720},{"type":94,"tag":146,"props":2190,"children":2191},{"style":350},[2192],{"type":100,"value":368},{"type":94,"tag":146,"props":2194,"children":2195},{"style":153},[2196],{"type":100,"value":2197},"as",{"type":94,"tag":146,"props":2199,"children":2200},{"style":265},[2201],{"type":100,"value":2202}," string\n",{"type":94,"tag":146,"props":2204,"children":2205},{"class":148,"line":89},[2206,2211,2215,2219,2224,2228,2232,2236,2240,2244,2248,2252,2256],{"type":94,"tag":146,"props":2207,"children":2208},{"style":153},[2209],{"type":100,"value":2210},"  await",{"type":94,"tag":146,"props":2212,"children":2213},{"style":165},[2214],{"type":100,"value":1702},{"type":94,"tag":146,"props":2216,"children":2217},{"style":159},[2218],{"type":100,"value":404},{"type":94,"tag":146,"props":2220,"children":2221},{"style":325},[2222],{"type":100,"value":2223},"insert",{"type":94,"tag":146,"props":2225,"children":2226},{"style":350},[2227],{"type":100,"value":385},{"type":94,"tag":146,"props":2229,"children":2230},{"style":159},[2231],{"type":100,"value":1720},{"type":94,"tag":146,"props":2233,"children":2234},{"style":186},[2235],{"type":100,"value":1764},{"type":94,"tag":146,"props":2237,"children":2238},{"style":159},[2239],{"type":100,"value":1720},{"type":94,"tag":146,"props":2241,"children":2242},{"style":159},[2243],{"type":100,"value":881},{"type":94,"tag":146,"props":2245,"children":2246},{"style":159},[2247],{"type":100,"value":162},{"type":94,"tag":146,"props":2249,"children":2250},{"style":165},[2251],{"type":100,"value":2153},{"type":94,"tag":146,"props":2253,"children":2254},{"style":159},[2255],{"type":100,"value":173},{"type":94,"tag":146,"props":2257,"children":2258},{"style":350},[2259],{"type":100,"value":1734},{"type":94,"tag":146,"props":2261,"children":2262},{"class":148,"line":341},[2263,2268,2272,2276,2281,2285],{"type":94,"tag":146,"props":2264,"children":2265},{"style":325},[2266],{"type":100,"value":2267},"  revalidatePath",{"type":94,"tag":146,"props":2269,"children":2270},{"style":350},[2271],{"type":100,"value":385},{"type":94,"tag":146,"props":2273,"children":2274},{"style":159},[2275],{"type":100,"value":1720},{"type":94,"tag":146,"props":2277,"children":2278},{"style":186},[2279],{"type":100,"value":2280},"\u002Fusers",{"type":94,"tag":146,"props":2282,"children":2283},{"style":159},[2284],{"type":100,"value":1720},{"type":94,"tag":146,"props":2286,"children":2287},{"style":350},[2288],{"type":100,"value":1734},{"type":94,"tag":146,"props":2290,"children":2291},{"class":148,"line":430},[2292],{"type":94,"tag":146,"props":2293,"children":2294},{"style":159},[2295],{"type":100,"value":450},{"type":94,"tag":103,"props":2297,"children":2298},{},[2299],{"type":100,"value":2300},"Use Server Actions for:",{"type":94,"tag":1300,"props":2302,"children":2303},{},[2304,2309],{"type":94,"tag":818,"props":2305,"children":2306},{},[2307],{"type":100,"value":2308},"Form submissions and data mutations",{"type":94,"tag":818,"props":2310,"children":2311},{},[2312,2314,2320,2322],{"type":100,"value":2313},"In-app mutations with ",{"type":94,"tag":126,"props":2315,"children":2317},{"className":2316},[],[2318],{"type":100,"value":2319},"revalidatePath",{"type":100,"value":2321}," \u002F ",{"type":94,"tag":126,"props":2323,"children":2325},{"className":2324},[],[2326],{"type":100,"value":2327},"revalidateTag",{"type":94,"tag":103,"props":2329,"children":2330},{},[2331,2333,2338],{"type":100,"value":2332},"Use Route Handlers (",{"type":94,"tag":126,"props":2334,"children":2336},{"className":2335},[],[2337],{"type":100,"value":1434},{"type":100,"value":2339},") for:",{"type":94,"tag":1300,"props":2341,"children":2342},{},[2343,2348,2353,2358],{"type":94,"tag":818,"props":2344,"children":2345},{},[2346],{"type":100,"value":2347},"Public APIs consumed by external clients",{"type":94,"tag":818,"props":2349,"children":2350},{},[2351],{"type":100,"value":2352},"Webhooks",{"type":94,"tag":818,"props":2354,"children":2355},{},[2356],{"type":100,"value":2357},"Large file uploads",{"type":94,"tag":818,"props":2359,"children":2360},{},[2361],{"type":100,"value":2362},"Streaming responses",{"type":94,"tag":109,"props":2364,"children":2366},{"id":2365},"cache-components-nextjs-16",[2367],{"type":100,"value":2368},"Cache Components (Next.js 16)",{"type":94,"tag":103,"props":2370,"children":2371},{},[2372,2374,2380],{"type":100,"value":2373},"The ",{"type":94,"tag":126,"props":2375,"children":2377},{"className":2376},[],[2378],{"type":100,"value":2379},"'use cache'",{"type":100,"value":2381}," directive enables component and function-level caching.",{"type":94,"tag":135,"props":2383,"children":2385},{"className":990,"code":2384,"language":992,"meta":140,"style":140},"'use cache'\n\nexport async function CachedUserList() {\n  cacheLife('hours') \u002F\u002F Configure cache duration\n  cacheTag('users')  \u002F\u002F Tag for on-demand invalidation\n  const users = await db.query('SELECT * FROM users')\n  return \u003CUserList users={users} \u002F>\n}\n",[2386],{"type":94,"tag":126,"props":2387,"children":2388},{"__ignoreMap":140},[2389,2405,2412,2440,2474,2508,2559,2590],{"type":94,"tag":146,"props":2390,"children":2391},{"class":148,"line":149},[2392,2396,2401],{"type":94,"tag":146,"props":2393,"children":2394},{"style":159},[2395],{"type":100,"value":1720},{"type":94,"tag":146,"props":2397,"children":2398},{"style":186},[2399],{"type":100,"value":2400},"use cache",{"type":94,"tag":146,"props":2402,"children":2403},{"style":159},[2404],{"type":100,"value":194},{"type":94,"tag":146,"props":2406,"children":2407},{"class":148,"line":197},[2408],{"type":94,"tag":146,"props":2409,"children":2410},{"emptyLinePlaceholder":239},[2411],{"type":100,"value":242},{"type":94,"tag":146,"props":2413,"children":2414},{"class":148,"line":235},[2415,2419,2423,2427,2432,2436],{"type":94,"tag":146,"props":2416,"children":2417},{"style":153},[2418],{"type":100,"value":317},{"type":94,"tag":146,"props":2420,"children":2421},{"style":249},[2422],{"type":100,"value":1658},{"type":94,"tag":146,"props":2424,"children":2425},{"style":249},[2426],{"type":100,"value":322},{"type":94,"tag":146,"props":2428,"children":2429},{"style":325},[2430],{"type":100,"value":2431}," CachedUserList",{"type":94,"tag":146,"props":2433,"children":2434},{"style":159},[2435],{"type":100,"value":333},{"type":94,"tag":146,"props":2437,"children":2438},{"style":159},[2439],{"type":100,"value":338},{"type":94,"tag":146,"props":2441,"children":2442},{"class":148,"line":245},[2443,2448,2452,2456,2461,2465,2469],{"type":94,"tag":146,"props":2444,"children":2445},{"style":325},[2446],{"type":100,"value":2447},"  cacheLife",{"type":94,"tag":146,"props":2449,"children":2450},{"style":350},[2451],{"type":100,"value":385},{"type":94,"tag":146,"props":2453,"children":2454},{"style":159},[2455],{"type":100,"value":1720},{"type":94,"tag":146,"props":2457,"children":2458},{"style":186},[2459],{"type":100,"value":2460},"hours",{"type":94,"tag":146,"props":2462,"children":2463},{"style":159},[2464],{"type":100,"value":1720},{"type":94,"tag":146,"props":2466,"children":2467},{"style":350},[2468],{"type":100,"value":368},{"type":94,"tag":146,"props":2470,"children":2471},{"style":865},[2472],{"type":100,"value":2473},"\u002F\u002F Configure cache duration\n",{"type":94,"tag":146,"props":2475,"children":2476},{"class":148,"line":42},[2477,2482,2486,2490,2494,2498,2503],{"type":94,"tag":146,"props":2478,"children":2479},{"style":325},[2480],{"type":100,"value":2481},"  cacheTag",{"type":94,"tag":146,"props":2483,"children":2484},{"style":350},[2485],{"type":100,"value":385},{"type":94,"tag":146,"props":2487,"children":2488},{"style":159},[2489],{"type":100,"value":1720},{"type":94,"tag":146,"props":2491,"children":2492},{"style":186},[2493],{"type":100,"value":1764},{"type":94,"tag":146,"props":2495,"children":2496},{"style":159},[2497],{"type":100,"value":1720},{"type":94,"tag":146,"props":2499,"children":2500},{"style":350},[2501],{"type":100,"value":2502},")  ",{"type":94,"tag":146,"props":2504,"children":2505},{"style":865},[2506],{"type":100,"value":2507},"\u002F\u002F Tag for on-demand invalidation\n",{"type":94,"tag":146,"props":2509,"children":2510},{"class":148,"line":89},[2511,2515,2519,2523,2527,2531,2535,2539,2543,2547,2551,2555],{"type":94,"tag":146,"props":2512,"children":2513},{"style":249},[2514],{"type":100,"value":1683},{"type":94,"tag":146,"props":2516,"children":2517},{"style":165},[2518],{"type":100,"value":1688},{"type":94,"tag":146,"props":2520,"children":2521},{"style":159},[2522],{"type":100,"value":297},{"type":94,"tag":146,"props":2524,"children":2525},{"style":153},[2526],{"type":100,"value":1697},{"type":94,"tag":146,"props":2528,"children":2529},{"style":165},[2530],{"type":100,"value":1702},{"type":94,"tag":146,"props":2532,"children":2533},{"style":159},[2534],{"type":100,"value":404},{"type":94,"tag":146,"props":2536,"children":2537},{"style":325},[2538],{"type":100,"value":1711},{"type":94,"tag":146,"props":2540,"children":2541},{"style":350},[2542],{"type":100,"value":385},{"type":94,"tag":146,"props":2544,"children":2545},{"style":159},[2546],{"type":100,"value":1720},{"type":94,"tag":146,"props":2548,"children":2549},{"style":186},[2550],{"type":100,"value":1725},{"type":94,"tag":146,"props":2552,"children":2553},{"style":159},[2554],{"type":100,"value":1720},{"type":94,"tag":146,"props":2556,"children":2557},{"style":350},[2558],{"type":100,"value":1734},{"type":94,"tag":146,"props":2560,"children":2561},{"class":148,"line":341},[2562,2566,2570,2574,2578,2582,2586],{"type":94,"tag":146,"props":2563,"children":2564},{"style":153},[2565],{"type":100,"value":436},{"type":94,"tag":146,"props":2567,"children":2568},{"style":159},[2569],{"type":100,"value":1746},{"type":94,"tag":146,"props":2571,"children":2572},{"style":265},[2573],{"type":100,"value":1751},{"type":94,"tag":146,"props":2575,"children":2576},{"style":249},[2577],{"type":100,"value":1688},{"type":94,"tag":146,"props":2579,"children":2580},{"style":159},[2581],{"type":100,"value":1050},{"type":94,"tag":146,"props":2583,"children":2584},{"style":165},[2585],{"type":100,"value":1764},{"type":94,"tag":146,"props":2587,"children":2588},{"style":159},[2589],{"type":100,"value":1769},{"type":94,"tag":146,"props":2591,"children":2592},{"class":148,"line":430},[2593],{"type":94,"tag":146,"props":2594,"children":2595},{"style":159},[2596],{"type":100,"value":450},{"type":94,"tag":729,"props":2598,"children":2600},{"id":2599},"cache-scope-variants",[2601],{"type":100,"value":2602},"Cache Scope Variants",{"type":94,"tag":103,"props":2604,"children":2605},{},[2606,2611],{"type":94,"tag":126,"props":2607,"children":2609},{"className":2608},[],[2610],{"type":100,"value":2379},{"type":100,"value":2612}," supports scope modifiers that control where cached data is stored:",{"type":94,"tag":135,"props":2614,"children":2616},{"className":990,"code":2615,"language":992,"meta":140,"style":140},"\u002F\u002F Default — cached in the deployment's local data cache\n'use cache'\n\n\u002F\u002F Remote cache — shared across all deployments and regions (Vercel only)\n'use cache: remote'\n\n\u002F\u002F Private cache — per-request cache, never shared between users\n'use cache: private'\n",[2617],{"type":94,"tag":126,"props":2618,"children":2619},{"__ignoreMap":140},[2620,2628,2643,2650,2658,2674,2681,2689],{"type":94,"tag":146,"props":2621,"children":2622},{"class":148,"line":149},[2623],{"type":94,"tag":146,"props":2624,"children":2625},{"style":865},[2626],{"type":100,"value":2627},"\u002F\u002F Default — cached in the deployment's local data cache\n",{"type":94,"tag":146,"props":2629,"children":2630},{"class":148,"line":197},[2631,2635,2639],{"type":94,"tag":146,"props":2632,"children":2633},{"style":159},[2634],{"type":100,"value":1720},{"type":94,"tag":146,"props":2636,"children":2637},{"style":186},[2638],{"type":100,"value":2400},{"type":94,"tag":146,"props":2640,"children":2641},{"style":159},[2642],{"type":100,"value":194},{"type":94,"tag":146,"props":2644,"children":2645},{"class":148,"line":235},[2646],{"type":94,"tag":146,"props":2647,"children":2648},{"emptyLinePlaceholder":239},[2649],{"type":100,"value":242},{"type":94,"tag":146,"props":2651,"children":2652},{"class":148,"line":245},[2653],{"type":94,"tag":146,"props":2654,"children":2655},{"style":865},[2656],{"type":100,"value":2657},"\u002F\u002F Remote cache — shared across all deployments and regions (Vercel only)\n",{"type":94,"tag":146,"props":2659,"children":2660},{"class":148,"line":42},[2661,2665,2670],{"type":94,"tag":146,"props":2662,"children":2663},{"style":159},[2664],{"type":100,"value":1720},{"type":94,"tag":146,"props":2666,"children":2667},{"style":186},[2668],{"type":100,"value":2669},"use cache: remote",{"type":94,"tag":146,"props":2671,"children":2672},{"style":159},[2673],{"type":100,"value":194},{"type":94,"tag":146,"props":2675,"children":2676},{"class":148,"line":89},[2677],{"type":94,"tag":146,"props":2678,"children":2679},{"emptyLinePlaceholder":239},[2680],{"type":100,"value":242},{"type":94,"tag":146,"props":2682,"children":2683},{"class":148,"line":341},[2684],{"type":94,"tag":146,"props":2685,"children":2686},{"style":865},[2687],{"type":100,"value":2688},"\u002F\u002F Private cache — per-request cache, never shared between users\n",{"type":94,"tag":146,"props":2690,"children":2691},{"class":148,"line":430},[2692,2696,2701],{"type":94,"tag":146,"props":2693,"children":2694},{"style":159},[2695],{"type":100,"value":1720},{"type":94,"tag":146,"props":2697,"children":2698},{"style":186},[2699],{"type":100,"value":2700},"use cache: private",{"type":94,"tag":146,"props":2702,"children":2703},{"style":159},[2704],{"type":100,"value":194},{"type":94,"tag":2706,"props":2707,"children":2708},"table",{},[2709,2738],{"type":94,"tag":2710,"props":2711,"children":2712},"thead",{},[2713],{"type":94,"tag":2714,"props":2715,"children":2716},"tr",{},[2717,2723,2728,2733],{"type":94,"tag":2718,"props":2719,"children":2720},"th",{},[2721],{"type":100,"value":2722},"Variant",{"type":94,"tag":2718,"props":2724,"children":2725},{},[2726],{"type":100,"value":2727},"Shared across deployments?",{"type":94,"tag":2718,"props":2729,"children":2730},{},[2731],{"type":100,"value":2732},"Shared across users?",{"type":94,"tag":2718,"props":2734,"children":2735},{},[2736],{"type":100,"value":2737},"Use case",{"type":94,"tag":2739,"props":2740,"children":2741},"tbody",{},[2742,2769,2794],{"type":94,"tag":2714,"props":2743,"children":2744},{},[2745,2754,2759,2764],{"type":94,"tag":2746,"props":2747,"children":2748},"td",{},[2749],{"type":94,"tag":126,"props":2750,"children":2752},{"className":2751},[],[2753],{"type":100,"value":2379},{"type":94,"tag":2746,"props":2755,"children":2756},{},[2757],{"type":100,"value":2758},"No (per-deployment)",{"type":94,"tag":2746,"props":2760,"children":2761},{},[2762],{"type":100,"value":2763},"Yes",{"type":94,"tag":2746,"props":2765,"children":2766},{},[2767],{"type":100,"value":2768},"Default, most use cases",{"type":94,"tag":2714,"props":2770,"children":2771},{},[2772,2781,2785,2789],{"type":94,"tag":2746,"props":2773,"children":2774},{},[2775],{"type":94,"tag":126,"props":2776,"children":2778},{"className":2777},[],[2779],{"type":100,"value":2780},"'use cache: remote'",{"type":94,"tag":2746,"props":2782,"children":2783},{},[2784],{"type":100,"value":2763},{"type":94,"tag":2746,"props":2786,"children":2787},{},[2788],{"type":100,"value":2763},{"type":94,"tag":2746,"props":2790,"children":2791},{},[2792],{"type":100,"value":2793},"Expensive computations shared globally",{"type":94,"tag":2714,"props":2795,"children":2796},{},[2797,2806,2811,2815],{"type":94,"tag":2746,"props":2798,"children":2799},{},[2800],{"type":94,"tag":126,"props":2801,"children":2803},{"className":2802},[],[2804],{"type":100,"value":2805},"'use cache: private'",{"type":94,"tag":2746,"props":2807,"children":2808},{},[2809],{"type":100,"value":2810},"No",{"type":94,"tag":2746,"props":2812,"children":2813},{},[2814],{"type":100,"value":2810},{"type":94,"tag":2746,"props":2816,"children":2817},{},[2818],{"type":100,"value":2819},"User-specific cached data (e.g., profile)",{"type":94,"tag":729,"props":2821,"children":2823},{"id":2822},"cache-handler-configuration",[2824],{"type":100,"value":2825},"Cache Handler Configuration",{"type":94,"tag":103,"props":2827,"children":2828},{},[2829,2831,2837],{"type":100,"value":2830},"Next.js 16 uses ",{"type":94,"tag":126,"props":2832,"children":2834},{"className":2833},[],[2835],{"type":100,"value":2836},"cacheHandlers",{"type":100,"value":2838}," (plural) to configure separate handlers for different cache types:",{"type":94,"tag":135,"props":2840,"children":2842},{"className":137,"code":2841,"language":139,"meta":140,"style":140},"\u002F\u002F next.config.ts\nconst nextConfig = {\n  cacheHandlers: {\n    default: require.resolve('.\u002Fcache-handler-default.mjs'),\n    remote: require.resolve('.\u002Fcache-handler-remote.mjs'),\n    fetch: require.resolve('.\u002Fcache-handler-fetch.mjs'),\n  },\n}\n",[2843],{"type":94,"tag":126,"props":2844,"children":2845},{"__ignoreMap":140},[2846,2854,2875,2891,2943,2992,3041,3049],{"type":94,"tag":146,"props":2847,"children":2848},{"class":148,"line":149},[2849],{"type":94,"tag":146,"props":2850,"children":2851},{"style":865},[2852],{"type":100,"value":2853},"\u002F\u002F next.config.ts\n",{"type":94,"tag":146,"props":2855,"children":2856},{"class":148,"line":197},[2857,2862,2867,2871],{"type":94,"tag":146,"props":2858,"children":2859},{"style":249},[2860],{"type":100,"value":2861},"const",{"type":94,"tag":146,"props":2863,"children":2864},{"style":165},[2865],{"type":100,"value":2866}," nextConfig ",{"type":94,"tag":146,"props":2868,"children":2869},{"style":159},[2870],{"type":100,"value":1027},{"type":94,"tag":146,"props":2872,"children":2873},{"style":159},[2874],{"type":100,"value":338},{"type":94,"tag":146,"props":2876,"children":2877},{"class":148,"line":235},[2878,2883,2887],{"type":94,"tag":146,"props":2879,"children":2880},{"style":350},[2881],{"type":100,"value":2882},"  cacheHandlers",{"type":94,"tag":146,"props":2884,"children":2885},{"style":159},[2886],{"type":100,"value":262},{"type":94,"tag":146,"props":2888,"children":2889},{"style":159},[2890],{"type":100,"value":338},{"type":94,"tag":146,"props":2892,"children":2893},{"class":148,"line":245},[2894,2899,2903,2908,2912,2917,2921,2925,2930,2934,2938],{"type":94,"tag":146,"props":2895,"children":2896},{"style":350},[2897],{"type":100,"value":2898},"    default",{"type":94,"tag":146,"props":2900,"children":2901},{"style":159},[2902],{"type":100,"value":262},{"type":94,"tag":146,"props":2904,"children":2905},{"style":165},[2906],{"type":100,"value":2907}," require",{"type":94,"tag":146,"props":2909,"children":2910},{"style":159},[2911],{"type":100,"value":404},{"type":94,"tag":146,"props":2913,"children":2914},{"style":325},[2915],{"type":100,"value":2916},"resolve",{"type":94,"tag":146,"props":2918,"children":2919},{"style":165},[2920],{"type":100,"value":385},{"type":94,"tag":146,"props":2922,"children":2923},{"style":159},[2924],{"type":100,"value":1720},{"type":94,"tag":146,"props":2926,"children":2927},{"style":186},[2928],{"type":100,"value":2929},".\u002Fcache-handler-default.mjs",{"type":94,"tag":146,"props":2931,"children":2932},{"style":159},[2933],{"type":100,"value":1720},{"type":94,"tag":146,"props":2935,"children":2936},{"style":165},[2937],{"type":100,"value":1626},{"type":94,"tag":146,"props":2939,"children":2940},{"style":159},[2941],{"type":100,"value":2942},",\n",{"type":94,"tag":146,"props":2944,"children":2945},{"class":148,"line":42},[2946,2951,2955,2959,2963,2967,2971,2975,2980,2984,2988],{"type":94,"tag":146,"props":2947,"children":2948},{"style":350},[2949],{"type":100,"value":2950},"    remote",{"type":94,"tag":146,"props":2952,"children":2953},{"style":159},[2954],{"type":100,"value":262},{"type":94,"tag":146,"props":2956,"children":2957},{"style":165},[2958],{"type":100,"value":2907},{"type":94,"tag":146,"props":2960,"children":2961},{"style":159},[2962],{"type":100,"value":404},{"type":94,"tag":146,"props":2964,"children":2965},{"style":325},[2966],{"type":100,"value":2916},{"type":94,"tag":146,"props":2968,"children":2969},{"style":165},[2970],{"type":100,"value":385},{"type":94,"tag":146,"props":2972,"children":2973},{"style":159},[2974],{"type":100,"value":1720},{"type":94,"tag":146,"props":2976,"children":2977},{"style":186},[2978],{"type":100,"value":2979},".\u002Fcache-handler-remote.mjs",{"type":94,"tag":146,"props":2981,"children":2982},{"style":159},[2983],{"type":100,"value":1720},{"type":94,"tag":146,"props":2985,"children":2986},{"style":165},[2987],{"type":100,"value":1626},{"type":94,"tag":146,"props":2989,"children":2990},{"style":159},[2991],{"type":100,"value":2942},{"type":94,"tag":146,"props":2993,"children":2994},{"class":148,"line":89},[2995,3000,3004,3008,3012,3016,3020,3024,3029,3033,3037],{"type":94,"tag":146,"props":2996,"children":2997},{"style":350},[2998],{"type":100,"value":2999},"    fetch",{"type":94,"tag":146,"props":3001,"children":3002},{"style":159},[3003],{"type":100,"value":262},{"type":94,"tag":146,"props":3005,"children":3006},{"style":165},[3007],{"type":100,"value":2907},{"type":94,"tag":146,"props":3009,"children":3010},{"style":159},[3011],{"type":100,"value":404},{"type":94,"tag":146,"props":3013,"children":3014},{"style":325},[3015],{"type":100,"value":2916},{"type":94,"tag":146,"props":3017,"children":3018},{"style":165},[3019],{"type":100,"value":385},{"type":94,"tag":146,"props":3021,"children":3022},{"style":159},[3023],{"type":100,"value":1720},{"type":94,"tag":146,"props":3025,"children":3026},{"style":186},[3027],{"type":100,"value":3028},".\u002Fcache-handler-fetch.mjs",{"type":94,"tag":146,"props":3030,"children":3031},{"style":159},[3032],{"type":100,"value":1720},{"type":94,"tag":146,"props":3034,"children":3035},{"style":165},[3036],{"type":100,"value":1626},{"type":94,"tag":146,"props":3038,"children":3039},{"style":159},[3040],{"type":100,"value":2942},{"type":94,"tag":146,"props":3042,"children":3043},{"class":148,"line":341},[3044],{"type":94,"tag":146,"props":3045,"children":3046},{"style":159},[3047],{"type":100,"value":3048},"  },\n",{"type":94,"tag":146,"props":3050,"children":3051},{"class":148,"line":430},[3052],{"type":94,"tag":146,"props":3053,"children":3054},{"style":159},[3055],{"type":100,"value":450},{"type":94,"tag":103,"props":3057,"children":3058},{},[3059,3064,3066,3071,3073,3079,3081,3087,3088,3094,3095,3101,3103,3108],{"type":94,"tag":498,"props":3060,"children":3061},{},[3062],{"type":100,"value":3063},"Important",{"type":100,"value":3065},": ",{"type":94,"tag":126,"props":3067,"children":3069},{"className":3068},[],[3070],{"type":100,"value":2836},{"type":100,"value":3072}," (plural, Next.js 16+) replaces ",{"type":94,"tag":126,"props":3074,"children":3076},{"className":3075},[],[3077],{"type":100,"value":3078},"cacheHandler",{"type":100,"value":3080}," (singular, Next.js 15). The singular form configured one handler for all cache types. The plural form allows per-type handlers (",{"type":94,"tag":126,"props":3082,"children":3084},{"className":3083},[],[3085],{"type":100,"value":3086},"default",{"type":100,"value":463},{"type":94,"tag":126,"props":3089,"children":3091},{"className":3090},[],[3092],{"type":100,"value":3093},"remote",{"type":100,"value":463},{"type":94,"tag":126,"props":3096,"children":3098},{"className":3097},[],[3099],{"type":100,"value":3100},"fetch",{"type":100,"value":3102},"). Using the old singular ",{"type":94,"tag":126,"props":3104,"children":3106},{"className":3105},[],[3107],{"type":100,"value":3078},{"type":100,"value":3109}," in Next.js 16 triggers a deprecation warning.",{"type":94,"tag":729,"props":3111,"children":3113},{"id":3112},"cache-invalidation",[3114],{"type":100,"value":3115},"Cache Invalidation",{"type":94,"tag":103,"props":3117,"children":3118},{},[3119,3121,3127,3129,3135],{"type":100,"value":3120},"Invalidate with ",{"type":94,"tag":126,"props":3122,"children":3124},{"className":3123},[],[3125],{"type":100,"value":3126},"updateTag('users')",{"type":100,"value":3128}," from a Server Action (immediate expiration, Server Actions only) or ",{"type":94,"tag":126,"props":3130,"children":3132},{"className":3131},[],[3133],{"type":100,"value":3134},"revalidateTag('users', 'max')",{"type":100,"value":3136}," for stale-while-revalidate from Server Actions or Route Handlers.",{"type":94,"tag":103,"props":3138,"children":3139},{},[3140,3144,3146,3152,3154,3160,3162,3168,3169,3175,3176,3182],{"type":94,"tag":498,"props":3141,"children":3142},{},[3143],{"type":100,"value":3063},{"type":100,"value":3145},": The single-argument ",{"type":94,"tag":126,"props":3147,"children":3149},{"className":3148},[],[3150],{"type":100,"value":3151},"revalidateTag(tag)",{"type":100,"value":3153}," is deprecated in Next.js 16. Always pass a ",{"type":94,"tag":126,"props":3155,"children":3157},{"className":3156},[],[3158],{"type":100,"value":3159},"cacheLife",{"type":100,"value":3161}," profile as the second argument (e.g., ",{"type":94,"tag":126,"props":3163,"children":3165},{"className":3164},[],[3166],{"type":100,"value":3167},"'max'",{"type":100,"value":463},{"type":94,"tag":126,"props":3170,"children":3172},{"className":3171},[],[3173],{"type":100,"value":3174},"'hours'",{"type":100,"value":463},{"type":94,"tag":126,"props":3177,"children":3179},{"className":3178},[],[3180],{"type":100,"value":3181},"'days'",{"type":100,"value":3183},").",{"type":94,"tag":2706,"props":3185,"children":3186},{},[3187,3208],{"type":94,"tag":2710,"props":3188,"children":3189},{},[3190],{"type":94,"tag":2714,"props":3191,"children":3192},{},[3193,3198,3203],{"type":94,"tag":2718,"props":3194,"children":3195},{},[3196],{"type":100,"value":3197},"Function",{"type":94,"tag":2718,"props":3199,"children":3200},{},[3201],{"type":100,"value":3202},"Context",{"type":94,"tag":2718,"props":3204,"children":3205},{},[3206],{"type":100,"value":3207},"Behavior",{"type":94,"tag":2739,"props":3209,"children":3210},{},[3211,3233,3255],{"type":94,"tag":2714,"props":3212,"children":3213},{},[3214,3223,3228],{"type":94,"tag":2746,"props":3215,"children":3216},{},[3217],{"type":94,"tag":126,"props":3218,"children":3220},{"className":3219},[],[3221],{"type":100,"value":3222},"updateTag(tag)",{"type":94,"tag":2746,"props":3224,"children":3225},{},[3226],{"type":100,"value":3227},"Server Actions only",{"type":94,"tag":2746,"props":3229,"children":3230},{},[3231],{"type":100,"value":3232},"Immediate expiration, read-your-own-writes",{"type":94,"tag":2714,"props":3234,"children":3235},{},[3236,3245,3250],{"type":94,"tag":2746,"props":3237,"children":3238},{},[3239],{"type":94,"tag":126,"props":3240,"children":3242},{"className":3241},[],[3243],{"type":100,"value":3244},"revalidateTag(tag, 'max')",{"type":94,"tag":2746,"props":3246,"children":3247},{},[3248],{"type":100,"value":3249},"Server Actions + Route Handlers",{"type":94,"tag":2746,"props":3251,"children":3252},{},[3253],{"type":100,"value":3254},"Stale-while-revalidate (recommended)",{"type":94,"tag":2714,"props":3256,"children":3257},{},[3258,3267,3272],{"type":94,"tag":2746,"props":3259,"children":3260},{},[3261],{"type":94,"tag":126,"props":3262,"children":3264},{"className":3263},[],[3265],{"type":100,"value":3266},"revalidateTag(tag, { expire: 0 })",{"type":94,"tag":2746,"props":3268,"children":3269},{},[3270],{"type":100,"value":3271},"Route Handlers (webhooks)",{"type":94,"tag":2746,"props":3273,"children":3274},{},[3275],{"type":100,"value":3276},"Immediate expiration from external triggers",{"type":94,"tag":109,"props":3278,"children":3280},{"id":3279},"proxy-formerly-middleware",[3281],{"type":100,"value":3282},"Proxy (formerly Middleware)",{"type":94,"tag":103,"props":3284,"children":3285},{},[3286,3288,3294,3296,3302,3304,3309],{"type":100,"value":3287},"In Next.js 16, ",{"type":94,"tag":126,"props":3289,"children":3291},{"className":3290},[],[3292],{"type":100,"value":3293},"middleware.ts",{"type":100,"value":3295}," is renamed to ",{"type":94,"tag":126,"props":3297,"children":3299},{"className":3298},[],[3300],{"type":100,"value":3301},"proxy.ts",{"type":100,"value":3303},". It runs ",{"type":94,"tag":498,"props":3305,"children":3306},{},[3307],{"type":100,"value":3308},"exclusively on the Node.js runtime",{"type":100,"value":3310}," — the Edge runtime is not supported in proxy and cannot be configured.",{"type":94,"tag":103,"props":3312,"children":3313},{},[3314,3319,3321,3326,3328,3333],{"type":94,"tag":498,"props":3315,"children":3316},{},[3317],{"type":100,"value":3318},"File location",{"type":100,"value":3320},": Place ",{"type":94,"tag":126,"props":3322,"children":3324},{"className":3323},[],[3325],{"type":100,"value":3301},{"type":100,"value":3327}," at the same level as your ",{"type":94,"tag":126,"props":3329,"children":3331},{"className":3330},[],[3332],{"type":100,"value":1352},{"type":100,"value":3334}," directory:",{"type":94,"tag":1300,"props":3336,"children":3337},{},[3338,3350],{"type":94,"tag":818,"props":3339,"children":3340},{},[3341,3343,3348],{"type":100,"value":3342},"Standard project: ",{"type":94,"tag":126,"props":3344,"children":3346},{"className":3345},[],[3347],{"type":100,"value":3301},{"type":100,"value":3349}," at project root",{"type":94,"tag":818,"props":3351,"children":3352},{},[3353,3355,3361,3363,3369,3371,3377,3379,3385,3387,3392],{"type":100,"value":3354},"With ",{"type":94,"tag":126,"props":3356,"children":3358},{"className":3357},[],[3359],{"type":100,"value":3360},"--src-dir",{"type":100,"value":3362}," (or ",{"type":94,"tag":126,"props":3364,"children":3366},{"className":3365},[],[3367],{"type":100,"value":3368},"srcDir: true",{"type":100,"value":3370},"): ",{"type":94,"tag":126,"props":3372,"children":3374},{"className":3373},[],[3375],{"type":100,"value":3376},"src\u002Fproxy.ts",{"type":100,"value":3378}," (inside ",{"type":94,"tag":126,"props":3380,"children":3382},{"className":3381},[],[3383],{"type":100,"value":3384},"src\u002F",{"type":100,"value":3386},", alongside ",{"type":94,"tag":126,"props":3388,"children":3390},{"className":3389},[],[3391],{"type":100,"value":1352},{"type":100,"value":1626},{"type":94,"tag":103,"props":3394,"children":3395},{},[3396,3398,3403],{"type":100,"value":3397},"If you place ",{"type":94,"tag":126,"props":3399,"children":3401},{"className":3400},[],[3402],{"type":100,"value":3301},{"type":100,"value":3404}," in the wrong location, Next.js will silently ignore it and no request interception will occur.",{"type":94,"tag":103,"props":3406,"children":3407},{},[3408,3413],{"type":94,"tag":498,"props":3409,"children":3410},{},[3411],{"type":100,"value":3412},"Constraints",{"type":100,"value":262},{"type":94,"tag":1300,"props":3415,"children":3416},{},[3417,3442,3462,3467],{"type":94,"tag":818,"props":3418,"children":3419},{},[3420,3422,3427,3428,3433,3435,3440],{"type":100,"value":3421},"Proxy can only ",{"type":94,"tag":498,"props":3423,"children":3424},{},[3425],{"type":100,"value":3426},"rewrite",{"type":100,"value":463},{"type":94,"tag":498,"props":3429,"children":3430},{},[3431],{"type":100,"value":3432},"redirect",{"type":100,"value":3434},", or ",{"type":94,"tag":498,"props":3436,"children":3437},{},[3438],{"type":100,"value":3439},"modify headers",{"type":100,"value":3441}," — it cannot return full response bodies. Use Route Handlers for that.",{"type":94,"tag":818,"props":3443,"children":3444},{},[3445,3447,3453,3455,3461],{"type":100,"value":3446},"Config flags are renamed: ",{"type":94,"tag":126,"props":3448,"children":3450},{"className":3449},[],[3451],{"type":100,"value":3452},"skipMiddlewareUrlNormalize",{"type":100,"value":3454}," → ",{"type":94,"tag":126,"props":3456,"children":3458},{"className":3457},[],[3459],{"type":100,"value":3460},"skipProxyUrlNormalize",{"type":100,"value":404},{"type":94,"tag":818,"props":3463,"children":3464},{},[3465],{"type":100,"value":3466},"Keep it light: use for high-level traffic control (e.g., redirecting users without a session cookie). Detailed auth should live in Server Components or Server Actions.",{"type":94,"tag":818,"props":3468,"children":3469},{},[3470,3475,3477,3482,3484,3489],{"type":94,"tag":498,"props":3471,"children":3472},{},[3473],{"type":100,"value":3474},"OpenNext note",{"type":100,"value":3476},": OpenNext doesn't support ",{"type":94,"tag":126,"props":3478,"children":3480},{"className":3479},[],[3481],{"type":100,"value":3301},{"type":100,"value":3483}," yet — keep using ",{"type":94,"tag":126,"props":3485,"children":3487},{"className":3486},[],[3488],{"type":100,"value":3293},{"type":100,"value":3490}," if self-hosting with OpenNext.",{"type":94,"tag":135,"props":3492,"children":3494},{"className":137,"code":3493,"language":139,"meta":140,"style":140},"\u002F\u002F proxy.ts (or src\u002Fproxy.ts if using src directory)\nimport type { NextRequest } from 'next\u002Fserver'\n\nexport function proxy(request: NextRequest) {\n  \u002F\u002F Rewrite, redirect, set headers, etc.\n}\n\nexport const config = { matcher: ['\u002Fdashboard\u002F:path*'] }\n",[3495],{"type":94,"tag":126,"props":3496,"children":3497},{"__ignoreMap":140},[3498,3506,3548,3555,3596,3604,3611,3618],{"type":94,"tag":146,"props":3499,"children":3500},{"class":148,"line":149},[3501],{"type":94,"tag":146,"props":3502,"children":3503},{"style":865},[3504],{"type":100,"value":3505},"\u002F\u002F proxy.ts (or src\u002Fproxy.ts if using src directory)\n",{"type":94,"tag":146,"props":3507,"children":3508},{"class":148,"line":197},[3509,3513,3518,3522,3527,3531,3535,3539,3544],{"type":94,"tag":146,"props":3510,"children":3511},{"style":153},[3512],{"type":100,"value":156},{"type":94,"tag":146,"props":3514,"children":3515},{"style":153},[3516],{"type":100,"value":3517}," type",{"type":94,"tag":146,"props":3519,"children":3520},{"style":159},[3521],{"type":100,"value":162},{"type":94,"tag":146,"props":3523,"children":3524},{"style":165},[3525],{"type":100,"value":3526}," NextRequest",{"type":94,"tag":146,"props":3528,"children":3529},{"style":159},[3530],{"type":100,"value":173},{"type":94,"tag":146,"props":3532,"children":3533},{"style":153},[3534],{"type":100,"value":178},{"type":94,"tag":146,"props":3536,"children":3537},{"style":159},[3538],{"type":100,"value":183},{"type":94,"tag":146,"props":3540,"children":3541},{"style":186},[3542],{"type":100,"value":3543},"next\u002Fserver",{"type":94,"tag":146,"props":3545,"children":3546},{"style":159},[3547],{"type":100,"value":194},{"type":94,"tag":146,"props":3549,"children":3550},{"class":148,"line":235},[3551],{"type":94,"tag":146,"props":3552,"children":3553},{"emptyLinePlaceholder":239},[3554],{"type":100,"value":242},{"type":94,"tag":146,"props":3556,"children":3557},{"class":148,"line":245},[3558,3562,3566,3571,3575,3580,3584,3588,3592],{"type":94,"tag":146,"props":3559,"children":3560},{"style":153},[3561],{"type":100,"value":317},{"type":94,"tag":146,"props":3563,"children":3564},{"style":249},[3565],{"type":100,"value":322},{"type":94,"tag":146,"props":3567,"children":3568},{"style":325},[3569],{"type":100,"value":3570}," proxy",{"type":94,"tag":146,"props":3572,"children":3573},{"style":159},[3574],{"type":100,"value":385},{"type":94,"tag":146,"props":3576,"children":3577},{"style":2121},[3578],{"type":100,"value":3579},"request",{"type":94,"tag":146,"props":3581,"children":3582},{"style":159},[3583],{"type":100,"value":262},{"type":94,"tag":146,"props":3585,"children":3586},{"style":265},[3587],{"type":100,"value":3526},{"type":94,"tag":146,"props":3589,"children":3590},{"style":159},[3591],{"type":100,"value":1626},{"type":94,"tag":146,"props":3593,"children":3594},{"style":159},[3595],{"type":100,"value":338},{"type":94,"tag":146,"props":3597,"children":3598},{"class":148,"line":42},[3599],{"type":94,"tag":146,"props":3600,"children":3601},{"style":865},[3602],{"type":100,"value":3603},"  \u002F\u002F Rewrite, redirect, set headers, etc.\n",{"type":94,"tag":146,"props":3605,"children":3606},{"class":148,"line":89},[3607],{"type":94,"tag":146,"props":3608,"children":3609},{"style":159},[3610],{"type":100,"value":450},{"type":94,"tag":146,"props":3612,"children":3613},{"class":148,"line":341},[3614],{"type":94,"tag":146,"props":3615,"children":3616},{"emptyLinePlaceholder":239},[3617],{"type":100,"value":242},{"type":94,"tag":146,"props":3619,"children":3620},{"class":148,"line":430},[3621,3625,3630,3635,3639,3643,3648,3652,3656,3660,3665,3669,3674],{"type":94,"tag":146,"props":3622,"children":3623},{"style":153},[3624],{"type":100,"value":317},{"type":94,"tag":146,"props":3626,"children":3627},{"style":249},[3628],{"type":100,"value":3629}," const",{"type":94,"tag":146,"props":3631,"children":3632},{"style":165},[3633],{"type":100,"value":3634}," config ",{"type":94,"tag":146,"props":3636,"children":3637},{"style":159},[3638],{"type":100,"value":1027},{"type":94,"tag":146,"props":3640,"children":3641},{"style":159},[3642],{"type":100,"value":162},{"type":94,"tag":146,"props":3644,"children":3645},{"style":350},[3646],{"type":100,"value":3647}," matcher",{"type":94,"tag":146,"props":3649,"children":3650},{"style":159},[3651],{"type":100,"value":262},{"type":94,"tag":146,"props":3653,"children":3654},{"style":165},[3655],{"type":100,"value":1897},{"type":94,"tag":146,"props":3657,"children":3658},{"style":159},[3659],{"type":100,"value":1720},{"type":94,"tag":146,"props":3661,"children":3662},{"style":186},[3663],{"type":100,"value":3664},"\u002Fdashboard\u002F:path*",{"type":94,"tag":146,"props":3666,"children":3667},{"style":159},[3668],{"type":100,"value":1720},{"type":94,"tag":146,"props":3670,"children":3671},{"style":165},[3672],{"type":100,"value":3673},"] ",{"type":94,"tag":146,"props":3675,"children":3676},{"style":159},[3677],{"type":100,"value":450},{"type":94,"tag":109,"props":3679,"children":3681},{"id":3680},"upgrading",[3682],{"type":100,"value":3683},"Upgrading",{"type":94,"tag":103,"props":3685,"children":3686},{},[3687],{"type":100,"value":3688},"Use the built-in upgrade command (available since 16.1.0):",{"type":94,"tag":135,"props":3690,"children":3692},{"className":515,"code":3691,"language":517,"meta":140,"style":140},"pnpm next upgrade        # or npm\u002Fyarn\u002Fbun equivalent\n",[3693],{"type":94,"tag":126,"props":3694,"children":3695},{"__ignoreMap":140},[3696],{"type":94,"tag":146,"props":3697,"children":3698},{"class":148,"line":149},[3699,3704,3709,3714],{"type":94,"tag":146,"props":3700,"children":3701},{"style":265},[3702],{"type":100,"value":3703},"pnpm",{"type":94,"tag":146,"props":3705,"children":3706},{"style":186},[3707],{"type":100,"value":3708}," next",{"type":94,"tag":146,"props":3710,"children":3711},{"style":186},[3712],{"type":100,"value":3713}," upgrade",{"type":94,"tag":146,"props":3715,"children":3716},{"style":865},[3717],{"type":100,"value":3718},"        # or npm\u002Fyarn\u002Fbun equivalent\n",{"type":94,"tag":103,"props":3720,"children":3721},{},[3722,3724],{"type":100,"value":3723},"For versions before 16.1.0: ",{"type":94,"tag":126,"props":3725,"children":3727},{"className":3726},[],[3728],{"type":100,"value":3729},"npx @next\u002Fcodemod@canary upgrade latest",{"type":94,"tag":103,"props":3731,"children":3732},{},[3733,3735,3740],{"type":100,"value":3734},"If your AI coding assistant supports MCP, the ",{"type":94,"tag":498,"props":3736,"children":3737},{},[3738],{"type":100,"value":3739},"Next.js DevTools MCP",{"type":100,"value":3741}," can automate upgrade and migration tasks.",{"type":94,"tag":109,"props":3743,"children":3745},{"id":3744},"whats-new-in-nextjs-161",[3746],{"type":100,"value":3747},"What's New in Next.js 16.1",{"type":94,"tag":103,"props":3749,"children":3750},{},[3751],{"type":100,"value":3752},"Next.js 16.1 (December 2025, latest stable patch: 16.1.6) builds on 16.0 with developer experience improvements:",{"type":94,"tag":814,"props":3754,"children":3755},{},[3756,3781,3805,3827,3849,3867],{"type":94,"tag":818,"props":3757,"children":3758},{},[3759,3764,3766,3772,3774,3779],{"type":94,"tag":498,"props":3760,"children":3761},{},[3762],{"type":100,"value":3763},"Turbopack File System Caching (Stable)",{"type":100,"value":3765}," — Compiler artifacts are now cached on disk between ",{"type":94,"tag":126,"props":3767,"children":3769},{"className":3768},[],[3770],{"type":100,"value":3771},"next dev",{"type":100,"value":3773}," restarts, delivering up to 14× faster startup on large projects. Enabled by default, no config needed. File system caching for ",{"type":94,"tag":126,"props":3775,"children":3777},{"className":3776},[],[3778],{"type":100,"value":131},{"type":100,"value":3780}," is planned next.",{"type":94,"tag":818,"props":3782,"children":3783},{},[3784,3789,3791,3797,3798,3804],{"type":94,"tag":498,"props":3785,"children":3786},{},[3787],{"type":100,"value":3788},"Bundle Analyzer (Experimental)",{"type":100,"value":3790}," — New built-in bundle analyzer works with Turbopack. Offers route-specific filtering, import tracing, and RSC boundary analysis to identify bloated dependencies in both server and client bundles. Enable with ",{"type":94,"tag":126,"props":3792,"children":3794},{"className":3793},[],[3795],{"type":100,"value":3796},"experimental.bundleAnalyzer: true",{"type":100,"value":761},{"type":94,"tag":126,"props":3799,"children":3801},{"className":3800},[],[3802],{"type":100,"value":3803},"next.config",{"type":100,"value":404},{"type":94,"tag":818,"props":3806,"children":3807},{},[3808,3817,3819,3825],{"type":94,"tag":498,"props":3809,"children":3810},{},[3811],{"type":94,"tag":126,"props":3812,"children":3814},{"className":3813},[],[3815],{"type":100,"value":3816},"next dev --inspect",{"type":100,"value":3818}," — Debug your dev server without global ",{"type":94,"tag":126,"props":3820,"children":3822},{"className":3821},[],[3823],{"type":100,"value":3824},"NODE_OPTIONS=--inspect",{"type":100,"value":3826},". Applies the inspector only to the relevant process.",{"type":94,"tag":818,"props":3828,"children":3829},{},[3830,3841,3843,3848],{"type":94,"tag":498,"props":3831,"children":3832},{},[3833,3839],{"type":94,"tag":126,"props":3834,"children":3836},{"className":3835},[],[3837],{"type":100,"value":3838},"next upgrade",{"type":100,"value":3840}," command",{"type":100,"value":3842}," — New CLI command to simplify version upgrades: ",{"type":94,"tag":126,"props":3844,"children":3846},{"className":3845},[],[3847],{"type":100,"value":3729},{"type":100,"value":404},{"type":94,"tag":818,"props":3850,"children":3851},{},[3852,3857,3859,3865],{"type":94,"tag":498,"props":3853,"children":3854},{},[3855],{"type":100,"value":3856},"Transitive External Dependencies",{"type":100,"value":3858}," — Turbopack correctly resolves and externalizes transitive deps in ",{"type":94,"tag":126,"props":3860,"children":3862},{"className":3861},[],[3863],{"type":100,"value":3864},"serverExternalPackages",{"type":100,"value":3866}," without extra config.",{"type":94,"tag":818,"props":3868,"children":3869},{},[3870,3875,3877,3883],{"type":94,"tag":498,"props":3871,"children":3872},{},[3873],{"type":100,"value":3874},"20 MB smaller installs",{"type":100,"value":3876}," — Streamlined Turbopack caching layer reduces ",{"type":94,"tag":126,"props":3878,"children":3880},{"className":3879},[],[3881],{"type":100,"value":3882},"node_modules",{"type":100,"value":3884}," footprint.",{"type":94,"tag":109,"props":3886,"children":3888},{"id":3887},"react-192-features",[3889],{"type":100,"value":3890},"React 19.2 Features",{"type":94,"tag":103,"props":3892,"children":3893},{},[3894],{"type":100,"value":3895},"Next.js 16+ uses React 19.2. These features are available in App Router applications:",{"type":94,"tag":729,"props":3897,"children":3899},{"id":3898},"useeffectevent-hook",[3900,3906],{"type":94,"tag":126,"props":3901,"children":3903},{"className":3902},[],[3904],{"type":100,"value":3905},"useEffectEvent",{"type":100,"value":3907}," Hook",{"type":94,"tag":103,"props":3909,"children":3910},{},[3911],{"type":100,"value":3912},"Creates a stable function that always accesses the latest props and state without triggering effect re-runs. Use when your effect needs to read a value but shouldn't re-run when that value changes:",{"type":94,"tag":135,"props":3914,"children":3916},{"className":990,"code":3915,"language":992,"meta":140,"style":140},"'use client'\nimport { useEffect, useEffectEvent } from 'react'\n\nfunction ChatRoom({ roomId, theme }: { roomId: string; theme: string }) {\n  const onConnected = useEffectEvent(() => {\n    showNotification(`Connected to ${roomId}`, theme) \u002F\u002F reads latest theme\n  })\n\n  useEffect(() => {\n    const connection = createConnection(roomId)\n    connection.on('connected', onConnected)\n    connection.connect()\n    return () => connection.disconnect()\n  }, [roomId]) \u002F\u002F theme is NOT a dependency — onConnected reads it via useEffectEvent\n}\n",[3917],{"type":94,"tag":126,"props":3918,"children":3919},{"__ignoreMap":140},[3920,3935,3980,3987,4067,4103,4155,4167,4174,4198,4233,4280,4302,4337,4364],{"type":94,"tag":146,"props":3921,"children":3922},{"class":148,"line":149},[3923,3927,3931],{"type":94,"tag":146,"props":3924,"children":3925},{"style":159},[3926],{"type":100,"value":1720},{"type":94,"tag":146,"props":3928,"children":3929},{"style":186},[3930],{"type":100,"value":1814},{"type":94,"tag":146,"props":3932,"children":3933},{"style":159},[3934],{"type":100,"value":194},{"type":94,"tag":146,"props":3936,"children":3937},{"class":148,"line":197},[3938,3942,3946,3951,3955,3960,3964,3968,3972,3976],{"type":94,"tag":146,"props":3939,"children":3940},{"style":153},[3941],{"type":100,"value":156},{"type":94,"tag":146,"props":3943,"children":3944},{"style":159},[3945],{"type":100,"value":162},{"type":94,"tag":146,"props":3947,"children":3948},{"style":165},[3949],{"type":100,"value":3950}," useEffect",{"type":94,"tag":146,"props":3952,"children":3953},{"style":159},[3954],{"type":100,"value":881},{"type":94,"tag":146,"props":3956,"children":3957},{"style":165},[3958],{"type":100,"value":3959}," useEffectEvent",{"type":94,"tag":146,"props":3961,"children":3962},{"style":159},[3963],{"type":100,"value":173},{"type":94,"tag":146,"props":3965,"children":3966},{"style":153},[3967],{"type":100,"value":178},{"type":94,"tag":146,"props":3969,"children":3970},{"style":159},[3971],{"type":100,"value":183},{"type":94,"tag":146,"props":3973,"children":3974},{"style":186},[3975],{"type":100,"value":14},{"type":94,"tag":146,"props":3977,"children":3978},{"style":159},[3979],{"type":100,"value":194},{"type":94,"tag":146,"props":3981,"children":3982},{"class":148,"line":235},[3983],{"type":94,"tag":146,"props":3984,"children":3985},{"emptyLinePlaceholder":239},[3986],{"type":100,"value":242},{"type":94,"tag":146,"props":3988,"children":3989},{"class":148,"line":245},[3990,3995,4000,4005,4010,4014,4019,4024,4028,4032,4036,4041,4046,4050,4054,4058,4063],{"type":94,"tag":146,"props":3991,"children":3992},{"style":249},[3993],{"type":100,"value":3994},"function",{"type":94,"tag":146,"props":3996,"children":3997},{"style":325},[3998],{"type":100,"value":3999}," ChatRoom",{"type":94,"tag":146,"props":4001,"children":4002},{"style":159},[4003],{"type":100,"value":4004},"({",{"type":94,"tag":146,"props":4006,"children":4007},{"style":2121},[4008],{"type":100,"value":4009}," roomId",{"type":94,"tag":146,"props":4011,"children":4012},{"style":159},[4013],{"type":100,"value":881},{"type":94,"tag":146,"props":4015,"children":4016},{"style":2121},[4017],{"type":100,"value":4018}," theme",{"type":94,"tag":146,"props":4020,"children":4021},{"style":159},[4022],{"type":100,"value":4023}," }:",{"type":94,"tag":146,"props":4025,"children":4026},{"style":159},[4027],{"type":100,"value":162},{"type":94,"tag":146,"props":4029,"children":4030},{"style":350},[4031],{"type":100,"value":4009},{"type":94,"tag":146,"props":4033,"children":4034},{"style":159},[4035],{"type":100,"value":262},{"type":94,"tag":146,"props":4037,"children":4038},{"style":265},[4039],{"type":100,"value":4040}," string",{"type":94,"tag":146,"props":4042,"children":4043},{"style":159},[4044],{"type":100,"value":4045},";",{"type":94,"tag":146,"props":4047,"children":4048},{"style":350},[4049],{"type":100,"value":4018},{"type":94,"tag":146,"props":4051,"children":4052},{"style":159},[4053],{"type":100,"value":262},{"type":94,"tag":146,"props":4055,"children":4056},{"style":265},[4057],{"type":100,"value":4040},{"type":94,"tag":146,"props":4059,"children":4060},{"style":159},[4061],{"type":100,"value":4062}," })",{"type":94,"tag":146,"props":4064,"children":4065},{"style":159},[4066],{"type":100,"value":338},{"type":94,"tag":146,"props":4068,"children":4069},{"class":148,"line":42},[4070,4074,4079,4083,4087,4091,4095,4099],{"type":94,"tag":146,"props":4071,"children":4072},{"style":249},[4073],{"type":100,"value":1683},{"type":94,"tag":146,"props":4075,"children":4076},{"style":165},[4077],{"type":100,"value":4078}," onConnected",{"type":94,"tag":146,"props":4080,"children":4081},{"style":159},[4082],{"type":100,"value":297},{"type":94,"tag":146,"props":4084,"children":4085},{"style":325},[4086],{"type":100,"value":3959},{"type":94,"tag":146,"props":4088,"children":4089},{"style":350},[4090],{"type":100,"value":385},{"type":94,"tag":146,"props":4092,"children":4093},{"style":159},[4094],{"type":100,"value":333},{"type":94,"tag":146,"props":4096,"children":4097},{"style":249},[4098],{"type":100,"value":1969},{"type":94,"tag":146,"props":4100,"children":4101},{"style":159},[4102],{"type":100,"value":338},{"type":94,"tag":146,"props":4104,"children":4105},{"class":148,"line":89},[4106,4111,4115,4119,4124,4129,4134,4138,4142,4146,4150],{"type":94,"tag":146,"props":4107,"children":4108},{"style":325},[4109],{"type":100,"value":4110},"    showNotification",{"type":94,"tag":146,"props":4112,"children":4113},{"style":350},[4114],{"type":100,"value":385},{"type":94,"tag":146,"props":4116,"children":4117},{"style":159},[4118],{"type":100,"value":1260},{"type":94,"tag":146,"props":4120,"children":4121},{"style":186},[4122],{"type":100,"value":4123},"Connected to ",{"type":94,"tag":146,"props":4125,"children":4126},{"style":159},[4127],{"type":100,"value":4128},"${",{"type":94,"tag":146,"props":4130,"children":4131},{"style":165},[4132],{"type":100,"value":4133},"roomId",{"type":94,"tag":146,"props":4135,"children":4136},{"style":159},[4137],{"type":100,"value":1097},{"type":94,"tag":146,"props":4139,"children":4140},{"style":159},[4141],{"type":100,"value":881},{"type":94,"tag":146,"props":4143,"children":4144},{"style":165},[4145],{"type":100,"value":4018},{"type":94,"tag":146,"props":4147,"children":4148},{"style":350},[4149],{"type":100,"value":368},{"type":94,"tag":146,"props":4151,"children":4152},{"style":865},[4153],{"type":100,"value":4154},"\u002F\u002F reads latest theme\n",{"type":94,"tag":146,"props":4156,"children":4157},{"class":148,"line":341},[4158,4163],{"type":94,"tag":146,"props":4159,"children":4160},{"style":159},[4161],{"type":100,"value":4162},"  }",{"type":94,"tag":146,"props":4164,"children":4165},{"style":350},[4166],{"type":100,"value":1734},{"type":94,"tag":146,"props":4168,"children":4169},{"class":148,"line":430},[4170],{"type":94,"tag":146,"props":4171,"children":4172},{"emptyLinePlaceholder":239},[4173],{"type":100,"value":242},{"type":94,"tag":146,"props":4175,"children":4176},{"class":148,"line":444},[4177,4182,4186,4190,4194],{"type":94,"tag":146,"props":4178,"children":4179},{"style":325},[4180],{"type":100,"value":4181},"  useEffect",{"type":94,"tag":146,"props":4183,"children":4184},{"style":350},[4185],{"type":100,"value":385},{"type":94,"tag":146,"props":4187,"children":4188},{"style":159},[4189],{"type":100,"value":333},{"type":94,"tag":146,"props":4191,"children":4192},{"style":249},[4193],{"type":100,"value":1969},{"type":94,"tag":146,"props":4195,"children":4196},{"style":159},[4197],{"type":100,"value":338},{"type":94,"tag":146,"props":4199,"children":4201},{"class":148,"line":4200},10,[4202,4207,4212,4216,4221,4225,4229],{"type":94,"tag":146,"props":4203,"children":4204},{"style":249},[4205],{"type":100,"value":4206},"    const",{"type":94,"tag":146,"props":4208,"children":4209},{"style":165},[4210],{"type":100,"value":4211}," connection",{"type":94,"tag":146,"props":4213,"children":4214},{"style":159},[4215],{"type":100,"value":297},{"type":94,"tag":146,"props":4217,"children":4218},{"style":325},[4219],{"type":100,"value":4220}," createConnection",{"type":94,"tag":146,"props":4222,"children":4223},{"style":350},[4224],{"type":100,"value":385},{"type":94,"tag":146,"props":4226,"children":4227},{"style":165},[4228],{"type":100,"value":4133},{"type":94,"tag":146,"props":4230,"children":4231},{"style":350},[4232],{"type":100,"value":1734},{"type":94,"tag":146,"props":4234,"children":4236},{"class":148,"line":4235},11,[4237,4242,4246,4251,4255,4259,4264,4268,4272,4276],{"type":94,"tag":146,"props":4238,"children":4239},{"style":165},[4240],{"type":100,"value":4241},"    connection",{"type":94,"tag":146,"props":4243,"children":4244},{"style":159},[4245],{"type":100,"value":404},{"type":94,"tag":146,"props":4247,"children":4248},{"style":325},[4249],{"type":100,"value":4250},"on",{"type":94,"tag":146,"props":4252,"children":4253},{"style":350},[4254],{"type":100,"value":385},{"type":94,"tag":146,"props":4256,"children":4257},{"style":159},[4258],{"type":100,"value":1720},{"type":94,"tag":146,"props":4260,"children":4261},{"style":186},[4262],{"type":100,"value":4263},"connected",{"type":94,"tag":146,"props":4265,"children":4266},{"style":159},[4267],{"type":100,"value":1720},{"type":94,"tag":146,"props":4269,"children":4270},{"style":159},[4271],{"type":100,"value":881},{"type":94,"tag":146,"props":4273,"children":4274},{"style":165},[4275],{"type":100,"value":4078},{"type":94,"tag":146,"props":4277,"children":4278},{"style":350},[4279],{"type":100,"value":1734},{"type":94,"tag":146,"props":4281,"children":4283},{"class":148,"line":4282},12,[4284,4288,4292,4297],{"type":94,"tag":146,"props":4285,"children":4286},{"style":165},[4287],{"type":100,"value":4241},{"type":94,"tag":146,"props":4289,"children":4290},{"style":159},[4291],{"type":100,"value":404},{"type":94,"tag":146,"props":4293,"children":4294},{"style":325},[4295],{"type":100,"value":4296},"connect",{"type":94,"tag":146,"props":4298,"children":4299},{"style":350},[4300],{"type":100,"value":4301},"()\n",{"type":94,"tag":146,"props":4303,"children":4305},{"class":148,"line":4304},13,[4306,4311,4316,4320,4324,4328,4333],{"type":94,"tag":146,"props":4307,"children":4308},{"style":153},[4309],{"type":100,"value":4310},"    return",{"type":94,"tag":146,"props":4312,"children":4313},{"style":159},[4314],{"type":100,"value":4315}," ()",{"type":94,"tag":146,"props":4317,"children":4318},{"style":249},[4319],{"type":100,"value":1969},{"type":94,"tag":146,"props":4321,"children":4322},{"style":165},[4323],{"type":100,"value":4211},{"type":94,"tag":146,"props":4325,"children":4326},{"style":159},[4327],{"type":100,"value":404},{"type":94,"tag":146,"props":4329,"children":4330},{"style":325},[4331],{"type":100,"value":4332},"disconnect",{"type":94,"tag":146,"props":4334,"children":4335},{"style":350},[4336],{"type":100,"value":4301},{"type":94,"tag":146,"props":4338,"children":4340},{"class":148,"line":4339},14,[4341,4346,4350,4354,4359],{"type":94,"tag":146,"props":4342,"children":4343},{"style":159},[4344],{"type":100,"value":4345},"  },",{"type":94,"tag":146,"props":4347,"children":4348},{"style":350},[4349],{"type":100,"value":1897},{"type":94,"tag":146,"props":4351,"children":4352},{"style":165},[4353],{"type":100,"value":4133},{"type":94,"tag":146,"props":4355,"children":4356},{"style":350},[4357],{"type":100,"value":4358},"]) ",{"type":94,"tag":146,"props":4360,"children":4361},{"style":865},[4362],{"type":100,"value":4363},"\u002F\u002F theme is NOT a dependency — onConnected reads it via useEffectEvent\n",{"type":94,"tag":146,"props":4365,"children":4367},{"class":148,"line":4366},15,[4368],{"type":94,"tag":146,"props":4369,"children":4370},{"style":159},[4371],{"type":100,"value":450},{"type":94,"tag":103,"props":4373,"children":4374},{},[4375],{"type":100,"value":4376},"Common use cases: logging with current state, notifications using current theme, callbacks that need fresh values but aren't the trigger for the effect.",{"type":94,"tag":729,"props":4378,"children":4380},{"id":4379},"activity-component",[4381,4387],{"type":94,"tag":126,"props":4382,"children":4384},{"className":4383},[],[4385],{"type":100,"value":4386},"\u003CActivity>",{"type":100,"value":4388}," Component",{"type":94,"tag":103,"props":4390,"children":4391},{},[4392,4394,4400],{"type":100,"value":4393},"Preserves component state when hiding and showing UI, without unmounting. Solves the classic tradeoff between unmounting (loses state) and CSS ",{"type":94,"tag":126,"props":4395,"children":4397},{"className":4396},[],[4398],{"type":100,"value":4399},"display:none",{"type":100,"value":4401}," (effects keep running):",{"type":94,"tag":135,"props":4403,"children":4405},{"className":990,"code":4404,"language":992,"meta":140,"style":140},"'use client'\nimport { Activity, useState } from 'react'\n\nfunction TabContainer() {\n  const [activeTab, setActiveTab] = useState('inbox')\n\n  return (\n    \u003Cdiv>\n      \u003Cnav>\n        \u003Cbutton onClick={() => setActiveTab('inbox')}>Inbox\u003C\u002Fbutton>\n        \u003Cbutton onClick={() => setActiveTab('drafts')}>Drafts\u003C\u002Fbutton>\n      \u003C\u002Fnav>\n      \u003CActivity mode={activeTab === 'inbox' ? 'visible' : 'hidden'}>\n        \u003CInboxPanel \u002F>\n      \u003C\u002FActivity>\n      \u003CActivity mode={activeTab === 'drafts' ? 'visible' : 'hidden'}>\n        \u003CDraftsPanel \u002F>\n      \u003C\u002FActivity>\n    \u003C\u002Fdiv>\n  )\n}\n",[4406],{"type":94,"tag":126,"props":4407,"children":4408},{"__ignoreMap":140},[4409,4424,4468,4475,4495,4553,4560,4572,4589,4606,4677,4746,4762,4845,4862,4877,4953,4970,4986,5003,5012],{"type":94,"tag":146,"props":4410,"children":4411},{"class":148,"line":149},[4412,4416,4420],{"type":94,"tag":146,"props":4413,"children":4414},{"style":159},[4415],{"type":100,"value":1720},{"type":94,"tag":146,"props":4417,"children":4418},{"style":186},[4419],{"type":100,"value":1814},{"type":94,"tag":146,"props":4421,"children":4422},{"style":159},[4423],{"type":100,"value":194},{"type":94,"tag":146,"props":4425,"children":4426},{"class":148,"line":197},[4427,4431,4435,4440,4444,4448,4452,4456,4460,4464],{"type":94,"tag":146,"props":4428,"children":4429},{"style":153},[4430],{"type":100,"value":156},{"type":94,"tag":146,"props":4432,"children":4433},{"style":159},[4434],{"type":100,"value":162},{"type":94,"tag":146,"props":4436,"children":4437},{"style":165},[4438],{"type":100,"value":4439}," Activity",{"type":94,"tag":146,"props":4441,"children":4442},{"style":159},[4443],{"type":100,"value":881},{"type":94,"tag":146,"props":4445,"children":4446},{"style":165},[4447],{"type":100,"value":1834},{"type":94,"tag":146,"props":4449,"children":4450},{"style":159},[4451],{"type":100,"value":173},{"type":94,"tag":146,"props":4453,"children":4454},{"style":153},[4455],{"type":100,"value":178},{"type":94,"tag":146,"props":4457,"children":4458},{"style":159},[4459],{"type":100,"value":183},{"type":94,"tag":146,"props":4461,"children":4462},{"style":186},[4463],{"type":100,"value":14},{"type":94,"tag":146,"props":4465,"children":4466},{"style":159},[4467],{"type":100,"value":194},{"type":94,"tag":146,"props":4469,"children":4470},{"class":148,"line":235},[4471],{"type":94,"tag":146,"props":4472,"children":4473},{"emptyLinePlaceholder":239},[4474],{"type":100,"value":242},{"type":94,"tag":146,"props":4476,"children":4477},{"class":148,"line":245},[4478,4482,4487,4491],{"type":94,"tag":146,"props":4479,"children":4480},{"style":249},[4481],{"type":100,"value":3994},{"type":94,"tag":146,"props":4483,"children":4484},{"style":325},[4485],{"type":100,"value":4486}," TabContainer",{"type":94,"tag":146,"props":4488,"children":4489},{"style":159},[4490],{"type":100,"value":333},{"type":94,"tag":146,"props":4492,"children":4493},{"style":159},[4494],{"type":100,"value":338},{"type":94,"tag":146,"props":4496,"children":4497},{"class":148,"line":42},[4498,4502,4506,4511,4515,4520,4524,4528,4532,4536,4540,4545,4549],{"type":94,"tag":146,"props":4499,"children":4500},{"style":249},[4501],{"type":100,"value":1683},{"type":94,"tag":146,"props":4503,"children":4504},{"style":159},[4505],{"type":100,"value":1897},{"type":94,"tag":146,"props":4507,"children":4508},{"style":165},[4509],{"type":100,"value":4510},"activeTab",{"type":94,"tag":146,"props":4512,"children":4513},{"style":159},[4514],{"type":100,"value":881},{"type":94,"tag":146,"props":4516,"children":4517},{"style":165},[4518],{"type":100,"value":4519}," setActiveTab",{"type":94,"tag":146,"props":4521,"children":4522},{"style":159},[4523],{"type":100,"value":1916},{"type":94,"tag":146,"props":4525,"children":4526},{"style":159},[4527],{"type":100,"value":297},{"type":94,"tag":146,"props":4529,"children":4530},{"style":325},[4531],{"type":100,"value":1834},{"type":94,"tag":146,"props":4533,"children":4534},{"style":350},[4535],{"type":100,"value":385},{"type":94,"tag":146,"props":4537,"children":4538},{"style":159},[4539],{"type":100,"value":1720},{"type":94,"tag":146,"props":4541,"children":4542},{"style":186},[4543],{"type":100,"value":4544},"inbox",{"type":94,"tag":146,"props":4546,"children":4547},{"style":159},[4548],{"type":100,"value":1720},{"type":94,"tag":146,"props":4550,"children":4551},{"style":350},[4552],{"type":100,"value":1734},{"type":94,"tag":146,"props":4554,"children":4555},{"class":148,"line":89},[4556],{"type":94,"tag":146,"props":4557,"children":4558},{"emptyLinePlaceholder":239},[4559],{"type":100,"value":242},{"type":94,"tag":146,"props":4561,"children":4562},{"class":148,"line":341},[4563,4567],{"type":94,"tag":146,"props":4564,"children":4565},{"style":153},[4566],{"type":100,"value":436},{"type":94,"tag":146,"props":4568,"children":4569},{"style":350},[4570],{"type":100,"value":4571}," (\n",{"type":94,"tag":146,"props":4573,"children":4574},{"class":148,"line":430},[4575,4580,4585],{"type":94,"tag":146,"props":4576,"children":4577},{"style":159},[4578],{"type":100,"value":4579},"    \u003C",{"type":94,"tag":146,"props":4581,"children":4582},{"style":350},[4583],{"type":100,"value":4584},"div",{"type":94,"tag":146,"props":4586,"children":4587},{"style":159},[4588],{"type":100,"value":1141},{"type":94,"tag":146,"props":4590,"children":4591},{"class":148,"line":444},[4592,4597,4602],{"type":94,"tag":146,"props":4593,"children":4594},{"style":159},[4595],{"type":100,"value":4596},"      \u003C",{"type":94,"tag":146,"props":4598,"children":4599},{"style":350},[4600],{"type":100,"value":4601},"nav",{"type":94,"tag":146,"props":4603,"children":4604},{"style":159},[4605],{"type":100,"value":1141},{"type":94,"tag":146,"props":4607,"children":4608},{"class":148,"line":4200},[4609,4614,4618,4622,4626,4630,4634,4638,4642,4646,4650,4654,4659,4664,4669,4673],{"type":94,"tag":146,"props":4610,"children":4611},{"style":159},[4612],{"type":100,"value":4613},"        \u003C",{"type":94,"tag":146,"props":4615,"children":4616},{"style":350},[4617],{"type":100,"value":1954},{"type":94,"tag":146,"props":4619,"children":4620},{"style":249},[4621],{"type":100,"value":1959},{"type":94,"tag":146,"props":4623,"children":4624},{"style":159},[4625],{"type":100,"value":1964},{"type":94,"tag":146,"props":4627,"children":4628},{"style":249},[4629],{"type":100,"value":1969},{"type":94,"tag":146,"props":4631,"children":4632},{"style":325},[4633],{"type":100,"value":4519},{"type":94,"tag":146,"props":4635,"children":4636},{"style":165},[4637],{"type":100,"value":385},{"type":94,"tag":146,"props":4639,"children":4640},{"style":159},[4641],{"type":100,"value":1720},{"type":94,"tag":146,"props":4643,"children":4644},{"style":186},[4645],{"type":100,"value":4544},{"type":94,"tag":146,"props":4647,"children":4648},{"style":159},[4649],{"type":100,"value":1720},{"type":94,"tag":146,"props":4651,"children":4652},{"style":165},[4653],{"type":100,"value":1626},{"type":94,"tag":146,"props":4655,"children":4656},{"style":159},[4657],{"type":100,"value":4658},"}>",{"type":94,"tag":146,"props":4660,"children":4661},{"style":165},[4662],{"type":100,"value":4663},"Inbox",{"type":94,"tag":146,"props":4665,"children":4666},{"style":159},[4667],{"type":100,"value":4668},"\u003C\u002F",{"type":94,"tag":146,"props":4670,"children":4671},{"style":350},[4672],{"type":100,"value":1954},{"type":94,"tag":146,"props":4674,"children":4675},{"style":159},[4676],{"type":100,"value":1141},{"type":94,"tag":146,"props":4678,"children":4679},{"class":148,"line":4235},[4680,4684,4688,4692,4696,4700,4704,4708,4712,4717,4721,4725,4729,4734,4738,4742],{"type":94,"tag":146,"props":4681,"children":4682},{"style":159},[4683],{"type":100,"value":4613},{"type":94,"tag":146,"props":4685,"children":4686},{"style":350},[4687],{"type":100,"value":1954},{"type":94,"tag":146,"props":4689,"children":4690},{"style":249},[4691],{"type":100,"value":1959},{"type":94,"tag":146,"props":4693,"children":4694},{"style":159},[4695],{"type":100,"value":1964},{"type":94,"tag":146,"props":4697,"children":4698},{"style":249},[4699],{"type":100,"value":1969},{"type":94,"tag":146,"props":4701,"children":4702},{"style":325},[4703],{"type":100,"value":4519},{"type":94,"tag":146,"props":4705,"children":4706},{"style":165},[4707],{"type":100,"value":385},{"type":94,"tag":146,"props":4709,"children":4710},{"style":159},[4711],{"type":100,"value":1720},{"type":94,"tag":146,"props":4713,"children":4714},{"style":186},[4715],{"type":100,"value":4716},"drafts",{"type":94,"tag":146,"props":4718,"children":4719},{"style":159},[4720],{"type":100,"value":1720},{"type":94,"tag":146,"props":4722,"children":4723},{"style":165},[4724],{"type":100,"value":1626},{"type":94,"tag":146,"props":4726,"children":4727},{"style":159},[4728],{"type":100,"value":4658},{"type":94,"tag":146,"props":4730,"children":4731},{"style":165},[4732],{"type":100,"value":4733},"Drafts",{"type":94,"tag":146,"props":4735,"children":4736},{"style":159},[4737],{"type":100,"value":4668},{"type":94,"tag":146,"props":4739,"children":4740},{"style":350},[4741],{"type":100,"value":1954},{"type":94,"tag":146,"props":4743,"children":4744},{"style":159},[4745],{"type":100,"value":1141},{"type":94,"tag":146,"props":4747,"children":4748},{"class":148,"line":4282},[4749,4754,4758],{"type":94,"tag":146,"props":4750,"children":4751},{"style":159},[4752],{"type":100,"value":4753},"      \u003C\u002F",{"type":94,"tag":146,"props":4755,"children":4756},{"style":350},[4757],{"type":100,"value":4601},{"type":94,"tag":146,"props":4759,"children":4760},{"style":159},[4761],{"type":100,"value":1141},{"type":94,"tag":146,"props":4763,"children":4764},{"class":148,"line":4304},[4765,4769,4774,4779,4783,4788,4793,4797,4801,4805,4810,4814,4819,4823,4828,4832,4837,4841],{"type":94,"tag":146,"props":4766,"children":4767},{"style":159},[4768],{"type":100,"value":4596},{"type":94,"tag":146,"props":4770,"children":4771},{"style":265},[4772],{"type":100,"value":4773},"Activity",{"type":94,"tag":146,"props":4775,"children":4776},{"style":249},[4777],{"type":100,"value":4778}," mode",{"type":94,"tag":146,"props":4780,"children":4781},{"style":159},[4782],{"type":100,"value":1050},{"type":94,"tag":146,"props":4784,"children":4785},{"style":165},[4786],{"type":100,"value":4787},"activeTab ",{"type":94,"tag":146,"props":4789,"children":4790},{"style":159},[4791],{"type":100,"value":4792},"===",{"type":94,"tag":146,"props":4794,"children":4795},{"style":159},[4796],{"type":100,"value":183},{"type":94,"tag":146,"props":4798,"children":4799},{"style":186},[4800],{"type":100,"value":4544},{"type":94,"tag":146,"props":4802,"children":4803},{"style":159},[4804],{"type":100,"value":1720},{"type":94,"tag":146,"props":4806,"children":4807},{"style":159},[4808],{"type":100,"value":4809}," ?",{"type":94,"tag":146,"props":4811,"children":4812},{"style":159},[4813],{"type":100,"value":183},{"type":94,"tag":146,"props":4815,"children":4816},{"style":186},[4817],{"type":100,"value":4818},"visible",{"type":94,"tag":146,"props":4820,"children":4821},{"style":159},[4822],{"type":100,"value":1720},{"type":94,"tag":146,"props":4824,"children":4825},{"style":159},[4826],{"type":100,"value":4827}," :",{"type":94,"tag":146,"props":4829,"children":4830},{"style":159},[4831],{"type":100,"value":183},{"type":94,"tag":146,"props":4833,"children":4834},{"style":186},[4835],{"type":100,"value":4836},"hidden",{"type":94,"tag":146,"props":4838,"children":4839},{"style":159},[4840],{"type":100,"value":1720},{"type":94,"tag":146,"props":4842,"children":4843},{"style":159},[4844],{"type":100,"value":1102},{"type":94,"tag":146,"props":4846,"children":4847},{"class":148,"line":4339},[4848,4852,4857],{"type":94,"tag":146,"props":4849,"children":4850},{"style":159},[4851],{"type":100,"value":4613},{"type":94,"tag":146,"props":4853,"children":4854},{"style":265},[4855],{"type":100,"value":4856},"InboxPanel",{"type":94,"tag":146,"props":4858,"children":4859},{"style":159},[4860],{"type":100,"value":4861}," \u002F>\n",{"type":94,"tag":146,"props":4863,"children":4864},{"class":148,"line":4366},[4865,4869,4873],{"type":94,"tag":146,"props":4866,"children":4867},{"style":159},[4868],{"type":100,"value":4753},{"type":94,"tag":146,"props":4870,"children":4871},{"style":265},[4872],{"type":100,"value":4773},{"type":94,"tag":146,"props":4874,"children":4875},{"style":159},[4876],{"type":100,"value":1141},{"type":94,"tag":146,"props":4878,"children":4880},{"class":148,"line":4879},16,[4881,4885,4889,4893,4897,4901,4905,4909,4913,4917,4921,4925,4929,4933,4937,4941,4945,4949],{"type":94,"tag":146,"props":4882,"children":4883},{"style":159},[4884],{"type":100,"value":4596},{"type":94,"tag":146,"props":4886,"children":4887},{"style":265},[4888],{"type":100,"value":4773},{"type":94,"tag":146,"props":4890,"children":4891},{"style":249},[4892],{"type":100,"value":4778},{"type":94,"tag":146,"props":4894,"children":4895},{"style":159},[4896],{"type":100,"value":1050},{"type":94,"tag":146,"props":4898,"children":4899},{"style":165},[4900],{"type":100,"value":4787},{"type":94,"tag":146,"props":4902,"children":4903},{"style":159},[4904],{"type":100,"value":4792},{"type":94,"tag":146,"props":4906,"children":4907},{"style":159},[4908],{"type":100,"value":183},{"type":94,"tag":146,"props":4910,"children":4911},{"style":186},[4912],{"type":100,"value":4716},{"type":94,"tag":146,"props":4914,"children":4915},{"style":159},[4916],{"type":100,"value":1720},{"type":94,"tag":146,"props":4918,"children":4919},{"style":159},[4920],{"type":100,"value":4809},{"type":94,"tag":146,"props":4922,"children":4923},{"style":159},[4924],{"type":100,"value":183},{"type":94,"tag":146,"props":4926,"children":4927},{"style":186},[4928],{"type":100,"value":4818},{"type":94,"tag":146,"props":4930,"children":4931},{"style":159},[4932],{"type":100,"value":1720},{"type":94,"tag":146,"props":4934,"children":4935},{"style":159},[4936],{"type":100,"value":4827},{"type":94,"tag":146,"props":4938,"children":4939},{"style":159},[4940],{"type":100,"value":183},{"type":94,"tag":146,"props":4942,"children":4943},{"style":186},[4944],{"type":100,"value":4836},{"type":94,"tag":146,"props":4946,"children":4947},{"style":159},[4948],{"type":100,"value":1720},{"type":94,"tag":146,"props":4950,"children":4951},{"style":159},[4952],{"type":100,"value":1102},{"type":94,"tag":146,"props":4954,"children":4956},{"class":148,"line":4955},17,[4957,4961,4966],{"type":94,"tag":146,"props":4958,"children":4959},{"style":159},[4960],{"type":100,"value":4613},{"type":94,"tag":146,"props":4962,"children":4963},{"style":265},[4964],{"type":100,"value":4965},"DraftsPanel",{"type":94,"tag":146,"props":4967,"children":4968},{"style":159},[4969],{"type":100,"value":4861},{"type":94,"tag":146,"props":4971,"children":4973},{"class":148,"line":4972},18,[4974,4978,4982],{"type":94,"tag":146,"props":4975,"children":4976},{"style":159},[4977],{"type":100,"value":4753},{"type":94,"tag":146,"props":4979,"children":4980},{"style":265},[4981],{"type":100,"value":4773},{"type":94,"tag":146,"props":4983,"children":4984},{"style":159},[4985],{"type":100,"value":1141},{"type":94,"tag":146,"props":4987,"children":4989},{"class":148,"line":4988},19,[4990,4995,4999],{"type":94,"tag":146,"props":4991,"children":4992},{"style":159},[4993],{"type":100,"value":4994},"    \u003C\u002F",{"type":94,"tag":146,"props":4996,"children":4997},{"style":350},[4998],{"type":100,"value":4584},{"type":94,"tag":146,"props":5000,"children":5001},{"style":159},[5002],{"type":100,"value":1141},{"type":94,"tag":146,"props":5004,"children":5006},{"class":148,"line":5005},20,[5007],{"type":94,"tag":146,"props":5008,"children":5009},{"style":350},[5010],{"type":100,"value":5011},"  )\n",{"type":94,"tag":146,"props":5013,"children":5015},{"class":148,"line":5014},21,[5016],{"type":94,"tag":146,"props":5017,"children":5018},{"style":159},[5019],{"type":100,"value":450},{"type":94,"tag":103,"props":5021,"children":5022},{},[5023,5025,5031],{"type":100,"value":5024},"Use for: tabbed interfaces, modals, sidebars, background tasks — anywhere you need to maintain component state without keeping everything actively rendered. When ",{"type":94,"tag":126,"props":5026,"children":5028},{"className":5027},[],[5029],{"type":100,"value":5030},"mode=\"hidden\"",{"type":100,"value":5032},", effects are suspended (not running in the background).",{"type":94,"tag":729,"props":5034,"children":5036},{"id":5035},"view-transitions-api",[5037],{"type":100,"value":5038},"View Transitions API",{"type":94,"tag":103,"props":5040,"children":5041},{},[5042],{"type":100,"value":5043},"React 19.2 supports the browser View Transitions API for animating elements across navigations. Next.js 16 has built-in support — elements can animate between route changes without manual transition logic.",{"type":94,"tag":103,"props":5045,"children":5046},{},[5047,5049,5055,5057,5063,5065,5071,5073,5079],{"type":100,"value":5048},"Key change: ",{"type":94,"tag":126,"props":5050,"children":5052},{"className":5051},[],[5053],{"type":100,"value":5054},"useId",{"type":100,"value":5056}," now generates IDs with ",{"type":94,"tag":126,"props":5058,"children":5060},{"className":5059},[],[5061],{"type":100,"value":5062},"_r_",{"type":100,"value":5064}," prefix (instead of ",{"type":94,"tag":126,"props":5066,"children":5068},{"className":5067},[],[5069],{"type":100,"value":5070},":r:",{"type":100,"value":5072},") to be valid for ",{"type":94,"tag":126,"props":5074,"children":5076},{"className":5075},[],[5077],{"type":100,"value":5078},"view-transition-name",{"type":100,"value":5080}," and XML 1.0 names.",{"type":94,"tag":109,"props":5082,"children":5084},{"id":5083},"layout-deduplication-during-prefetching",[5085],{"type":100,"value":5086},"Layout Deduplication During Prefetching",{"type":94,"tag":103,"props":5088,"children":5089},{},[5090,5092,5098,5100,5105],{"type":100,"value":5091},"Next.js 16 deduplicates shared layouts during prefetching. When multiple ",{"type":94,"tag":126,"props":5093,"children":5095},{"className":5094},[],[5096],{"type":100,"value":5097},"\u003CLink>",{"type":100,"value":5099}," components point to routes with a shared layout, the layout is downloaded ",{"type":94,"tag":498,"props":5101,"children":5102},{},[5103],{"type":100,"value":5104},"once",{"type":100,"value":5106}," instead of separately for each link.",{"type":94,"tag":103,"props":5108,"children":5109},{},[5110,5115],{"type":94,"tag":498,"props":5111,"children":5112},{},[5113],{"type":100,"value":5114},"Impact",{"type":100,"value":5116},": A page with 50 product links that share a layout downloads ~198KB instead of ~2.4MB — a 92% reduction in prefetch network transfer.",{"type":94,"tag":103,"props":5118,"children":5119},{},[5120,5122,5127],{"type":100,"value":5121},"Combined with ",{"type":94,"tag":498,"props":5123,"children":5124},{},[5125],{"type":100,"value":5126},"incremental prefetching",{"type":100,"value":5128},", Next.js only fetches route segments not already in cache, cancels prefetch requests when links leave the viewport, re-prefetches on hover or viewport re-entry, and re-prefetches when data is invalidated.",{"type":94,"tag":109,"props":5130,"children":5132},{"id":5131},"bundle-analyzer-next-experimental-analyze",[5133,5135,5141],{"type":100,"value":5134},"Bundle Analyzer (",{"type":94,"tag":126,"props":5136,"children":5138},{"className":5137},[],[5139],{"type":100,"value":5140},"next experimental-analyze",{"type":100,"value":1626},{"type":94,"tag":103,"props":5143,"children":5144},{},[5145],{"type":100,"value":5146},"Built-in bundle analyzer that works with Turbopack (available since Next.js 16.1):",{"type":94,"tag":135,"props":5148,"children":5150},{"className":515,"code":5149,"language":517,"meta":140,"style":140},"# Analyze and serve results in browser\nnext experimental-analyze --serve\n\n# Analyze with custom port\nnext experimental-analyze --serve --port 4001\n\n# Write analysis to .next\u002Fdiagnostics\u002Fanalyze (no server)\nnext experimental-analyze\n",[5151],{"type":94,"tag":126,"props":5152,"children":5153},{"__ignoreMap":140},[5154,5162,5179,5186,5194,5220,5227,5235],{"type":94,"tag":146,"props":5155,"children":5156},{"class":148,"line":149},[5157],{"type":94,"tag":146,"props":5158,"children":5159},{"style":865},[5160],{"type":100,"value":5161},"# Analyze and serve results in browser\n",{"type":94,"tag":146,"props":5163,"children":5164},{"class":148,"line":197},[5165,5169,5174],{"type":94,"tag":146,"props":5166,"children":5167},{"style":265},[5168],{"type":100,"value":80},{"type":94,"tag":146,"props":5170,"children":5171},{"style":186},[5172],{"type":100,"value":5173}," experimental-analyze",{"type":94,"tag":146,"props":5175,"children":5176},{"style":186},[5177],{"type":100,"value":5178}," --serve\n",{"type":94,"tag":146,"props":5180,"children":5181},{"class":148,"line":235},[5182],{"type":94,"tag":146,"props":5183,"children":5184},{"emptyLinePlaceholder":239},[5185],{"type":100,"value":242},{"type":94,"tag":146,"props":5187,"children":5188},{"class":148,"line":245},[5189],{"type":94,"tag":146,"props":5190,"children":5191},{"style":865},[5192],{"type":100,"value":5193},"# Analyze with custom port\n",{"type":94,"tag":146,"props":5195,"children":5196},{"class":148,"line":42},[5197,5201,5205,5210,5215],{"type":94,"tag":146,"props":5198,"children":5199},{"style":265},[5200],{"type":100,"value":80},{"type":94,"tag":146,"props":5202,"children":5203},{"style":186},[5204],{"type":100,"value":5173},{"type":94,"tag":146,"props":5206,"children":5207},{"style":186},[5208],{"type":100,"value":5209}," --serve",{"type":94,"tag":146,"props":5211,"children":5212},{"style":186},[5213],{"type":100,"value":5214}," --port",{"type":94,"tag":146,"props":5216,"children":5217},{"style":1931},[5218],{"type":100,"value":5219}," 4001\n",{"type":94,"tag":146,"props":5221,"children":5222},{"class":148,"line":89},[5223],{"type":94,"tag":146,"props":5224,"children":5225},{"emptyLinePlaceholder":239},[5226],{"type":100,"value":242},{"type":94,"tag":146,"props":5228,"children":5229},{"class":148,"line":341},[5230],{"type":94,"tag":146,"props":5231,"children":5232},{"style":865},[5233],{"type":100,"value":5234},"# Write analysis to .next\u002Fdiagnostics\u002Fanalyze (no server)\n",{"type":94,"tag":146,"props":5236,"children":5237},{"class":148,"line":430},[5238,5242],{"type":94,"tag":146,"props":5239,"children":5240},{"style":265},[5241],{"type":100,"value":80},{"type":94,"tag":146,"props":5243,"children":5244},{"style":186},[5245],{"type":100,"value":5246}," experimental-analyze\n",{"type":94,"tag":103,"props":5248,"children":5249},{},[5250],{"type":100,"value":5251},"Features:",{"type":94,"tag":1300,"props":5253,"children":5254},{},[5255,5260,5265,5270],{"type":94,"tag":818,"props":5256,"children":5257},{},[5258],{"type":100,"value":5259},"Route-specific filtering between client and server bundles",{"type":94,"tag":818,"props":5261,"children":5262},{},[5263],{"type":100,"value":5264},"Full import chain tracing — see exactly why a module is included",{"type":94,"tag":818,"props":5266,"children":5267},{},[5268],{"type":100,"value":5269},"Traces imports across RSC boundaries and dynamic imports",{"type":94,"tag":818,"props":5271,"children":5272},{},[5273],{"type":100,"value":5274},"No application build required — analyzes module graph directly",{"type":94,"tag":103,"props":5276,"children":5277},{},[5278,5280],{"type":100,"value":5279},"Save output for comparison: ",{"type":94,"tag":126,"props":5281,"children":5283},{"className":5282},[],[5284],{"type":100,"value":5285},"cp -r .next\u002Fdiagnostics\u002Fanalyze .\u002Fanalyze-before-refactor",{"type":94,"tag":103,"props":5287,"children":5288},{},[5289,5294,5296,5302,5303,5309],{"type":94,"tag":498,"props":5290,"children":5291},{},[5292],{"type":100,"value":5293},"Legacy",{"type":100,"value":5295},": For projects not using Turbopack, use ",{"type":94,"tag":126,"props":5297,"children":5299},{"className":5298},[],[5300],{"type":100,"value":5301},"@next\u002Fbundle-analyzer",{"type":100,"value":753},{"type":94,"tag":126,"props":5304,"children":5306},{"className":5305},[],[5307],{"type":100,"value":5308},"ANALYZE=true npm run build",{"type":100,"value":404},{"type":94,"tag":109,"props":5311,"children":5313},{"id":5312},"nextjs-162-canary",[5314],{"type":100,"value":5315},"Next.js 16.2 (Canary)",{"type":94,"tag":103,"props":5317,"children":5318},{},[5319],{"type":100,"value":5320},"Next.js 16.2 is currently in canary (latest: 16.2.0-canary.84, March 2026). Key areas in development:",{"type":94,"tag":814,"props":5322,"children":5323},{},[5324,5346,5370],{"type":94,"tag":818,"props":5325,"children":5326},{},[5327,5337,5339,5344],{"type":94,"tag":498,"props":5328,"children":5329},{},[5330,5332],{"type":100,"value":5331},"Turbopack File System Caching for ",{"type":94,"tag":126,"props":5333,"children":5335},{"className":5334},[],[5336],{"type":100,"value":131},{"type":100,"value":5338}," — Extending the stable ",{"type":94,"tag":126,"props":5340,"children":5342},{"className":5341},[],[5343],{"type":100,"value":3771},{"type":100,"value":5345}," FS cache to production builds for faster CI.",{"type":94,"tag":818,"props":5347,"children":5348},{},[5349,5354,5356,5361,5363,5368],{"type":94,"tag":498,"props":5350,"children":5351},{},[5352],{"type":100,"value":5353},"Proxy refinements",{"type":100,"value":5355}," — Continued iteration on ",{"type":94,"tag":126,"props":5357,"children":5359},{"className":5358},[],[5360],{"type":100,"value":3301},{"type":100,"value":5362}," (the Node.js-runtime replacement for ",{"type":94,"tag":126,"props":5364,"children":5366},{"className":5365},[],[5367],{"type":100,"value":3293},{"type":100,"value":5369}," introduced in 16.0). The proxy API is stabilizing with improved request context and streaming support.",{"type":94,"tag":818,"props":5371,"children":5372},{},[5373,5378],{"type":94,"tag":498,"props":5374,"children":5375},{},[5376],{"type":100,"value":5377},"React Compiler optimizations",{"type":100,"value":5379}," — Further automatic memoization improvements building on the stable React Compiler in 16.0.",{"type":94,"tag":5381,"props":5382,"children":5383},"blockquote",{},[5384],{"type":94,"tag":103,"props":5385,"children":5386},{},[5387,5392,5394,5403,5405,5412],{"type":94,"tag":498,"props":5388,"children":5389},{},[5390],{"type":100,"value":5391},"Note",{"type":100,"value":5393},": Canary releases are not recommended for production. Track progress at the ",{"type":94,"tag":5395,"props":5396,"children":5400},"a",{"href":5397,"rel":5398},"https:\u002F\u002Fnext-changelog.vercel.app\u002F",[5399],"nofollow",[5401],{"type":100,"value":5402},"Next.js Changelog",{"type":100,"value":5404}," or ",{"type":94,"tag":5395,"props":5406,"children":5409},{"href":5407,"rel":5408},"https:\u002F\u002Fgithub.com\u002Fvercel\u002Fnext.js\u002Freleases",[5399],[5410],{"type":100,"value":5411},"GitHub Releases",{"type":100,"value":404},{"type":94,"tag":109,"props":5414,"children":5416},{"id":5415},"devtools-mcp",[5417],{"type":100,"value":5418},"DevTools MCP",{"type":94,"tag":103,"props":5420,"children":5421},{},[5422,5424,5428],{"type":100,"value":5423},"Next.js 16 includes ",{"type":94,"tag":498,"props":5425,"children":5426},{},[5427],{"type":100,"value":3739},{"type":100,"value":5429},", a Model Context Protocol integration for AI-assisted debugging. It enables AI agents to diagnose issues, explain behavior, and suggest fixes within your development workflow. If your AI coding assistant supports MCP, DevTools MCP can also automate upgrade and migration tasks.",{"type":94,"tag":109,"props":5431,"children":5433},{"id":5432},"breaking-changes-in-nextjs-16",[5434],{"type":100,"value":5435},"Breaking Changes in Next.js 16",{"type":94,"tag":814,"props":5437,"children":5438},{},[5439,5484,5507,5536,5546,5556],{"type":94,"tag":818,"props":5440,"children":5441},{},[5442,5447,5448,5454,5455,5461,5462,5468,5469,5475,5477,5482],{"type":94,"tag":498,"props":5443,"children":5444},{},[5445],{"type":100,"value":5446},"Async Request APIs",{"type":100,"value":3065},{"type":94,"tag":126,"props":5449,"children":5451},{"className":5450},[],[5452],{"type":100,"value":5453},"cookies()",{"type":100,"value":463},{"type":94,"tag":126,"props":5456,"children":5458},{"className":5457},[],[5459],{"type":100,"value":5460},"headers()",{"type":100,"value":463},{"type":94,"tag":126,"props":5463,"children":5465},{"className":5464},[],[5466],{"type":100,"value":5467},"params",{"type":100,"value":463},{"type":94,"tag":126,"props":5470,"children":5472},{"className":5471},[],[5473],{"type":100,"value":5474},"searchParams",{"type":100,"value":5476}," are all async — must ",{"type":94,"tag":126,"props":5478,"children":5480},{"className":5479},[],[5481],{"type":100,"value":1584},{"type":100,"value":5483}," them",{"type":94,"tag":818,"props":5485,"children":5486},{},[5487,5492,5494,5499,5500,5505],{"type":94,"tag":498,"props":5488,"children":5489},{},[5490],{"type":100,"value":5491},"Proxy replaces Middleware",{"type":100,"value":5493},": Rename ",{"type":94,"tag":126,"props":5495,"children":5497},{"className":5496},[],[5498],{"type":100,"value":3293},{"type":100,"value":3454},{"type":94,"tag":126,"props":5501,"children":5503},{"className":5502},[],[5504],{"type":100,"value":3301},{"type":100,"value":5506},", runs on Node.js only (Edge not supported)",{"type":94,"tag":818,"props":5508,"children":5509},{},[5510,5515,5517,5523,5524,5530,5531],{"type":94,"tag":498,"props":5511,"children":5512},{},[5513],{"type":100,"value":5514},"Turbopack is top-level config",{"type":100,"value":5516},": Move from ",{"type":94,"tag":126,"props":5518,"children":5520},{"className":5519},[],[5521],{"type":100,"value":5522},"experimental.turbopack",{"type":100,"value":979},{"type":94,"tag":126,"props":5525,"children":5527},{"className":5526},[],[5528],{"type":100,"value":5529},"turbopack",{"type":100,"value":761},{"type":94,"tag":126,"props":5532,"children":5534},{"className":5533},[],[5535],{"type":100,"value":3803},{"type":94,"tag":818,"props":5537,"children":5538},{},[5539,5544],{"type":94,"tag":498,"props":5540,"children":5541},{},[5542],{"type":100,"value":5543},"View Transitions",{"type":100,"value":5545},": Built-in support for animating elements across navigations",{"type":94,"tag":818,"props":5547,"children":5548},{},[5549,5554],{"type":94,"tag":498,"props":5550,"children":5551},{},[5552],{"type":100,"value":5553},"Node.js 20.9+ required",{"type":100,"value":5555},": Dropped support for Node 18",{"type":94,"tag":818,"props":5557,"children":5558},{},[5559],{"type":94,"tag":498,"props":5560,"children":5561},{},[5562],{"type":100,"value":5563},"TypeScript 5.1+ required",{"type":94,"tag":109,"props":5565,"children":5567},{"id":5566},"react-19-gotchas",[5568],{"type":100,"value":5569},"React 19 Gotchas",{"type":94,"tag":729,"props":5571,"children":5573},{"id":5572},"useref-requires-an-initial-value",[5574,5580],{"type":94,"tag":126,"props":5575,"children":5577},{"className":5576},[],[5578],{"type":100,"value":5579},"useRef()",{"type":100,"value":5581}," Requires an Initial Value",{"type":94,"tag":103,"props":5583,"children":5584},{},[5585,5587,5592],{"type":100,"value":5586},"React 19 strict mode enforces that ",{"type":94,"tag":126,"props":5588,"children":5590},{"className":5589},[],[5591],{"type":100,"value":5579},{"type":100,"value":5593}," must be called with an explicit initial value. Omitting it causes a type error or runtime warning:",{"type":94,"tag":135,"props":5595,"children":5597},{"className":990,"code":5596,"language":992,"meta":140,"style":140},"\u002F\u002F WRONG — React 19 strict mode complains\nconst ref = useRef()       \u002F\u002F ❌ missing initial value\nconst ref = useRef\u003CHTMLDivElement>()  \u002F\u002F ❌ still missing\n\n\u002F\u002F CORRECT\nconst ref = useRef\u003CHTMLDivElement>(null)  \u002F\u002F ✅\nconst ref = useRef(0)                     \u002F\u002F ✅\n",[5598],{"type":94,"tag":126,"props":5599,"children":5600},{"__ignoreMap":140},[5601,5609,5640,5682,5689,5697,5746],{"type":94,"tag":146,"props":5602,"children":5603},{"class":148,"line":149},[5604],{"type":94,"tag":146,"props":5605,"children":5606},{"style":865},[5607],{"type":100,"value":5608},"\u002F\u002F WRONG — React 19 strict mode complains\n",{"type":94,"tag":146,"props":5610,"children":5611},{"class":148,"line":197},[5612,5616,5621,5625,5630,5635],{"type":94,"tag":146,"props":5613,"children":5614},{"style":249},[5615],{"type":100,"value":2861},{"type":94,"tag":146,"props":5617,"children":5618},{"style":165},[5619],{"type":100,"value":5620}," ref ",{"type":94,"tag":146,"props":5622,"children":5623},{"style":159},[5624],{"type":100,"value":1027},{"type":94,"tag":146,"props":5626,"children":5627},{"style":325},[5628],{"type":100,"value":5629}," useRef",{"type":94,"tag":146,"props":5631,"children":5632},{"style":165},[5633],{"type":100,"value":5634},"()       ",{"type":94,"tag":146,"props":5636,"children":5637},{"style":865},[5638],{"type":100,"value":5639},"\u002F\u002F ❌ missing initial value\n",{"type":94,"tag":146,"props":5641,"children":5642},{"class":148,"line":235},[5643,5647,5651,5655,5659,5663,5668,5672,5677],{"type":94,"tag":146,"props":5644,"children":5645},{"style":249},[5646],{"type":100,"value":2861},{"type":94,"tag":146,"props":5648,"children":5649},{"style":165},[5650],{"type":100,"value":5620},{"type":94,"tag":146,"props":5652,"children":5653},{"style":159},[5654],{"type":100,"value":1027},{"type":94,"tag":146,"props":5656,"children":5657},{"style":325},[5658],{"type":100,"value":5629},{"type":94,"tag":146,"props":5660,"children":5661},{"style":159},[5662],{"type":100,"value":1012},{"type":94,"tag":146,"props":5664,"children":5665},{"style":265},[5666],{"type":100,"value":5667},"HTMLDivElement",{"type":94,"tag":146,"props":5669,"children":5670},{"style":159},[5671],{"type":100,"value":282},{"type":94,"tag":146,"props":5673,"children":5674},{"style":165},[5675],{"type":100,"value":5676},"()  ",{"type":94,"tag":146,"props":5678,"children":5679},{"style":865},[5680],{"type":100,"value":5681},"\u002F\u002F ❌ still missing\n",{"type":94,"tag":146,"props":5683,"children":5684},{"class":148,"line":245},[5685],{"type":94,"tag":146,"props":5686,"children":5687},{"emptyLinePlaceholder":239},[5688],{"type":100,"value":242},{"type":94,"tag":146,"props":5690,"children":5691},{"class":148,"line":42},[5692],{"type":94,"tag":146,"props":5693,"children":5694},{"style":865},[5695],{"type":100,"value":5696},"\u002F\u002F CORRECT\n",{"type":94,"tag":146,"props":5698,"children":5699},{"class":148,"line":89},[5700,5704,5708,5712,5716,5720,5724,5728,5732,5737,5741],{"type":94,"tag":146,"props":5701,"children":5702},{"style":249},[5703],{"type":100,"value":2861},{"type":94,"tag":146,"props":5705,"children":5706},{"style":165},[5707],{"type":100,"value":5620},{"type":94,"tag":146,"props":5709,"children":5710},{"style":159},[5711],{"type":100,"value":1027},{"type":94,"tag":146,"props":5713,"children":5714},{"style":325},[5715],{"type":100,"value":5629},{"type":94,"tag":146,"props":5717,"children":5718},{"style":159},[5719],{"type":100,"value":1012},{"type":94,"tag":146,"props":5721,"children":5722},{"style":265},[5723],{"type":100,"value":5667},{"type":94,"tag":146,"props":5725,"children":5726},{"style":159},[5727],{"type":100,"value":282},{"type":94,"tag":146,"props":5729,"children":5730},{"style":165},[5731],{"type":100,"value":385},{"type":94,"tag":146,"props":5733,"children":5734},{"style":159},[5735],{"type":100,"value":5736},"null",{"type":94,"tag":146,"props":5738,"children":5739},{"style":165},[5740],{"type":100,"value":2502},{"type":94,"tag":146,"props":5742,"children":5743},{"style":865},[5744],{"type":100,"value":5745},"\u002F\u002F ✅\n",{"type":94,"tag":146,"props":5747,"children":5748},{"class":148,"line":341},[5749,5753,5757,5761,5765,5769,5773,5778],{"type":94,"tag":146,"props":5750,"children":5751},{"style":249},[5752],{"type":100,"value":2861},{"type":94,"tag":146,"props":5754,"children":5755},{"style":165},[5756],{"type":100,"value":5620},{"type":94,"tag":146,"props":5758,"children":5759},{"style":159},[5760],{"type":100,"value":1027},{"type":94,"tag":146,"props":5762,"children":5763},{"style":325},[5764],{"type":100,"value":5629},{"type":94,"tag":146,"props":5766,"children":5767},{"style":165},[5768],{"type":100,"value":385},{"type":94,"tag":146,"props":5770,"children":5771},{"style":1931},[5772],{"type":100,"value":1934},{"type":94,"tag":146,"props":5774,"children":5775},{"style":165},[5776],{"type":100,"value":5777},")                     ",{"type":94,"tag":146,"props":5779,"children":5780},{"style":865},[5781],{"type":100,"value":5745},{"type":94,"tag":103,"props":5783,"children":5784},{},[5785,5787,5793,5795,5800],{"type":100,"value":5786},"This affects all ",{"type":94,"tag":126,"props":5788,"children":5790},{"className":5789},[],[5791],{"type":100,"value":5792},"useRef",{"type":100,"value":5794}," calls in client components. The fix is always to pass an explicit initial value (usually ",{"type":94,"tag":126,"props":5796,"children":5798},{"className":5797},[],[5799],{"type":100,"value":5736},{"type":100,"value":5801}," for DOM refs).",{"type":94,"tag":109,"props":5803,"children":5805},{"id":5804},"security-critical-cves",[5806],{"type":100,"value":5807},"Security: Critical CVEs",{"type":94,"tag":103,"props":5809,"children":5810},{},[5811,5813,5818],{"type":100,"value":5812},"Multiple vulnerabilities affect ",{"type":94,"tag":498,"props":5814,"children":5815},{},[5816],{"type":100,"value":5817},"all Next.js App Router applications",{"type":100,"value":5819}," (13.4+, 14.x, 15.x, 16.x). Upgrade immediately.",{"type":94,"tag":729,"props":5821,"children":5823},{"id":5822},"cve-2025-66478-cve-2025-55182-remote-code-execution-cvss-100-critical",[5824],{"type":100,"value":5825},"CVE-2025-66478 \u002F CVE-2025-55182 — Remote Code Execution (CVSS 10.0, Critical)",{"type":94,"tag":103,"props":5827,"children":5828},{},[5829,5831,5836],{"type":100,"value":5830},"A deserialization vulnerability in the React Server Components (RSC) \"Flight\" protocol allows unauthenticated remote code execution via crafted HTTP requests. Near-100% exploit reliability against default configurations. ",{"type":94,"tag":498,"props":5832,"children":5833},{},[5834],{"type":100,"value":5835},"Actively exploited in the wild.",{"type":100,"value":5837}," No workaround — upgrade is required. Rotate all application secrets after patching.",{"type":94,"tag":1300,"props":5839,"children":5840},{},[5841,5846],{"type":94,"tag":818,"props":5842,"children":5843},{},[5844],{"type":100,"value":5845},"Affects: Next.js App Router applications (15.x, 16.x, 14.3.0-canary.77+)",{"type":94,"tag":818,"props":5847,"children":5848},{},[5849],{"type":100,"value":5850},"Does NOT affect: Pages Router apps, Edge Runtime, Next.js 13.x, stable Next.js 14.x",{"type":94,"tag":729,"props":5852,"children":5854},{"id":5853},"cve-2025-55184-denial-of-service-cvss-75-high",[5855],{"type":100,"value":5856},"CVE-2025-55184 — Denial of Service (CVSS 7.5, High)",{"type":94,"tag":103,"props":5858,"children":5859},{},[5860],{"type":100,"value":5861},"Specially crafted HTTP requests cause the server process to hang indefinitely, consuming CPU and blocking legitimate users. No authentication required, low attack complexity.",{"type":94,"tag":729,"props":5863,"children":5865},{"id":5864},"cve-2025-55183-source-code-exposure-cvss-53-medium",[5866],{"type":100,"value":5867},"CVE-2025-55183 — Source Code Exposure (CVSS 5.3, Medium)",{"type":94,"tag":103,"props":5869,"children":5870},{},[5871],{"type":100,"value":5872},"Malformed HTTP requests can trick Server Actions into returning their compiled source code instead of the expected response. Environment variables are not exposed, but any hardcoded secrets in Server Action code can leak.",{"type":94,"tag":729,"props":5874,"children":5876},{"id":5875},"cve-2026-23864-denial-of-service-via-memory-exhaustion-cvss-75-high",[5877],{"type":100,"value":5878},"CVE-2026-23864 — Denial of Service via Memory Exhaustion (CVSS 7.5, High)",{"type":94,"tag":103,"props":5880,"children":5881},{},[5882],{"type":100,"value":5883},"Disclosed January 26, 2026. The original DoS fix for CVE-2025-55184 was incomplete — additional vectors allow specially crafted HTTP requests to Server Function endpoints to crash the server via out-of-memory exceptions or excessive CPU usage. No authentication required.",{"type":94,"tag":729,"props":5885,"children":5887},{"id":5886},"cve-2025-29927-middleware-authorization-bypass-cvss-91-critical",[5888],{"type":100,"value":5889},"CVE-2025-29927 — Middleware Authorization Bypass (CVSS 9.1, Critical)",{"type":94,"tag":103,"props":5891,"children":5892},{},[5893,5895,5901,5903,5908,5909,5914,5916,5921],{"type":100,"value":5894},"An attacker can bypass middleware-based authorization by sending a crafted ",{"type":94,"tag":126,"props":5896,"children":5898},{"className":5897},[],[5899],{"type":100,"value":5900},"x-middleware-subrequest",{"type":100,"value":5902}," header, skipping all middleware logic. This affects any Next.js application that relies on ",{"type":94,"tag":126,"props":5904,"children":5906},{"className":5905},[],[5907],{"type":100,"value":3293},{"type":100,"value":3362},{"type":94,"tag":126,"props":5910,"children":5912},{"className":5911},[],[5913],{"type":100,"value":3301},{"type":100,"value":5915}," in 16+) as the ",{"type":94,"tag":498,"props":5917,"children":5918},{},[5919],{"type":100,"value":5920},"sole",{"type":100,"value":5922}," authorization gate. Patched in Next.js 14.2.25, 15.2.3, and all 16.x releases.",{"type":94,"tag":103,"props":5924,"children":5925},{},[5926,5931,5933,5938],{"type":94,"tag":498,"props":5927,"children":5928},{},[5929],{"type":100,"value":5930},"Mitigation",{"type":100,"value":5932},": Never rely on middleware\u002Fproxy as the only auth layer. Always re-validate authorization in Server Components, Server Actions, or Route Handlers. If you cannot patch immediately, block ",{"type":94,"tag":126,"props":5934,"children":5936},{"className":5935},[],[5937],{"type":100,"value":5900},{"type":100,"value":5939}," at your reverse proxy or WAF.",{"type":94,"tag":729,"props":5941,"children":5943},{"id":5942},"patched-versions",[5944],{"type":100,"value":5945},"Patched Versions",{"type":94,"tag":2706,"props":5947,"children":5948},{},[5949,5965],{"type":94,"tag":2710,"props":5950,"children":5951},{},[5952],{"type":94,"tag":2714,"props":5953,"children":5954},{},[5955,5960],{"type":94,"tag":2718,"props":5956,"children":5957},{},[5958],{"type":100,"value":5959},"Release Line",{"type":94,"tag":2718,"props":5961,"children":5962},{},[5963],{"type":100,"value":5964},"Minimum Safe Version (all CVEs)",{"type":94,"tag":2739,"props":5966,"children":5967},{},[5968,5985,6002,6019,6036,6053,6070,6087,6104],{"type":94,"tag":2714,"props":5969,"children":5970},{},[5971,5976],{"type":94,"tag":2746,"props":5972,"children":5973},{},[5974],{"type":100,"value":5975},"14.x",{"type":94,"tag":2746,"props":5977,"children":5978},{},[5979],{"type":94,"tag":126,"props":5980,"children":5982},{"className":5981},[],[5983],{"type":100,"value":5984},"next@14.2.35",{"type":94,"tag":2714,"props":5986,"children":5987},{},[5988,5993],{"type":94,"tag":2746,"props":5989,"children":5990},{},[5991],{"type":100,"value":5992},"15.0.x",{"type":94,"tag":2746,"props":5994,"children":5995},{},[5996],{"type":94,"tag":126,"props":5997,"children":5999},{"className":5998},[],[6000],{"type":100,"value":6001},"next@15.0.5",{"type":94,"tag":2714,"props":6003,"children":6004},{},[6005,6010],{"type":94,"tag":2746,"props":6006,"children":6007},{},[6008],{"type":100,"value":6009},"15.1.x",{"type":94,"tag":2746,"props":6011,"children":6012},{},[6013],{"type":94,"tag":126,"props":6014,"children":6016},{"className":6015},[],[6017],{"type":100,"value":6018},"next@15.1.9",{"type":94,"tag":2714,"props":6020,"children":6021},{},[6022,6027],{"type":94,"tag":2746,"props":6023,"children":6024},{},[6025],{"type":100,"value":6026},"15.2.x",{"type":94,"tag":2746,"props":6028,"children":6029},{},[6030],{"type":94,"tag":126,"props":6031,"children":6033},{"className":6032},[],[6034],{"type":100,"value":6035},"next@15.2.6",{"type":94,"tag":2714,"props":6037,"children":6038},{},[6039,6044],{"type":94,"tag":2746,"props":6040,"children":6041},{},[6042],{"type":100,"value":6043},"15.3.x",{"type":94,"tag":2746,"props":6045,"children":6046},{},[6047],{"type":94,"tag":126,"props":6048,"children":6050},{"className":6049},[],[6051],{"type":100,"value":6052},"next@15.3.6",{"type":94,"tag":2714,"props":6054,"children":6055},{},[6056,6061],{"type":94,"tag":2746,"props":6057,"children":6058},{},[6059],{"type":100,"value":6060},"15.4.x",{"type":94,"tag":2746,"props":6062,"children":6063},{},[6064],{"type":94,"tag":126,"props":6065,"children":6067},{"className":6066},[],[6068],{"type":100,"value":6069},"next@15.4.8",{"type":94,"tag":2714,"props":6071,"children":6072},{},[6073,6078],{"type":94,"tag":2746,"props":6074,"children":6075},{},[6076],{"type":100,"value":6077},"15.5.x",{"type":94,"tag":2746,"props":6079,"children":6080},{},[6081],{"type":94,"tag":126,"props":6082,"children":6084},{"className":6083},[],[6085],{"type":100,"value":6086},"next@15.5.7",{"type":94,"tag":2714,"props":6088,"children":6089},{},[6090,6095],{"type":94,"tag":2746,"props":6091,"children":6092},{},[6093],{"type":100,"value":6094},"16.0.x",{"type":94,"tag":2746,"props":6096,"children":6097},{},[6098],{"type":94,"tag":126,"props":6099,"children":6101},{"className":6100},[],[6102],{"type":100,"value":6103},"next@16.0.11",{"type":94,"tag":2714,"props":6105,"children":6106},{},[6107,6112],{"type":94,"tag":2746,"props":6108,"children":6109},{},[6110],{"type":100,"value":6111},"16.1.x",{"type":94,"tag":2746,"props":6113,"children":6114},{},[6115],{"type":94,"tag":126,"props":6116,"children":6118},{"className":6117},[],[6119],{"type":100,"value":6120},"next@16.1.5",{"type":94,"tag":103,"props":6122,"children":6123},{},[6124,6126,6131,6132,6137,6138,6143,6145,6149],{"type":100,"value":6125},"Upgrade React to at least ",{"type":94,"tag":498,"props":6127,"children":6128},{},[6129],{"type":100,"value":6130},"19.0.1",{"type":100,"value":2321},{"type":94,"tag":498,"props":6133,"children":6134},{},[6135],{"type":100,"value":6136},"19.1.2",{"type":100,"value":2321},{"type":94,"tag":498,"props":6139,"children":6140},{},[6141],{"type":100,"value":6142},"19.2.1",{"type":100,"value":6144}," for the RCE fix (CVE-2025-55182), and ",{"type":94,"tag":498,"props":6146,"children":6147},{},[6148],{"type":100,"value":1359},{"type":100,"value":6150}," to fully address all DoS vectors (CVE-2025-55184, CVE-2025-67779, CVE-2026-23864).",{"type":94,"tag":135,"props":6152,"children":6154},{"className":515,"code":6153,"language":517,"meta":140,"style":140},"# Upgrade to latest patched versions\nnpm install next@latest react@latest react-dom@latest\n",[6155],{"type":94,"tag":126,"props":6156,"children":6157},{"__ignoreMap":140},[6158,6166],{"type":94,"tag":146,"props":6159,"children":6160},{"class":148,"line":149},[6161],{"type":94,"tag":146,"props":6162,"children":6163},{"style":865},[6164],{"type":100,"value":6165},"# Upgrade to latest patched versions\n",{"type":94,"tag":146,"props":6167,"children":6168},{"class":148,"line":197},[6169,6174,6179,6184,6189],{"type":94,"tag":146,"props":6170,"children":6171},{"style":265},[6172],{"type":100,"value":6173},"npm",{"type":94,"tag":146,"props":6175,"children":6176},{"style":186},[6177],{"type":100,"value":6178}," install",{"type":94,"tag":146,"props":6180,"children":6181},{"style":186},[6182],{"type":100,"value":6183}," next@latest",{"type":94,"tag":146,"props":6185,"children":6186},{"style":186},[6187],{"type":100,"value":6188}," react@latest",{"type":94,"tag":146,"props":6190,"children":6191},{"style":186},[6192],{"type":100,"value":6193}," react-dom@latest\n",{"type":94,"tag":103,"props":6195,"children":6196},{},[6197,6199,6204],{"type":100,"value":6198},"Vercel deployed WAF rules automatically for hosted projects, but ",{"type":94,"tag":498,"props":6200,"children":6201},{},[6202],{"type":100,"value":6203},"WAF is defense-in-depth, not a substitute for patching",{"type":100,"value":404},{"type":94,"tag":109,"props":6206,"children":6208},{"id":6207},"rendering-strategy-decision",[6209],{"type":100,"value":6210},"Rendering Strategy Decision",{"type":94,"tag":2706,"props":6212,"children":6213},{},[6214,6230],{"type":94,"tag":2710,"props":6215,"children":6216},{},[6217],{"type":94,"tag":2714,"props":6218,"children":6219},{},[6220,6225],{"type":94,"tag":2718,"props":6221,"children":6222},{},[6223],{"type":100,"value":6224},"Strategy",{"type":94,"tag":2718,"props":6226,"children":6227},{},[6228],{"type":100,"value":6229},"When to Use",{"type":94,"tag":2739,"props":6231,"children":6232},{},[6233,6253,6273,6286,6305,6317],{"type":94,"tag":2714,"props":6234,"children":6235},{},[6236,6248],{"type":94,"tag":2746,"props":6237,"children":6238},{},[6239,6241,6247],{"type":100,"value":6240},"SSG (",{"type":94,"tag":126,"props":6242,"children":6244},{"className":6243},[],[6245],{"type":100,"value":6246},"generateStaticParams",{"type":100,"value":1626},{"type":94,"tag":2746,"props":6249,"children":6250},{},[6251],{"type":100,"value":6252},"Content rarely changes, maximum performance",{"type":94,"tag":2714,"props":6254,"children":6255},{},[6256,6268],{"type":94,"tag":2746,"props":6257,"children":6258},{},[6259,6261,6267],{"type":100,"value":6260},"ISR (",{"type":94,"tag":126,"props":6262,"children":6264},{"className":6263},[],[6265],{"type":100,"value":6266},"revalidate: N",{"type":100,"value":1626},{"type":94,"tag":2746,"props":6269,"children":6270},{},[6271],{"type":100,"value":6272},"Content changes periodically, acceptable staleness",{"type":94,"tag":2714,"props":6274,"children":6275},{},[6276,6281],{"type":94,"tag":2746,"props":6277,"children":6278},{},[6279],{"type":100,"value":6280},"SSR (Server Components)",{"type":94,"tag":2746,"props":6282,"children":6283},{},[6284],{"type":100,"value":6285},"Per-request fresh data, personalized content",{"type":94,"tag":2714,"props":6287,"children":6288},{},[6289,6300],{"type":94,"tag":2746,"props":6290,"children":6291},{},[6292,6294,6299],{"type":100,"value":6293},"Cache Components (",{"type":94,"tag":126,"props":6295,"children":6297},{"className":6296},[],[6298],{"type":100,"value":2379},{"type":100,"value":1626},{"type":94,"tag":2746,"props":6301,"children":6302},{},[6303],{"type":100,"value":6304},"Mix static shell with dynamic parts",{"type":94,"tag":2714,"props":6306,"children":6307},{},[6308,6312],{"type":94,"tag":2746,"props":6309,"children":6310},{},[6311],{"type":100,"value":1782},{"type":94,"tag":2746,"props":6313,"children":6314},{},[6315],{"type":100,"value":6316},"Interactive UI, browser APIs needed",{"type":94,"tag":2714,"props":6318,"children":6319},{},[6320,6325],{"type":94,"tag":2746,"props":6321,"children":6322},{},[6323],{"type":100,"value":6324},"Streaming (Suspense)",{"type":94,"tag":2746,"props":6326,"children":6327},{},[6328],{"type":100,"value":6329},"Show content progressively as data loads",{"type":94,"tag":729,"props":6331,"children":6333},{"id":6332},"rendering-strategy-guidance",[6334],{"type":100,"value":6335},"Rendering Strategy Guidance",{"type":94,"tag":135,"props":6337,"children":6341},{"className":6338,"code":6340,"language":100},[6339],"language-text","Choosing a rendering strategy?\n├─ Content changes less than once per day?\n│  ├─ Same for all users? → SSG (`generateStaticParams`)\n│  └─ Personalized? → SSG shell + client fetch for personalized parts\n│\n├─ Content changes frequently but can be slightly stale?\n│  ├─ Revalidate on schedule? → ISR with `revalidate: N` seconds\n│  └─ Revalidate on demand? → `revalidateTag()` or `revalidatePath()`\n│\n├─ Content must be fresh on every request?\n│  ├─ Cacheable per-request? → Cache Components (`'use cache'` + `cacheLife`)\n│  ├─ Personalized per-user? → SSR with Streaming (Suspense boundaries)\n│  └─ Real-time? → Client-side with SWR\u002FReact Query + SSR for initial load\n│\n└─ Mostly static with one dynamic section?\n   └─ Partial Prerendering: static shell + Suspense for dynamic island\n",[6342],{"type":94,"tag":126,"props":6343,"children":6344},{"__ignoreMap":140},[6345],{"type":100,"value":6340},{"type":94,"tag":729,"props":6347,"children":6349},{"id":6348},"caching-strategy-matrix",[6350],{"type":100,"value":6351},"Caching Strategy Matrix",{"type":94,"tag":2706,"props":6353,"children":6354},{},[6355,6375],{"type":94,"tag":2710,"props":6356,"children":6357},{},[6358],{"type":94,"tag":2714,"props":6359,"children":6360},{},[6361,6366,6370],{"type":94,"tag":2718,"props":6362,"children":6363},{},[6364],{"type":100,"value":6365},"Data Type",{"type":94,"tag":2718,"props":6367,"children":6368},{},[6369],{"type":100,"value":6224},{"type":94,"tag":2718,"props":6371,"children":6372},{},[6373],{"type":100,"value":6374},"Implementation",{"type":94,"tag":2739,"props":6376,"children":6377},{},[6378,6396,6424,6448,6472,6496,6524],{"type":94,"tag":2714,"props":6379,"children":6380},{},[6381,6386,6391],{"type":94,"tag":2746,"props":6382,"children":6383},{},[6384],{"type":100,"value":6385},"Static assets (JS, CSS, images)",{"type":94,"tag":2746,"props":6387,"children":6388},{},[6389],{"type":100,"value":6390},"Immutable cache",{"type":94,"tag":2746,"props":6392,"children":6393},{},[6394],{"type":100,"value":6395},"Automatic with Vercel (hashed filenames)",{"type":94,"tag":2714,"props":6397,"children":6398},{},[6399,6404,6409],{"type":94,"tag":2746,"props":6400,"children":6401},{},[6402],{"type":100,"value":6403},"API responses (shared)",{"type":94,"tag":2746,"props":6405,"children":6406},{},[6407],{"type":100,"value":6408},"Cache Components",{"type":94,"tag":2746,"props":6410,"children":6411},{},[6412,6417,6418],{"type":94,"tag":126,"props":6413,"children":6415},{"className":6414},[],[6416],{"type":100,"value":2379},{"type":100,"value":806},{"type":94,"tag":126,"props":6419,"children":6421},{"className":6420},[],[6422],{"type":100,"value":6423},"cacheLife('hours')",{"type":94,"tag":2714,"props":6425,"children":6426},{},[6427,6432,6437],{"type":94,"tag":2746,"props":6428,"children":6429},{},[6430],{"type":100,"value":6431},"API responses (per-user)",{"type":94,"tag":2746,"props":6433,"children":6434},{},[6435],{"type":100,"value":6436},"No cache or short TTL",{"type":94,"tag":2746,"props":6438,"children":6439},{},[6440,6446],{"type":94,"tag":126,"props":6441,"children":6443},{"className":6442},[],[6444],{"type":100,"value":6445},"cacheLife({ revalidate: 60 })",{"type":100,"value":6447}," with user-scoped key",{"type":94,"tag":2714,"props":6449,"children":6450},{},[6451,6456,6461],{"type":94,"tag":2746,"props":6452,"children":6453},{},[6454],{"type":100,"value":6455},"Configuration data",{"type":94,"tag":2746,"props":6457,"children":6458},{},[6459],{"type":100,"value":6460},"Edge Config",{"type":94,"tag":2746,"props":6462,"children":6463},{},[6464,6470],{"type":94,"tag":126,"props":6465,"children":6467},{"className":6466},[],[6468],{"type":100,"value":6469},"@vercel\u002Fedge-config",{"type":100,"value":6471}," (\u003C 5ms reads)",{"type":94,"tag":2714,"props":6473,"children":6474},{},[6475,6480,6485],{"type":94,"tag":2746,"props":6476,"children":6477},{},[6478],{"type":100,"value":6479},"Database queries",{"type":94,"tag":2746,"props":6481,"children":6482},{},[6483],{"type":100,"value":6484},"ISR + on-demand",{"type":94,"tag":2746,"props":6486,"children":6487},{},[6488,6494],{"type":94,"tag":126,"props":6489,"children":6491},{"className":6490},[],[6492],{"type":100,"value":6493},"revalidateTag('products')",{"type":100,"value":6495}," on write",{"type":94,"tag":2714,"props":6497,"children":6498},{},[6499,6504,6509],{"type":94,"tag":2746,"props":6500,"children":6501},{},[6502],{"type":100,"value":6503},"Full pages",{"type":94,"tag":2746,"props":6505,"children":6506},{},[6507],{"type":100,"value":6508},"SSG \u002F ISR",{"type":94,"tag":2746,"props":6510,"children":6511},{},[6512,6517,6518],{"type":94,"tag":126,"props":6513,"children":6515},{"className":6514},[],[6516],{"type":100,"value":6246},{"type":100,"value":806},{"type":94,"tag":126,"props":6519,"children":6521},{"className":6520},[],[6522],{"type":100,"value":6523},"revalidate",{"type":94,"tag":2714,"props":6525,"children":6526},{},[6527,6532,6537],{"type":94,"tag":2746,"props":6528,"children":6529},{},[6530],{"type":100,"value":6531},"Search results",{"type":94,"tag":2746,"props":6533,"children":6534},{},[6535],{"type":100,"value":6536},"Client-side + SWR",{"type":94,"tag":2746,"props":6538,"children":6539},{},[6540,6546],{"type":94,"tag":126,"props":6541,"children":6543},{"className":6542},[],[6544],{"type":100,"value":6545},"useSWR",{"type":100,"value":6547}," with stale-while-revalidate",{"type":94,"tag":729,"props":6549,"children":6551},{"id":6550},"image-optimization-pattern",[6552],{"type":100,"value":6553},"Image Optimization Pattern",{"type":94,"tag":135,"props":6555,"children":6557},{"className":990,"code":6556,"language":992,"meta":140,"style":140},"\u002F\u002F BEFORE: Unoptimized, causes LCP & CLS issues\n\u003Cimg src=\"\u002Fhero.jpg\" \u002F>\n\n\u002F\u002F AFTER: Optimized with next\u002Fimage\nimport Image from 'next\u002Fimage';\n\u003CImage src=\"\u002Fhero.jpg\" width={1200} height={600} priority alt=\"Hero\" \u002F>\n",[6558],{"type":94,"tag":126,"props":6559,"children":6560},{"__ignoreMap":140},[6561,6569,6607,6614,6622,6656],{"type":94,"tag":146,"props":6562,"children":6563},{"class":148,"line":149},[6564],{"type":94,"tag":146,"props":6565,"children":6566},{"style":865},[6567],{"type":100,"value":6568},"\u002F\u002F BEFORE: Unoptimized, causes LCP & CLS issues\n",{"type":94,"tag":146,"props":6570,"children":6571},{"class":148,"line":197},[6572,6576,6581,6586,6590,6594,6599,6603],{"type":94,"tag":146,"props":6573,"children":6574},{"style":159},[6575],{"type":100,"value":1012},{"type":94,"tag":146,"props":6577,"children":6578},{"style":350},[6579],{"type":100,"value":6580},"img",{"type":94,"tag":146,"props":6582,"children":6583},{"style":249},[6584],{"type":100,"value":6585}," src",{"type":94,"tag":146,"props":6587,"children":6588},{"style":159},[6589],{"type":100,"value":1027},{"type":94,"tag":146,"props":6591,"children":6592},{"style":159},[6593],{"type":100,"value":589},{"type":94,"tag":146,"props":6595,"children":6596},{"style":186},[6597],{"type":100,"value":6598},"\u002Fhero.jpg",{"type":94,"tag":146,"props":6600,"children":6601},{"style":159},[6602],{"type":100,"value":589},{"type":94,"tag":146,"props":6604,"children":6605},{"style":159},[6606],{"type":100,"value":4861},{"type":94,"tag":146,"props":6608,"children":6609},{"class":148,"line":235},[6610],{"type":94,"tag":146,"props":6611,"children":6612},{"emptyLinePlaceholder":239},[6613],{"type":100,"value":242},{"type":94,"tag":146,"props":6615,"children":6616},{"class":148,"line":245},[6617],{"type":94,"tag":146,"props":6618,"children":6619},{"style":865},[6620],{"type":100,"value":6621},"\u002F\u002F AFTER: Optimized with next\u002Fimage\n",{"type":94,"tag":146,"props":6623,"children":6624},{"class":148,"line":42},[6625,6629,6634,6639,6643,6648,6652],{"type":94,"tag":146,"props":6626,"children":6627},{"style":153},[6628],{"type":100,"value":156},{"type":94,"tag":146,"props":6630,"children":6631},{"style":165},[6632],{"type":100,"value":6633}," Image ",{"type":94,"tag":146,"props":6635,"children":6636},{"style":153},[6637],{"type":100,"value":6638},"from",{"type":94,"tag":146,"props":6640,"children":6641},{"style":159},[6642],{"type":100,"value":183},{"type":94,"tag":146,"props":6644,"children":6645},{"style":186},[6646],{"type":100,"value":6647},"next\u002Fimage",{"type":94,"tag":146,"props":6649,"children":6650},{"style":159},[6651],{"type":100,"value":1720},{"type":94,"tag":146,"props":6653,"children":6654},{"style":159},[6655],{"type":100,"value":918},{"type":94,"tag":146,"props":6657,"children":6658},{"class":148,"line":89},[6659,6663,6668,6672,6676,6680,6684,6688,6693,6697,6702,6707,6712,6716,6721,6725,6730,6735,6739,6743,6748,6752],{"type":94,"tag":146,"props":6660,"children":6661},{"style":159},[6662],{"type":100,"value":1012},{"type":94,"tag":146,"props":6664,"children":6665},{"style":265},[6666],{"type":100,"value":6667},"Image",{"type":94,"tag":146,"props":6669,"children":6670},{"style":249},[6671],{"type":100,"value":6585},{"type":94,"tag":146,"props":6673,"children":6674},{"style":159},[6675],{"type":100,"value":1027},{"type":94,"tag":146,"props":6677,"children":6678},{"style":159},[6679],{"type":100,"value":589},{"type":94,"tag":146,"props":6681,"children":6682},{"style":186},[6683],{"type":100,"value":6598},{"type":94,"tag":146,"props":6685,"children":6686},{"style":159},[6687],{"type":100,"value":589},{"type":94,"tag":146,"props":6689,"children":6690},{"style":249},[6691],{"type":100,"value":6692}," width",{"type":94,"tag":146,"props":6694,"children":6695},{"style":159},[6696],{"type":100,"value":1050},{"type":94,"tag":146,"props":6698,"children":6699},{"style":1931},[6700],{"type":100,"value":6701},"1200",{"type":94,"tag":146,"props":6703,"children":6704},{"style":159},[6705],{"type":100,"value":6706},"} ",{"type":94,"tag":146,"props":6708,"children":6709},{"style":249},[6710],{"type":100,"value":6711},"height",{"type":94,"tag":146,"props":6713,"children":6714},{"style":159},[6715],{"type":100,"value":1050},{"type":94,"tag":146,"props":6717,"children":6718},{"style":1931},[6719],{"type":100,"value":6720},"600",{"type":94,"tag":146,"props":6722,"children":6723},{"style":159},[6724],{"type":100,"value":6706},{"type":94,"tag":146,"props":6726,"children":6727},{"style":249},[6728],{"type":100,"value":6729},"priority",{"type":94,"tag":146,"props":6731,"children":6732},{"style":249},[6733],{"type":100,"value":6734}," alt",{"type":94,"tag":146,"props":6736,"children":6737},{"style":159},[6738],{"type":100,"value":1027},{"type":94,"tag":146,"props":6740,"children":6741},{"style":159},[6742],{"type":100,"value":589},{"type":94,"tag":146,"props":6744,"children":6745},{"style":186},[6746],{"type":100,"value":6747},"Hero",{"type":94,"tag":146,"props":6749,"children":6750},{"style":159},[6751],{"type":100,"value":589},{"type":94,"tag":146,"props":6753,"children":6754},{"style":159},[6755],{"type":100,"value":4861},{"type":94,"tag":729,"props":6757,"children":6759},{"id":6758},"font-loading-pattern",[6760],{"type":100,"value":6761},"Font Loading Pattern",{"type":94,"tag":135,"props":6763,"children":6765},{"className":990,"code":6764,"language":992,"meta":140,"style":140},"\u002F\u002F BEFORE: External font causes CLS\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter\" rel=\"stylesheet\" \u002F>\n\n\u002F\u002F AFTER: Zero-CLS with next\u002Ffont\nimport { Inter } from 'next\u002Ffont\u002Fgoogle';\nconst inter = Inter({ subsets: ['latin'] });\n",[6766],{"type":94,"tag":126,"props":6767,"children":6768},{"__ignoreMap":140},[6769,6777,6837,6844,6852,6893],{"type":94,"tag":146,"props":6770,"children":6771},{"class":148,"line":149},[6772],{"type":94,"tag":146,"props":6773,"children":6774},{"style":865},[6775],{"type":100,"value":6776},"\u002F\u002F BEFORE: External font causes CLS\n",{"type":94,"tag":146,"props":6778,"children":6779},{"class":148,"line":197},[6780,6784,6789,6794,6798,6802,6807,6811,6816,6820,6824,6829,6833],{"type":94,"tag":146,"props":6781,"children":6782},{"style":159},[6783],{"type":100,"value":1012},{"type":94,"tag":146,"props":6785,"children":6786},{"style":350},[6787],{"type":100,"value":6788},"link",{"type":94,"tag":146,"props":6790,"children":6791},{"style":249},[6792],{"type":100,"value":6793}," href",{"type":94,"tag":146,"props":6795,"children":6796},{"style":159},[6797],{"type":100,"value":1027},{"type":94,"tag":146,"props":6799,"children":6800},{"style":159},[6801],{"type":100,"value":589},{"type":94,"tag":146,"props":6803,"children":6804},{"style":186},[6805],{"type":100,"value":6806},"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter",{"type":94,"tag":146,"props":6808,"children":6809},{"style":159},[6810],{"type":100,"value":589},{"type":94,"tag":146,"props":6812,"children":6813},{"style":249},[6814],{"type":100,"value":6815}," rel",{"type":94,"tag":146,"props":6817,"children":6818},{"style":159},[6819],{"type":100,"value":1027},{"type":94,"tag":146,"props":6821,"children":6822},{"style":159},[6823],{"type":100,"value":589},{"type":94,"tag":146,"props":6825,"children":6826},{"style":186},[6827],{"type":100,"value":6828},"stylesheet",{"type":94,"tag":146,"props":6830,"children":6831},{"style":159},[6832],{"type":100,"value":589},{"type":94,"tag":146,"props":6834,"children":6835},{"style":159},[6836],{"type":100,"value":4861},{"type":94,"tag":146,"props":6838,"children":6839},{"class":148,"line":235},[6840],{"type":94,"tag":146,"props":6841,"children":6842},{"emptyLinePlaceholder":239},[6843],{"type":100,"value":242},{"type":94,"tag":146,"props":6845,"children":6846},{"class":148,"line":245},[6847],{"type":94,"tag":146,"props":6848,"children":6849},{"style":865},[6850],{"type":100,"value":6851},"\u002F\u002F AFTER: Zero-CLS with next\u002Ffont\n",{"type":94,"tag":146,"props":6853,"children":6854},{"class":148,"line":42},[6855,6859,6863,6868,6872,6876,6880,6885,6889],{"type":94,"tag":146,"props":6856,"children":6857},{"style":153},[6858],{"type":100,"value":156},{"type":94,"tag":146,"props":6860,"children":6861},{"style":159},[6862],{"type":100,"value":162},{"type":94,"tag":146,"props":6864,"children":6865},{"style":165},[6866],{"type":100,"value":6867}," Inter",{"type":94,"tag":146,"props":6869,"children":6870},{"style":159},[6871],{"type":100,"value":173},{"type":94,"tag":146,"props":6873,"children":6874},{"style":153},[6875],{"type":100,"value":178},{"type":94,"tag":146,"props":6877,"children":6878},{"style":159},[6879],{"type":100,"value":183},{"type":94,"tag":146,"props":6881,"children":6882},{"style":186},[6883],{"type":100,"value":6884},"next\u002Ffont\u002Fgoogle",{"type":94,"tag":146,"props":6886,"children":6887},{"style":159},[6888],{"type":100,"value":1720},{"type":94,"tag":146,"props":6890,"children":6891},{"style":159},[6892],{"type":100,"value":918},{"type":94,"tag":146,"props":6894,"children":6895},{"class":148,"line":89},[6896,6900,6905,6909,6913,6917,6922,6927,6931,6935,6939,6944,6948,6952,6956,6960],{"type":94,"tag":146,"props":6897,"children":6898},{"style":249},[6899],{"type":100,"value":2861},{"type":94,"tag":146,"props":6901,"children":6902},{"style":165},[6903],{"type":100,"value":6904}," inter ",{"type":94,"tag":146,"props":6906,"children":6907},{"style":159},[6908],{"type":100,"value":1027},{"type":94,"tag":146,"props":6910,"children":6911},{"style":325},[6912],{"type":100,"value":6867},{"type":94,"tag":146,"props":6914,"children":6915},{"style":165},[6916],{"type":100,"value":385},{"type":94,"tag":146,"props":6918,"children":6919},{"style":159},[6920],{"type":100,"value":6921},"{",{"type":94,"tag":146,"props":6923,"children":6924},{"style":350},[6925],{"type":100,"value":6926}," subsets",{"type":94,"tag":146,"props":6928,"children":6929},{"style":159},[6930],{"type":100,"value":262},{"type":94,"tag":146,"props":6932,"children":6933},{"style":165},[6934],{"type":100,"value":1897},{"type":94,"tag":146,"props":6936,"children":6937},{"style":159},[6938],{"type":100,"value":1720},{"type":94,"tag":146,"props":6940,"children":6941},{"style":186},[6942],{"type":100,"value":6943},"latin",{"type":94,"tag":146,"props":6945,"children":6946},{"style":159},[6947],{"type":100,"value":1720},{"type":94,"tag":146,"props":6949,"children":6950},{"style":165},[6951],{"type":100,"value":3673},{"type":94,"tag":146,"props":6953,"children":6954},{"style":159},[6955],{"type":100,"value":1074},{"type":94,"tag":146,"props":6957,"children":6958},{"style":165},[6959],{"type":100,"value":1626},{"type":94,"tag":146,"props":6961,"children":6962},{"style":159},[6963],{"type":100,"value":918},{"type":94,"tag":729,"props":6965,"children":6967},{"id":6966},"cache-components-pattern",[6968],{"type":100,"value":6969},"Cache Components Pattern",{"type":94,"tag":135,"props":6971,"children":6973},{"className":990,"code":6972,"language":992,"meta":140,"style":140},"\u002F\u002F BEFORE: Re-fetches on every request\nasync function ProductList() {\n  const products = await db.query('SELECT * FROM products');\n  return \u003Cul>{products.map(p => \u003Cli key={p.id}>{p.name}\u003C\u002Fli>)}\u003C\u002Ful>;\n}\n\n\u002F\u002F AFTER: Cached with automatic revalidation\n'use cache';\nimport { cacheLife } from 'next\u002Fcache';\n\nasync function ProductList() {\n  cacheLife('hours');\n  const products = await db.query('SELECT * FROM products');\n  return \u003Cul>{products.map(p => \u003Cli key={p.id}>{p.name}\u003C\u002Fli>)}\u003C\u002Ful>;\n}\n",[6974],{"type":94,"tag":126,"props":6975,"children":6976},{"__ignoreMap":140},[6977,6985,7010,7067,7188,7195,7202,7210,7229,7270,7277,7300,7331,7386,7501],{"type":94,"tag":146,"props":6978,"children":6979},{"class":148,"line":149},[6980],{"type":94,"tag":146,"props":6981,"children":6982},{"style":865},[6983],{"type":100,"value":6984},"\u002F\u002F BEFORE: Re-fetches on every request\n",{"type":94,"tag":146,"props":6986,"children":6987},{"class":148,"line":197},[6988,6993,6997,7002,7006],{"type":94,"tag":146,"props":6989,"children":6990},{"style":249},[6991],{"type":100,"value":6992},"async",{"type":94,"tag":146,"props":6994,"children":6995},{"style":249},[6996],{"type":100,"value":322},{"type":94,"tag":146,"props":6998,"children":6999},{"style":325},[7000],{"type":100,"value":7001}," ProductList",{"type":94,"tag":146,"props":7003,"children":7004},{"style":159},[7005],{"type":100,"value":333},{"type":94,"tag":146,"props":7007,"children":7008},{"style":159},[7009],{"type":100,"value":338},{"type":94,"tag":146,"props":7011,"children":7012},{"class":148,"line":235},[7013,7017,7022,7026,7030,7034,7038,7042,7046,7050,7055,7059,7063],{"type":94,"tag":146,"props":7014,"children":7015},{"style":249},[7016],{"type":100,"value":1683},{"type":94,"tag":146,"props":7018,"children":7019},{"style":165},[7020],{"type":100,"value":7021}," products",{"type":94,"tag":146,"props":7023,"children":7024},{"style":159},[7025],{"type":100,"value":297},{"type":94,"tag":146,"props":7027,"children":7028},{"style":153},[7029],{"type":100,"value":1697},{"type":94,"tag":146,"props":7031,"children":7032},{"style":165},[7033],{"type":100,"value":1702},{"type":94,"tag":146,"props":7035,"children":7036},{"style":159},[7037],{"type":100,"value":404},{"type":94,"tag":146,"props":7039,"children":7040},{"style":325},[7041],{"type":100,"value":1711},{"type":94,"tag":146,"props":7043,"children":7044},{"style":350},[7045],{"type":100,"value":385},{"type":94,"tag":146,"props":7047,"children":7048},{"style":159},[7049],{"type":100,"value":1720},{"type":94,"tag":146,"props":7051,"children":7052},{"style":186},[7053],{"type":100,"value":7054},"SELECT * FROM products",{"type":94,"tag":146,"props":7056,"children":7057},{"style":159},[7058],{"type":100,"value":1720},{"type":94,"tag":146,"props":7060,"children":7061},{"style":350},[7062],{"type":100,"value":1626},{"type":94,"tag":146,"props":7064,"children":7065},{"style":159},[7066],{"type":100,"value":918},{"type":94,"tag":146,"props":7068,"children":7069},{"class":148,"line":245},[7070,7074,7078,7082,7087,7092,7096,7101,7105,7109,7113,7117,7121,7126,7130,7134,7138,7143,7147,7151,7155,7159,7163,7167,7171,7175,7179,7183],{"type":94,"tag":146,"props":7071,"children":7072},{"style":153},[7073],{"type":100,"value":436},{"type":94,"tag":146,"props":7075,"children":7076},{"style":159},[7077],{"type":100,"value":1746},{"type":94,"tag":146,"props":7079,"children":7080},{"style":350},[7081],{"type":100,"value":1300},{"type":94,"tag":146,"props":7083,"children":7084},{"style":159},[7085],{"type":100,"value":7086},">{",{"type":94,"tag":146,"props":7088,"children":7089},{"style":165},[7090],{"type":100,"value":7091},"products",{"type":94,"tag":146,"props":7093,"children":7094},{"style":159},[7095],{"type":100,"value":404},{"type":94,"tag":146,"props":7097,"children":7098},{"style":325},[7099],{"type":100,"value":7100},"map",{"type":94,"tag":146,"props":7102,"children":7103},{"style":165},[7104],{"type":100,"value":385},{"type":94,"tag":146,"props":7106,"children":7107},{"style":2121},[7108],{"type":100,"value":103},{"type":94,"tag":146,"props":7110,"children":7111},{"style":249},[7112],{"type":100,"value":1969},{"type":94,"tag":146,"props":7114,"children":7115},{"style":159},[7116],{"type":100,"value":1746},{"type":94,"tag":146,"props":7118,"children":7119},{"style":350},[7120],{"type":100,"value":818},{"type":94,"tag":146,"props":7122,"children":7123},{"style":249},[7124],{"type":100,"value":7125}," key",{"type":94,"tag":146,"props":7127,"children":7128},{"style":159},[7129],{"type":100,"value":1050},{"type":94,"tag":146,"props":7131,"children":7132},{"style":165},[7133],{"type":100,"value":103},{"type":94,"tag":146,"props":7135,"children":7136},{"style":159},[7137],{"type":100,"value":404},{"type":94,"tag":146,"props":7139,"children":7140},{"style":165},[7141],{"type":100,"value":7142},"id",{"type":94,"tag":146,"props":7144,"children":7145},{"style":159},[7146],{"type":100,"value":1997},{"type":94,"tag":146,"props":7148,"children":7149},{"style":165},[7150],{"type":100,"value":103},{"type":94,"tag":146,"props":7152,"children":7153},{"style":159},[7154],{"type":100,"value":404},{"type":94,"tag":146,"props":7156,"children":7157},{"style":165},[7158],{"type":100,"value":2184},{"type":94,"tag":146,"props":7160,"children":7161},{"style":159},[7162],{"type":100,"value":2006},{"type":94,"tag":146,"props":7164,"children":7165},{"style":350},[7166],{"type":100,"value":818},{"type":94,"tag":146,"props":7168,"children":7169},{"style":159},[7170],{"type":100,"value":282},{"type":94,"tag":146,"props":7172,"children":7173},{"style":165},[7174],{"type":100,"value":1626},{"type":94,"tag":146,"props":7176,"children":7177},{"style":159},[7178],{"type":100,"value":2006},{"type":94,"tag":146,"props":7180,"children":7181},{"style":350},[7182],{"type":100,"value":1300},{"type":94,"tag":146,"props":7184,"children":7185},{"style":159},[7186],{"type":100,"value":7187},">;\n",{"type":94,"tag":146,"props":7189,"children":7190},{"class":148,"line":42},[7191],{"type":94,"tag":146,"props":7192,"children":7193},{"style":159},[7194],{"type":100,"value":450},{"type":94,"tag":146,"props":7196,"children":7197},{"class":148,"line":89},[7198],{"type":94,"tag":146,"props":7199,"children":7200},{"emptyLinePlaceholder":239},[7201],{"type":100,"value":242},{"type":94,"tag":146,"props":7203,"children":7204},{"class":148,"line":341},[7205],{"type":94,"tag":146,"props":7206,"children":7207},{"style":865},[7208],{"type":100,"value":7209},"\u002F\u002F AFTER: Cached with automatic revalidation\n",{"type":94,"tag":146,"props":7211,"children":7212},{"class":148,"line":430},[7213,7217,7221,7225],{"type":94,"tag":146,"props":7214,"children":7215},{"style":159},[7216],{"type":100,"value":1720},{"type":94,"tag":146,"props":7218,"children":7219},{"style":186},[7220],{"type":100,"value":2400},{"type":94,"tag":146,"props":7222,"children":7223},{"style":159},[7224],{"type":100,"value":1720},{"type":94,"tag":146,"props":7226,"children":7227},{"style":159},[7228],{"type":100,"value":918},{"type":94,"tag":146,"props":7230,"children":7231},{"class":148,"line":444},[7232,7236,7240,7245,7249,7253,7257,7262,7266],{"type":94,"tag":146,"props":7233,"children":7234},{"style":153},[7235],{"type":100,"value":156},{"type":94,"tag":146,"props":7237,"children":7238},{"style":159},[7239],{"type":100,"value":162},{"type":94,"tag":146,"props":7241,"children":7242},{"style":165},[7243],{"type":100,"value":7244}," cacheLife",{"type":94,"tag":146,"props":7246,"children":7247},{"style":159},[7248],{"type":100,"value":173},{"type":94,"tag":146,"props":7250,"children":7251},{"style":153},[7252],{"type":100,"value":178},{"type":94,"tag":146,"props":7254,"children":7255},{"style":159},[7256],{"type":100,"value":183},{"type":94,"tag":146,"props":7258,"children":7259},{"style":186},[7260],{"type":100,"value":7261},"next\u002Fcache",{"type":94,"tag":146,"props":7263,"children":7264},{"style":159},[7265],{"type":100,"value":1720},{"type":94,"tag":146,"props":7267,"children":7268},{"style":159},[7269],{"type":100,"value":918},{"type":94,"tag":146,"props":7271,"children":7272},{"class":148,"line":4200},[7273],{"type":94,"tag":146,"props":7274,"children":7275},{"emptyLinePlaceholder":239},[7276],{"type":100,"value":242},{"type":94,"tag":146,"props":7278,"children":7279},{"class":148,"line":4235},[7280,7284,7288,7292,7296],{"type":94,"tag":146,"props":7281,"children":7282},{"style":249},[7283],{"type":100,"value":6992},{"type":94,"tag":146,"props":7285,"children":7286},{"style":249},[7287],{"type":100,"value":322},{"type":94,"tag":146,"props":7289,"children":7290},{"style":325},[7291],{"type":100,"value":7001},{"type":94,"tag":146,"props":7293,"children":7294},{"style":159},[7295],{"type":100,"value":333},{"type":94,"tag":146,"props":7297,"children":7298},{"style":159},[7299],{"type":100,"value":338},{"type":94,"tag":146,"props":7301,"children":7302},{"class":148,"line":4282},[7303,7307,7311,7315,7319,7323,7327],{"type":94,"tag":146,"props":7304,"children":7305},{"style":325},[7306],{"type":100,"value":2447},{"type":94,"tag":146,"props":7308,"children":7309},{"style":350},[7310],{"type":100,"value":385},{"type":94,"tag":146,"props":7312,"children":7313},{"style":159},[7314],{"type":100,"value":1720},{"type":94,"tag":146,"props":7316,"children":7317},{"style":186},[7318],{"type":100,"value":2460},{"type":94,"tag":146,"props":7320,"children":7321},{"style":159},[7322],{"type":100,"value":1720},{"type":94,"tag":146,"props":7324,"children":7325},{"style":350},[7326],{"type":100,"value":1626},{"type":94,"tag":146,"props":7328,"children":7329},{"style":159},[7330],{"type":100,"value":918},{"type":94,"tag":146,"props":7332,"children":7333},{"class":148,"line":4304},[7334,7338,7342,7346,7350,7354,7358,7362,7366,7370,7374,7378,7382],{"type":94,"tag":146,"props":7335,"children":7336},{"style":249},[7337],{"type":100,"value":1683},{"type":94,"tag":146,"props":7339,"children":7340},{"style":165},[7341],{"type":100,"value":7021},{"type":94,"tag":146,"props":7343,"children":7344},{"style":159},[7345],{"type":100,"value":297},{"type":94,"tag":146,"props":7347,"children":7348},{"style":153},[7349],{"type":100,"value":1697},{"type":94,"tag":146,"props":7351,"children":7352},{"style":165},[7353],{"type":100,"value":1702},{"type":94,"tag":146,"props":7355,"children":7356},{"style":159},[7357],{"type":100,"value":404},{"type":94,"tag":146,"props":7359,"children":7360},{"style":325},[7361],{"type":100,"value":1711},{"type":94,"tag":146,"props":7363,"children":7364},{"style":350},[7365],{"type":100,"value":385},{"type":94,"tag":146,"props":7367,"children":7368},{"style":159},[7369],{"type":100,"value":1720},{"type":94,"tag":146,"props":7371,"children":7372},{"style":186},[7373],{"type":100,"value":7054},{"type":94,"tag":146,"props":7375,"children":7376},{"style":159},[7377],{"type":100,"value":1720},{"type":94,"tag":146,"props":7379,"children":7380},{"style":350},[7381],{"type":100,"value":1626},{"type":94,"tag":146,"props":7383,"children":7384},{"style":159},[7385],{"type":100,"value":918},{"type":94,"tag":146,"props":7387,"children":7388},{"class":148,"line":4339},[7389,7393,7397,7401,7405,7409,7413,7417,7421,7425,7429,7433,7437,7441,7445,7449,7453,7457,7461,7465,7469,7473,7477,7481,7485,7489,7493,7497],{"type":94,"tag":146,"props":7390,"children":7391},{"style":153},[7392],{"type":100,"value":436},{"type":94,"tag":146,"props":7394,"children":7395},{"style":159},[7396],{"type":100,"value":1746},{"type":94,"tag":146,"props":7398,"children":7399},{"style":350},[7400],{"type":100,"value":1300},{"type":94,"tag":146,"props":7402,"children":7403},{"style":159},[7404],{"type":100,"value":7086},{"type":94,"tag":146,"props":7406,"children":7407},{"style":165},[7408],{"type":100,"value":7091},{"type":94,"tag":146,"props":7410,"children":7411},{"style":159},[7412],{"type":100,"value":404},{"type":94,"tag":146,"props":7414,"children":7415},{"style":325},[7416],{"type":100,"value":7100},{"type":94,"tag":146,"props":7418,"children":7419},{"style":165},[7420],{"type":100,"value":385},{"type":94,"tag":146,"props":7422,"children":7423},{"style":2121},[7424],{"type":100,"value":103},{"type":94,"tag":146,"props":7426,"children":7427},{"style":249},[7428],{"type":100,"value":1969},{"type":94,"tag":146,"props":7430,"children":7431},{"style":159},[7432],{"type":100,"value":1746},{"type":94,"tag":146,"props":7434,"children":7435},{"style":350},[7436],{"type":100,"value":818},{"type":94,"tag":146,"props":7438,"children":7439},{"style":249},[7440],{"type":100,"value":7125},{"type":94,"tag":146,"props":7442,"children":7443},{"style":159},[7444],{"type":100,"value":1050},{"type":94,"tag":146,"props":7446,"children":7447},{"style":165},[7448],{"type":100,"value":103},{"type":94,"tag":146,"props":7450,"children":7451},{"style":159},[7452],{"type":100,"value":404},{"type":94,"tag":146,"props":7454,"children":7455},{"style":165},[7456],{"type":100,"value":7142},{"type":94,"tag":146,"props":7458,"children":7459},{"style":159},[7460],{"type":100,"value":1997},{"type":94,"tag":146,"props":7462,"children":7463},{"style":165},[7464],{"type":100,"value":103},{"type":94,"tag":146,"props":7466,"children":7467},{"style":159},[7468],{"type":100,"value":404},{"type":94,"tag":146,"props":7470,"children":7471},{"style":165},[7472],{"type":100,"value":2184},{"type":94,"tag":146,"props":7474,"children":7475},{"style":159},[7476],{"type":100,"value":2006},{"type":94,"tag":146,"props":7478,"children":7479},{"style":350},[7480],{"type":100,"value":818},{"type":94,"tag":146,"props":7482,"children":7483},{"style":159},[7484],{"type":100,"value":282},{"type":94,"tag":146,"props":7486,"children":7487},{"style":165},[7488],{"type":100,"value":1626},{"type":94,"tag":146,"props":7490,"children":7491},{"style":159},[7492],{"type":100,"value":2006},{"type":94,"tag":146,"props":7494,"children":7495},{"style":350},[7496],{"type":100,"value":1300},{"type":94,"tag":146,"props":7498,"children":7499},{"style":159},[7500],{"type":100,"value":7187},{"type":94,"tag":146,"props":7502,"children":7503},{"class":148,"line":4366},[7504],{"type":94,"tag":146,"props":7505,"children":7506},{"style":159},[7507],{"type":100,"value":450},{"type":94,"tag":729,"props":7509,"children":7511},{"id":7510},"optimistic-ui-pattern",[7512],{"type":100,"value":7513},"Optimistic UI Pattern",{"type":94,"tag":135,"props":7515,"children":7517},{"className":990,"code":7516,"language":992,"meta":140,"style":140},"\u002F\u002F Instant feedback while Server Action processes\n'use client';\nimport { useOptimistic } from 'react';\n\nfunction LikeButton({ count, onLike }) {\n  const [optimisticCount, addOptimistic] = useOptimistic(count);\n  return (\n    \u003Cbutton onClick={() => { addOptimistic(count + 1); onLike(); }}>\n      {optimisticCount} likes\n    \u003C\u002Fbutton>\n  );\n}\n",[7518],{"type":94,"tag":126,"props":7519,"children":7520},{"__ignoreMap":140},[7521,7529,7548,7588,7595,7633,7686,7697,7770,7791,7806,7818],{"type":94,"tag":146,"props":7522,"children":7523},{"class":148,"line":149},[7524],{"type":94,"tag":146,"props":7525,"children":7526},{"style":865},[7527],{"type":100,"value":7528},"\u002F\u002F Instant feedback while Server Action processes\n",{"type":94,"tag":146,"props":7530,"children":7531},{"class":148,"line":197},[7532,7536,7540,7544],{"type":94,"tag":146,"props":7533,"children":7534},{"style":159},[7535],{"type":100,"value":1720},{"type":94,"tag":146,"props":7537,"children":7538},{"style":186},[7539],{"type":100,"value":1814},{"type":94,"tag":146,"props":7541,"children":7542},{"style":159},[7543],{"type":100,"value":1720},{"type":94,"tag":146,"props":7545,"children":7546},{"style":159},[7547],{"type":100,"value":918},{"type":94,"tag":146,"props":7549,"children":7550},{"class":148,"line":235},[7551,7555,7559,7564,7568,7572,7576,7580,7584],{"type":94,"tag":146,"props":7552,"children":7553},{"style":153},[7554],{"type":100,"value":156},{"type":94,"tag":146,"props":7556,"children":7557},{"style":159},[7558],{"type":100,"value":162},{"type":94,"tag":146,"props":7560,"children":7561},{"style":165},[7562],{"type":100,"value":7563}," useOptimistic",{"type":94,"tag":146,"props":7565,"children":7566},{"style":159},[7567],{"type":100,"value":173},{"type":94,"tag":146,"props":7569,"children":7570},{"style":153},[7571],{"type":100,"value":178},{"type":94,"tag":146,"props":7573,"children":7574},{"style":159},[7575],{"type":100,"value":183},{"type":94,"tag":146,"props":7577,"children":7578},{"style":186},[7579],{"type":100,"value":14},{"type":94,"tag":146,"props":7581,"children":7582},{"style":159},[7583],{"type":100,"value":1720},{"type":94,"tag":146,"props":7585,"children":7586},{"style":159},[7587],{"type":100,"value":918},{"type":94,"tag":146,"props":7589,"children":7590},{"class":148,"line":245},[7591],{"type":94,"tag":146,"props":7592,"children":7593},{"emptyLinePlaceholder":239},[7594],{"type":100,"value":242},{"type":94,"tag":146,"props":7596,"children":7597},{"class":148,"line":42},[7598,7602,7607,7611,7616,7620,7625,7629],{"type":94,"tag":146,"props":7599,"children":7600},{"style":249},[7601],{"type":100,"value":3994},{"type":94,"tag":146,"props":7603,"children":7604},{"style":325},[7605],{"type":100,"value":7606}," LikeButton",{"type":94,"tag":146,"props":7608,"children":7609},{"style":159},[7610],{"type":100,"value":4004},{"type":94,"tag":146,"props":7612,"children":7613},{"style":2121},[7614],{"type":100,"value":7615}," count",{"type":94,"tag":146,"props":7617,"children":7618},{"style":159},[7619],{"type":100,"value":881},{"type":94,"tag":146,"props":7621,"children":7622},{"style":2121},[7623],{"type":100,"value":7624}," onLike",{"type":94,"tag":146,"props":7626,"children":7627},{"style":159},[7628],{"type":100,"value":4062},{"type":94,"tag":146,"props":7630,"children":7631},{"style":159},[7632],{"type":100,"value":338},{"type":94,"tag":146,"props":7634,"children":7635},{"class":148,"line":89},[7636,7640,7644,7649,7653,7658,7662,7666,7670,7674,7678,7682],{"type":94,"tag":146,"props":7637,"children":7638},{"style":249},[7639],{"type":100,"value":1683},{"type":94,"tag":146,"props":7641,"children":7642},{"style":159},[7643],{"type":100,"value":1897},{"type":94,"tag":146,"props":7645,"children":7646},{"style":165},[7647],{"type":100,"value":7648},"optimisticCount",{"type":94,"tag":146,"props":7650,"children":7651},{"style":159},[7652],{"type":100,"value":881},{"type":94,"tag":146,"props":7654,"children":7655},{"style":165},[7656],{"type":100,"value":7657}," addOptimistic",{"type":94,"tag":146,"props":7659,"children":7660},{"style":159},[7661],{"type":100,"value":1916},{"type":94,"tag":146,"props":7663,"children":7664},{"style":159},[7665],{"type":100,"value":297},{"type":94,"tag":146,"props":7667,"children":7668},{"style":325},[7669],{"type":100,"value":7563},{"type":94,"tag":146,"props":7671,"children":7672},{"style":350},[7673],{"type":100,"value":385},{"type":94,"tag":146,"props":7675,"children":7676},{"style":165},[7677],{"type":100,"value":1902},{"type":94,"tag":146,"props":7679,"children":7680},{"style":350},[7681],{"type":100,"value":1626},{"type":94,"tag":146,"props":7683,"children":7684},{"style":159},[7685],{"type":100,"value":918},{"type":94,"tag":146,"props":7687,"children":7688},{"class":148,"line":341},[7689,7693],{"type":94,"tag":146,"props":7690,"children":7691},{"style":153},[7692],{"type":100,"value":436},{"type":94,"tag":146,"props":7694,"children":7695},{"style":350},[7696],{"type":100,"value":4571},{"type":94,"tag":146,"props":7698,"children":7699},{"class":148,"line":430},[7700,7704,7708,7712,7716,7720,7724,7728,7732,7736,7741,7745,7749,7753,7757,7761,7765],{"type":94,"tag":146,"props":7701,"children":7702},{"style":159},[7703],{"type":100,"value":4579},{"type":94,"tag":146,"props":7705,"children":7706},{"style":350},[7707],{"type":100,"value":1954},{"type":94,"tag":146,"props":7709,"children":7710},{"style":249},[7711],{"type":100,"value":1959},{"type":94,"tag":146,"props":7713,"children":7714},{"style":159},[7715],{"type":100,"value":1964},{"type":94,"tag":146,"props":7717,"children":7718},{"style":249},[7719],{"type":100,"value":1969},{"type":94,"tag":146,"props":7721,"children":7722},{"style":159},[7723],{"type":100,"value":162},{"type":94,"tag":146,"props":7725,"children":7726},{"style":325},[7727],{"type":100,"value":7657},{"type":94,"tag":146,"props":7729,"children":7730},{"style":350},[7731],{"type":100,"value":385},{"type":94,"tag":146,"props":7733,"children":7734},{"style":165},[7735],{"type":100,"value":1902},{"type":94,"tag":146,"props":7737,"children":7738},{"style":159},[7739],{"type":100,"value":7740}," +",{"type":94,"tag":146,"props":7742,"children":7743},{"style":1931},[7744],{"type":100,"value":1988},{"type":94,"tag":146,"props":7746,"children":7747},{"style":350},[7748],{"type":100,"value":1626},{"type":94,"tag":146,"props":7750,"children":7751},{"style":159},[7752],{"type":100,"value":4045},{"type":94,"tag":146,"props":7754,"children":7755},{"style":325},[7756],{"type":100,"value":7624},{"type":94,"tag":146,"props":7758,"children":7759},{"style":350},[7760],{"type":100,"value":333},{"type":94,"tag":146,"props":7762,"children":7763},{"style":159},[7764],{"type":100,"value":4045},{"type":94,"tag":146,"props":7766,"children":7767},{"style":159},[7768],{"type":100,"value":7769}," }}>\n",{"type":94,"tag":146,"props":7771,"children":7772},{"class":148,"line":444},[7773,7778,7782,7786],{"type":94,"tag":146,"props":7774,"children":7775},{"style":159},[7776],{"type":100,"value":7777},"      {",{"type":94,"tag":146,"props":7779,"children":7780},{"style":165},[7781],{"type":100,"value":7648},{"type":94,"tag":146,"props":7783,"children":7784},{"style":159},[7785],{"type":100,"value":1074},{"type":94,"tag":146,"props":7787,"children":7788},{"style":165},[7789],{"type":100,"value":7790}," likes\n",{"type":94,"tag":146,"props":7792,"children":7793},{"class":148,"line":4200},[7794,7798,7802],{"type":94,"tag":146,"props":7795,"children":7796},{"style":159},[7797],{"type":100,"value":4994},{"type":94,"tag":146,"props":7799,"children":7800},{"style":350},[7801],{"type":100,"value":1954},{"type":94,"tag":146,"props":7803,"children":7804},{"style":159},[7805],{"type":100,"value":1141},{"type":94,"tag":146,"props":7807,"children":7808},{"class":148,"line":4235},[7809,7814],{"type":94,"tag":146,"props":7810,"children":7811},{"style":350},[7812],{"type":100,"value":7813},"  )",{"type":94,"tag":146,"props":7815,"children":7816},{"style":159},[7817],{"type":100,"value":918},{"type":94,"tag":146,"props":7819,"children":7820},{"class":148,"line":4282},[7821],{"type":94,"tag":146,"props":7822,"children":7823},{"style":159},[7824],{"type":100,"value":450},{"type":94,"tag":109,"props":7826,"children":7828},{"id":7827},"og-image-generation",[7829],{"type":100,"value":7830},"OG Image Generation",{"type":94,"tag":103,"props":7832,"children":7833},{},[7834,7836,7842,7844,7850,7852,7858],{"type":100,"value":7835},"Next.js supports file-based OG image generation via ",{"type":94,"tag":126,"props":7837,"children":7839},{"className":7838},[],[7840],{"type":100,"value":7841},"opengraph-image.tsx",{"type":100,"value":7843}," and ",{"type":94,"tag":126,"props":7845,"children":7847},{"className":7846},[],[7848],{"type":100,"value":7849},"twitter-image.tsx",{"type":100,"value":7851}," special files. These use ",{"type":94,"tag":126,"props":7853,"children":7855},{"className":7854},[],[7856],{"type":100,"value":7857},"@vercel\u002Fog",{"type":100,"value":7859}," (built on Satori) to render JSX to images at the Edge runtime.",{"type":94,"tag":729,"props":7861,"children":7863},{"id":7862},"file-convention",[7864],{"type":100,"value":7865},"File Convention",{"type":94,"tag":103,"props":7867,"children":7868},{},[7869,7871,7876,7877,7882],{"type":100,"value":7870},"Place an ",{"type":94,"tag":126,"props":7872,"children":7874},{"className":7873},[],[7875],{"type":100,"value":7841},{"type":100,"value":3362},{"type":94,"tag":126,"props":7878,"children":7880},{"className":7879},[],[7881],{"type":100,"value":7849},{"type":100,"value":7883},") in any route segment to auto-generate social images for that route:",{"type":94,"tag":135,"props":7885,"children":7887},{"className":990,"code":7886,"language":992,"meta":140,"style":140},"\u002F\u002F app\u002Fblog\u002F[slug]\u002Fopengraph-image.tsx\nimport { ImageResponse } from 'next\u002Fog'\n\nexport const runtime = 'edge'\nexport const alt = 'Blog post'\nexport const size = { width: 1200, height: 630 }\nexport const contentType = 'image\u002Fpng'\n\nexport default async function Image({\n  params,\n}: {\n  params: Promise\u003C{ slug: string }>\n}) {\n  const { slug } = await params\n  const post = await fetch(`https:\u002F\u002Fapi.example.com\u002Fposts\u002F${slug}`).then(r => r.json())\n\n  return new ImageResponse(\n    (\n      \u003Cdiv\n        style={{\n          fontSize: 48,\n          background: 'linear-gradient(to bottom, #000, #111)',\n          color: 'white',\n          width: '100%',\n          height: '100%',\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          padding: 48,\n        }}\n      >\n        {post.title}\n      \u003C\u002Fdiv>\n    ),\n    { ...size }\n  )\n}\n",[7888],{"type":94,"tag":126,"props":7889,"children":7890},{"__ignoreMap":140},[7891,7899,7936,7943,7976,8009,8069,8102,8109,8138,8150,8162,8201,8213,8245,8341,8348,8369,8377,8389,8402,8423,8453,8483,8513,8542,8572,8602,8631,8652,8661,8670,8697,8713,8726,8749,8757],{"type":94,"tag":146,"props":7892,"children":7893},{"class":148,"line":149},[7894],{"type":94,"tag":146,"props":7895,"children":7896},{"style":865},[7897],{"type":100,"value":7898},"\u002F\u002F app\u002Fblog\u002F[slug]\u002Fopengraph-image.tsx\n",{"type":94,"tag":146,"props":7900,"children":7901},{"class":148,"line":197},[7902,7906,7910,7915,7919,7923,7927,7932],{"type":94,"tag":146,"props":7903,"children":7904},{"style":153},[7905],{"type":100,"value":156},{"type":94,"tag":146,"props":7907,"children":7908},{"style":159},[7909],{"type":100,"value":162},{"type":94,"tag":146,"props":7911,"children":7912},{"style":165},[7913],{"type":100,"value":7914}," ImageResponse",{"type":94,"tag":146,"props":7916,"children":7917},{"style":159},[7918],{"type":100,"value":173},{"type":94,"tag":146,"props":7920,"children":7921},{"style":153},[7922],{"type":100,"value":178},{"type":94,"tag":146,"props":7924,"children":7925},{"style":159},[7926],{"type":100,"value":183},{"type":94,"tag":146,"props":7928,"children":7929},{"style":186},[7930],{"type":100,"value":7931},"next\u002Fog",{"type":94,"tag":146,"props":7933,"children":7934},{"style":159},[7935],{"type":100,"value":194},{"type":94,"tag":146,"props":7937,"children":7938},{"class":148,"line":235},[7939],{"type":94,"tag":146,"props":7940,"children":7941},{"emptyLinePlaceholder":239},[7942],{"type":100,"value":242},{"type":94,"tag":146,"props":7944,"children":7945},{"class":148,"line":245},[7946,7950,7954,7959,7963,7967,7972],{"type":94,"tag":146,"props":7947,"children":7948},{"style":153},[7949],{"type":100,"value":317},{"type":94,"tag":146,"props":7951,"children":7952},{"style":249},[7953],{"type":100,"value":3629},{"type":94,"tag":146,"props":7955,"children":7956},{"style":165},[7957],{"type":100,"value":7958}," runtime ",{"type":94,"tag":146,"props":7960,"children":7961},{"style":159},[7962],{"type":100,"value":1027},{"type":94,"tag":146,"props":7964,"children":7965},{"style":159},[7966],{"type":100,"value":183},{"type":94,"tag":146,"props":7968,"children":7969},{"style":186},[7970],{"type":100,"value":7971},"edge",{"type":94,"tag":146,"props":7973,"children":7974},{"style":159},[7975],{"type":100,"value":194},{"type":94,"tag":146,"props":7977,"children":7978},{"class":148,"line":42},[7979,7983,7987,7992,7996,8000,8005],{"type":94,"tag":146,"props":7980,"children":7981},{"style":153},[7982],{"type":100,"value":317},{"type":94,"tag":146,"props":7984,"children":7985},{"style":249},[7986],{"type":100,"value":3629},{"type":94,"tag":146,"props":7988,"children":7989},{"style":165},[7990],{"type":100,"value":7991}," alt ",{"type":94,"tag":146,"props":7993,"children":7994},{"style":159},[7995],{"type":100,"value":1027},{"type":94,"tag":146,"props":7997,"children":7998},{"style":159},[7999],{"type":100,"value":183},{"type":94,"tag":146,"props":8001,"children":8002},{"style":186},[8003],{"type":100,"value":8004},"Blog post",{"type":94,"tag":146,"props":8006,"children":8007},{"style":159},[8008],{"type":100,"value":194},{"type":94,"tag":146,"props":8010,"children":8011},{"class":148,"line":89},[8012,8016,8020,8025,8029,8033,8037,8041,8046,8050,8055,8059,8064],{"type":94,"tag":146,"props":8013,"children":8014},{"style":153},[8015],{"type":100,"value":317},{"type":94,"tag":146,"props":8017,"children":8018},{"style":249},[8019],{"type":100,"value":3629},{"type":94,"tag":146,"props":8021,"children":8022},{"style":165},[8023],{"type":100,"value":8024}," size ",{"type":94,"tag":146,"props":8026,"children":8027},{"style":159},[8028],{"type":100,"value":1027},{"type":94,"tag":146,"props":8030,"children":8031},{"style":159},[8032],{"type":100,"value":162},{"type":94,"tag":146,"props":8034,"children":8035},{"style":350},[8036],{"type":100,"value":6692},{"type":94,"tag":146,"props":8038,"children":8039},{"style":159},[8040],{"type":100,"value":262},{"type":94,"tag":146,"props":8042,"children":8043},{"style":1931},[8044],{"type":100,"value":8045}," 1200",{"type":94,"tag":146,"props":8047,"children":8048},{"style":159},[8049],{"type":100,"value":881},{"type":94,"tag":146,"props":8051,"children":8052},{"style":350},[8053],{"type":100,"value":8054}," height",{"type":94,"tag":146,"props":8056,"children":8057},{"style":159},[8058],{"type":100,"value":262},{"type":94,"tag":146,"props":8060,"children":8061},{"style":1931},[8062],{"type":100,"value":8063}," 630",{"type":94,"tag":146,"props":8065,"children":8066},{"style":159},[8067],{"type":100,"value":8068}," }\n",{"type":94,"tag":146,"props":8070,"children":8071},{"class":148,"line":341},[8072,8076,8080,8085,8089,8093,8098],{"type":94,"tag":146,"props":8073,"children":8074},{"style":153},[8075],{"type":100,"value":317},{"type":94,"tag":146,"props":8077,"children":8078},{"style":249},[8079],{"type":100,"value":3629},{"type":94,"tag":146,"props":8081,"children":8082},{"style":165},[8083],{"type":100,"value":8084}," contentType ",{"type":94,"tag":146,"props":8086,"children":8087},{"style":159},[8088],{"type":100,"value":1027},{"type":94,"tag":146,"props":8090,"children":8091},{"style":159},[8092],{"type":100,"value":183},{"type":94,"tag":146,"props":8094,"children":8095},{"style":186},[8096],{"type":100,"value":8097},"image\u002Fpng",{"type":94,"tag":146,"props":8099,"children":8100},{"style":159},[8101],{"type":100,"value":194},{"type":94,"tag":146,"props":8103,"children":8104},{"class":148,"line":430},[8105],{"type":94,"tag":146,"props":8106,"children":8107},{"emptyLinePlaceholder":239},[8108],{"type":100,"value":242},{"type":94,"tag":146,"props":8110,"children":8111},{"class":148,"line":444},[8112,8116,8120,8124,8128,8133],{"type":94,"tag":146,"props":8113,"children":8114},{"style":153},[8115],{"type":100,"value":317},{"type":94,"tag":146,"props":8117,"children":8118},{"style":153},[8119],{"type":100,"value":1653},{"type":94,"tag":146,"props":8121,"children":8122},{"style":249},[8123],{"type":100,"value":1658},{"type":94,"tag":146,"props":8125,"children":8126},{"style":249},[8127],{"type":100,"value":322},{"type":94,"tag":146,"props":8129,"children":8130},{"style":325},[8131],{"type":100,"value":8132}," Image",{"type":94,"tag":146,"props":8134,"children":8135},{"style":159},[8136],{"type":100,"value":8137},"({\n",{"type":94,"tag":146,"props":8139,"children":8140},{"class":148,"line":4200},[8141,8146],{"type":94,"tag":146,"props":8142,"children":8143},{"style":2121},[8144],{"type":100,"value":8145},"  params",{"type":94,"tag":146,"props":8147,"children":8148},{"style":159},[8149],{"type":100,"value":2942},{"type":94,"tag":146,"props":8151,"children":8152},{"class":148,"line":4235},[8153,8158],{"type":94,"tag":146,"props":8154,"children":8155},{"style":159},[8156],{"type":100,"value":8157},"}:",{"type":94,"tag":146,"props":8159,"children":8160},{"style":159},[8161],{"type":100,"value":338},{"type":94,"tag":146,"props":8163,"children":8164},{"class":148,"line":4282},[8165,8169,8173,8178,8183,8188,8192,8196],{"type":94,"tag":146,"props":8166,"children":8167},{"style":350},[8168],{"type":100,"value":8145},{"type":94,"tag":146,"props":8170,"children":8171},{"style":159},[8172],{"type":100,"value":262},{"type":94,"tag":146,"props":8174,"children":8175},{"style":265},[8176],{"type":100,"value":8177}," Promise",{"type":94,"tag":146,"props":8179,"children":8180},{"style":159},[8181],{"type":100,"value":8182},"\u003C{",{"type":94,"tag":146,"props":8184,"children":8185},{"style":350},[8186],{"type":100,"value":8187}," slug",{"type":94,"tag":146,"props":8189,"children":8190},{"style":159},[8191],{"type":100,"value":262},{"type":94,"tag":146,"props":8193,"children":8194},{"style":265},[8195],{"type":100,"value":4040},{"type":94,"tag":146,"props":8197,"children":8198},{"style":159},[8199],{"type":100,"value":8200}," }>\n",{"type":94,"tag":146,"props":8202,"children":8203},{"class":148,"line":4304},[8204,8209],{"type":94,"tag":146,"props":8205,"children":8206},{"style":159},[8207],{"type":100,"value":8208},"})",{"type":94,"tag":146,"props":8210,"children":8211},{"style":159},[8212],{"type":100,"value":338},{"type":94,"tag":146,"props":8214,"children":8215},{"class":148,"line":4339},[8216,8220,8224,8228,8232,8236,8240],{"type":94,"tag":146,"props":8217,"children":8218},{"style":249},[8219],{"type":100,"value":1683},{"type":94,"tag":146,"props":8221,"children":8222},{"style":159},[8223],{"type":100,"value":162},{"type":94,"tag":146,"props":8225,"children":8226},{"style":165},[8227],{"type":100,"value":8187},{"type":94,"tag":146,"props":8229,"children":8230},{"style":159},[8231],{"type":100,"value":173},{"type":94,"tag":146,"props":8233,"children":8234},{"style":159},[8235],{"type":100,"value":297},{"type":94,"tag":146,"props":8237,"children":8238},{"style":153},[8239],{"type":100,"value":1697},{"type":94,"tag":146,"props":8241,"children":8242},{"style":165},[8243],{"type":100,"value":8244}," params\n",{"type":94,"tag":146,"props":8246,"children":8247},{"class":148,"line":4366},[8248,8252,8257,8261,8265,8270,8274,8278,8283,8287,8292,8296,8300,8304,8309,8313,8318,8322,8327,8331,8336],{"type":94,"tag":146,"props":8249,"children":8250},{"style":249},[8251],{"type":100,"value":1683},{"type":94,"tag":146,"props":8253,"children":8254},{"style":165},[8255],{"type":100,"value":8256}," post",{"type":94,"tag":146,"props":8258,"children":8259},{"style":159},[8260],{"type":100,"value":297},{"type":94,"tag":146,"props":8262,"children":8263},{"style":153},[8264],{"type":100,"value":1697},{"type":94,"tag":146,"props":8266,"children":8267},{"style":325},[8268],{"type":100,"value":8269}," fetch",{"type":94,"tag":146,"props":8271,"children":8272},{"style":350},[8273],{"type":100,"value":385},{"type":94,"tag":146,"props":8275,"children":8276},{"style":159},[8277],{"type":100,"value":1260},{"type":94,"tag":146,"props":8279,"children":8280},{"style":186},[8281],{"type":100,"value":8282},"https:\u002F\u002Fapi.example.com\u002Fposts\u002F",{"type":94,"tag":146,"props":8284,"children":8285},{"style":159},[8286],{"type":100,"value":4128},{"type":94,"tag":146,"props":8288,"children":8289},{"style":165},[8290],{"type":100,"value":8291},"slug",{"type":94,"tag":146,"props":8293,"children":8294},{"style":159},[8295],{"type":100,"value":1097},{"type":94,"tag":146,"props":8297,"children":8298},{"style":350},[8299],{"type":100,"value":1626},{"type":94,"tag":146,"props":8301,"children":8302},{"style":159},[8303],{"type":100,"value":404},{"type":94,"tag":146,"props":8305,"children":8306},{"style":325},[8307],{"type":100,"value":8308},"then",{"type":94,"tag":146,"props":8310,"children":8311},{"style":350},[8312],{"type":100,"value":385},{"type":94,"tag":146,"props":8314,"children":8315},{"style":2121},[8316],{"type":100,"value":8317},"r",{"type":94,"tag":146,"props":8319,"children":8320},{"style":249},[8321],{"type":100,"value":1969},{"type":94,"tag":146,"props":8323,"children":8324},{"style":165},[8325],{"type":100,"value":8326}," r",{"type":94,"tag":146,"props":8328,"children":8329},{"style":159},[8330],{"type":100,"value":404},{"type":94,"tag":146,"props":8332,"children":8333},{"style":325},[8334],{"type":100,"value":8335},"json",{"type":94,"tag":146,"props":8337,"children":8338},{"style":350},[8339],{"type":100,"value":8340},"())\n",{"type":94,"tag":146,"props":8342,"children":8343},{"class":148,"line":4879},[8344],{"type":94,"tag":146,"props":8345,"children":8346},{"emptyLinePlaceholder":239},[8347],{"type":100,"value":242},{"type":94,"tag":146,"props":8349,"children":8350},{"class":148,"line":4955},[8351,8355,8360,8364],{"type":94,"tag":146,"props":8352,"children":8353},{"style":153},[8354],{"type":100,"value":436},{"type":94,"tag":146,"props":8356,"children":8357},{"style":159},[8358],{"type":100,"value":8359}," new",{"type":94,"tag":146,"props":8361,"children":8362},{"style":325},[8363],{"type":100,"value":7914},{"type":94,"tag":146,"props":8365,"children":8366},{"style":350},[8367],{"type":100,"value":8368},"(\n",{"type":94,"tag":146,"props":8370,"children":8371},{"class":148,"line":4972},[8372],{"type":94,"tag":146,"props":8373,"children":8374},{"style":350},[8375],{"type":100,"value":8376},"    (\n",{"type":94,"tag":146,"props":8378,"children":8379},{"class":148,"line":4988},[8380,8384],{"type":94,"tag":146,"props":8381,"children":8382},{"style":159},[8383],{"type":100,"value":4596},{"type":94,"tag":146,"props":8385,"children":8386},{"style":350},[8387],{"type":100,"value":8388},"div\n",{"type":94,"tag":146,"props":8390,"children":8391},{"class":148,"line":5005},[8392,8397],{"type":94,"tag":146,"props":8393,"children":8394},{"style":249},[8395],{"type":100,"value":8396},"        style",{"type":94,"tag":146,"props":8398,"children":8399},{"style":159},[8400],{"type":100,"value":8401},"={{\n",{"type":94,"tag":146,"props":8403,"children":8404},{"class":148,"line":5014},[8405,8410,8414,8419],{"type":94,"tag":146,"props":8406,"children":8407},{"style":350},[8408],{"type":100,"value":8409},"          fontSize",{"type":94,"tag":146,"props":8411,"children":8412},{"style":159},[8413],{"type":100,"value":262},{"type":94,"tag":146,"props":8415,"children":8416},{"style":1931},[8417],{"type":100,"value":8418}," 48",{"type":94,"tag":146,"props":8420,"children":8421},{"style":159},[8422],{"type":100,"value":2942},{"type":94,"tag":146,"props":8424,"children":8426},{"class":148,"line":8425},22,[8427,8432,8436,8440,8445,8449],{"type":94,"tag":146,"props":8428,"children":8429},{"style":350},[8430],{"type":100,"value":8431},"          background",{"type":94,"tag":146,"props":8433,"children":8434},{"style":159},[8435],{"type":100,"value":262},{"type":94,"tag":146,"props":8437,"children":8438},{"style":159},[8439],{"type":100,"value":183},{"type":94,"tag":146,"props":8441,"children":8442},{"style":186},[8443],{"type":100,"value":8444},"linear-gradient(to bottom, #000, #111)",{"type":94,"tag":146,"props":8446,"children":8447},{"style":159},[8448],{"type":100,"value":1720},{"type":94,"tag":146,"props":8450,"children":8451},{"style":159},[8452],{"type":100,"value":2942},{"type":94,"tag":146,"props":8454,"children":8456},{"class":148,"line":8455},23,[8457,8462,8466,8470,8475,8479],{"type":94,"tag":146,"props":8458,"children":8459},{"style":350},[8460],{"type":100,"value":8461},"          color",{"type":94,"tag":146,"props":8463,"children":8464},{"style":159},[8465],{"type":100,"value":262},{"type":94,"tag":146,"props":8467,"children":8468},{"style":159},[8469],{"type":100,"value":183},{"type":94,"tag":146,"props":8471,"children":8472},{"style":186},[8473],{"type":100,"value":8474},"white",{"type":94,"tag":146,"props":8476,"children":8477},{"style":159},[8478],{"type":100,"value":1720},{"type":94,"tag":146,"props":8480,"children":8481},{"style":159},[8482],{"type":100,"value":2942},{"type":94,"tag":146,"props":8484,"children":8486},{"class":148,"line":8485},24,[8487,8492,8496,8500,8505,8509],{"type":94,"tag":146,"props":8488,"children":8489},{"style":350},[8490],{"type":100,"value":8491},"          width",{"type":94,"tag":146,"props":8493,"children":8494},{"style":159},[8495],{"type":100,"value":262},{"type":94,"tag":146,"props":8497,"children":8498},{"style":159},[8499],{"type":100,"value":183},{"type":94,"tag":146,"props":8501,"children":8502},{"style":186},[8503],{"type":100,"value":8504},"100%",{"type":94,"tag":146,"props":8506,"children":8507},{"style":159},[8508],{"type":100,"value":1720},{"type":94,"tag":146,"props":8510,"children":8511},{"style":159},[8512],{"type":100,"value":2942},{"type":94,"tag":146,"props":8514,"children":8516},{"class":148,"line":8515},25,[8517,8522,8526,8530,8534,8538],{"type":94,"tag":146,"props":8518,"children":8519},{"style":350},[8520],{"type":100,"value":8521},"          height",{"type":94,"tag":146,"props":8523,"children":8524},{"style":159},[8525],{"type":100,"value":262},{"type":94,"tag":146,"props":8527,"children":8528},{"style":159},[8529],{"type":100,"value":183},{"type":94,"tag":146,"props":8531,"children":8532},{"style":186},[8533],{"type":100,"value":8504},{"type":94,"tag":146,"props":8535,"children":8536},{"style":159},[8537],{"type":100,"value":1720},{"type":94,"tag":146,"props":8539,"children":8540},{"style":159},[8541],{"type":100,"value":2942},{"type":94,"tag":146,"props":8543,"children":8545},{"class":148,"line":8544},26,[8546,8551,8555,8559,8564,8568],{"type":94,"tag":146,"props":8547,"children":8548},{"style":350},[8549],{"type":100,"value":8550},"          display",{"type":94,"tag":146,"props":8552,"children":8553},{"style":159},[8554],{"type":100,"value":262},{"type":94,"tag":146,"props":8556,"children":8557},{"style":159},[8558],{"type":100,"value":183},{"type":94,"tag":146,"props":8560,"children":8561},{"style":186},[8562],{"type":100,"value":8563},"flex",{"type":94,"tag":146,"props":8565,"children":8566},{"style":159},[8567],{"type":100,"value":1720},{"type":94,"tag":146,"props":8569,"children":8570},{"style":159},[8571],{"type":100,"value":2942},{"type":94,"tag":146,"props":8573,"children":8575},{"class":148,"line":8574},27,[8576,8581,8585,8589,8594,8598],{"type":94,"tag":146,"props":8577,"children":8578},{"style":350},[8579],{"type":100,"value":8580},"          alignItems",{"type":94,"tag":146,"props":8582,"children":8583},{"style":159},[8584],{"type":100,"value":262},{"type":94,"tag":146,"props":8586,"children":8587},{"style":159},[8588],{"type":100,"value":183},{"type":94,"tag":146,"props":8590,"children":8591},{"style":186},[8592],{"type":100,"value":8593},"center",{"type":94,"tag":146,"props":8595,"children":8596},{"style":159},[8597],{"type":100,"value":1720},{"type":94,"tag":146,"props":8599,"children":8600},{"style":159},[8601],{"type":100,"value":2942},{"type":94,"tag":146,"props":8603,"children":8605},{"class":148,"line":8604},28,[8606,8611,8615,8619,8623,8627],{"type":94,"tag":146,"props":8607,"children":8608},{"style":350},[8609],{"type":100,"value":8610},"          justifyContent",{"type":94,"tag":146,"props":8612,"children":8613},{"style":159},[8614],{"type":100,"value":262},{"type":94,"tag":146,"props":8616,"children":8617},{"style":159},[8618],{"type":100,"value":183},{"type":94,"tag":146,"props":8620,"children":8621},{"style":186},[8622],{"type":100,"value":8593},{"type":94,"tag":146,"props":8624,"children":8625},{"style":159},[8626],{"type":100,"value":1720},{"type":94,"tag":146,"props":8628,"children":8629},{"style":159},[8630],{"type":100,"value":2942},{"type":94,"tag":146,"props":8632,"children":8634},{"class":148,"line":8633},29,[8635,8640,8644,8648],{"type":94,"tag":146,"props":8636,"children":8637},{"style":350},[8638],{"type":100,"value":8639},"          padding",{"type":94,"tag":146,"props":8641,"children":8642},{"style":159},[8643],{"type":100,"value":262},{"type":94,"tag":146,"props":8645,"children":8646},{"style":1931},[8647],{"type":100,"value":8418},{"type":94,"tag":146,"props":8649,"children":8650},{"style":159},[8651],{"type":100,"value":2942},{"type":94,"tag":146,"props":8653,"children":8655},{"class":148,"line":8654},30,[8656],{"type":94,"tag":146,"props":8657,"children":8658},{"style":159},[8659],{"type":100,"value":8660},"        }}\n",{"type":94,"tag":146,"props":8662,"children":8664},{"class":148,"line":8663},31,[8665],{"type":94,"tag":146,"props":8666,"children":8667},{"style":159},[8668],{"type":100,"value":8669},"      >\n",{"type":94,"tag":146,"props":8671,"children":8673},{"class":148,"line":8672},32,[8674,8679,8684,8688,8693],{"type":94,"tag":146,"props":8675,"children":8676},{"style":159},[8677],{"type":100,"value":8678},"        {",{"type":94,"tag":146,"props":8680,"children":8681},{"style":165},[8682],{"type":100,"value":8683},"post",{"type":94,"tag":146,"props":8685,"children":8686},{"style":159},[8687],{"type":100,"value":404},{"type":94,"tag":146,"props":8689,"children":8690},{"style":165},[8691],{"type":100,"value":8692},"title",{"type":94,"tag":146,"props":8694,"children":8695},{"style":159},[8696],{"type":100,"value":450},{"type":94,"tag":146,"props":8698,"children":8700},{"class":148,"line":8699},33,[8701,8705,8709],{"type":94,"tag":146,"props":8702,"children":8703},{"style":159},[8704],{"type":100,"value":4753},{"type":94,"tag":146,"props":8706,"children":8707},{"style":350},[8708],{"type":100,"value":4584},{"type":94,"tag":146,"props":8710,"children":8711},{"style":159},[8712],{"type":100,"value":1141},{"type":94,"tag":146,"props":8714,"children":8716},{"class":148,"line":8715},34,[8717,8722],{"type":94,"tag":146,"props":8718,"children":8719},{"style":350},[8720],{"type":100,"value":8721},"    )",{"type":94,"tag":146,"props":8723,"children":8724},{"style":159},[8725],{"type":100,"value":2942},{"type":94,"tag":146,"props":8727,"children":8729},{"class":148,"line":8728},35,[8730,8735,8740,8745],{"type":94,"tag":146,"props":8731,"children":8732},{"style":159},[8733],{"type":100,"value":8734},"    {",{"type":94,"tag":146,"props":8736,"children":8737},{"style":159},[8738],{"type":100,"value":8739}," ...",{"type":94,"tag":146,"props":8741,"children":8742},{"style":165},[8743],{"type":100,"value":8744},"size",{"type":94,"tag":146,"props":8746,"children":8747},{"style":159},[8748],{"type":100,"value":8068},{"type":94,"tag":146,"props":8750,"children":8752},{"class":148,"line":8751},36,[8753],{"type":94,"tag":146,"props":8754,"children":8755},{"style":350},[8756],{"type":100,"value":5011},{"type":94,"tag":146,"props":8758,"children":8760},{"class":148,"line":8759},37,[8761],{"type":94,"tag":146,"props":8762,"children":8763},{"style":159},[8764],{"type":100,"value":450},{"type":94,"tag":729,"props":8766,"children":8768},{"id":8767},"key-points",[8769],{"type":100,"value":8770},"Key Points",{"type":94,"tag":1300,"props":8772,"children":8773},{},[8774,8802,8820,8860,8870,8896,8927],{"type":94,"tag":818,"props":8775,"children":8776},{},[8777,8786,8788,8793,8795,8800],{"type":94,"tag":498,"props":8778,"children":8779},{},[8780],{"type":94,"tag":126,"props":8781,"children":8783},{"className":8782},[],[8784],{"type":100,"value":8785},"ImageResponse",{"type":100,"value":8787}," — Import from ",{"type":94,"tag":126,"props":8789,"children":8791},{"className":8790},[],[8792],{"type":100,"value":7931},{"type":100,"value":8794}," (re-exports ",{"type":94,"tag":126,"props":8796,"children":8798},{"className":8797},[],[8799],{"type":100,"value":7857},{"type":100,"value":8801},"). Renders JSX to PNG\u002FSVG images.",{"type":94,"tag":818,"props":8803,"children":8804},{},[8805,8810,8812,8818],{"type":94,"tag":498,"props":8806,"children":8807},{},[8808],{"type":100,"value":8809},"Edge runtime",{"type":100,"value":8811}," — OG image routes run on the Edge runtime by default. Export ",{"type":94,"tag":126,"props":8813,"children":8815},{"className":8814},[],[8816],{"type":100,"value":8817},"runtime = 'edge'",{"type":100,"value":8819}," explicitly for clarity.",{"type":94,"tag":818,"props":8821,"children":8822},{},[8823,8828,8830,8836,8837,8842,8844,8850,8852,8858],{"type":94,"tag":498,"props":8824,"children":8825},{},[8826],{"type":100,"value":8827},"Exports",{"type":100,"value":8829}," — ",{"type":94,"tag":126,"props":8831,"children":8833},{"className":8832},[],[8834],{"type":100,"value":8835},"alt",{"type":100,"value":463},{"type":94,"tag":126,"props":8838,"children":8840},{"className":8839},[],[8841],{"type":100,"value":8744},{"type":100,"value":8843},", and ",{"type":94,"tag":126,"props":8845,"children":8847},{"className":8846},[],[8848],{"type":100,"value":8849},"contentType",{"type":100,"value":8851}," configure the generated ",{"type":94,"tag":126,"props":8853,"children":8855},{"className":8854},[],[8856],{"type":100,"value":8857},"\u003Cmeta>",{"type":100,"value":8859}," tags automatically.",{"type":94,"tag":818,"props":8861,"children":8862},{},[8863,8868],{"type":94,"tag":498,"props":8864,"children":8865},{},[8866],{"type":100,"value":8867},"Static or dynamic",{"type":100,"value":8869}," — Without params, the image is generated at build time. With dynamic segments, it generates per-request.",{"type":94,"tag":818,"props":8871,"children":8872},{},[8873,8878,8880,8886,8888,8894],{"type":94,"tag":498,"props":8874,"children":8875},{},[8876],{"type":100,"value":8877},"Supported CSS",{"type":100,"value":8879}," — Satori supports a Flexbox subset. Use inline ",{"type":94,"tag":126,"props":8881,"children":8883},{"className":8882},[],[8884],{"type":100,"value":8885},"style",{"type":100,"value":8887}," objects (no Tailwind). ",{"type":94,"tag":126,"props":8889,"children":8891},{"className":8890},[],[8892],{"type":100,"value":8893},"display: 'flex'",{"type":100,"value":8895}," is required on containers.",{"type":94,"tag":818,"props":8897,"children":8898},{},[8899,8904,8906,8911,8913,8918,8920,8926],{"type":94,"tag":498,"props":8900,"children":8901},{},[8902],{"type":100,"value":8903},"Fonts",{"type":100,"value":8905}," — Load custom fonts via ",{"type":94,"tag":126,"props":8907,"children":8909},{"className":8908},[],[8910],{"type":100,"value":3100},{"type":100,"value":8912}," and pass to ",{"type":94,"tag":126,"props":8914,"children":8916},{"className":8915},[],[8917],{"type":100,"value":8785},{"type":100,"value":8919}," options: ",{"type":94,"tag":126,"props":8921,"children":8923},{"className":8922},[],[8924],{"type":100,"value":8925},"{ fonts: [{ name, data, style, weight }] }",{"type":100,"value":404},{"type":94,"tag":818,"props":8928,"children":8929},{},[8930,8935,8937,8942,8944,8949],{"type":94,"tag":498,"props":8931,"children":8932},{},[8933],{"type":100,"value":8934},"Twitter fallback",{"type":100,"value":8936}," — If no ",{"type":94,"tag":126,"props":8938,"children":8940},{"className":8939},[],[8941],{"type":100,"value":7849},{"type":100,"value":8943}," exists, ",{"type":94,"tag":126,"props":8945,"children":8947},{"className":8946},[],[8948],{"type":100,"value":7841},{"type":100,"value":8950}," is used for Twitter cards too.",{"type":94,"tag":729,"props":8952,"children":8954},{"id":8953},"when-to-use",[8955],{"type":100,"value":6229},{"type":94,"tag":2706,"props":8957,"children":8958},{},[8959,8975],{"type":94,"tag":2710,"props":8960,"children":8961},{},[8962],{"type":94,"tag":2714,"props":8963,"children":8964},{},[8965,8970],{"type":94,"tag":2718,"props":8966,"children":8967},{},[8968],{"type":100,"value":8969},"Approach",{"type":94,"tag":2718,"props":8971,"children":8972},{},[8973],{"type":100,"value":8974},"When",{"type":94,"tag":2739,"props":8976,"children":8977},{},[8978,8996,9016],{"type":94,"tag":2714,"props":8979,"children":8980},{},[8981,8991],{"type":94,"tag":2746,"props":8982,"children":8983},{},[8984,8989],{"type":94,"tag":126,"props":8985,"children":8987},{"className":8986},[],[8988],{"type":100,"value":7841},{"type":100,"value":8990}," file",{"type":94,"tag":2746,"props":8992,"children":8993},{},[8994],{"type":100,"value":8995},"Dynamic per-route OG images with data fetching",{"type":94,"tag":2714,"props":8997,"children":8998},{},[8999,9011],{"type":94,"tag":2746,"props":9000,"children":9001},{},[9002,9004,9010],{"type":100,"value":9003},"Static ",{"type":94,"tag":126,"props":9005,"children":9007},{"className":9006},[],[9008],{"type":100,"value":9009},"opengraph-image.png",{"type":100,"value":8990},{"type":94,"tag":2746,"props":9012,"children":9013},{},[9014],{"type":100,"value":9015},"Same image for every page in a segment",{"type":94,"tag":2714,"props":9017,"children":9018},{},[9019,9035],{"type":94,"tag":2746,"props":9020,"children":9021},{},[9022,9028,9029],{"type":94,"tag":126,"props":9023,"children":9025},{"className":9024},[],[9026],{"type":100,"value":9027},"generateMetadata",{"type":100,"value":753},{"type":94,"tag":126,"props":9030,"children":9032},{"className":9031},[],[9033],{"type":100,"value":9034},"openGraph.images",{"type":94,"tag":2746,"props":9036,"children":9037},{},[9038],{"type":100,"value":9039},"Point to an external image URL",{"type":94,"tag":109,"props":9041,"children":9043},{"id":9042},"deployment-on-vercel",[9044],{"type":100,"value":9045},"Deployment on Vercel",{"type":94,"tag":1300,"props":9047,"children":9048},{},[9049,9054,9065,9070,9082],{"type":94,"tag":818,"props":9050,"children":9051},{},[9052],{"type":100,"value":9053},"Zero-config: Vercel auto-detects Next.js and optimizes",{"type":94,"tag":818,"props":9055,"children":9056},{},[9057,9063],{"type":94,"tag":126,"props":9058,"children":9060},{"className":9059},[],[9061],{"type":100,"value":9062},"vercel dev",{"type":100,"value":9064}," for local development with Vercel features",{"type":94,"tag":818,"props":9066,"children":9067},{},[9068],{"type":100,"value":9069},"Server Components → Serverless\u002FEdge Functions automatically",{"type":94,"tag":818,"props":9071,"children":9072},{},[9073,9075,9080],{"type":100,"value":9074},"Image optimization via ",{"type":94,"tag":126,"props":9076,"children":9078},{"className":9077},[],[9079],{"type":100,"value":6647},{"type":100,"value":9081}," (automatic on Vercel)",{"type":94,"tag":818,"props":9083,"children":9084},{},[9085,9087,9093],{"type":100,"value":9086},"Font optimization via ",{"type":94,"tag":126,"props":9088,"children":9090},{"className":9089},[],[9091],{"type":100,"value":9092},"next\u002Ffont",{"type":100,"value":9081},{"type":94,"tag":109,"props":9095,"children":9097},{"id":9096},"common-patterns",[9098],{"type":100,"value":9099},"Common Patterns",{"type":94,"tag":729,"props":9101,"children":9103},{"id":9102},"data-fetching-in-server-components",[9104],{"type":100,"value":9105},"Data Fetching in Server Components",{"type":94,"tag":135,"props":9107,"children":9109},{"className":990,"code":9108,"language":992,"meta":140,"style":140},"\u002F\u002F Parallel data fetching\nconst [users, posts] = await Promise.all([\n  getUsers(),\n  getPosts(),\n])\n",[9110],{"type":94,"tag":126,"props":9111,"children":9112},{"__ignoreMap":140},[9113,9121,9175,9191,9207],{"type":94,"tag":146,"props":9114,"children":9115},{"class":148,"line":149},[9116],{"type":94,"tag":146,"props":9117,"children":9118},{"style":865},[9119],{"type":100,"value":9120},"\u002F\u002F Parallel data fetching\n",{"type":94,"tag":146,"props":9122,"children":9123},{"class":148,"line":197},[9124,9128,9132,9136,9140,9145,9149,9153,9157,9161,9165,9170],{"type":94,"tag":146,"props":9125,"children":9126},{"style":249},[9127],{"type":100,"value":2861},{"type":94,"tag":146,"props":9129,"children":9130},{"style":159},[9131],{"type":100,"value":1897},{"type":94,"tag":146,"props":9133,"children":9134},{"style":165},[9135],{"type":100,"value":1764},{"type":94,"tag":146,"props":9137,"children":9138},{"style":159},[9139],{"type":100,"value":881},{"type":94,"tag":146,"props":9141,"children":9142},{"style":165},[9143],{"type":100,"value":9144}," posts",{"type":94,"tag":146,"props":9146,"children":9147},{"style":159},[9148],{"type":100,"value":1916},{"type":94,"tag":146,"props":9150,"children":9151},{"style":159},[9152],{"type":100,"value":297},{"type":94,"tag":146,"props":9154,"children":9155},{"style":153},[9156],{"type":100,"value":1697},{"type":94,"tag":146,"props":9158,"children":9159},{"style":265},[9160],{"type":100,"value":8177},{"type":94,"tag":146,"props":9162,"children":9163},{"style":159},[9164],{"type":100,"value":404},{"type":94,"tag":146,"props":9166,"children":9167},{"style":325},[9168],{"type":100,"value":9169},"all",{"type":94,"tag":146,"props":9171,"children":9172},{"style":165},[9173],{"type":100,"value":9174},"([\n",{"type":94,"tag":146,"props":9176,"children":9177},{"class":148,"line":235},[9178,9183,9187],{"type":94,"tag":146,"props":9179,"children":9180},{"style":325},[9181],{"type":100,"value":9182},"  getUsers",{"type":94,"tag":146,"props":9184,"children":9185},{"style":165},[9186],{"type":100,"value":333},{"type":94,"tag":146,"props":9188,"children":9189},{"style":159},[9190],{"type":100,"value":2942},{"type":94,"tag":146,"props":9192,"children":9193},{"class":148,"line":245},[9194,9199,9203],{"type":94,"tag":146,"props":9195,"children":9196},{"style":325},[9197],{"type":100,"value":9198},"  getPosts",{"type":94,"tag":146,"props":9200,"children":9201},{"style":165},[9202],{"type":100,"value":333},{"type":94,"tag":146,"props":9204,"children":9205},{"style":159},[9206],{"type":100,"value":2942},{"type":94,"tag":146,"props":9208,"children":9209},{"class":148,"line":42},[9210],{"type":94,"tag":146,"props":9211,"children":9212},{"style":165},[9213],{"type":100,"value":9214},"])\n",{"type":94,"tag":729,"props":9216,"children":9218},{"id":9217},"streaming-with-suspense",[9219],{"type":100,"value":9220},"Streaming with Suspense",{"type":94,"tag":135,"props":9222,"children":9224},{"className":990,"code":9223,"language":992,"meta":140,"style":140},"import { Suspense } from 'react'\n\nexport default function Page() {\n  return (\n    \u003Cdiv>\n      \u003Ch1>Dashboard\u003C\u002Fh1>\n      \u003CSuspense fallback={\u003CSkeleton \u002F>}>\n        \u003CSlowDataComponent \u002F>\n      \u003C\u002FSuspense>\n    \u003C\u002Fdiv>\n  )\n}\n",[9225],{"type":94,"tag":126,"props":9226,"children":9227},{"__ignoreMap":140},[9228,9264,9271,9299,9310,9325,9357,9389,9405,9420,9435,9442],{"type":94,"tag":146,"props":9229,"children":9230},{"class":148,"line":149},[9231,9235,9239,9244,9248,9252,9256,9260],{"type":94,"tag":146,"props":9232,"children":9233},{"style":153},[9234],{"type":100,"value":156},{"type":94,"tag":146,"props":9236,"children":9237},{"style":159},[9238],{"type":100,"value":162},{"type":94,"tag":146,"props":9240,"children":9241},{"style":165},[9242],{"type":100,"value":9243}," Suspense",{"type":94,"tag":146,"props":9245,"children":9246},{"style":159},[9247],{"type":100,"value":173},{"type":94,"tag":146,"props":9249,"children":9250},{"style":153},[9251],{"type":100,"value":178},{"type":94,"tag":146,"props":9253,"children":9254},{"style":159},[9255],{"type":100,"value":183},{"type":94,"tag":146,"props":9257,"children":9258},{"style":186},[9259],{"type":100,"value":14},{"type":94,"tag":146,"props":9261,"children":9262},{"style":159},[9263],{"type":100,"value":194},{"type":94,"tag":146,"props":9265,"children":9266},{"class":148,"line":197},[9267],{"type":94,"tag":146,"props":9268,"children":9269},{"emptyLinePlaceholder":239},[9270],{"type":100,"value":242},{"type":94,"tag":146,"props":9272,"children":9273},{"class":148,"line":235},[9274,9278,9282,9286,9291,9295],{"type":94,"tag":146,"props":9275,"children":9276},{"style":153},[9277],{"type":100,"value":317},{"type":94,"tag":146,"props":9279,"children":9280},{"style":153},[9281],{"type":100,"value":1653},{"type":94,"tag":146,"props":9283,"children":9284},{"style":249},[9285],{"type":100,"value":322},{"type":94,"tag":146,"props":9287,"children":9288},{"style":325},[9289],{"type":100,"value":9290}," Page",{"type":94,"tag":146,"props":9292,"children":9293},{"style":159},[9294],{"type":100,"value":333},{"type":94,"tag":146,"props":9296,"children":9297},{"style":159},[9298],{"type":100,"value":338},{"type":94,"tag":146,"props":9300,"children":9301},{"class":148,"line":245},[9302,9306],{"type":94,"tag":146,"props":9303,"children":9304},{"style":153},[9305],{"type":100,"value":436},{"type":94,"tag":146,"props":9307,"children":9308},{"style":350},[9309],{"type":100,"value":4571},{"type":94,"tag":146,"props":9311,"children":9312},{"class":148,"line":42},[9313,9317,9321],{"type":94,"tag":146,"props":9314,"children":9315},{"style":159},[9316],{"type":100,"value":4579},{"type":94,"tag":146,"props":9318,"children":9319},{"style":350},[9320],{"type":100,"value":4584},{"type":94,"tag":146,"props":9322,"children":9323},{"style":159},[9324],{"type":100,"value":1141},{"type":94,"tag":146,"props":9326,"children":9327},{"class":148,"line":89},[9328,9332,9336,9340,9345,9349,9353],{"type":94,"tag":146,"props":9329,"children":9330},{"style":159},[9331],{"type":100,"value":4596},{"type":94,"tag":146,"props":9333,"children":9334},{"style":350},[9335],{"type":100,"value":95},{"type":94,"tag":146,"props":9337,"children":9338},{"style":159},[9339],{"type":100,"value":282},{"type":94,"tag":146,"props":9341,"children":9342},{"style":165},[9343],{"type":100,"value":9344},"Dashboard",{"type":94,"tag":146,"props":9346,"children":9347},{"style":159},[9348],{"type":100,"value":4668},{"type":94,"tag":146,"props":9350,"children":9351},{"style":350},[9352],{"type":100,"value":95},{"type":94,"tag":146,"props":9354,"children":9355},{"style":159},[9356],{"type":100,"value":1141},{"type":94,"tag":146,"props":9358,"children":9359},{"class":148,"line":341},[9360,9364,9369,9374,9379,9384],{"type":94,"tag":146,"props":9361,"children":9362},{"style":159},[9363],{"type":100,"value":4596},{"type":94,"tag":146,"props":9365,"children":9366},{"style":265},[9367],{"type":100,"value":9368},"Suspense",{"type":94,"tag":146,"props":9370,"children":9371},{"style":249},[9372],{"type":100,"value":9373}," fallback",{"type":94,"tag":146,"props":9375,"children":9376},{"style":159},[9377],{"type":100,"value":9378},"={\u003C",{"type":94,"tag":146,"props":9380,"children":9381},{"style":265},[9382],{"type":100,"value":9383},"Skeleton",{"type":94,"tag":146,"props":9385,"children":9386},{"style":159},[9387],{"type":100,"value":9388}," \u002F>}>\n",{"type":94,"tag":146,"props":9390,"children":9391},{"class":148,"line":430},[9392,9396,9401],{"type":94,"tag":146,"props":9393,"children":9394},{"style":159},[9395],{"type":100,"value":4613},{"type":94,"tag":146,"props":9397,"children":9398},{"style":265},[9399],{"type":100,"value":9400},"SlowDataComponent",{"type":94,"tag":146,"props":9402,"children":9403},{"style":159},[9404],{"type":100,"value":4861},{"type":94,"tag":146,"props":9406,"children":9407},{"class":148,"line":444},[9408,9412,9416],{"type":94,"tag":146,"props":9409,"children":9410},{"style":159},[9411],{"type":100,"value":4753},{"type":94,"tag":146,"props":9413,"children":9414},{"style":265},[9415],{"type":100,"value":9368},{"type":94,"tag":146,"props":9417,"children":9418},{"style":159},[9419],{"type":100,"value":1141},{"type":94,"tag":146,"props":9421,"children":9422},{"class":148,"line":4200},[9423,9427,9431],{"type":94,"tag":146,"props":9424,"children":9425},{"style":159},[9426],{"type":100,"value":4994},{"type":94,"tag":146,"props":9428,"children":9429},{"style":350},[9430],{"type":100,"value":4584},{"type":94,"tag":146,"props":9432,"children":9433},{"style":159},[9434],{"type":100,"value":1141},{"type":94,"tag":146,"props":9436,"children":9437},{"class":148,"line":4235},[9438],{"type":94,"tag":146,"props":9439,"children":9440},{"style":350},[9441],{"type":100,"value":5011},{"type":94,"tag":146,"props":9443,"children":9444},{"class":148,"line":4282},[9445],{"type":94,"tag":146,"props":9446,"children":9447},{"style":159},[9448],{"type":100,"value":450},{"type":94,"tag":729,"props":9450,"children":9452},{"id":9451},"error-handling",[9453],{"type":100,"value":9454},"Error Handling",{"type":94,"tag":135,"props":9456,"children":9458},{"className":990,"code":9457,"language":992,"meta":140,"style":140},"\u002F\u002F app\u002Fdashboard\u002Ferror.tsx\n'use client'\n\nexport default function Error({ error, reset }: {\n  error: Error & { digest?: string }\n  reset: () => void\n}) {\n  return (\n    \u003Cdiv>\n      \u003Ch2>Something went wrong\u003C\u002Fh2>\n      \u003Cbutton onClick={() => reset()}>Try again\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  )\n}\n",[9459],{"type":94,"tag":126,"props":9460,"children":9461},{"__ignoreMap":140},[9462,9470,9485,9492,9538,9581,9606,9617,9628,9643,9675,9727,9742,9749],{"type":94,"tag":146,"props":9463,"children":9464},{"class":148,"line":149},[9465],{"type":94,"tag":146,"props":9466,"children":9467},{"style":865},[9468],{"type":100,"value":9469},"\u002F\u002F app\u002Fdashboard\u002Ferror.tsx\n",{"type":94,"tag":146,"props":9471,"children":9472},{"class":148,"line":197},[9473,9477,9481],{"type":94,"tag":146,"props":9474,"children":9475},{"style":159},[9476],{"type":100,"value":1720},{"type":94,"tag":146,"props":9478,"children":9479},{"style":186},[9480],{"type":100,"value":1814},{"type":94,"tag":146,"props":9482,"children":9483},{"style":159},[9484],{"type":100,"value":194},{"type":94,"tag":146,"props":9486,"children":9487},{"class":148,"line":235},[9488],{"type":94,"tag":146,"props":9489,"children":9490},{"emptyLinePlaceholder":239},[9491],{"type":100,"value":242},{"type":94,"tag":146,"props":9493,"children":9494},{"class":148,"line":245},[9495,9499,9503,9507,9512,9516,9521,9525,9530,9534],{"type":94,"tag":146,"props":9496,"children":9497},{"style":153},[9498],{"type":100,"value":317},{"type":94,"tag":146,"props":9500,"children":9501},{"style":153},[9502],{"type":100,"value":1653},{"type":94,"tag":146,"props":9504,"children":9505},{"style":249},[9506],{"type":100,"value":322},{"type":94,"tag":146,"props":9508,"children":9509},{"style":325},[9510],{"type":100,"value":9511}," Error",{"type":94,"tag":146,"props":9513,"children":9514},{"style":159},[9515],{"type":100,"value":4004},{"type":94,"tag":146,"props":9517,"children":9518},{"style":2121},[9519],{"type":100,"value":9520}," error",{"type":94,"tag":146,"props":9522,"children":9523},{"style":159},[9524],{"type":100,"value":881},{"type":94,"tag":146,"props":9526,"children":9527},{"style":2121},[9528],{"type":100,"value":9529}," reset",{"type":94,"tag":146,"props":9531,"children":9532},{"style":159},[9533],{"type":100,"value":4023},{"type":94,"tag":146,"props":9535,"children":9536},{"style":159},[9537],{"type":100,"value":338},{"type":94,"tag":146,"props":9539,"children":9540},{"class":148,"line":42},[9541,9546,9550,9554,9559,9563,9568,9573,9577],{"type":94,"tag":146,"props":9542,"children":9543},{"style":350},[9544],{"type":100,"value":9545},"  error",{"type":94,"tag":146,"props":9547,"children":9548},{"style":159},[9549],{"type":100,"value":262},{"type":94,"tag":146,"props":9551,"children":9552},{"style":265},[9553],{"type":100,"value":9511},{"type":94,"tag":146,"props":9555,"children":9556},{"style":159},[9557],{"type":100,"value":9558}," &",{"type":94,"tag":146,"props":9560,"children":9561},{"style":159},[9562],{"type":100,"value":162},{"type":94,"tag":146,"props":9564,"children":9565},{"style":350},[9566],{"type":100,"value":9567}," digest",{"type":94,"tag":146,"props":9569,"children":9570},{"style":159},[9571],{"type":100,"value":9572},"?:",{"type":94,"tag":146,"props":9574,"children":9575},{"style":265},[9576],{"type":100,"value":4040},{"type":94,"tag":146,"props":9578,"children":9579},{"style":159},[9580],{"type":100,"value":8068},{"type":94,"tag":146,"props":9582,"children":9583},{"class":148,"line":89},[9584,9589,9593,9597,9601],{"type":94,"tag":146,"props":9585,"children":9586},{"style":350},[9587],{"type":100,"value":9588},"  reset",{"type":94,"tag":146,"props":9590,"children":9591},{"style":159},[9592],{"type":100,"value":262},{"type":94,"tag":146,"props":9594,"children":9595},{"style":159},[9596],{"type":100,"value":4315},{"type":94,"tag":146,"props":9598,"children":9599},{"style":249},[9600],{"type":100,"value":1969},{"type":94,"tag":146,"props":9602,"children":9603},{"style":265},[9604],{"type":100,"value":9605}," void\n",{"type":94,"tag":146,"props":9607,"children":9608},{"class":148,"line":341},[9609,9613],{"type":94,"tag":146,"props":9610,"children":9611},{"style":159},[9612],{"type":100,"value":8208},{"type":94,"tag":146,"props":9614,"children":9615},{"style":159},[9616],{"type":100,"value":338},{"type":94,"tag":146,"props":9618,"children":9619},{"class":148,"line":430},[9620,9624],{"type":94,"tag":146,"props":9621,"children":9622},{"style":153},[9623],{"type":100,"value":436},{"type":94,"tag":146,"props":9625,"children":9626},{"style":350},[9627],{"type":100,"value":4571},{"type":94,"tag":146,"props":9629,"children":9630},{"class":148,"line":444},[9631,9635,9639],{"type":94,"tag":146,"props":9632,"children":9633},{"style":159},[9634],{"type":100,"value":4579},{"type":94,"tag":146,"props":9636,"children":9637},{"style":350},[9638],{"type":100,"value":4584},{"type":94,"tag":146,"props":9640,"children":9641},{"style":159},[9642],{"type":100,"value":1141},{"type":94,"tag":146,"props":9644,"children":9645},{"class":148,"line":4200},[9646,9650,9654,9658,9663,9667,9671],{"type":94,"tag":146,"props":9647,"children":9648},{"style":159},[9649],{"type":100,"value":4596},{"type":94,"tag":146,"props":9651,"children":9652},{"style":350},[9653],{"type":100,"value":109},{"type":94,"tag":146,"props":9655,"children":9656},{"style":159},[9657],{"type":100,"value":282},{"type":94,"tag":146,"props":9659,"children":9660},{"style":165},[9661],{"type":100,"value":9662},"Something went wrong",{"type":94,"tag":146,"props":9664,"children":9665},{"style":159},[9666],{"type":100,"value":4668},{"type":94,"tag":146,"props":9668,"children":9669},{"style":350},[9670],{"type":100,"value":109},{"type":94,"tag":146,"props":9672,"children":9673},{"style":159},[9674],{"type":100,"value":1141},{"type":94,"tag":146,"props":9676,"children":9677},{"class":148,"line":4235},[9678,9682,9686,9690,9694,9698,9702,9706,9710,9715,9719,9723],{"type":94,"tag":146,"props":9679,"children":9680},{"style":159},[9681],{"type":100,"value":4596},{"type":94,"tag":146,"props":9683,"children":9684},{"style":350},[9685],{"type":100,"value":1954},{"type":94,"tag":146,"props":9687,"children":9688},{"style":249},[9689],{"type":100,"value":1959},{"type":94,"tag":146,"props":9691,"children":9692},{"style":159},[9693],{"type":100,"value":1964},{"type":94,"tag":146,"props":9695,"children":9696},{"style":249},[9697],{"type":100,"value":1969},{"type":94,"tag":146,"props":9699,"children":9700},{"style":325},[9701],{"type":100,"value":9529},{"type":94,"tag":146,"props":9703,"children":9704},{"style":165},[9705],{"type":100,"value":333},{"type":94,"tag":146,"props":9707,"children":9708},{"style":159},[9709],{"type":100,"value":4658},{"type":94,"tag":146,"props":9711,"children":9712},{"style":165},[9713],{"type":100,"value":9714},"Try again",{"type":94,"tag":146,"props":9716,"children":9717},{"style":159},[9718],{"type":100,"value":4668},{"type":94,"tag":146,"props":9720,"children":9721},{"style":350},[9722],{"type":100,"value":1954},{"type":94,"tag":146,"props":9724,"children":9725},{"style":159},[9726],{"type":100,"value":1141},{"type":94,"tag":146,"props":9728,"children":9729},{"class":148,"line":4282},[9730,9734,9738],{"type":94,"tag":146,"props":9731,"children":9732},{"style":159},[9733],{"type":100,"value":4994},{"type":94,"tag":146,"props":9735,"children":9736},{"style":350},[9737],{"type":100,"value":4584},{"type":94,"tag":146,"props":9739,"children":9740},{"style":159},[9741],{"type":100,"value":1141},{"type":94,"tag":146,"props":9743,"children":9744},{"class":148,"line":4304},[9745],{"type":94,"tag":146,"props":9746,"children":9747},{"style":350},[9748],{"type":100,"value":5011},{"type":94,"tag":146,"props":9750,"children":9751},{"class":148,"line":4339},[9752],{"type":94,"tag":146,"props":9753,"children":9754},{"style":159},[9755],{"type":100,"value":450},{"type":94,"tag":109,"props":9757,"children":9759},{"id":9758},"official-documentation",[9760],{"type":100,"value":9761},"Official Documentation",{"type":94,"tag":1300,"props":9763,"children":9764},{},[9765,9774,9784,9793,9803,9813,9823,9833,9842],{"type":94,"tag":818,"props":9766,"children":9767},{},[9768],{"type":94,"tag":5395,"props":9769,"children":9771},{"href":44,"rel":9770},[5399],[9772],{"type":100,"value":9773},"Next.js Documentation",{"type":94,"tag":818,"props":9775,"children":9776},{},[9777],{"type":94,"tag":5395,"props":9778,"children":9781},{"href":9779,"rel":9780},"https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fapp\u002Fgetting-started",[5399],[9782],{"type":100,"value":9783},"App Router",{"type":94,"tag":818,"props":9785,"children":9786},{},[9787],{"type":94,"tag":5395,"props":9788,"children":9791},{"href":9789,"rel":9790},"https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fapp\u002Fbuilding-your-application\u002Frouting",[5399],[9792],{"type":100,"value":1464},{"type":94,"tag":818,"props":9794,"children":9795},{},[9796],{"type":94,"tag":5395,"props":9797,"children":9800},{"href":9798,"rel":9799},"https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fapp\u002Fbuilding-your-application\u002Fdata-fetching",[5399],[9801],{"type":100,"value":9802},"Data Fetching",{"type":94,"tag":818,"props":9804,"children":9805},{},[9806],{"type":94,"tag":5395,"props":9807,"children":9810},{"href":9808,"rel":9809},"https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fapp\u002Fbuilding-your-application\u002Frendering",[5399],[9811],{"type":100,"value":9812},"Rendering",{"type":94,"tag":818,"props":9814,"children":9815},{},[9816],{"type":94,"tag":5395,"props":9817,"children":9820},{"href":9818,"rel":9819},"https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fapp\u002Fbuilding-your-application\u002Fcaching",[5399],[9821],{"type":100,"value":9822},"Caching",{"type":94,"tag":818,"props":9824,"children":9825},{},[9826],{"type":94,"tag":5395,"props":9827,"children":9830},{"href":9828,"rel":9829},"https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fapp\u002Fgetting-started\u002Fdeploying",[5399],[9831],{"type":100,"value":9832},"Deploying",{"type":94,"tag":818,"props":9834,"children":9835},{},[9836],{"type":94,"tag":5395,"props":9837,"children":9840},{"href":9838,"rel":9839},"https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fapp\u002Fguides\u002Fupgrading",[5399],[9841],{"type":100,"value":3683},{"type":94,"tag":818,"props":9843,"children":9844},{},[9845],{"type":94,"tag":5395,"props":9846,"children":9849},{"href":9847,"rel":9848},"https:\u002F\u002Fgithub.com\u002Fvercel\u002Fnext.js",[5399],[9850],{"type":100,"value":9851},"GitHub: Next.js",{"type":94,"tag":8885,"props":9853,"children":9854},{},[9855],{"type":100,"value":9856},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":9858,"total":9976},[9859,9878,9894,9906,9926,9944,9964],{"slug":9860,"name":9860,"fn":9861,"description":9862,"org":9863,"tags":9864,"stars":28,"repoUrl":29,"updatedAt":9877},"accessibility-and-inclusive-visualization","make data visualizations accessible","Make data visualizations accessible and inclusive. Use when the user needs chart or diagram accessibility guidance, text alternatives for complex visuals, color and contrast review, keyboard support, reduced-motion behavior for animation or parallax, or an accessibility QA workflow for exported figures, UML-like diagrams, and dashboards.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9865,9868,9871,9874],{"name":9866,"slug":9867,"type":15},"Accessibility","accessibility",{"name":9869,"slug":9870,"type":15},"Charts","charts",{"name":9872,"slug":9873,"type":15},"Data Visualization","data-visualization",{"name":9875,"slug":9876,"type":15},"Design","design","2026-06-30T19:00:57.102",{"slug":9879,"name":9879,"fn":9880,"description":9881,"org":9882,"tags":9883,"stars":28,"repoUrl":29,"updatedAt":9893},"agent-browser","automate browser interactions for agents","Browser automation CLI for AI agents. Use when the user needs to interact with websites, verify dev server output, test web apps, navigate pages, fill forms, click buttons, take screenshots, extract data, or automate any browser task. Also triggers when a dev server starts so you can verify it visually.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9884,9887,9890],{"name":9885,"slug":9886,"type":15},"Agents","agents",{"name":9888,"slug":9889,"type":15},"Browser Automation","browser-automation",{"name":9891,"slug":9892,"type":15},"Testing","testing","2026-04-06T18:41:03.44016",{"slug":9895,"name":9895,"fn":9896,"description":9897,"org":9898,"tags":9899,"stars":28,"repoUrl":29,"updatedAt":9905},"agent-browser-verify","verify dev server output with automated browser","Automated browser verification for dev servers. Triggers when a dev server starts to run a visual gut-check with agent-browser — verifies the page loads, checks for console errors, validates key UI elements, and reports pass\u002Ffail before continuing.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9900,9901,9904],{"name":9888,"slug":9889,"type":15},{"name":9902,"slug":9903,"type":15},"Local Development","local-development",{"name":9891,"slug":9892,"type":15},"2026-04-06T18:41:17.526867",{"slug":9907,"name":9907,"fn":9908,"description":9909,"org":9910,"tags":9911,"stars":28,"repoUrl":29,"updatedAt":9925},"agents-sdk","build AI agents on Cloudflare Workers","Build AI agents on Cloudflare Workers using the Agents SDK. Load when creating stateful agents, durable workflows, real-time WebSocket apps, scheduled tasks, MCP servers, or chat applications. Covers Agent class, state management, callable RPC, Workflows integration, and React hooks. Biases towards retrieval from Cloudflare docs over pre-trained knowledge.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9912,9913,9916,9919,9922],{"name":9885,"slug":9886,"type":15},{"name":9914,"slug":9915,"type":15},"Cloudflare Workers","cloudflare-workers",{"name":9917,"slug":9918,"type":15},"SDK","sdk",{"name":9920,"slug":9921,"type":15},"Serverless","serverless",{"name":9923,"slug":9924,"type":15},"WebSockets","websockets","2026-04-06T18:39:51.717063",{"slug":9927,"name":9927,"fn":9928,"description":9929,"org":9930,"tags":9931,"stars":28,"repoUrl":29,"updatedAt":9943},"ai-elements","build chat UIs with AI Elements","AI Elements component library guidance — pre-built React components for AI interfaces built on shadcn\u002Fui. Use when building chat UIs, message displays, tool call rendering, streaming responses, reasoning panels, or any AI-native interface with the AI SDK.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9932,9933,9934,9937,9940],{"name":26,"slug":27,"type":15},{"name":13,"slug":14,"type":15},{"name":9935,"slug":9936,"type":15},"shadcn\u002Fui","shadcn-ui",{"name":9938,"slug":9939,"type":15},"UI Components","ui-components",{"name":9941,"slug":9942,"type":15},"Vercel","vercel","2026-04-06T18:40:59.619419",{"slug":9945,"name":9945,"fn":9946,"description":9947,"org":9948,"tags":9949,"stars":28,"repoUrl":29,"updatedAt":9963},"ai-gateway","configure Vercel AI Gateway","Vercel AI Gateway expert guidance. Use when configuring model routing, provider failover, cost tracking, or managing multiple AI providers through a unified API.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9950,9953,9956,9959,9962],{"name":9951,"slug":9952,"type":15},"AI Infrastructure","ai-infrastructure",{"name":9954,"slug":9955,"type":15},"Cost Optimization","cost-optimization",{"name":9957,"slug":9958,"type":15},"LLM","llm",{"name":9960,"slug":9961,"type":15},"Performance","performance",{"name":9941,"slug":9942,"type":15},"2026-04-06T18:40:44.377464",{"slug":9965,"name":9965,"fn":9966,"description":9967,"org":9968,"tags":9969,"stars":28,"repoUrl":29,"updatedAt":9975},"ai-generation-persistence","implement persistence patterns for AI generations","AI generation persistence patterns — unique IDs, addressable URLs, database storage, and cost tracking for every LLM generation",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9970,9971,9974],{"name":9954,"slug":9955,"type":15},{"name":9972,"slug":9973,"type":15},"Database","database",{"name":9957,"slug":9958,"type":15},"2026-04-06T18:41:08.513425",600,{"items":9978,"total":10172},[9979,10000,10021,10038,10054,10071,10089,10101,10115,10129,10141,10156],{"slug":9980,"name":9980,"fn":9981,"description":9982,"org":9983,"tags":9984,"stars":9997,"repoUrl":9998,"updatedAt":9999},"prior-auth-packet-builder","build healthcare prior authorization packets","Build a concise prior authorization packet from local case files and payer policy docs.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[9985,9988,9991,9994],{"name":9986,"slug":9987,"type":15},"Documents","documents",{"name":9989,"slug":9990,"type":15},"Healthcare","healthcare",{"name":9992,"slug":9993,"type":15},"Insurance","insurance",{"name":9995,"slug":9996,"type":15},"Regulatory Compliance","regulatory-compliance",28169,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fopenai-agents-python","2026-04-16T05:11:39.180399",{"slug":10001,"name":10001,"fn":10002,"description":10003,"org":10004,"tags":10005,"stars":10018,"repoUrl":10019,"updatedAt":10020},"aspnet-core","build ASP.NET Core web applications","Build, review, refactor, or architect ASP.NET Core web applications using current official guidance for .NET web development. Use when working on Blazor Web Apps, Razor Pages, MVC, Minimal APIs, controller-based Web APIs, SignalR, gRPC, middleware, dependency injection, configuration, authentication, authorization, testing, performance, deployment, or ASP.NET Core upgrades.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10006,10009,10011,10014,10017],{"name":10007,"slug":10008,"type":15},".NET","dotnet",{"name":10010,"slug":10001,"type":15},"ASP.NET Core",{"name":10012,"slug":10013,"type":15},"Blazor","blazor",{"name":10015,"slug":10016,"type":15},"C#","csharp",{"name":23,"slug":24,"type":15},23787,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fskills","2026-04-12T05:07:02.819491",{"slug":10022,"name":10022,"fn":10023,"description":10024,"org":10025,"tags":10026,"stars":10018,"repoUrl":10019,"updatedAt":10037},"chatgpt-apps","build ChatGPT Apps SDK applications","Build, scaffold, refactor, and troubleshoot ChatGPT Apps SDK applications that combine an MCP server and widget UI. Use when Codex needs to design tools, register UI resources, wire the MCP Apps bridge or ChatGPT compatibility APIs, apply Apps SDK metadata or CSP or domain settings, or produce a docs-aligned project scaffold. Prefer a docs-first workflow by invoking the openai-docs skill or OpenAI developer docs MCP tools before generating code.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10027,10030,10033,10036],{"name":10028,"slug":10029,"type":15},"Apps SDK","apps-sdk",{"name":10031,"slug":10032,"type":15},"ChatGPT","chatgpt",{"name":10034,"slug":10035,"type":15},"MCP","mcp",{"name":9,"slug":8,"type":15},"2026-04-12T05:07:05.468097",{"slug":10039,"name":10039,"fn":10040,"description":10041,"org":10042,"tags":10043,"stars":10018,"repoUrl":10019,"updatedAt":10053},"cli-creator","build CLIs from API docs","Build a composable CLI for Codex from API docs, an OpenAPI spec, existing curl examples, an SDK, a web app, an admin tool, or a local script. Use when the user wants Codex to create a command-line tool that can run from any repo, expose composable read\u002Fwrite commands, return stable JSON, manage auth, and pair with a companion skill.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10044,10047,10050],{"name":10045,"slug":10046,"type":15},"API Development","api-development",{"name":10048,"slug":10049,"type":15},"CLI","cli",{"name":10051,"slug":10052,"type":15},"Codex","codex","2026-04-12T05:07:04.132762",{"slug":10055,"name":10055,"fn":10056,"description":10057,"org":10058,"tags":10059,"stars":10018,"repoUrl":10019,"updatedAt":10070},"cloudflare-deploy","deploy projects to Cloudflare","Deploy applications and infrastructure to Cloudflare using Workers, Pages, and related platform services. Use when the user asks to deploy, host, publish, or set up a project on Cloudflare.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10060,10063,10066,10067],{"name":10061,"slug":10062,"type":15},"Cloudflare","cloudflare",{"name":10064,"slug":10065,"type":15},"Cloudflare Pages","cloudflare-pages",{"name":9914,"slug":9915,"type":15},{"name":10068,"slug":10069,"type":15},"Deployment","deployment","2026-04-12T05:07:14.275118",{"slug":10072,"name":10072,"fn":10073,"description":10074,"org":10075,"tags":10076,"stars":10018,"repoUrl":10019,"updatedAt":10088},"define-goal","define and set measurable project goals","Help the user define a concrete, measurable goal before starting work, especially when they ask to use the goal tool, create a goal, set an objective, clarify success criteria, or turn a fuzzy intention into a quantitative outcome. Use this skill for goal creation and goal refinement only; it does not manage durable snapshots, decision logs, or long-running execution artifacts.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10077,10080,10083,10085],{"name":10078,"slug":10079,"type":15},"Productivity","productivity",{"name":10081,"slug":10082,"type":15},"Project Management","project-management",{"name":6224,"slug":10084,"type":15},"strategy",{"name":10086,"slug":10087,"type":15},"Task Management","task-management","2026-05-23T06:17:16.870838",{"slug":10090,"name":10090,"fn":10091,"description":10092,"org":10093,"tags":10094,"stars":10018,"repoUrl":10019,"updatedAt":10100},"figma","translate Figma designs into code","Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10095,10096,10098,10099],{"name":9875,"slug":9876,"type":15},{"name":10097,"slug":10090,"type":15},"Figma",{"name":26,"slug":27,"type":15},{"name":10034,"slug":10035,"type":15},"2026-04-12T05:06:47.939943",{"slug":10102,"name":10102,"fn":10103,"description":10104,"org":10105,"tags":10106,"stars":10018,"repoUrl":10019,"updatedAt":10114},"figma-code-connect-components","connect Figma designs to code components","Connects Figma design components to code components using Code Connect mapping tools. Use when user says \"code connect\", \"connect this component to code\", \"map this component\", \"link component to code\", \"create code connect mapping\", or wants to establish mappings between Figma designs and code implementations. For canvas writes via `use_figma`, use `figma-use`.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10107,10108,10111,10112,10113],{"name":9875,"slug":9876,"type":15},{"name":10109,"slug":10110,"type":15},"Design System","design-system",{"name":10097,"slug":10090,"type":15},{"name":26,"slug":27,"type":15},{"name":9938,"slug":9939,"type":15},"2026-05-10T05:59:52.971881",{"slug":10116,"name":10116,"fn":10117,"description":10118,"org":10119,"tags":10120,"stars":10018,"repoUrl":10019,"updatedAt":10128},"figma-create-design-system-rules","generate design system rules from Figma","Generates custom design system rules for the user's codebase. Use when user says \"create design system rules\", \"generate rules for my project\", \"set up design rules\", \"customize design system guidelines\", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma MCP server connection.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10121,10122,10123,10126,10127],{"name":9875,"slug":9876,"type":15},{"name":10109,"slug":10110,"type":15},{"name":10124,"slug":10125,"type":15},"Documentation","documentation",{"name":10097,"slug":10090,"type":15},{"name":26,"slug":27,"type":15},"2026-05-16T06:07:47.821474",{"slug":10130,"name":10130,"fn":10131,"description":10132,"org":10133,"tags":10134,"stars":10018,"repoUrl":10019,"updatedAt":10140},"figma-implement-design","translate Figma designs into application code","Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions \"implement design\", \"generate code\", \"implement component\", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10135,10136,10137,10138,10139],{"name":9875,"slug":9876,"type":15},{"name":10097,"slug":10090,"type":15},{"name":26,"slug":27,"type":15},{"name":9938,"slug":9939,"type":15},{"name":23,"slug":24,"type":15},"2026-05-16T06:07:40.583615",{"slug":10142,"name":10142,"fn":10143,"description":10144,"org":10145,"tags":10146,"stars":10018,"repoUrl":10019,"updatedAt":10155},"hatch-pet","create animated pets for Codex","Create, repair, validate, visually QA, and package Codex-compatible animated pets and pet spritesheets from character art, generated images, company or prospect brand cues, or visual references. Use when a user wants a lightweight-worker Codex pet workflow, a non-pixel custom pet style, a prospect or company mascot pet, or a full 8x9 animated pet atlas with transparent unused cells, QA contact sheets, and pet.json packaging. This skill composes the installed $imagegen system skill for visual generation and uses bundled scripts for deterministic spritesheet assembly.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10147,10150,10151,10154],{"name":10148,"slug":10149,"type":15},"Animation","animation",{"name":10051,"slug":10052,"type":15},{"name":10152,"slug":10153,"type":15},"Creative","creative",{"name":9875,"slug":9876,"type":15},"2026-05-02T05:31:48.48485",{"slug":10157,"name":10157,"fn":10158,"description":10159,"org":10160,"tags":10161,"stars":10018,"repoUrl":10019,"updatedAt":10171},"imagegen","generate and edit raster images","Generate or edit raster images when the task benefits from AI-created bitmap visuals such as photos, illustrations, textures, sprites, mockups, or transparent-background cutouts. Use when Codex should create a brand-new image, transform an existing image, or derive visual variants from references, and the output should be a bitmap asset rather than repo-native code or vector. Do not use when the task is better handled by editing existing SVG\u002Fvector\u002Fcode-native assets, extending an established icon or logo system, or building the visual directly in HTML\u002FCSS\u002Fcanvas.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10162,10163,10164,10167,10170],{"name":10152,"slug":10153,"type":15},{"name":9875,"slug":9876,"type":15},{"name":10165,"slug":10166,"type":15},"Image Generation","image-generation",{"name":10168,"slug":10169,"type":15},"Images","images",{"name":9,"slug":8,"type":15},"2026-05-15T06:23:24.312127",675]