[
  {
    "url": "https://nextjs.org/docs",
    "title": "Next.js Docs",
    "type": "overview",
    "summary": "This page is the main documentation index for Next.js, providing an overview of what Next.js is, how to use the docs, the difference between App Router and Pages Router, prerequisites, accessibility…",
    "sections": [
      {
        "heading": "What is Next.js?",
        "content": "Next.js is a React framework for building full-stack web applications. You use React Components to build user interfaces, and Next.js for additional features and optimizations. It also automatically…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "How to use the docs",
        "content": "The docs are organized into 3 sections:\n\n- Getting Started: Step-by-step tutorials to help you create a new application and learn the core Next.js features.\n- Guides: Tutorials on specific use cases,…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "App Router and Pages Router",
        "content": "Next.js has two different routers:\n\n- App Router: The newer router that supports new React features like Server Components.\n- Pages Router: The original router, still supported and being…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "React version handling",
        "content": "The App Router and Pages Router handle React versions differently:\n\n- App Router: Uses React canary releases built-in, which include all the stable React 19 changes, as well as newer features being…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Pre-requisite knowledge",
        "content": "Our documentation assumes some familiarity with web development. Before getting started, it'll help if you're comfortable with:\n\n- HTML\n- CSS\n- JavaScript\n- React\n\nIf you're new to React or need a…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Accessibility",
        "content": "For the best experience when using a screen reader, we recommend using Firefox and NVDA, or Safari and VoiceOver.",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Join our Community",
        "content": "If you have questions about anything related to Next.js, you're always welcome to ask our community on GitHub Discussions, Discord, X (Twitter), and Reddit.",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Next Steps",
        "content": "Create your first application and learn the core Next.js features.",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [
      "Next.js",
      "React",
      "App Router",
      "Pages Router",
      "documentation",
      "full-stack",
      "web development"
    ],
    "prerequisites": [],
    "_content_hash": "acd43a035ef84b47dfe8a092f9076edc531dc122b843bc43fc0ea24367568e3d",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app",
    "title": "App Router",
    "type": "overview",
    "summary": "Overview of the Next.js App Router, a file-system based router that leverages React's latest features such as Server Components, Suspense, and Server Functions.",
    "sections": [
      {
        "heading": "App Router",
        "content": "The App Router is a file-system based router that uses React's latest features such as Server Components, Suspense, and Server Functions.",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Next Steps",
        "content": "Learn the fundamentals of building an App Router project, from installation to layouts, navigation, server and client components.\n\n- Installation: Learn how to create a new Next.js application with…",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [
      "Next.js",
      "App Router",
      "React",
      "Server Components",
      "Suspense",
      "Server Functions",
      "file-system routing"
    ],
    "prerequisites": [],
    "_content_hash": "53d82bd0cd93c111f565e1a543a7b95fc0b5926d60dec42ac301e68191b0d104",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference",
    "title": "API Reference",
    "type": "overview",
    "summary": "Index page for Next.js App Router API references, listing categories such as Directives, Components, File-system conventions, Functions, Configuration, CLI, Adapters, Edge Runtime, and Turbopack.",
    "sections": [
      {
        "heading": "Directives",
        "content": "Directives are used to modify the behavior of your Next.js application.",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Components",
        "content": "API Reference for Next.js built-in components.",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "File-system conventions",
        "content": "API Reference for Next.js file-system conventions.",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Functions",
        "content": "API Reference for Next.js Functions and Hooks.",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Configuration",
        "content": "Learn how to configure Next.js applications.",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "CLI",
        "content": "API Reference for the Next.js Command Line Interface (CLI) tools.",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Adapters",
        "content": "Build deployment adapters for Next.js platforms and infrastructure.",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Edge Runtime",
        "content": "API Reference for the Edge Runtime.",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Turbopack",
        "content": "Turbopack is an incremental bundler optimized for JavaScript and TypeScript, written in Rust, and built into Next.js.",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [
      "Next.js",
      "App Router",
      "API Reference",
      "Directives",
      "Components",
      "File-system conventions",
      "Functions",
      "Configuration",
      "CLI",
      "Adapters",
      "Edge Runtime",
      "Turbopack"
    ],
    "prerequisites": [],
    "_content_hash": "df5e96ec0548adf28a1c93d83d858d1f9f804efa7644b1d14c8df9c55ebd7e01",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/adapters",
    "title": "Adapters",
    "type": "overview",
    "summary": "Overview of Next.js deployment adapter documentation, covering configuration, creation, API reference, testing, routing, PPR, runtime integration, entrypoints, output types, routing information, use…",
    "sections": [
      {
        "heading": "Adapters",
        "content": "Use this section to build and validate deployment adapters that integrate with the Next.js build and runtime model.",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Configuration",
        "content": "Configure `adapterPath` or `NEXT_ADAPTER_PATH` to use a custom deployment adapter.",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Creating an Adapter",
        "content": "Create an adapter module that implements the `NextAdapter` interface.",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "API Reference",
        "content": "Reference for `modifyConfig` and `onBuildComplete` in the `NextAdapter` interface.",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Testing Adapters",
        "content": "Validate adapters with the Next.js compatibility test harness and custom lifecycle scripts.",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Routing with @next/routing",
        "content": "Use `@next/routing` to apply Next.js route matching behavior in adapters.",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Implementing PPR in an Adapter",
        "content": "Implement Partial Prerendering support in an adapter using fallback output and cache hooks.",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Runtime Integration",
        "content": "Understand how build-time adapters and runtime cache interfaces work together.",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Invoking Entrypoints",
        "content": "Invoke Node.js and Edge build entrypoints with adapter runtime context.",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Output Types",
        "content": "Reference for all build output types exposed to adapters.",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Routing Information",
        "content": "Reference for routing phases and route fields exposed in `onBuildComplete`.",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Use Cases",
        "content": "Common patterns and examples for deployment adapter implementations.",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Supporting Immutable Static Assets",
        "content": "Support immutable static assets in an adapter",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [
      "Next.js",
      "adapters",
      "deployment",
      "build",
      "runtime",
      "PPR",
      "routing",
      "static assets"
    ],
    "prerequisites": [],
    "_content_hash": "cd72c58bfa2166b54e47265222aaa25a73a0e5bfdfbcd4645c11e7fd1f6c6e54",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/adapters/api-reference",
    "title": "API Reference",
    "type": "api",
    "summary": "This page describes the Next.js adapter API, including functions to modify configuration and handle build completion.",
    "sections": [
      {
        "heading": "`async modifyConfig(config, context)`",
        "content": "Called for any CLI command that loads the `next.config.js` file to allow modification of the configuration.\n\n**Parameters:**\n\n- `config`: The complete Next.js configuration object\n- `context.phase`:…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "`async onBuildComplete(context)`",
        "content": "Called after the build process completes with detailed information about routes and outputs.\n\n**Parameters:**\n\n- `context.routing`: Object containing Next.js routing phases and metadata \n-…",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "config",
        "type": "object",
        "description": "The complete Next.js configuration object",
        "default": "",
        "required": true
      },
      {
        "name": "context.phase",
        "type": "string",
        "description": "The current build phase (see phases)",
        "default": "",
        "required": true
      },
      {
        "name": "context.nextVersion",
        "type": "string",
        "description": "Version of Next.js being used",
        "default": "",
        "required": true
      },
      {
        "name": "context.projectDir",
        "type": "string",
        "description": "Absolute path to the Next.js project directory",
        "default": "",
        "required": true
      },
      {
        "name": "context.routing",
        "type": "object",
        "description": "Object containing Next.js routing phases and metadata",
        "default": "",
        "required": true
      },
      {
        "name": "context.routing.beforeMiddleware",
        "type": "any",
        "description": "Routes executed before middleware (includes header and redirect handling)",
        "default": "",
        "required": true
      },
      {
        "name": "context.routing.beforeFiles",
        "type": "any",
        "description": "Rewrite routes checked before filesystem route matching",
        "default": "",
        "required": true
      },
      {
        "name": "context.routing.afterFiles",
        "type": "any",
        "description": "Rewrite routes checked after filesystem route matching",
        "default": "",
        "required": true
      },
      {
        "name": "context.routing.dynamicRoutes",
        "type": "any",
        "description": "Dynamic route matching table",
        "default": "",
        "required": true
      },
      {
        "name": "context.routing.onMatch",
        "type": "any",
        "description": "Routes applied after a successful match (for example immutable static asset cache headers)",
        "default": "",
        "required": true
      },
      {
        "name": "context.routing.fallback",
        "type": "any",
        "description": "Final rewrite fallback routes",
        "default": "",
        "required": true
      },
      {
        "name": "context.routing.shouldNormalizeNextData",
        "type": "boolean",
        "description": "Whether `/_next/data/<buildId>/...` URLs should be normalized during matching",
        "default": "",
        "required": true
      },
      {
        "name": "context.routing.rsc",
        "type": "any",
        "description": "Route metadata used for React Server Components routing behavior",
        "default": "",
        "required": true
      },
      {
        "name": "context.outputs",
        "type": "object",
        "description": "Detailed information about all build outputs organized by type",
        "default": "",
        "required": true
      },
      {
        "name": "context.repoRoot",
        "type": "string",
        "description": "Absolute path to the detected repository root",
        "default": "",
        "required": true
      },
      {
        "name": "context.distDir",
        "type": "string",
        "description": "Absolute path to the build output directory",
        "default": "",
        "required": true
      },
      {
        "name": "context.config",
        "type": "object",
        "description": "The final Next.js configuration (with modifyConfig applied)",
        "default": "",
        "required": true
      },
      {
        "name": "context.buildId",
        "type": "string",
        "description": "Unique identifier for the current build",
        "default": "",
        "required": true
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "adapters",
      "API reference",
      "configuration",
      "build"
    ],
    "prerequisites": [],
    "_content_hash": "d9830ddb7ab03beddcfb7a2bc244008b681b5d004684e976f0f75acafd884533",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/adapters/configuration",
    "title": "Configuration",
    "type": "api",
    "summary": "This page describes how to configure Next.js adapters by specifying the adapter module path via `adapterPath` in `next.config.js` or the `NEXT_ADAPTER_PATH` environment variable.",
    "sections": [
      {
        "heading": "Configuration",
        "content": "To use an adapter, specify the path to your adapter module in `adapterPath`:\n\nAlternatively `NEXT_ADAPTER_PATH` can be set to enable zero-config usage in deployment platforms.",
        "code_blocks": [
          {
            "language": "js",
            "code": "/** @type {import('next').NextConfig} */\nconst nextConfig = {\n  adapterPath: require.resolve('./my-adapter.js'),\n}\n \nmodule.exports = nextConfig",
            "filename": "next.config.js"
          }
        ],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "adapterPath",
        "type": "string",
        "description": "Path to the adapter module. Specify the path to your adapter module in `adapterPath`.",
        "default": "",
        "required": false
      },
      {
        "name": "NEXT_ADAPTER_PATH",
        "type": "string",
        "description": "Environment variable that can be set to enable zero-config usage in deployment platforms.",
        "default": "",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "Adapters",
      "Configuration",
      "adapterPath",
      "NEXT_ADAPTER_PATH",
      "next.config.js",
      "deployment"
    ],
    "prerequisites": [],
    "_content_hash": "9187a06baaa012da8a1e20d6802f53a01989dee33859196456685c7188218c9c",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/adapters/creating-an-adapter",
    "title": "Creating an Adapter",
    "type": "guide",
    "summary": "This page explains how to create a custom adapter for Next.js by implementing the NextAdapter interface, including the interface definition and a minimal example.",
    "sections": [
      {
        "heading": "Creating an Adapter",
        "content": "An adapter is a module that exports an object implementing the `NextAdapter` interface.\n\nThe interface can be imported from the `next` package:\n\nThe interface is defined as follows:",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "import type { NextAdapter } from 'next'",
            "filename": ""
          },
          {
            "language": "typescript",
            "code": "type Route = {\n  source?: string\n  sourceRegex: string\n  destination?: string\n  headers?: Record<string, string>\n  has?: RouteHas[]\n  missing?: RouteHas[]\n  status?: number\n  priority?: boolean\n}…",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Basic Adapter Structure",
        "content": "Here's a minimal adapter example:",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "/** @type {import('next').NextAdapter} */\nconst adapter = {\n  name: 'my-custom-adapter',\n \n  async modifyConfig(config, { phase }) {\n    // Modify the Next.js config based on the build phase\n    if…",
            "filename": "my-adapter.js"
          }
        ],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [
      "Next.js",
      "adapter",
      "deployment",
      "interface"
    ],
    "prerequisites": [],
    "_content_hash": "ec5cdbdbe65e170697b27929c0ae1ac3b1ca5059b298746595045af707354366",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/adapters/immutable-static-assets",
    "title": "Adapters: Supporting Immutable Static Assets | Next.js",
    "type": "reference",
    "summary": "Explains how Next.js adapters can support immutable static assets, including the `supportsImmutableAssets` config flag, the shared-namespace runtime behavior of immutable assets, content-hash…",
    "sections": [
      {
        "heading": "Supporting Immutable Static Assets",
        "content": "See [`config.supportsImmutableAssets`](/docs/app/api-reference/config/next-config-js/supportsImmutableAssets) for end-user-facing information about this feature.\n\nWhen…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Adapter Implementation",
        "content": "You need to:\n\n- In the `modifyConfig`, set the `config.supportsImmutableAssets` property to `true` (if it's not already set to `false` by the user) to signal that you support deploying immutable…",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "/** @type {import('next').NextAdapter} */\nconst adapter = {\n  name: 'my-custom-adapter',\n \n  async modifyConfig(config, { phase }) {\n    if (phase === 'phase-production-build') {…",
            "filename": "my-adapter.js"
          }
        ],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [
      "Next.js",
      "Adapters",
      "Immutable Static Assets",
      "supportsImmutableAssets",
      "outputHashSalt",
      "CDN",
      "Deployments",
      "Content Hash",
      "modifyConfig",
      "onBuildComplete"
    ],
    "prerequisites": [],
    "_content_hash": "98fa1f4b61bdb4262bedd815bc60defb3fed833c629e3cc95b113d7871a9442d",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/adapters/implementing-ppr-in-an-adapter",
    "title": "Implementing PPR in an Adapter",
    "type": "guide",
    "summary": "This page explains how to implement Partial Prerendering (PPR) in a Next.js adapter, covering build-time seeding of fallback shells and postponed state, runtime streaming of cached shells with…",
    "sections": [
      {
        "heading": "Overview",
        "content": "For partially prerendered app routes, `onBuildComplete` gives you the data needed to seed and resume PPR:\n\n- `outputs.prerenders[].fallback.filePath`: path to the generated fallback shell (for…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "1. Seed shell + postponed state at build time",
        "content": "",
        "code_blocks": [
          {
            "language": "ts",
            "code": "import { readFile } from 'node:fs/promises'\n \nasync function seedPprEntries(outputs: AdapterOutputs) {\n  for (const prerender of outputs.prerenders) {\n    const fallback = prerender.fallback\n    if…",
            "filename": "my-adapter.ts"
          }
        ],
        "images": []
      },
      {
        "heading": "2. Runtime flow: serve cached shell and resume in background",
        "content": "At request time, you can stream a single response that is the concatenation of:\n\n- cached HTML shell stream\n- resumed render stream (generated after invoking `handler` with postponed state)",
        "code_blocks": [
          {
            "language": "text",
            "code": "Client\n  | GET /ppr-route\n  v\nAdapter Router\n  |\n  |-- read cached shell + postponedState ---> Platform Cache\n  |<------------- cache hit -----------------|\n  |\n  |-- create responseStream =…",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "3. Update cache with `requestMeta.onCacheEntryV2`",
        "content": "`requestMeta.onCacheEntryV2` is called when a response cache entry is looked up or generated. Use it to persist updated shell/postponed data.\n\n- `requestMeta.onCacheEntry` still works, but is…",
        "code_blocks": [
          {
            "language": "ts",
            "code": "await handler(req, res, {\n  waitUntil,\n  requestMeta: {\n    postponed: cachedPprEntry?.postponedState,\n    onCacheEntryV2: async (cacheEntry, meta) => {\n      if (cacheEntry.value?.kind ===…",
            "filename": "my-adapter.ts"
          },
          {
            "language": "text",
            "code": "Entrypoint (handler)\n  | onCacheEntryV2(cacheEntry, { url })\n  v\nrequestMeta.onCacheEntryV2 callback\n  |\n  |-- if APP_PAGE ---> persist html + postponedState + headers ---> Platform Cache\n  |\n  '--…",
            "filename": ""
          }
        ],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [
      "Next.js",
      "PPR",
      "Adapter",
      "Caching",
      "Partial Prerendering",
      "onBuildComplete",
      "onCacheEntryV2"
    ],
    "prerequisites": [],
    "_content_hash": "254fbf121ccbd42e4ef223388c3f721e05b5b32f72b6b756ad52ead7b3afaf17",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/adapters/invoking-entrypoints",
    "title": "Adapters: Invoking Entrypoints | Next.js",
    "type": "reference",
    "summary": "This page describes how build output entrypoints use a `handler(..., ctx)` interface for Node.js and Edge runtimes, including how adapters can invoke entrypoints directly and use `requestMeta`…",
    "sections": [
      {
        "heading": "Invoking Entrypoints",
        "content": "Build output entrypoints use a `handler(..., ctx)` interface, with runtime-specific request/response types.",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Node.js runtime (`runtime: 'nodejs'`)",
        "content": "Node.js entrypoints use the following interface:\n\nWhen invoking Node.js entrypoints directly, adapters can pass helpers directly on `requestMeta` instead of relying on internals. Some of the…",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "handler(\n  req: IncomingMessage,\n  res: ServerResponse,\n  ctx: {\n    waitUntil?: (promise: Promise<void>) => void\n    requestMeta?: RequestMeta\n  }\n): Promise<void>",
            "filename": ""
          },
          {
            "language": "javascript",
            "code": "await handler(req, res, {\n  requestMeta: {\n    // Relative path from process.cwd() to the Next.js project directory.\n    relativeProjectDir: '.',\n    // Optional hostname used by route handlers when…",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Edge runtime (`runtime: 'edge'`) (deprecated)",
        "content": "> The Edge Runtime is [deprecated](/docs/messages/edge-runtime-deprecated). New routes should use the Node.js runtime.\n\nEdge entrypoints use the following interface:\n\nThe shape is aligned around…",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "handler(\n  request: Request,\n  ctx: {\n    waitUntil?: (prom: Promise<void>) => void\n    signal?: AbortSignal\n    requestMeta?: RequestMeta\n  }\n): Promise<Response>",
            "filename": ""
          },
          {
            "language": "typescript",
            "code": "{\n  modulePath: string // Absolute path to the module registered in the edge runtime\n  entryKey: string // Canonical key used by the edge entry registry\n  handlerExport: string // Export name to…",
            "filename": ""
          },
          {
            "language": "javascript",
            "code": "const entry = await globalThis._ENTRIES[output.edgeRuntime.entryKey]\nconst handler = entry[output.edgeRuntime.handlerExport]\nawait handler(request, ctx)",
            "filename": ""
          }
        ],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [
      "Next.js",
      "Adapters",
      "Entrypoints",
      "Node.js runtime",
      "Edge runtime",
      "handler",
      "requestMeta",
      "edgeRuntime"
    ],
    "prerequisites": [],
    "_content_hash": "3dc3eee0fe90be61325e53d897ce3507bfe05d185524cb4dd98100aef6f11c98",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/adapters/output-types",
    "title": "Adapters: Output Types",
    "type": "api",
    "summary": "Describes the `outputs` object structure exposed to Next.js adapters, including arrays for pages, API routes, app pages, app routes, prerenders, static files, and middleware, with TypeScript type…",
    "sections": [
      {
        "heading": "Output Types",
        "content": "The `outputs` object contains arrays of build output types:\n\n- `outputs.pages`: React pages from the `pages/` directory\n- `outputs.pagesApi`: API routes from `pages/api/`\n- `outputs.appPages`: React…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Pages (`outputs.pages`)",
        "content": "React pages from the `pages/` directory:",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "{\n  type: 'PAGES'\n  id: string           // Route identifier\n  filePath: string     // Path to the built file\n  pathname: string     // URL pathname\n  sourcePage: string   // Original source file…",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "API Routes (`outputs.pagesApi`)",
        "content": "API routes from `pages/api/`:",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "{\n  type: 'PAGES_API'\n  id: string           // Route identifier\n  filePath: string     // Path to the built file\n  pathname: string     // URL pathname\n  sourcePage: string   // Original relative…",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "App Pages (`outputs.appPages`)",
        "content": "React pages from the `app/` directory:",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "{\n  type: 'APP_PAGE'\n  id: string           // Route identifier\n  filePath: string     // Path to the built file\n  pathname: string     // URL pathname. Includes .rsc suffix for RSC routes…",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "App Routes (`outputs.appRoutes`)",
        "content": "API and metadata routes from the `app/` directory:",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "{\n  type: 'APP_ROUTE'\n  id: string           // Route identifier\n  filePath: string     // Path to the built file\n  pathname: string     // URL pathname\n  sourcePage: string   // Original relative…",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Prerenders (`outputs.prerenders`)",
        "content": "ISR-enabled routes and static prerenders:",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "{\n  type: 'PRERENDER'\n  id: string           // Route identifier\n  pathname: string     // URL pathname\n  parentOutputId: string  // ID of the source page/route\n  groupId: number        //…",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Prerender classification",
        "content": "`routeType`, `response`, and `compute` are emitted together on the primary response in a prerender group. Related RSC, data, and segment outputs omit these fields. Pages Router templates with…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Static Files (`outputs.staticFiles`)",
        "content": "Static assets and auto-statically optimized pages:\n\nSee [Supporting immutable static assets](/docs/app/api-reference/adapters/immutable-static-assets) for more information about `immutableHash`.",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "{\n  type: 'STATIC_FILE'\n  id: string // Unique identifier for this static file output\n  filePath: string // Absolute filesystem path to the built file\n  pathname: string // The routable URL pathname…",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Middleware (`outputs.middleware`)",
        "content": "`middleware.ts` (`.js`/`.ts`) or `proxy.ts` (`.js`/`.ts`) function (if present):",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "{\n  type: 'MIDDLEWARE'\n  id: string           // Route identifier\n  filePath: string     // Path to the built file\n  pathname: string      // Always '/_middleware'\n  sourcePage: string    // Always…",
            "filename": ""
          }
        ],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "outputs.pages",
        "type": "Object[]",
        "description": "React pages from the `pages/` directory",
        "default": "",
        "required": true
      },
      {
        "name": "outputs.pagesApi",
        "type": "Object[]",
        "description": "API routes from `pages/api/`",
        "default": "",
        "required": true
      },
      {
        "name": "outputs.appPages",
        "type": "Object[]",
        "description": "React pages from the `app/` directory",
        "default": "",
        "required": true
      },
      {
        "name": "outputs.appRoutes",
        "type": "Object[]",
        "description": "API and metadata routes from `app/`",
        "default": "",
        "required": true
      },
      {
        "name": "outputs.prerenders",
        "type": "Object[]",
        "description": "ISR-enabled routes and static prerenders",
        "default": "",
        "required": true
      },
      {
        "name": "outputs.staticFiles",
        "type": "Object[]",
        "description": "Static assets and auto-statically optimized pages",
        "default": "",
        "required": true
      },
      {
        "name": "outputs.middleware",
        "type": "Object[]",
        "description": "Middleware function (if present)",
        "default": "",
        "required": true
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "Adapters",
      "Output Types",
      "Build Output",
      "TypeScript"
    ],
    "prerequisites": [],
    "_content_hash": "bd058875b4eaf32694f3ad3090f6e61a59dd7ee1ea4cf07bafd09d56a6bf2e8e",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/adapters/routing-information",
    "title": "Adapters: Routing Information",
    "type": "api",
    "summary": "Describes the `routing` object available in `onBuildComplete`, including the route phases and common fields that make up deployment-ready routing information.",
    "sections": [
      {
        "heading": "Routing Information",
        "content": "The `routing` object in `onBuildComplete` provides complete routing information with processed patterns ready for deployment:",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "routing.beforeMiddleware",
        "content": "Routes applied before middleware execution. These include generated header and redirect behavior.",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "routing.beforeFiles",
        "content": "Rewrite routes checked before filesystem route matching.",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "routing.afterFiles",
        "content": "Rewrite routes checked after filesystem route matching.",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "routing.dynamicRoutes",
        "content": "Dynamic matchers generated from route segments such as `[slug]` and catch-all routes.",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "routing.onMatch",
        "content": "Routes that apply after a successful match, such as immutable cache headers for hashed static assets.",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "routing.fallback",
        "content": "Final rewrite routes checked when earlier phases did not produce a match.",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Common Route Fields",
        "content": "Each route entry can include:\n\n- `source`: Original route pattern (optional for generated internal rules)\n- `sourceRegex`: Compiled regex for matching requests\n- `destination`: Internal destination…",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [
      "Next.js",
      "Adapters",
      "Routing",
      "onBuildComplete",
      "Middleware",
      "Rewrites",
      "Redirects",
      "Dynamic Routes",
      "Headers"
    ],
    "prerequisites": [],
    "_content_hash": "cc98bd788a5081ae92e603f3e2601170264c638ffe4a4e9c8dabfcc3e725d50a",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/adapters/routing-with-next-routing",
    "title": "Routing with @next/routing",
    "type": "api",
    "summary": "Explains how to use the `@next/routing` package's `resolveRoutes()` function to reproduce Next.js route matching behavior with data from `onBuildComplete`.",
    "sections": [
      {
        "heading": "Routing with @next/routing",
        "content": "You can use `@next/routing` to reproduce Next.js route matching behavior with data from `onBuildComplete`.\n\n`resolveRoutes()` returns:\n\n- `middlewareResponded`: `true` when middleware already sent a…",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "import { resolveRoutes } from '@next/routing'\n \nconst pathnames = [\n  ...outputs.pages,\n  ...outputs.pagesApi,\n  ...outputs.appPages,\n  ...outputs.appRoutes,\n  ...outputs.staticFiles,\n].map((output)…",
            "filename": ""
          }
        ],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "url",
        "type": "URL",
        "description": "The request URL as a URL object.",
        "default": "",
        "required": true
      },
      {
        "name": "buildId",
        "type": "string",
        "description": "The build ID for the deployment.",
        "default": "",
        "required": true
      },
      {
        "name": "basePath",
        "type": "string",
        "description": "The base path of the Next.js application.",
        "default": "''",
        "required": false
      },
      {
        "name": "i18n",
        "type": "object",
        "description": "The i18n configuration object.",
        "default": "",
        "required": false
      },
      {
        "name": "headers",
        "type": "Headers",
        "description": "The request headers as a Headers object.",
        "default": "",
        "required": true
      },
      {
        "name": "requestBody",
        "type": "ReadableStream",
        "description": "The request body as a ReadableStream.",
        "default": "",
        "required": false
      },
      {
        "name": "pathnames",
        "type": "string[]",
        "description": "An array of pathnames from the build output.",
        "default": "",
        "required": true
      },
      {
        "name": "routes",
        "type": "object",
        "description": "The routing configuration from the build.",
        "default": "",
        "required": true
      },
      {
        "name": "invokeMiddleware",
        "type": "async function",
        "description": "An async function to invoke middleware, returning a response object.",
        "default": "",
        "required": true
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "@next/routing",
      "routing",
      "adapter",
      "resolveRoutes",
      "middleware",
      "onBuildComplete"
    ],
    "prerequisites": [],
    "_content_hash": "1689b6686c80f587d1f99e1b4dc1e9060761dc6043578c3a3b26782f1e2d015c",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/adapters/runtime-integration",
    "title": "Runtime Integration",
    "type": "api",
    "summary": "Describes the runtime behavior of Next.js server and cache interfaces, and how adapters interact with them, including handler context and PPR chain headers.",
    "sections": [
      {
        "heading": "Overview",
        "content": "The Deployment Adapter API is a **build-time** interface. It tells your platform what was built and how to route requests. **Runtime** behavior (request handling, streaming, caching) is handled by…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Handler Context",
        "content": "When invoking entrypoints, adapters pass a `ctx` object to the Next.js handler. Key fields include:\n\n- **`ctx.waitUntil`**: a function that accepts a promise. Use this to keep the serverless function…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "PPR Chain Headers",
        "content": "In the [prerenders output type](/docs/app/api-reference/adapters/output-types#prerenders-outputsprerenders), `pprChain.headers` contains the headers needed for the [resume…",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [
      "Next.js",
      "Adapters",
      "Runtime",
      "Cache",
      "PPR",
      "Deployment"
    ],
    "prerequisites": [],
    "_content_hash": "a34aeb904f35e7fd9c9c0f1381cceafa16637cb72959f8b2be13c3619b744440",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/adapters/testing-adapters",
    "title": "Testing Adapters",
    "type": "guide",
    "summary": "Next.js provides a test harness for validating adapters, including end-to-end tests for deployment. This page describes the environment variables and script contracts required for custom deploy,…",
    "sections": [
      {
        "heading": "Testing Adapters",
        "content": "Next.js provides a test harness for validating adapters. Running the end-to-end tests for deployment.\n\nExample GitHub Actions workflow:\n\nThe test harness looks for these environment variables:\n\n-…",
        "code_blocks": [
          {
            "language": "yaml",
            "code": "name: test-e2e-deploy\n \non:\n  workflow_dispatch:\n    inputs:\n      nextjsRef:\n        description: 'Next.js repo ref (branch/tag/SHA)'\n        default: 'canary'\n        type: string\n  # schedule:\n  #…",
            "filename": ".github/workflows/test-e2e-deploy.yml"
          }
        ],
        "images": []
      },
      {
        "heading": "Custom deploy script contract",
        "content": "The deploy script `NEXT_TEST_DEPLOY_SCRIPT_PATH` is executed with `cwd` set to the isolated temporary app created by the Next.js test harness.\n\nThe deploy script must follow this contract:\n\n- Exit…",
        "code_blocks": [
          {
            "language": "bash",
            "code": "#!/usr/bin/env bash\nset -euo pipefail\n \n# Install the adapter, build the app, and deploy or start it.\nnode -e \"\nconst…",
            "filename": "scripts/e2e-deploy.sh"
          }
        ],
        "images": []
      },
      {
        "heading": "Custom logs script contract",
        "content": "The logs script `NEXT_TEST_DEPLOY_LOGS_SCRIPT_PATH` is executed with `cwd` set to the isolated temporary app created by the Next.js test harness.\n\nAdditionally it receives `NEXT_TEST_DIR` and…",
        "code_blocks": [
          {
            "language": "bash",
            "code": "#!/usr/bin/env bash\nset -euo pipefail\n \nif [ -f \".adapter-build.log\" ]; then\n  cat \".adapter-build.log\"\nfi\n \nif [ -f \".adapter-server.log\" ]; then\n  echo \"=== .adapter-server.log ===\"\n  cat…",
            "filename": "scripts/e2e-logs.sh"
          }
        ],
        "images": []
      },
      {
        "heading": "Custom cleanup script contract",
        "content": "The cleanup script `NEXT_TEST_CLEANUP_SCRIPT_PATH` is executed with `cwd` set to the isolated temporary app created by the Next.js test harness.\n\nAdditionally it receives `NEXT_TEST_DIR` and…",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [
      "Next.js",
      "adapters",
      "testing",
      "deployment",
      "GitHub Actions",
      "Playwright",
      "environment variables"
    ],
    "prerequisites": [],
    "_content_hash": "d8bcf18daf1ec33f098fa02cbcdc310719c2c2384ed95dab490df8e2a88cd6ad",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/adapters/use-cases",
    "title": "Adapters: Use Cases | Next.js",
    "type": "guide",
    "summary": "Common use cases for Next.js adapters, including deployment platform integration, asset processing, monitoring, custom bundling, build validation, and route generation.",
    "sections": [
      {
        "heading": "Use Cases",
        "content": "Common use cases for adapters include:\n\n- **Deployment Platform Integration** : Automatically configure build outputs for specific hosting platforms\n\n- **Asset Processing** : Transform or optimize…",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [
      "adapters",
      "Next.js",
      "deployment",
      "build",
      "routing"
    ],
    "prerequisites": [],
    "_content_hash": "63dae073784b83c697737aa2bfa83bbad6585f7e99345d6adc745d187e299a04",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/cli",
    "title": "API Reference: CLI | Next.js",
    "type": "reference",
    "summary": "Overview of the two Next.js Command Line Interface (CLI) tools: create-next-app and next, with links to their API references.",
    "sections": [
      {
        "heading": "CLI",
        "content": "Next.js comes with **two** Command Line Interface (CLI) tools:\n\n- **`create-next-app`**: Quickly create a new Next.js application using the default template or an…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "create-next-app",
        "content": "Create Next.js apps using one command with the create-next-app CLI.",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "next CLI",
        "content": "Learn how to run and build your application with the Next.js CLI.",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [
      "Next.js",
      "CLI",
      "create-next-app",
      "next",
      "Command Line Interface"
    ],
    "prerequisites": [],
    "_content_hash": "8edb2ae62760d2aae85db3b1763ed76a6fbe2af244a0482089b4af90e572796b",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/cli/create-next-app",
    "title": "create-next-app",
    "type": "api",
    "summary": "The create-next-app CLI allows you to create a new Next.js application using the default template or an example from a public GitHub repository. It is the easiest way to get started with Next.js.",
    "sections": [
      {
        "heading": "Basic usage",
        "content": "",
        "code_blocks": [
          {
            "language": "bash",
            "code": "pnpm create next-app [project-name] [options]",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Reference",
        "content": "The following options are available:",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Examples",
        "content": "",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "With the default template",
        "content": "To create a new app using the default template, run the following command in your terminal:\n\nOn installation, you'll see the following prompts:\n\nIf you choose to `customize settings`, you'll see the…",
        "code_blocks": [
          {
            "language": "bash",
            "code": "pnpm create next-app",
            "filename": ""
          },
          {
            "language": "text",
            "code": "What is your project named? my-app\nWould you like to use the recommended Next.js defaults?\n    Yes, use recommended defaults - TypeScript, ESLint, Tailwind CSS, App Router, AGENTS.md\n    No, reuse…",
            "filename": ""
          },
          {
            "language": "text",
            "code": "Would you like to use TypeScript? No / Yes\nWhich linter would you like to use? ESLint / Biome / None\nWould you like to use React Compiler? No / Yes\nWould you like to use Tailwind CSS? No / Yes\nWould…",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Linter Options",
        "content": "**ESLint** : The traditional and most popular JavaScript linter. Includes Next.js-specific rules from `@next/eslint-plugin-next`.\n\n **Biome** : A fast, modern linter and formatter that combines the…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "With an official Next.js example",
        "content": "To create a new app using an official Next.js example, use the `--example` flag. For example:\n\nYou can view a list of all available examples along with setup instructions in the [Next.js…",
        "code_blocks": [
          {
            "language": "bash",
            "code": "pnpm create next-app --example [example-name] [your-project-name]",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "With any public GitHub example",
        "content": "To create a new app using any public GitHub example, use the `--example` option with the GitHub repository's URL. For example:",
        "code_blocks": [
          {
            "language": "bash",
            "code": "pnpm create next-app --example \"https://github.com/.../\" [your-project-name]",
            "filename": ""
          }
        ],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "-h or --help",
        "type": "boolean",
        "description": "Show all available options",
        "default": "",
        "required": false
      },
      {
        "name": "-v or --version",
        "type": "boolean",
        "description": "Output the version number",
        "default": "",
        "required": false
      },
      {
        "name": "--no-*",
        "type": "boolean",
        "description": "Negate default options. E.g. --no-ts",
        "default": "",
        "required": false
      },
      {
        "name": "--ts or --typescript",
        "type": "boolean",
        "description": "Initialize as a TypeScript project",
        "default": "True",
        "required": false
      },
      {
        "name": "--js or --javascript",
        "type": "boolean",
        "description": "Initialize as a JavaScript project",
        "default": "",
        "required": false
      },
      {
        "name": "--tailwind",
        "type": "boolean",
        "description": "Initialize with Tailwind CSS config",
        "default": "True",
        "required": false
      },
      {
        "name": "--react-compiler",
        "type": "boolean",
        "description": "Initialize with React Compiler enabled",
        "default": "",
        "required": false
      },
      {
        "name": "--eslint",
        "type": "boolean",
        "description": "Initialize with ESLint config",
        "default": "",
        "required": false
      },
      {
        "name": "--biome",
        "type": "boolean",
        "description": "Initialize with Biome config",
        "default": "",
        "required": false
      },
      {
        "name": "--no-linter",
        "type": "boolean",
        "description": "Skip linter configuration",
        "default": "",
        "required": false
      },
      {
        "name": "--app",
        "type": "boolean",
        "description": "Initialize as an App Router project",
        "default": "",
        "required": false
      },
      {
        "name": "--api",
        "type": "boolean",
        "description": "Initialize a project with only route handlers",
        "default": "",
        "required": false
      },
      {
        "name": "--src-dir",
        "type": "boolean",
        "description": "Initialize inside a src/ directory",
        "default": "",
        "required": false
      },
      {
        "name": "--turbopack",
        "type": "boolean",
        "description": "Force enable Turbopack in generated package.json",
        "default": "True",
        "required": false
      },
      {
        "name": "--webpack",
        "type": "boolean",
        "description": "Force enable Webpack in generated package.json",
        "default": "",
        "required": false
      },
      {
        "name": "--import-alias <alias-to-configure>",
        "type": "string",
        "description": "Specify import alias to use",
        "default": "@/*",
        "required": false
      },
      {
        "name": "--empty",
        "type": "boolean",
        "description": "Initialize an empty project",
        "default": "",
        "required": false
      },
      {
        "name": "--use-npm",
        "type": "boolean",
        "description": "Explicitly tell the CLI to bootstrap the application using npm",
        "default": "",
        "required": false
      },
      {
        "name": "--use-pnpm",
        "type": "boolean",
        "description": "Explicitly tell the CLI to bootstrap the application using pnpm",
        "default": "",
        "required": false
      },
      {
        "name": "--use-yarn",
        "type": "boolean",
        "description": "Explicitly tell the CLI to bootstrap the application using Yarn",
        "default": "",
        "required": false
      },
      {
        "name": "--use-bun",
        "type": "boolean",
        "description": "Explicitly tell the CLI to bootstrap the application using Bun",
        "default": "",
        "required": false
      },
      {
        "name": "-e or --example [name] [github-url]",
        "type": "string",
        "description": "An example to bootstrap the app with",
        "default": "",
        "required": false
      },
      {
        "name": "--example-path <path-to-example>",
        "type": "string",
        "description": "Specify the path to the example separately",
        "default": "",
        "required": false
      },
      {
        "name": "--reset-preferences",
        "type": "boolean",
        "description": "Explicitly tell the CLI to reset any stored preferences",
        "default": "",
        "required": false
      },
      {
        "name": "--skip-install",
        "type": "boolean",
        "description": "Explicitly tell the CLI to skip installing packages",
        "default": "",
        "required": false
      },
      {
        "name": "--disable-git",
        "type": "boolean",
        "description": "Explicitly tell the CLI to disable git initialization",
        "default": "",
        "required": false
      },
      {
        "name": "--agents-md",
        "type": "boolean",
        "description": "Include AGENTS.md and CLAUDE.md to guide coding agents",
        "default": "True",
        "required": false
      },
      {
        "name": "--yes",
        "type": "boolean",
        "description": "Use previous preferences or defaults for all options",
        "default": "",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "CLI",
      "create-next-app",
      "TypeScript",
      "JavaScript",
      "Tailwind CSS",
      "ESLint",
      "Biome",
      "Turbopack",
      "Webpack",
      "App Router",
      "Bun",
      "npm",
      "pnpm",
      "yarn"
    ],
    "prerequisites": [],
    "_content_hash": "d53e860dbf1df9ff7608843c2942a3db93c8faa67d4769279ca164c675081952",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/cli/next",
    "title": "next CLI",
    "type": "api",
    "summary": "The Next.js CLI allows you to develop, build, start your application, and more. It provides commands like dev, build, start, info, telemetry, typegen, upgrade, and experimental-analyze.",
    "sections": [
      {
        "heading": "Basic Usage",
        "content": "The Next.js CLI allows you to develop, build, start your application, and more. Basic usage:\n\n> **Good to know** : With `npm run`, use `--` before CLI flags so npm forwards them to `next`. This is…",
        "code_blocks": [
          {
            "language": "terminal",
            "code": "pnpm next [command] [options]",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Reference",
        "content": "The following options are available:\n\n| Options | Description |\n| --- | --- |\n| `-h` or `--help` | Shows all available options |\n| `-v` or `--version` | Outputs the Next.js version number |",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Commands",
        "content": "The following commands are available:\n\n| Command | Description |\n| --- | --- |\n| [`dev`](#next-dev-options) | Starts Next.js in development mode with Hot Module Reloading, error reporting, and more.…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "next dev options",
        "content": "`next dev` starts the application in development mode with Hot Module Reloading (HMR), error reporting, and more.\n\n> **Good to know** : Development builds output to `.next/dev` instead of `.next`.…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "next build options",
        "content": "`next build` creates an optimized production build of your application. The output displays information about each route. For example:\n\n```\nRoute (app)\n┌ ○ /_not-found\n└ ƒ /products/[id]\n \n○…",
        "code_blocks": [
          {
            "language": "terminal",
            "code": "Route (app)\n┌ ○ /_not-found\n└ ƒ /products/[id]\n \n○  (Static)   prerendered as static content\nƒ  (Dynamic)  server-rendered on demand",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "next start options",
        "content": "`next start` starts the application in production mode. The application should be compiled with [`next build`](#next-build-options) first.\n\nThe following options are available for the `next start`…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "next info options",
        "content": "`next info` prints relevant details about the current system which can be used to report Next.js bugs when opening a [GitHub issue](https://github.com/vercel/next.js/issues). This information…",
        "code_blocks": [
          {
            "language": "terminal",
            "code": "Operating System:\n  Platform: darwin\n  Arch: arm64\n  Version: Darwin Kernel Version 23.6.0\n  Available memory (MB): 65536\n  Available CPU cores: 10\nBinaries:\n  Node: 20.12.0\n  npm: 10.5.0\n  Yarn:…",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "next telemetry options",
        "content": "Next.js collects  **completely anonymous**  telemetry data about general usage. Participation in this anonymous program is optional, and you can opt-out if you prefer not to share information.\n\nThe…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "next typegen options",
        "content": "`next typegen` generates TypeScript definitions for your application's routes without performing a full build. This is useful for IDE autocomplete and CI type-checking of route usage.\n\nPreviously,…",
        "code_blocks": [
          {
            "language": "terminal",
            "code": "# Generate route types first, then validate with TypeScript\nnext typegen && tsc --noEmit\n\n# Or in CI workflows for type checking without building\nnext typegen && npm run type-check",
            "filename": ""
          },
          {
            "language": "terminal",
            "code": "next typegen\n# or for a specific app\nnext typegen ./apps/web",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "next upgrade options",
        "content": "`next upgrade` upgrades your Next.js application to the latest version.\n\nThe following options are available for the `next upgrade` command:\n\n| Option | Description |\n| --- | --- |\n| `-h, --help` |…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "next experimental-analyze options",
        "content": "`next experimental-analyze` analyzes your application's bundle output using [Turbopack](/docs/app/api-reference/turbopack). This command helps you understand the size and composition of your bundles,…",
        "code_blocks": [
          {
            "language": "terminal",
            "code": "pnpm next experimental-analyze",
            "filename": ""
          },
          {
            "language": "terminal",
            "code": "# Write output to .next/diagnostics/analyze\nnpx next experimental-analyze --output\n\n# Copy the output for comparison with a future analysis\ncp -r .next/diagnostics/analyze ./analyze-before-refactor",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Debugging prerender errors",
        "content": "If you encounter prerendering errors during `next build`, you can pass the `--debug-prerender` flag to get more detailed output:\n\n```\nnext build --debug-prerender\n```\n\nThis enables several…",
        "code_blocks": [
          {
            "language": "terminal",
            "code": "next build --debug-prerender",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Building specific routes",
        "content": "You can build only specific routes in the App and Pages Routers using the `--debug-build-paths` option. This is useful for faster debugging when working with large applications. The…",
        "code_blocks": [
          {
            "language": "terminal",
            "code": "# Build a specific route\nnext build --debug-build-paths=\"app/page.tsx\"\n\n# Build more than one route\nnext build --debug-build-paths=\"app/page.tsx,pages/index.tsx\"\n\n# Include route group folders in the…",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Changing the default port",
        "content": "By default, Next.js uses `http://localhost:3000` during development and with `next start`. The default port can be changed with the `-p` option, like so:\n\n```\nnext dev -p 4000\n```\n\nOr using the…",
        "code_blocks": [
          {
            "language": "terminal",
            "code": "next dev -p 4000",
            "filename": ""
          },
          {
            "language": "terminal",
            "code": "PORT=4000 next dev",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Using HTTPS during development",
        "content": "For certain use cases like webhooks or authentication, you can use [HTTPS](https://developer.mozilla.org/en-US/docs/Glossary/HTTPS) to have a secure environment on `localhost`. Next.js can generate a…",
        "code_blocks": [
          {
            "language": "terminal",
            "code": "next dev --experimental-https",
            "filename": ""
          },
          {
            "language": "terminal",
            "code": "next dev --experimental-https --experimental-https-key ./certificates/localhost-key.pem --experimental-https-cert ./certificates/localhost.pem",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Configuring a timeout for downstream proxies",
        "content": "When deploying Next.js behind a downstream proxy (e.g. a load-balancer like AWS ELB/ALB), it's important to configure Next's underlying HTTP server with [keep-alive…",
        "code_blocks": [
          {
            "language": "terminal",
            "code": "next start --keepAliveTimeout 70000",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Passing Node.js arguments",
        "content": "You can pass any [node arguments](https://nodejs.org/api/cli.html#cli_node_options_options) to `next` commands. For example:\n\n```\nNODE_OPTIONS='--throw-deprecation' next\nNODE_OPTIONS='-r esm'…",
        "code_blocks": [
          {
            "language": "terminal",
            "code": "NODE_OPTIONS='--throw-deprecation' next\nNODE_OPTIONS='-r esm' next\nNODE_OPTIONS='--inspect' next",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "CPU profiling",
        "content": "You can capture CPU profiles to analyze performance bottlenecks in your Next.js application. The `--experimental-cpu-prof` flag enables V8's built-in CPU profiler and saves profiles to…",
        "code_blocks": [
          {
            "language": "terminal",
            "code": "# Profile the build process\nnext build --experimental-cpu-prof\n\n# Profile the dev server (profile saved on Ctrl+C or SIGTERM)\nnext dev --experimental-cpu-prof\n\n# Profile the production server\nnext…",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Version History",
        "content": "| Version | Changes |\n| --- | --- |\n| `v16.1.0` | Add the `next upgrade` command |\n| `v16.1.0` | Add the `next experimental-analyze` command |\n| `v16.0.0` | The JS bundle size metrics have been…",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "global -h, --help",
        "type": "boolean",
        "description": "Shows all available options",
        "default": "",
        "required": false
      },
      {
        "name": "global -v, --version",
        "type": "boolean",
        "description": "Outputs the Next.js version number",
        "default": "",
        "required": false
      },
      {
        "name": "dev -h, --help",
        "type": "boolean",
        "description": "Show all available options.",
        "default": "",
        "required": false
      },
      {
        "name": "dev [directory]",
        "type": "string",
        "description": "A directory in which to build the application. If not provided, current directory is used.",
        "default": "",
        "required": false
      },
      {
        "name": "dev --turbopack",
        "type": "boolean",
        "description": "Force enable Turbopack (enabled by default). Also available as --turbo.",
        "default": "",
        "required": false
      },
      {
        "name": "dev --webpack",
        "type": "boolean",
        "description": "Use Webpack instead of the default Turbopack bundler for development.",
        "default": "",
        "required": false
      },
      {
        "name": "dev -p, --port",
        "type": "string",
        "description": "Specify a port number on which to start the application. Default: 3000, env: PORT",
        "default": "3000",
        "required": false
      },
      {
        "name": "dev -H, --hostname",
        "type": "string",
        "description": "Specify a hostname on which to start the application. Useful for making the application available for other devices on the network. Default: 0.0.0.0",
        "default": "0.0.0.0",
        "required": false
      },
      {
        "name": "dev --experimental-https",
        "type": "boolean",
        "description": "Starts the server with HTTPS and generates a self-signed certificate.",
        "default": "",
        "required": false
      },
      {
        "name": "dev --experimental-https-key",
        "type": "string",
        "description": "Path to a HTTPS key file.",
        "default": "",
        "required": false
      },
      {
        "name": "dev --experimental-https-cert",
        "type": "string",
        "description": "Path to a HTTPS certificate file.",
        "default": "",
        "required": false
      },
      {
        "name": "dev --experimental-https-ca",
        "type": "string",
        "description": "Path to a HTTPS certificate authority file.",
        "default": "",
        "required": false
      },
      {
        "name": "dev --experimental-upload-trace",
        "type": "string",
        "description": "Reports a subset of the debugging trace to a remote HTTP URL.",
        "default": "",
        "required": false
      },
      {
        "name": "dev --experimental-cpu-prof",
        "type": "boolean",
        "description": "Enables CPU profiling using V8's inspector. Profiles are saved to .next-profiles/ on exit.",
        "default": "",
        "required": false
      },
      {
        "name": "build -h, --help",
        "type": "boolean",
        "description": "Show all available options.",
        "default": "",
        "required": false
      },
      {
        "name": "build [directory]",
        "type": "string",
        "description": "A directory on which to build the application. If not provided, the current directory will be used.",
        "default": "",
        "required": false
      },
      {
        "name": "build --turbopack",
        "type": "boolean",
        "description": "Force enable Turbopack (enabled by default). Also available as --turbo.",
        "default": "",
        "required": false
      },
      {
        "name": "build --webpack",
        "type": "boolean",
        "description": "Build using Webpack.",
        "default": "",
        "required": false
      },
      {
        "name": "build -d, --debug",
        "type": "boolean",
        "description": "Enables a more verbose build output. With this flag enabled additional build output like rewrites, redirects, and headers will be shown.",
        "default": "",
        "required": false
      },
      {
        "name": "build --profile",
        "type": "boolean",
        "description": "Enables production profiling for React.",
        "default": "",
        "required": false
      },
      {
        "name": "build --no-lint",
        "type": "boolean",
        "description": "Disables linting. Note: linting will be removed from next build in Next 16. If you're using Next 15.5+ with a linter other than eslint, linting during build will not occur.",
        "default": "",
        "required": false
      },
      {
        "name": "build --no-mangling",
        "type": "boolean",
        "description": "Disables mangling. This may affect performance and should only be used for debugging purposes.",
        "default": "",
        "required": false
      },
      {
        "name": "build --experimental-app-only",
        "type": "boolean",
        "description": "Builds only App Router routes.",
        "default": "",
        "required": false
      },
      {
        "name": "build --experimental-build-mode",
        "type": "string",
        "description": "Uses an experimental build mode. (choices: \"compile\", \"generate\", default: \"default\")",
        "default": "default",
        "required": false
      },
      {
        "name": "build --debug-prerender",
        "type": "boolean",
        "description": "Debug prerender errors in development.",
        "default": "",
        "required": false
      },
      {
        "name": "build --debug-build-paths",
        "type": "string",
        "description": "Build only specific routes for debugging.",
        "default": "",
        "required": false
      },
      {
        "name": "build --experimental-cpu-prof",
        "type": "boolean",
        "description": "Enables CPU profiling using V8's inspector. Profiles are saved to .next-profiles/ on exit.",
        "default": "",
        "required": false
      },
      {
        "name": "start -h, --help",
        "type": "boolean",
        "description": "Show all available options.",
        "default": "",
        "required": false
      },
      {
        "name": "start [directory]",
        "type": "string",
        "description": "A directory on which to start the application. If no directory is provided, the current directory will be used.",
        "default": "",
        "required": false
      },
      {
        "name": "start -p, --port",
        "type": "string",
        "description": "Specify a port number on which to start the application. (default: 3000, env: PORT)",
        "default": "3000",
        "required": false
      },
      {
        "name": "start -H, --hostname",
        "type": "string",
        "description": "Specify a hostname on which to start the application (default: 0.0.0.0).",
        "default": "0.0.0.0",
        "required": false
      },
      {
        "name": "start --keepAliveTimeout",
        "type": "string",
        "description": "Specify the maximum amount of milliseconds to wait before closing the inactive connections.",
        "default": "",
        "required": false
      },
      {
        "name": "start --experimental-cpu-prof",
        "type": "boolean",
        "description": "Enables CPU profiling using V8's inspector. Profiles are saved to .next-profiles/ on exit.",
        "default": "",
        "required": false
      },
      {
        "name": "info -h, --help",
        "type": "boolean",
        "description": "Show all available options",
        "default": "",
        "required": false
      },
      {
        "name": "info --verbose",
        "type": "boolean",
        "description": "Collects additional information for debugging.",
        "default": "",
        "required": false
      },
      {
        "name": "telemetry -h, --help",
        "type": "boolean",
        "description": "Show all available options.",
        "default": "",
        "required": false
      },
      {
        "name": "telemetry --enable",
        "type": "boolean",
        "description": "Enables Next.js' telemetry collection.",
        "default": "",
        "required": false
      },
      {
        "name": "telemetry --disable",
        "type": "boolean",
        "description": "Disables Next.js' telemetry collection.",
        "default": "",
        "required": false
      },
      {
        "name": "typegen -h, --help",
        "type": "boolean",
        "description": "Show all available options.",
        "default": "",
        "required": false
      },
      {
        "name": "typegen [directory]",
        "type": "string",
        "description": "A directory on which to generate types. If not provided, the current directory will be used.",
        "default": "",
        "required": false
      },
      {
        "name": "upgrade -h, --help",
        "type": "boolean",
        "description": "Show all available options.",
        "default": "",
        "required": false
      },
      {
        "name": "upgrade [directory]",
        "type": "string",
        "description": "A directory with the Next.js application to upgrade. If not provided, the current directory will be used.",
        "default": "",
        "required": false
      },
      {
        "name": "upgrade --revision",
        "type": "string",
        "description": "Specify a Next.js version or tag to upgrade to (e.g., latest, canary, 15.0.0). Defaults to the release channel you have currently installed.",
        "default": "",
        "required": false
      },
      {
        "name": "upgrade --verbose",
        "type": "boolean",
        "description": "Show verbose output during the upgrade process.",
        "default": "",
        "required": false
      },
      {
        "name": "experimental-analyze -h, --help",
        "type": "boolean",
        "description": "Show all available options.",
        "default": "",
        "required": false
      },
      {
        "name": "experimental-analyze [directory]",
        "type": "string",
        "description": "A directory on which to analyze the application. If not provided, the current directory will be used.",
        "default": "",
        "required": false
      },
      {
        "name": "experimental-analyze --no-mangling",
        "type": "boolean",
        "description": "Disables mangling. This may affect performance and should only be used for debugging purposes.",
        "default": "",
        "required": false
      },
      {
        "name": "experimental-analyze --profile",
        "type": "boolean",
        "description": "Enables production profiling for React. This may affect performance.",
        "default": "",
        "required": false
      },
      {
        "name": "experimental-analyze -o, --output",
        "type": "boolean",
        "description": "Write analysis files to disk without starting the server. Output is written to .next/diagnostics/analyze.",
        "default": "",
        "required": false
      },
      {
        "name": "experimental-analyze --port",
        "type": "string",
        "description": "Specify a port number to serve the analyzer on. (default: 4000, env: PORT)",
        "default": "4000",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "CLI",
      "dev",
      "build",
      "start",
      "info",
      "telemetry",
      "typegen",
      "upgrade",
      "experimental-analyze",
      "Turbopack",
      "Webpack",
      "HTTPS",
      "CPU profiling",
      "TypeScript"
    ],
    "prerequisites": [],
    "_content_hash": "ddfe711b6e20f20849980c4ac36d1296961b65b0452ef3b125adc8017043b169",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/components",
    "title": "Components",
    "type": "overview",
    "summary": "This page provides an index of Next.js built-in components for optimizing fonts, forms, images, links, and scripts.",
    "sections": [
      {
        "heading": "Components",
        "content": "This page is also available as Markdown: request this page's URL with an `Accept: text/markdown` header. For an index of Next.js documentation, see [/docs/llms.txt](/docs/llms.txt).\n\n- [Font:…",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [
      "Next.js",
      "components",
      "Font",
      "Form",
      "Image",
      "Link",
      "Script"
    ],
    "prerequisites": [],
    "_content_hash": "08b2dffe4db45284d326fb1b4e402a9f1cb497083efb646f4bac492227fd7805",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/components/font",
    "title": "Font Module",
    "type": "api",
    "summary": "This page documents the Next.js Font Module (`next/font`), which automatically optimizes fonts, self-hosts font files, and provides built-in support for Google Fonts. It covers the API reference for…",
    "sections": [
      {
        "heading": "Reference",
        "content": "The following table lists the available options for the font loader functions. The columns indicate which loader (`font/google` or `font/local`) each option applies to, the type, and whether it is…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "src",
        "content": "The path of the font file as a string or an array of objects (with type `Array<{path: string, weight?: string, style?: string}>`) relative to the directory where the font loader function is…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "weight",
        "content": "The font [`weight`](https://fonts.google.com/knowledge/glossary/weight) with the following possibilities:\n\n- A string with possible values of the weights available for the specific font or a range of…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "style",
        "content": "The font [`style`](https://developer.mozilla.org/docs/Web/CSS/font-style) with the following possibilities:\n\n- A string [value](https://developer.mozilla.org/docs/Web/CSS/font-style#values) with…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "subsets",
        "content": "The font [`subsets`](https://fonts.google.com/knowledge/glossary/subsetting) defined by an array of string values with the names of each subset you would like to be…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "axes",
        "content": "Some variable fonts have extra `axes` that can be included. By default, only the font weight is included to keep the file size down. The possible values of `axes` depend on the specific font.\n\nUsed…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "display",
        "content": "The font [`display`](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display) with possible string [values](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display#values) of…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "preload",
        "content": "A boolean value that specifies whether the font should be [preloaded](/docs/app/api-reference/components/font#preloading) or not. The default is `true`.\n\nUsed in `next/font/google` and…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "fallback",
        "content": "The fallback font to use if the font cannot be loaded. An array of strings of fallback fonts with no default.\n\n- Optional\n\nUsed in `next/font/google` and `next/font/local`\n\nExamples:\n\n- `fallback:…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "adjustFontFallback",
        "content": "- For `next/font/google`: A boolean value that sets whether an automatic fallback font should be used to reduce [Cumulative Layout Shift](https://web.dev/cls/). The default is `true`.\n\n- For…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "variable",
        "content": "A string value to define the CSS variable name to be used if the style is applied with the [CSS variable method](#css-variables).\n\nUsed in `next/font/google` and `next/font/local`\n\n-…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "declarations",
        "content": "An array of font face [descriptor](https://developer.mozilla.org/docs/Web/CSS/@font-face#descriptors) key-value pairs that define the generated `@font-face` further.\n\nUsed in `next/font/local`\n\n-…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Examples",
        "content": "",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Google Fonts",
        "content": "To use a Google font, import it from `next/font/google` as a function. We recommend using [variable fonts](https://fonts.google.com/variablefonts) for the best performance and flexibility.\n\nIf you…",
        "code_blocks": [
          {
            "language": "tsx",
            "code": "import { Inter } from 'next/font/google'\n \n// If loading a variable font, you don't need to specify the font weight\nconst inter = Inter({\n  subsets: ['latin'],\n  display: 'swap',\n})\n \nexport default…",
            "filename": "app/layout.tsx"
          },
          {
            "language": "tsx",
            "code": "import { Roboto } from 'next/font/google'\n \nconst roboto = Roboto({\n  weight: '400',\n  subsets: ['latin'],\n  display: 'swap',\n})\n \nexport default function RootLayout({\n  children,\n}: {\n  children:…",
            "filename": "app/layout.tsx"
          },
          {
            "language": "js",
            "code": "const roboto = Roboto({\n  weight: ['400', '700'],\n  style: ['normal', 'italic'],\n  subsets: ['latin'],\n  display: 'swap',\n})",
            "filename": "app/layout.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Specifying a subset",
        "content": "Google Fonts are automatically [subset](https://fonts.google.com/knowledge/glossary/subsetting). This reduces the size of the font file and improves performance. You'll need to define which of these…",
        "code_blocks": [
          {
            "language": "tsx",
            "code": "const inter = Inter({ subsets: ['latin'] })",
            "filename": "app/layout.tsx"
          }
        ],
        "images": []
      },
      {
        "heading": "Using Multiple Fonts",
        "content": "You can import and use multiple fonts in your application. There are two approaches you can take.\n\nThe first approach is to create a utility function that exports a font, imports it, and applies its…",
        "code_blocks": [
          {
            "language": "tsx",
            "code": "import { Inter, Roboto_Mono } from 'next/font/google'\n \nexport const inter = Inter({\n  subsets: ['latin'],\n  display: 'swap',\n})\n \nexport const roboto_mono = Roboto_Mono({\n  subsets: ['latin'],…",
            "filename": "app/fonts.ts"
          },
          {
            "language": "tsx",
            "code": "import { inter } from './fonts'\n \nexport default function Layout({ children }: { children: React.ReactNode }) {\n  return (\n    <html lang=\"en\" className={inter.className}>\n      <body>…",
            "filename": "app/layout.tsx"
          },
          {
            "language": "tsx",
            "code": "import { roboto_mono } from './fonts'\n \nexport default function Page() {\n  return (\n    <>\n      <h1 className={roboto_mono.className}>My page</h1>\n    </>\n  )\n}",
            "filename": "app/page.tsx"
          },
          {
            "language": "tsx",
            "code": "import { Inter, Roboto_Mono } from 'next/font/google'\nimport styles from './global.css'\n \nconst inter = Inter({\n  subsets: ['latin'],\n  variable: '--font-inter',\n  display: 'swap',\n})\n \nconst…",
            "filename": "app/layout.tsx"
          },
          {
            "language": "css",
            "code": "html {\n  font-family: var(--font-inter);\n}\n \nh1 {\n  font-family: var(--font-roboto-mono);\n}",
            "filename": "app/global.css"
          }
        ],
        "images": []
      },
      {
        "heading": "Local Fonts",
        "content": "Import `next/font/local` and specify the `src` of your local font file. We recommend using [variable fonts](https://fonts.google.com/variablefonts) for the best performance and flexibility.\n\nIf you…",
        "code_blocks": [
          {
            "language": "tsx",
            "code": "import localFont from 'next/font/local'\n \n// Font files can be colocated inside of `app`\nconst myFont = localFont({\n  src: './my-font.woff2',\n  display: 'swap',\n})\n \nexport default function…",
            "filename": "app/layout.tsx"
          },
          {
            "language": "js",
            "code": "const roboto = localFont({\n  src: [\n    {\n      path: './Roboto-Regular.woff2',\n      weight: '400',\n      style: 'normal',\n    },\n    {\n      path: './Roboto-Italic.woff2',\n      weight: '400',…",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "With Tailwind CSS",
        "content": "`next/font` integrates seamlessly with [Tailwind CSS](https://tailwindcss.com/) using [CSS variables](/docs/app/api-reference/components/font#css-variables).\n\nIn the example below, we use the `Inter`…",
        "code_blocks": [
          {
            "language": "tsx",
            "code": "import { Inter, Roboto_Mono } from 'next/font/google'\n \nconst inter = Inter({\n  subsets: ['latin'],\n  display: 'swap',\n  variable: '--font-inter',\n})\n \nconst roboto_mono = Roboto_Mono({\n  subsets:…",
            "filename": "app/layout.tsx"
          },
          {
            "language": "css",
            "code": "@import 'tailwindcss';\n \n@theme inline {\n  --font-sans: var(--font-inter);\n  --font-mono: var(--font-roboto-mono);\n}",
            "filename": "global.css"
          },
          {
            "language": "js",
            "code": "/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  content: [\n    './pages/**/*.{js,ts,jsx,tsx}',\n    './components/**/*.{js,ts,jsx,tsx}',\n    './app/**/*.{js,ts,jsx,tsx}',\n  ],…",
            "filename": "tailwind.config.js"
          },
          {
            "language": "html",
            "code": "<p class=\"font-sans ...\">The quick brown fox ...</p>\n<p class=\"font-mono ...\">The quick brown fox ...</p>",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Applying Styles",
        "content": "You can apply the font styles in three ways:\n\n- [`className`](#classname)\n- [`style`](#style-1)\n- [CSS Variables](#css-variables)",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "className",
        "content": "Returns a read-only CSS `className` for the loaded font to be passed to an HTML element.",
        "code_blocks": [
          {
            "language": "jsx",
            "code": "<p className={inter.className}>Hello, Next.js!</p>",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "CSS Variables",
        "content": "If you would like to set your styles in an external style sheet and specify additional options there, use the CSS variable method.\n\nIn addition to importing the font, also import the CSS file where…",
        "code_blocks": [
          {
            "language": "tsx",
            "code": "import { Inter } from 'next/font/google'\nimport styles from '../styles/component.module.css'\n \nconst inter = Inter({\n  variable: '--font-inter',\n})",
            "filename": "app/page.tsx"
          },
          {
            "language": "tsx",
            "code": "<main className={inter.variable}>\n  <p className={styles.text}>Hello World</p>\n</main>",
            "filename": "app/page.tsx"
          },
          {
            "language": "css",
            "code": ".text {\n  font-family: var(--font-inter);\n  font-weight: 200;\n  font-style: italic;\n}",
            "filename": "styles/component.module.css"
          }
        ],
        "images": []
      },
      {
        "heading": "Using a font definitions file",
        "content": "Every time you call the `localFont` or Google font function, that font will be hosted as one instance in your application. Therefore, if you need to use the same font in multiple places, you should…",
        "code_blocks": [
          {
            "language": "tsx",
            "code": "import { Inter, Lora, Source_Sans_3 } from 'next/font/google'\nimport localFont from 'next/font/local'\n \n// define your variable fonts\nconst inter = Inter()\nconst lora = Lora()\n// define 2 weights of…",
            "filename": "styles/fonts.ts"
          },
          {
            "language": "tsx",
            "code": "import { inter, lora, sourceCodePro700, greatVibes } from '../styles/fonts'\n \nexport default function Page() {\n  return (\n    <div>\n      <p className={inter.className}>Hello world using Inter…",
            "filename": "app/page.tsx"
          },
          {
            "language": "json",
            "code": "{\n  \"compilerOptions\": {\n    \"paths\": {\n      \"@/fonts\": [\"./styles/fonts\"]\n    }\n  }\n}",
            "filename": "tsconfig.json"
          },
          {
            "language": "tsx",
            "code": "import { greatVibes, sourceCodePro400 } from '@/fonts'",
            "filename": "app/about/page.tsx"
          }
        ],
        "images": []
      },
      {
        "heading": "Preloading",
        "content": "When a font function is called on a page of your site, it is not globally available and preloaded on all routes. Rather, the font is only preloaded on the related routes based on the type of file…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Version Changes",
        "content": "The following table lists the version history for the Font Module.",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "src",
        "type": "String or Array of Objects",
        "description": "The path of the font file as a string or an array of objects (with type `Array<{path: string, weight?: string, style?: string}>`) relative to the directory where the font loader function is called.…",
        "default": "",
        "required": true
      },
      {
        "name": "weight",
        "type": "String or Array",
        "description": "The font weight. A string with possible values of the weights available for the specific font or a range of values if it's a variable font. An array of weight values if the font is not a variable…",
        "default": "",
        "required": true
      },
      {
        "name": "style",
        "type": "String or Array",
        "description": "The font style. A string value with default value of `'normal'`. An array of style values if the font is not a variable google font (applies to `next/font/google` only). Optional.",
        "default": "'normal'",
        "required": false
      },
      {
        "name": "subsets",
        "type": "Array of Strings",
        "description": "The font subsets defined by an array of string values with the names of each subset you would like to be preloaded. Fonts specified via `subsets` will have a link preload tag injected into the head…",
        "default": "",
        "required": false
      },
      {
        "name": "axes",
        "type": "Array of Strings",
        "description": "Some variable fonts have extra `axes` that can be included. By default, only the font weight is included to keep the file size down. The possible values of `axes` depend on the specific font. Used in…",
        "default": "",
        "required": false
      },
      {
        "name": "display",
        "type": "String",
        "description": "The font display property with possible string values of `'auto'`, `'block'`, `'swap'`, `'fallback'` or `'optional'` with default value of `'swap'`.",
        "default": "'swap'",
        "required": false
      },
      {
        "name": "preload",
        "type": "Boolean",
        "description": "A boolean value that specifies whether the font should be preloaded or not. The default is `true`.",
        "default": "true",
        "required": false
      },
      {
        "name": "fallback",
        "type": "Array of Strings",
        "description": "The fallback font to use if the font cannot be loaded. An array of strings of fallback fonts with no default.",
        "default": "",
        "required": false
      },
      {
        "name": "adjustFontFallback",
        "type": "Boolean or String",
        "description": "For `next/font/google`: A boolean value that sets whether an automatic fallback font should be used to reduce Cumulative Layout Shift. The default is `true`. For `next/font/local`: A string or…",
        "default": "true (google) / 'Arial' (local)",
        "required": false
      },
      {
        "name": "variable",
        "type": "String",
        "description": "A string value to define the CSS variable name to be used if the style is applied with the CSS variable method.",
        "default": "",
        "required": false
      },
      {
        "name": "declarations",
        "type": "Array of Objects",
        "description": "An array of font face descriptor key-value pairs that define the generated `@font-face` further. Used in `next/font/local`.",
        "default": "",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "Font",
      "next/font",
      "Google Fonts",
      "Local Fonts",
      "Tailwind CSS",
      "CSS Variables",
      "Preloading",
      "Optimization"
    ],
    "prerequisites": [],
    "_content_hash": "6c8a8267e154a3e3bcd37af3a2e5740a6265c1c0c71202f8a3a15d4bbd5e5d95",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/components/form",
    "title": "Form Component",
    "type": "api",
    "summary": "The <Form> component extends the HTML <form> element to provide prefetching of loading UI, client-side navigation on submission, and progressive enhancement. It is useful for forms that update URL…",
    "sections": [
      {
        "heading": "Overview",
        "content": "The `<Form>` component extends the HTML `<form>` element to provide **prefetching** of loading UI, **client-side navigation** on submission, and **progressive enhancement**. It's useful for forms…",
        "code_blocks": [
          {
            "language": "tsx",
            "code": "import Form from 'next/form'\n \nexport default function Page() {\n  return (\n    <Form action=\"/search\">\n      {/* On submission, the input value will be appended to\n          the URL, e.g.…",
            "filename": "/app/ui/search.tsx"
          }
        ],
        "images": []
      },
      {
        "heading": "Reference",
        "content": "The behavior of the `<Form>` component depends on whether the `action` prop is passed a `string` or `function`.\n\n- When `action` is a **string**, the `<Form>` behaves like a native HTML form that…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "action (string) Props",
        "content": "When `action` is a string, the `<Form>` component supports the following props:\n\n- **`action`** : The URL or path to navigate to when the form is submitted. An empty string `\"\"` will navigate to the…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "action (function) Props",
        "content": "When `action` is a function, the `<Form>` component supports the following prop:\n\n- **`action`** : The Server Action to be called when the form is submitted. See the [React…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Caveats",
        "content": "- **`formAction`** : Can be used in a `<button>` or `<input type=\"submit\">` fields to override the `action` prop. Next.js will perform a client-side navigation, however, this approach doesn't support…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Examples",
        "content": "",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Search form that leads to a search result page",
        "content": "You can create a search form that navigates to a search results page by passing the path as an `action`:\n\nWhen the user updates the query input field and submits the form, the form data will be…",
        "code_blocks": [
          {
            "language": "tsx",
            "code": "import Form from 'next/form'\n \nexport default function Page() {\n  return (\n    <Form action=\"/search\">\n      <input name=\"query\" />\n      <button type=\"submit\">Submit</button>\n    </Form>\n  )\n}",
            "filename": "/app/page.tsx"
          },
          {
            "language": "tsx",
            "code": "import { getSearchResults } from '@/lib/search'\n \nexport default async function SearchPage({\n  searchParams,\n}: {\n  searchParams: Promise<{ [key: string]: string | string[] | undefined }>\n}) {…",
            "filename": "/app/search/page.tsx"
          },
          {
            "language": "tsx",
            "code": "export default function Loading() {\n  return <div>Loading...</div>\n}",
            "filename": "/app/search/loading.tsx"
          },
          {
            "language": "tsx",
            "code": "'use client'\nimport { useFormStatus } from 'react-dom'\n \nexport default function SearchButton() {\n  const status = useFormStatus()\n  return (\n    <button type=\"submit\">{status.pending ?…",
            "filename": "/app/ui/search-button.tsx"
          },
          {
            "language": "tsx",
            "code": "import Form from 'next/form'\nimport { SearchButton } from '@/ui/search-button'\n \nexport default function Page() {\n  return (\n    <Form action=\"/search\">\n      <input name=\"query\" />…",
            "filename": "/app/page.tsx"
          }
        ],
        "images": []
      },
      {
        "heading": "Mutations with Server Actions",
        "content": "You can perform mutations by passing a function to the `action` prop.\n\nAfter a mutation, it's common to redirect to the new resource. You can use the [`redirect`](/docs/app/guides/redirecting)…",
        "code_blocks": [
          {
            "language": "tsx",
            "code": "import Form from 'next/form'\nimport { createPost } from '@/posts/actions'\n \nexport default function Page() {\n  return (\n    <Form action={createPost}>\n      <input name=\"title\" />\n      {/* ... */}…",
            "filename": "/app/posts/create/page.tsx"
          },
          {
            "language": "ts",
            "code": "'use server'\nimport { redirect } from 'next/navigation'\n \nexport async function createPost(formData: FormData) {\n  // Create a new post\n  // ...\n \n  // Redirect to the new post…",
            "filename": "/app/posts/actions.ts"
          },
          {
            "language": "tsx",
            "code": "import { getPost } from '@/posts/data'\n \nexport default async function PostPage({\n  params,\n}: {\n  params: Promise<{ id: string }>\n}) {\n  const { id } = await params\n  const data = await getPost(id)…",
            "filename": "/app/posts/[id]/page.tsx"
          }
        ],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "action",
        "type": "string | function",
        "description": "The URL or path to navigate to when the form is submitted (string) or the Server Action to be called when the form is submitted (function). When a string, an empty string `\"\"` navigates to the same…",
        "default": "",
        "required": true
      },
      {
        "name": "replace",
        "type": "boolean",
        "description": "Replaces the current history state instead of pushing a new one to the browser's history stack. Only applies when `action` is a string. Default is `false`.",
        "default": "false",
        "required": false
      },
      {
        "name": "scroll",
        "type": "boolean",
        "description": "Controls the scroll behavior during navigation. Defaults to `true`, meaning it will scroll to the top of the new route and maintain scroll position for backwards/forwards navigation. Only applies…",
        "default": "true",
        "required": false
      },
      {
        "name": "prefetch",
        "type": "boolean",
        "description": "Controls whether the path should be prefetched when the form becomes visible in the user's viewport. Only applies when `action` is a string. Defaults to `true`.",
        "default": "true",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "Form",
      "Server Actions",
      "Client-side navigation",
      "Prefetching",
      "URL search params",
      "React"
    ],
    "prerequisites": [],
    "_content_hash": "4eac688f3cfb7bfe824fe6f12dc1dc74c79cb4b6b3aa49012c4f656cac3a8a66",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/components/image",
    "title": "Components: Image Component | Next.js",
    "type": "reference",
    "summary": "Extraction fallback content.",
    "sections": [
      {
        "heading": "Components: Image Component | Next.js",
        "content": "This page is also available as Markdown: request this page's URL with an `Accept: text/markdown` header.   For an index of  Next.js documentation , see  [/docs/llms.txt](/docs/llms.txt).Copy page\n\n##### Image Component\n\nLast updated  May 4, 2026\n\n\nThe Next.js Image component extends the HTML `<img>` element for automatic image optimization.\n\n\napp/page.js\n \n\n\n##### Reference\n\n\n\n\n###### Props\n\n\n\n\nThe following props are available:\n\n\n\n\n\n\n\n| Prop | Example | Type | Status |\n| --- | --- | --- | --- |\n\n\n\n\n| [`src`](#src) | `src=\"/profile.png\"` | String | Required |\n| [`alt`](#alt) | `alt=\"Picture of the author\"` | String | Required |\n| [`width`](#width-and-height) | `width={500}` | Integer (px) | - |\n| [`height`](#width-and-height) | `height={500}` | Integer (px) | - |\n| [`fill`](#fill) | `fill={true}` | Boolean | - |\n| [`loader`](#loader) | `loader={imageLoader}` | Function | - |\n| [`sizes`](#sizes) | `sizes=\"(max-width: 768px) 100vw, 33vw\"` | String | - |\n| [`quality`](#quality) | `quality={80}` | Integer (1-100) | - |\n| [`preload`](#preload) | `preload={true}` | Boolean | - |\n| [`placeholder`](#placeholder) | `placeholder=\"blur\"` | String | - |\n| [`style`](#style) | `style={{objectFit: \"contain\"}}` | Object | - |\n| [`onLoadingComplete`](#onloadingcomplete) | `onLoadingComplete={img => done())}` | Function | Deprecated |\n| [`onLoad`](#onload) | `onLoad={event => done())}` | Function | - |\n| [`onError`](#onerror) | `onError(event => fail()}` | Function | - |\n| [`loading`](#loading) | `loading=\"lazy\"` | String | - |\n| [`blurDataURL`](#blurdataurl) | `blurDataURL=\"data:image/jpeg...\"` | String | - |\n| [`unoptimized`](#unoptimized) | `unoptimized={true}` | Boolean | - |\n| [`overrideSrc`](#overridesrc) | `overrideSrc=\"/seo.png\"` | String | - |\n| [`decoding`](#decoding) | `decoding=\"async\"` | String | - |\n\n\n\n\n\n\n###### `src`\n\n\n\n\nThe source of the image. Can be one of the following:\n\n\n\n\nAn internal path string.\n\n\n\n\n\nAn absolute external URL (must be configured with [remotePatterns](#remotepatterns)).\n\n\n\n\n\nA static import.\n\n\n\n\n\n> **Good to know** : For security reasons, the Image Optimization API using the default [loader](#loader) will  *not*  forward headers when fetching the `src` image.\n> If the `src` image requires authentication, consider using the [unoptimized](#unoptimized) property to disable Image Optimization.\n\n\n\n\n###### `alt`\n\n\n\n\nThe `alt` property is used to describe the image for screen readers and search engines. It is also the fallback text if images have been disabled or an error occurs while loading the image.\n\n\n\n\nIt should contain text that could replace the image [without changing the meaning of the page](https://html.spec.whatwg.org/multipage/images.html#general-guidelines). It is not meant to supplement the image and should not repeat information that is already provided in the captions above or below the image.\n\n\n\n\nIf the image is [purely decorative](https://html.spec.whatwg.org/multipage/images.html#a-purely-decorative-image-that-doesn't-add-any-information) or [not intended for the user](https://html.spec.whatwg.org/multipage/images.html#an-image-not-intended-for-the-user), the `alt` property should be an empty string (`alt=\"\"`).\n\n\n\n\n> Learn more about [image accessibility guidelines](https://html.spec.whatwg.org/multipage/images.html#alt).\n\n\n\n\n###### `width` and `height`\n\n\n\n\nThe `width` and `height` properties represent the [intrinsic](https://developer.mozilla.org/en-US/docs/Glossary/Intrinsic_Size) image size in pixels. This property is used to infer the correct  **aspect ratio**  used by browsers to reserve space for the image and avoid layout shift during loading. It does not determine the  *rendered size*  of the image, which is controlled by CSS.\n\n\n\n\n\nYou  **must**  set both `width` and `height` properties unless:\n\n\n\n\n\n\n- The image is statically imported.\n\n- The image has the [`fill` property](#fill)\n\n\n\n\n\nIf the height and width are unknown, we recommend using the [`fill` property](#fill).\n\n\n\n\n###### `fill`\n\n\n\n\nA boolean that causes the image to expand to the size of the parent element.\n\n\n\n\n\n **Positioning** :\n\n\n\n\n\n\n- The parent element  **must**  assign `position: \"relative\"`, `\"fixed\"`, `\"absolute\"`.\n\n- By default, the `<img>` element uses `position: \"absolute\"`.\n\n\n\n\n\n **Object Fit** :\n\n\n\n\nIf no styles are applied to the image, the image will stretch to fit the container. You can use `objectFit` to control cropping and scaling.\n\n\n\n\n\n\n- `\"contain\"`: The image will be scaled down to fit the container and preserve aspect ratio.\n\n- `\"cover\"`: The image will fill the container and be cropped.\n\n\n\n\n\n> Learn more about [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) and [`object-fit`](https://developer.mozilla.org/docs/Web/CSS/object-fit).\n\n\n\n\n###### `loader`\n\n\n\n\nA custom function used to generate the image URL. The function receives the following parameters, and returns a URL string for the image:\n\n\n\n\n\n\n- [`src`](#src)\n\n- [`width`](#width-and-height)\n\n- [`quality`](#quality)\n\n\n\n\n\n> **Good to know** : Using props like `onLoad`, which accept a function, requires using [Client Components](https://react.dev/reference/rsc/use-client) to serialize the provided function.\n\n\n \n\n\nAlternatively, you can use the [loaderFile](#loaderfile) configuration in `next.config.js` to configure every instance of `next/image` in your application, without passing a prop.\n\n\n\n\n###### `sizes`\n\n\n\n\nDefine the sizes of the image at different breakpoints. Used by the browser to choose the most appropriate size from the generated `srcset`.\n\n\n\n\n\n`sizes` should be used when:\n\n\n\n\n\n\n- The image is using the [`fill`](#fill) prop\n\n- CSS is used to make the image responsive\n\n\n\n\n\nIf `sizes` is missing, the browser assumes the image will be as wide as the viewport (`100vw`). This can cause unnecessarily large images to be downloaded.\n\n\n\n\nIn addition, `sizes` affects how `srcset` is generated:\n\n\n\n\n\n\n- Without `sizes`: Next.js generates a limited `srcset` (e.g. 1x, 2x), suitable for fixed-size images.\n\n- With `sizes`: Next.js generates a full `srcset` (e.g. 640w, 750w, etc.), optimized for responsive layouts.\n\n\n\n\n\n> Learn more about `srcset` and `sizes` on [web.dev](https://web.dev/learn/design/responsive-images/#sizes) and [mdn](https://developer.mozilla.org/docs/Web/HTML/Element/img#sizes).\n\n\n\n\n###### `quality`\n\n\n\n\nAn integer between `1` and `100` that sets the quality of the optimized image. Higher values increase file size and visual fidelity. Lower values reduce file size but may affect sharpness.\n\n\n\n\n\nIf you’ve configured [qualities](#qualities) in `next.config.js`, the value must match one of the allowed entries.\n\n\n\n\n> **Good to know** : If the original image is already low quality, setting a high quality value will increase the file size without improving appearance.\n\n\n\n\n###### `style`\n\n\n\n\nAllows passing CSS styles to the underlying image element.\n\n\n\n\n\n> **Good to know** : If you’re using the `style` prop to set a custom width, be sure to also set `height: 'auto'` to preserve the image’s aspect ratio.\n\n\n\n\n###### `preload`\n\n\n\n\nA boolean that indicates if the image should be preloaded.\n\n\n\n\n\n\n\n- `true`: [Preloads](https://web.dev/preload-responsive-images/) the image by inserting a `<link>` in the `<head>`.\n\n- `false`: Does not preload the image.\n\n\n\n\n\n **When to use it:** \n\n\n\n\n\n\n- The image is the [Largest Contentful Paint (LCP)](https://nextjs.org/learn/seo/web-performance/lcp) element.\n\n- The image is above the fold, typically the hero image.\n\n- You want to begin loading the image in the `<head>`, before its discovered later in the `<body>`.\n\n\n\n\n\n **When not to use it:** \n\n\n\n\n\n\n- When you have multiple images that could be considered the [Largest Contentful Paint (LCP)](https://nextjs.org/learn/seo/web-performance/lcp) element depending on the viewport.\n\n- When the `loading` property is used.\n\n- When the `fetchPriority` property is used.\n\n\n\n\n\nIn most cases, you should use `loading=\"eager\"` or `fetchPriority=\"high\"` instead of `preload`.\n\n\n\n\n###### `priority`\n\n\n\n\nStarting with Next.js 16, the `priority` property has been deprecated in favor of the [`preload`](#preload) property in order to make the behavior clear.\n\n\n\n\n###### `loading`\n\n\n\n\nControls when the image should start loading.\n\n\n\n\n\n\n\n- `lazy`: Defer loading the image until it reaches a calculated distance from the viewport.\n\n- `eager`: Load the image immediately, regardless of its position in the page.\n\n\n\n\n\nUse `eager` only when you want to ensure the image is loaded immediately.\n\n\n\n\n> Learn more about the [`loading` attribute](https://developer.mozilla.org/docs/Web/HTML/Element/img#loading).\n\n\n\n\n###### `placeholder`\n\n\n\n\nSpecifies a placeholder to use while the image is loading, improving the perceived loading performance.\n\n\n\n\n\n\n\n- `empty`: No placeholder while the image is loading.\n\n- `blur`: Use a blurred version of the image as a placeholder. Must be used with the [`blurDataURL`](#blurdataurl) property.\n\n- `data:image/...`: Uses the [Data URL](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) as the placeholder.\n\n\n\n\n\n **Examples:** \n\n\n\n\n\n\n- [`blur` placeholder](https://image-component.nextjs.gallery/placeholder)\n\n- [Shimmer effect with data URL `placeholder` prop](https://image-component.nextjs.gallery/shimmer)\n\n- [Color effect with `blurDataURL` prop](https://image-component.nextjs.gallery/color)\n\n\n\n\n\n> Learn more about the [`placeholder` attribute](https://developer.mozilla.org/docs/Web/HTML/Element/img#placeholder).\n\n\n\n\n###### `blurDataURL`\n\n\n\n\nA [Data URL](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) to\nbe used as a placeholder image before the image successfully loads. Can be automatically set or used with the [`placeholder=\"blur\"`](#placeholder) property.\n\n\n\n\n\nThe image is automatically enlarged and blurred, so a very small image (10px or less) is recommended.\n\n\n\n\n **Automatic** \n\n\n\n\nIf `src` is a static import of a `jpg`, `png`, `webp`, or `avif` file, `blurDataURL` is added automatically—unless the image is animated.\n\n\n\n\n **Manually set** \n\n\n\n\nIf the image is dynamic or remote, you must provide `blurDataURL` yourself. To generate one, you can use:\n\n\n\n\n\n\n- [A online tool like png-pixel.com](https://png-pixel.com)\n\n- [A library like Plaiceholder](https://github.com/joe-bell/plaiceholder)\n\n\n\n\n\nA large blurDataURL may hurt performance. Keep it small and simple.\n\n\n\n\n **Examples:** \n\n\n\n\n\n\n- [Default `blurDataURL` prop](https://image-component.nextjs.gallery/placeholder)\n\n- [Color effect with `blurDataURL` prop](https://image-component.nextjs.gallery/color)\n\n\n\n\n\n###### `onLoad`\n\n\n\n\nA callback function that is invoked once the image is completely loaded and the [placeholder](#placeholder) has been removed.\n\n\n\n\n\nThe callback function will be called with one argument, the event which has a `target` that references the underlying `<img>` element.\n\n\n\n\n> **Good to know** : Using props like `onLoad`, which accept a function, requires using [Client Components](https://react.dev/reference/rsc/use-client) to serialize the provided function.\n\n\n\n\n###### `onError`\n\n\n\n\nA callback function that is invoked if the image fails to load.\n\n\n\n\n\n> **Good to know** : Using props like `onError`, which accept a function, requires using [Client Components](https://react.dev/reference/rsc/use-client) to serialize the provided function.\n\n\n\n\n###### `unoptimized`\n\n\n\n\nA boolean that indicates if the image should be optimized. This is useful for images that do not benefit from optimization such as small images (less than 1KB), vector images (SVG), or animated images (GIF).\n\n\n\n\n\n\n\n- `true`: The source image will be served as-is from the `src` instead of changing quality, size, or format.\n\n- `false`: The source image will be optimized.\n\n\n\n\n\nSince Next.js 12.3.0, this prop can be assigned to all images by updating `next.config.js` with the following configuration:\n\n\nnext.config.js\n\n\n###### `overrideSrc`\n\n\n\n\nWhen providing the `src` prop to the `<Image>` component, both the `srcset` and `src` attributes are generated automatically for the resulting `<img>`.\n\n\ninput.js\noutput.html\n\n\nIn some cases, it is not desirable to have the `src` attribute generated and you may wish to override it using the `overrideSrc` prop.\n\n\n\n\nFor example, when upgrading an existing website from `<img>` to `<Image>`, you may wish to maintain the same `src` attribute for SEO purposes such as image ranking or avoiding recrawl.\n\n\ninput.js\noutput.html\n\n\n###### `decoding`\n\n\n\n\nA hint to the browser indicating if it should wait for the image to be decoded before presenting other content updates or not.\n\n\n\n\n\n\n\n- `async`: Asynchronously decode the image and allow other content to be rendered before it completes.\n\n- `sync`: Synchronously decode the image for atomic presentation with other content.\n\n- `auto`: No preference. The browser chooses the best approach.\n\n\n\n\n\n> Learn more about the [`decoding` attribute](https://developer.mozilla.org/docs/Web/HTML/Element/img#decoding).\n\n\n\n\n###### Other Props\n\n\n\n\nOther properties on the `<Image />` component will be passed to the underlying `img` element with the exception of the following:\n\n\n\n\n\n\n- `srcSet`: Use [Device Sizes](#devicesizes) instead.\n\n\n\n\n\n###### Deprecated props\n\n\n\n\n###### `onLoadingComplete`\n\n\n\n\n> **Warning** : Deprecated in Next.js 14, use [`onLoad`](#onload) instead.\n\n\n\n\nA callback function that is invoked once the image is completely loaded and the [placeholder](#placeholder) has been removed.\n\n\n\n\nThe callback function will be called with one argument, a reference to the underlying `<img>` element.\n\n\n\n \n\n\n> **Good to know** : Using props like `onLoadingComplete`, which accept a function, requires using [Client Components](https://react.dev/reference/rsc/use-client) to serialize the provided function.\n\n\n\n\n###### Configuration options\n\n\n\n\nYou can configure the Image Component in `next.config.js`. The following options are available:\n\n\n\n\n###### `localPatterns`\n\n\n\n\nUse `localPatterns` in your `next.config.js` file to allow images from specific local paths to be optimized and block all others.\n\n\nnext.config.js\n\n\nThe example above will ensure the `src` property of `next/image` must start with `/assets/images/` and must not have a query string. Attempting to optimize any other path will respond with `400` Bad Request error.\n\n\n\n\n> **Good to know** : Omitting the `search` property allows all search parameters which could allow malicious actors to optimize URLs you did not intend. Try using a specific value like `search: '?v=2'` to ensure an exact match.\n\n\n\n\n###### `remotePatterns`\n\n\n\n\nUse `remotePatterns` in your `next.config.js` file to allow images from specific external paths and block all others. This ensures that only external images from your account can be served.\n\n\nnext.config.js\n\n\nYou can also configure `remotePatterns` using the object:\n\n\nnext.config.js\n\n\nThe example above will ensure the `src` property of `next/image` must start with `https://example.com/account123/` and must not have a query string. Any other protocol, hostname, port, or unmatched path will respond with `400` Bad Request.\n\n\n\n\n **Wildcard Patterns:** \n\n\n\n\nWildcard patterns can be used for both `pathname` and `hostname` and have the following syntax:\n\n\n\n\n\n\n- `*` match a single path segment or subdomain\n\n- `**` match any number of path segments at the end or subdomains at the beginning. This syntax does not work in the middle of the pattern.\n\n\n\nnext.config.js\n\n\nThis allows subdomains like `image.example.com`. Query strings and custom ports are still blocked.\n\n\n\n\n> **Good to know** : When omitting `protocol`, `port`, `pathname`, or `search` then the wildcard `**` is implied. This is not recommended because it may allow malicious actors to optimize urls you did not intend.\n\n\n\n\n **Query Strings** :\n\n\n\n\nYou can also restrict query strings using the `search` property:\n\n\nnext.config.js\n\n\nThe example above will ensure the `src` property of `next/image` must start with `https://assets.example.com` and must have the exact query string `?v=1727111025337`. Any other protocol or query string will respond with `400` Bad Request.\n\n\n\n\nNote that any allowed `remotePatterns` that respond with a redirect will follow the redirect from the remote image server without validating `remotePatterns` again on the redirect location. You can reduce or disable redirects by configuring [maximumRedirects](#maximumredirects).\n\n\n\n\n###### `loaderFile`\n\n\n\n\n`loaderFiles` allows you to use a custom image optimization service instead of Next.js.\n\n\nnext.config.js\n\n\nThe path must be relative to the project root. The file must export a default function that returns a URL string:\n\n\nmy/image/loader.js\n \n\n\n **Example:** \n\n\n\n\n\n\n- [Custom Image Loader Configuration](/docs/app/api-reference/config/next-config-js/images#example-loader-configuration)\n\n\n\n\n\n> Alternatively, you can use the [`loader` prop](#loader) to configure each instance of `next/image`.\n\n\n\n\n###### `path`\n\n\n\n\nIf you want to change or prefix the default path for the Image Optimization API, you can do so with the `path` property. The default value for `path` is `/_next/image`.\n\n\nnext.config.js\n\n\n###### `deviceSizes`\n\n\n\n\n`deviceSizes` allows you to specify a list of device width breakpoints. These widths are used when the `next/image` component uses [`sizes`](#sizes) prop to ensure the correct image is served for the user's device.\n\n\n\n\nIf no configuration is provided, the default below is used:\n\n\nnext.config.js\n\n\n###### `imageSizes`\n\n\n\n\n`imageSizes` allows you to specify a list of image widths. These widths are concatenated with the array of [device sizes](#devicesizes) to form the full array of sizes used to generate image [srcset](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/srcset).\n\n\n\n\nIf no configuration is provided, the default below is used:\n\n\nnext.config.js\n\n\n`imageSizes` is only used for images which provide a [`sizes`](#sizes) prop, which indicates that the image is less than the full width of the screen. Therefore, the sizes in `imageSizes` should all be smaller than the smallest size in `deviceSizes`.\n\n\n\n\n###### `qualities`\n\n\n\n\n`qualities` allows you to specify a list of image quality values.\n\n\n\n\nIf not configuration is provided, the default below is used:\n\n\nnext.config.js\n\n\n> **Good to know** : This field is required starting with Next.js 16 because unrestricted access could allow malicious actors to optimize more qualities than you intended.\n\n\n\n\nYou can add more image qualities to the allowlist, such as the following:\n\n\nnext.config.js\n\n\nIn the example above, only four qualities are allowed: 25, 50, 75, and 100.\n\n\n\n\nIf the [`quality`](#quality) prop does not match a value in this array, the closest allowed value will be used.\n\n\n\n\nIf the REST API is visited directly with a quality that does not match a value in this array, the server will return a 400 Bad Request response.\n\n\n\n\n###### `formats`\n\n\n\n\n`formats` allows you to specify a list of image formats to be used.\n\n\nnext.config.js\n\n\nNext.js automatically detects the browser's supported image formats via the request's `Accept` header in order to determine the best output format.\n\n\n\n\nIf the `Accept` header matches more than one of the configured formats, the first match in the array is used. Therefore, the array order matters. If there is no match (or the source image is animated), it will use the original image's format.\n\n\n\n\nYou can enable AVIF support, which will fallback to the original format of the src image if the browser [does not support AVIF](https://caniuse.com/avif):\n\n\nnext.config.js\n\n\nYou can also enable both AVIF and WebP formats together. AVIF will be preferred for browsers that support it, with WebP as a fallback:\n\n\nnext.config.js\n\n\n> **Good to know** :\n> \n> \n> \n> \n> \n> \n> - We still recommend using WebP for most use cases.\n> \n> - AVIF generally takes 50% longer to encode but it compresses 20% smaller compared to WebP. This means that the first time an image is requested, it will typically be slower, but subsequent requests that are cached will be faster.\n> \n> - When using multiple formats, Next.js will cache each format separately. This means increased storage requirements compared to using a single format, as both AVIF and WebP versions of images will be stored for different browser support.\n> \n> - If you self-host with a Proxy/CDN in front of Next.js, you must configure the Proxy to forward the `Accept` header.\n\n\n\n\n###### `minimumCacheTTL`\n\n\n\n\n`minimumCacheTTL` allows you to configure the Time to Live (TTL) in seconds for cached optimized images. In many cases, it's better to use a [Static Image Import](/docs/app/getting-started/images#local-images) which will automatically hash the file contents and cache the image forever with a `Cache-Control` header of `immutable`.\n\n\n\n\nIf no configuration is provided, the default below is used.\n\n\nnext.config.js\n\n\nYou can increase the TTL to reduce the number of revalidations and potentially lower cost:\n\n\nnext.config.js\n\n\nThe expiration (or rather Max Age) of the optimized image is defined by either the `minimumCacheTTL` or the upstream image `Cache-Control` header, whichever is larger.\n\n\n\n\nIf you need to change the caching behavior per image, you can configure [`headers`](/docs/app/api-reference/config/next-config-js/headers) to set the `Cache-Control` header on the upstream image (e.g. `/some-asset.jpg`, not `/_next/image` itself).\n\n\n\n\nThere is no mechanism to invalidate the cache at this time, so its best to keep `minimumCacheTTL` low. Otherwise you may need to manually change the [`src`](#src) prop or delete the cached file `<distDir>/cache/images`.\n\n\n\n\n###### `disableStaticImages`\n\n\n\n\n`disableStaticImages` allows you to disable static image imports.\n\n\n\n\nThe default behavior allows you to import static files such as `import icon from './icon.png'` and then pass that to the `src` property. In some cases, you may wish to disable this feature if it conflicts with other plugins that expect the import to behave differently.\n\n\n\n\nYou can disable static image imports inside your `next.config.js`:\n\n\nnext.config.js\n\n\n###### `maximumRedirects`\n\n\n\n\nThe default image optimization loader will follow HTTP redirects when fetching remote images up to 3 times.\n\n\nnext.config.js\n\n\nFor your convenience, these redirects do not need to satisfy [remotePatterns](#remotepatterns).\n\n\n\n\nYou can configure the number of redirects to follow when fetching remote images. Setting the value to `0` will disable following redirects.\n\n\nnext.config.js\n\n\n###### `maximumDiskCacheSize`\n\n\n\n\nThe default image optimization loader will write optimized images to disk so subsequent requests can be served faster from the disk cache.\n\n\n\n\nYou can configure the maximum disk cache size in bytes, for example 500 MB:\n\n\nnext.config.js\n\n\nYou can also disable the disk cache entirely by setting the value to `0`.\n\n\nnext.config.js\n\n\nIf no value is configured, the default behavior is to check the current available disk space once during startup and use 50%.\n\n\n\n\nWhen the disk cache exceeds the configured size, the least recently used optimized images will be deleted until the cache is under the limit again.\n\n\n\n\nAlternatively, you can implement your own cache handler using [`cacheHandler`](/docs/app/api-reference/config/next-config-js/incrementalCacheHandlerPath) which will ignore the `maximumDiskCacheSize` configuration.\n\n\n\n\n###### `maximumResponseBody`\n\n\n\n\nThe default image optimization loader will fetch source images up to 50 MB in size.\n\n\nnext.config.js\n\n\nIf you know all your source images are small, you can protect memory constrained servers by reducing this to a smaller value such as 5 MB.\n\n\nnext.config.js\n\n\n###### `dangerouslyAllowLocalIP`\n\n\n\n\nIn rare cases when self-hosting Next.js on a private network, you may want to allow optimizing images from local IP addresses on the same network. This is not recommended for most users because it could allow malicious users to access content on your internal network.\n\n\n\n\nBy default, the value is false.\n\n\nnext.config.js\n\n\nIf you need to optimize remote images hosted elsewhere in your local network, you can set the value to true.\n\n\nnext.config.js\n\n\nThis might be necessary when hosting Next.js in a VPC with split-horizon DNS and you receive status 400 Bad Request. Only enable once you understand the SSRF risk.\n\n\n\n\n###### `dangerouslyAllowSVG`\n\n\n\n\n`dangerouslyAllowSVG` allows you to serve SVG images.\n\n\nnext.config.js\n\n\nBy default, Next.js does not optimize SVG images for a few reasons:\n\n\n\n\n\n\n- SVG is a vector format meaning it can be resized losslessly.\n\n- SVG has many of the same features as HTML/CSS, which can lead to vulnerabilities without proper [Content Security Policy (CSP) headers](/docs/app/api-reference/config/next-config-js/headers#content-security-policy).\n\n\n\n\n\nWe recommend using the [`unoptimized`](#unoptimized) prop when the [`src`](#src) prop is known to be SVG. This happens automatically when `src` ends with `\".svg\"`.\n\n\n\n\n\nIn addition, it is strongly recommended to also set `contentDispositionType` to force the browser to download the image, as well as `contentSecurityPolicy` to prevent scripts embedded in the image from executing.\n\n\nnext.config.js\n\n\n###### `contentDispositionType`\n\n\n\n\n`contentDispositionType` allows you to configure the [`Content-Disposition`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition#as_a_response_header_for_the_main_body) header.\n\n\nnext.config.js\n\n\n###### `contentSecurityPolicy`\n\n\n\n\n`contentSecurityPolicy` allows you to configure the [`Content-Security-Policy`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) header for images. This is particularly important when using [`dangerouslyAllowSVG`](#dangerouslyallowsvg) to prevent scripts embedded in the image from executing.\n\n\nnext.config.js\n\n\nBy default, the [loader](#loader) sets the [`Content-Disposition`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition#as_a_response_header_for_the_main_body) header to `attachment` for added protection since the API can serve arbitrary remote images.\n\n\n\n\nThe default value is `attachment` which forces the browser to download the image when visiting directly. This is particularly important when [`dangerouslyAllowSVG`](#dangerouslyallowsvg) is true.\n\n\n\n\nYou can optionally configure `inline` to allow the browser to render the image when visiting directly, without downloading it.\n\n\n\n\n###### Deprecated configuration options\n\n\n\n\n###### `domains`\n\n\n\n\n> **Warning** : Deprecated since Next.js 14 in favor of strict [`remotePatterns`](#remotepatterns) in order to protect your application from malicious users.\n\n\n\n\nSimilar to [`remotePatterns`](#remotepatterns), the `domains` configuration can be used to provide a list of allowed hostnames for external images. However, the `domains` configuration does not support wildcard pattern matching and it cannot restrict protocol, port, or pathname.\n\n\n\n\nSince most remote image servers are shared between multiple tenants, it's safer to use `remotePatterns` to ensure only the intended images are optimized.\n\n\n\n\nBelow is an example of the `domains` property in the `next.config.js` file:\n\n\nnext.config.js\n\n\n##### Functions\n\n\n\n\n###### `getImageProps`\n\n\n\n\nThe `getImageProps` function can be used to get the props that would be passed to the underlying `<img>` element, and instead pass them to another component, style, canvas, etc.\n\n\n\n\n\nThis also avoid calling React `useState()` so it can lead to better performance, but it cannot be used with the [`placeholder`](#placeholder) prop because the placeholder will never be removed.\n\n\n\n\n##### Known browser bugs\n\n\n\n\nThis `next/image` component uses browser native [lazy loading](https://caniuse.com/loading-lazy-attr), which may fallback to eager loading for older browsers before Safari 15.4. When using the blur-up placeholder, older browsers before Safari 12 will fallback to empty placeholder. When using styles with `width`/`height` of `auto`, it is possible to cause [Layout Shift](https://web.dev/cls/) on older browsers before Safari 15 that don't [preserve the aspect ratio](https://caniuse.com/mdn-html_elements_img_aspect_ratio_computed_from_attributes). For more details, see [this MDN video](https://www.youtube.com/watch?v=4-d_SoCHeWE).\n\n\n\n\n\n\n- [Safari 15 - 16.3](https://bugs.webkit.org/show_bug.cgi?id=243601) display a gray border while loading. Safari 16.4 [fixed this issue](https://webkit.org/blog/13966/webkit-features-in-safari-16-4/#:~:text=Now%20in%20Safari%2016.4%2C%20a%20gray%20line%20no%20longer%20appears%20to%20mark%20the%20space%20where%20a%20lazy%2Dloaded%20image%20will%20appear%20once%20it%E2%80%99s%20been%20loaded.). Possible solutions: \n\n\n\n\n- Use CSS `@supports (font: -apple-system-body) and (-webkit-appearance: none) { img[loading=\"lazy\"] { clip-path: inset(0.6px) } }`\n\n- Use [`loading=\"eager\"`](#loading) if the image is above the fold\n\n- [Firefox 67+](https://bugzilla.mozilla.org/show_bug.cgi?id=1556156) displays a white background while loading. Possible solutions: \n\n\n\n\n- Enable [AVIF `formats`](#formats)\n\n- Use [`placeholder`](#placeholder)\n\n\n\n\n\n##### Examples\n\n\n\n\n###### Styling images\n\n\n\n\nStyling the Image component is similar to styling a normal `<img>` element, but there are a few guidelines to keep in mind:\n\n\n\n\nUse `className` or `style`, not `styled-jsx`. In most cases, we recommend using the `className` prop. This can be an imported [CSS Module](/docs/app/getting-started/css), a [global stylesheet](/docs/app/getting-started/css#global-css), etc.\n\n\n\n\n\nYou can also use the `style` prop to assign inline styles.\n\n\n\n\n\nWhen using `fill`, the parent element must have `position: relative` or `display: block`. This is necessary for the proper rendering of the image element in that layout mode.\n\n\n\n\n\nYou cannot use [styled-jsx](/docs/app/guides/css-in-js) because it's scoped to the current component (unless you mark the style as `global`).\n\n\n\n\n###### Responsive images with a static export\n\n\n\n\nWhen you import a static image, Next.js automatically sets its width and height based on the file. You can make the image responsive by setting the style:\n\n\n<img src=\"/_next/image?",
        "code_blocks": [
          {
            "language": "python",
            "code": "import Image from 'next/image'\n \nexport default function Page() {\n  return (\n    <Image\n      src=\"/profile.png\"\n      width={500}\n      height={500}\n      alt=\"Picture of the author\"\n    />\n  )\n}",
            "filename": ""
          },
          {
            "language": "text",
            "code": "<Image src=\"/profile.png\" />",
            "filename": ""
          },
          {
            "language": "text",
            "code": "<Image src=\"https://example.com/profile.png\" />",
            "filename": ""
          },
          {
            "language": "python",
            "code": "import profile from './profile.png'\n \nexport default function Page() {\n  return <Image src={profile} />\n}",
            "filename": ""
          },
          {
            "language": "text",
            "code": "<Image src=\"/profile.png\" width={500} height={500} />",
            "filename": ""
          },
          {
            "language": "text",
            "code": "<Image src=\"/profile.png\" fill={true} />",
            "filename": ""
          },
          {
            "language": "python",
            "code": "'use client'\n \nimport Image from 'next/image'\n \nconst imageLoader = ({ src, width, quality }) => {\n  return `https://example.com/${src}?w=${width}&q=${quality || 75}`\n}\n \nexport default function Page() {\n  return (\n    <Image\n      loader={imageLoader}\n      src=\"me.png\"\n      alt=\"Picture of the author\"\n      width={500}\n      height={500}\n    />\n  )\n}",
            "filename": ""
          },
          {
            "language": "python",
            "code": "import Image from 'next/image'\n \nexport default function Page() {\n  return (\n    <div className=\"grid-element\">\n      <Image\n        fill\n        src=\"/example.png\"\n        sizes=\"(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw\"\n      />\n    </div>\n  )\n}",
            "filename": ""
          },
          {
            "language": "scilab",
            "code": "// Default quality is 75\n<Image quality={75} />",
            "filename": ""
          },
          {
            "language": "gdscript",
            "code": "const imageStyle = {\n  borderRadius: '50%',\n  border: '1px solid #fff',\n  width: '100px',\n  height: 'auto',\n}\n \nexport default function ProfileImage() {\n  return <Image src=\"...\" style={imageStyle} />\n}",
            "filename": ""
          },
          {
            "language": "gdscript",
            "code": "// Default preload is false\n<Image preload={false} />",
            "filename": ""
          },
          {
            "language": "gdscript",
            "code": "// Defaults to lazy\n<Image loading=\"lazy\" />",
            "filename": ""
          },
          {
            "language": "scilab",
            "code": "// defaults to empty\n<Image placeholder=\"empty\" />",
            "filename": ""
          },
          {
            "language": "text",
            "code": "<Image placeholder=\"blur\" blurDataURL=\"...\" />",
            "filename": ""
          },
          {
            "language": "text",
            "code": "<Image onLoad={(e) => console.log(e.target.naturalWidth)} />",
            "filename": ""
          },
          {
            "language": "text",
            "code": "<Image onError={(e) => console.error(e.target.id)} />",
            "filename": ""
          },
          {
            "language": "python",
            "code": "import Image from 'next/image'\n \nconst UnoptimizedImage = (props) => {\n  // Default is false\n  return <Image {...props} unoptimized />\n}",
            "filename": ""
          },
          {
            "language": "gdscript",
            "code": "module.exports = {\n  images: {\n    unoptimized: true,\n  },\n}",
            "filename": ""
          },
          {
            "language": "text",
            "code": "<Image src=\"/profile.jpg\" />",
            "filename": ""
          },
          {
            "language": "scdoc",
            "code": "<img\n  srcset=\"\n    /_next/image?url=%2Fprofile.jpg&w=640&q=75 1x,\n    /_next/image?url=%2Fprofile.jpg&w=828&q=75 2x\n  \"\n  src=\"/_next/image?url=%2Fprofile.jpg&w=828&q=75\"\n/>",
            "filename": ""
          },
          {
            "language": "text",
            "code": "<Image src=\"/profile.jpg\" overrideSrc=\"/override.jpg\" />",
            "filename": ""
          },
          {
            "language": "scdoc",
            "code": "<img\n  srcset=\"\n    /_next/image?url=%2Fprofile.jpg&w=640&q=75 1x,\n    /_next/image?url=%2Fprofile.jpg&w=828&q=75 2x\n  \"\n  src=\"/override.jpg\"\n/>",
            "filename": ""
          },
          {
            "language": "scilab",
            "code": "// Default is async\n<Image decoding=\"async\" />",
            "filename": ""
          },
          {
            "language": "text",
            "code": "'use client'\n \n<Image onLoadingComplete={(img) => console.log(img.naturalWidth)} />",
            "filename": ""
          },
          {
            "language": "gdscript",
            "code": "module.exports = {\n  images: {\n    localPatterns: [\n      {\n        pathname: '/assets/images/**',\n        search: '',\n      },\n    ],\n  },\n}",
            "filename": ""
          },
          {
            "language": "gdscript",
            "code": "module.exports = {\n  images: {\n    remotePatterns: [new URL('https://example.com/account123/**')],\n  },\n}",
            "filename": ""
          },
          {
            "language": "gdscript",
            "code": "module.exports = {\n  images: {\n    remotePatterns: [\n      {\n        protocol: 'https',\n        hostname: 'example.com',\n        port: '',\n        pathname: '/account123/**',\n        search: '',\n      },\n    ],\n  },\n}",
            "filename": ""
          },
          {
            "language": "gdscript",
            "code": "module.exports = {\n  images: {\n    remotePatterns: [\n      {\n        protocol: 'https',\n        hostname: '**.example.com',\n        port: '',\n        search: '',\n      },\n    ],\n  },\n}",
            "filename": ""
          },
          {
            "language": "gdscript",
            "code": "module.exports = {\n  images: {\n    remotePatterns: [\n      {\n        protocol: 'https',\n        hostname: 'assets.example.com',\n        search: '?v=1727111025337',\n      },\n    ],\n  },\n}",
            "filename": ""
          },
          {
            "language": "gdscript",
            "code": "module.exports = {\n  images: {\n    loader: 'custom',\n    loaderFile: './my/image/loader.js',\n  },\n}",
            "filename": ""
          },
          {
            "language": "gdscript",
            "code": "'use client'\n \nexport default function myImageLoader({ src, width, quality }) {\n  return `https://example.com/${src}?w=${width}&q=${quality || 75}`\n}",
            "filename": ""
          },
          {
            "language": "gdscript",
            "code": "module.exports = {\n  images: {\n    path: '/my-prefix/_next/image',\n  },\n}",
            "filename": ""
          },
          {
            "language": "gdscript",
            "code": "module.exports = {\n  images: {\n    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],\n  },\n}",
            "filename": ""
          },
          {
            "language": "gdscript",
            "code": "module.exports = {\n  images: {\n    imageSizes: [32, 48, 64, 96, 128, 256, 384],\n  },\n}",
            "filename": ""
          },
          {
            "language": "gdscript",
            "code": "module.exports = {\n  images: {\n    qualities: [75],\n  },\n}",
            "filename": ""
          },
          {
            "language": "gdscript",
            "code": "module.exports = {\n  images: {\n    qualities: [25, 50, 75, 100],\n  },\n}",
            "filename": ""
          },
          {
            "language": "gdscript",
            "code": "module.exports = {\n  images: {\n    // Default\n    formats: ['image/webp'],\n  },\n}",
            "filename": ""
          },
          {
            "language": "gdscript",
            "code": "module.exports = {\n  images: {\n    formats: ['image/avif'],\n  },\n}",
            "filename": ""
          },
          {
            "language": "gdscript",
            "code": "module.exports = {\n  images: {\n    formats: ['image/avif', 'image/webp'],\n  },\n}",
            "filename": ""
          },
          {
            "language": "gdscript",
            "code": "module.exports = {\n  images: {\n    minimumCacheTTL: 14400, // 4 hours\n  },\n}",
            "filename": ""
          },
          {
            "language": "gdscript",
            "code": "module.exports = {\n  images: {\n    minimumCacheTTL: 2678400, // 31 days\n  },\n}",
            "filename": ""
          },
          {
            "language": "gdscript",
            "code": "module.exports = {\n  images: {\n    disableStaticImages: true,\n  },\n}",
            "filename": ""
          },
          {
            "language": "gdscript",
            "code": "module.exports = {\n  images: {\n    maximumRedirects: 3,\n  },\n}",
            "filename": ""
          },
          {
            "language": "gdscript",
            "code": "module.exports = {\n  images: {\n    maximumRedirects: 0,\n  },\n}",
            "filename": ""
          },
          {
            "language": "gdscript",
            "code": "module.exports = {\n  images: {\n    maximumDiskCacheSize: 500_000_000,\n  },\n}",
            "filename": ""
          },
          {
            "language": "gdscript",
            "code": "module.exports = {\n  images: {\n    maximumDiskCacheSize: 0,\n  },\n}",
            "filename": ""
          },
          {
            "language": "gdscript",
            "code": "module.exports = {\n  images: {\n    maximumResponseBody: 50_000_000,\n  },\n}",
            "filename": ""
          },
          {
            "language": "gdscript",
            "code": "module.exports = {\n  images: {\n    maximumResponseBody: 5_000_000,\n  },\n}",
            "filename": ""
          },
          {
            "language": "gdscript",
            "code": "module.exports = {\n  images: {\n    dangerouslyAllowLocalIP: false,\n  },\n}",
            "filename": ""
          },
          {
            "language": "gdscript",
            "code": "module.exports = {\n  images: {\n    dangerouslyAllowLocalIP: true,\n  },\n}",
            "filename": ""
          },
          {
            "language": "gdscript",
            "code": "module.exports = {\n  images: {\n    dangerouslyAllowSVG: true,\n  },\n}",
            "filename": ""
          },
          {
            "language": "text",
            "code": "<Image src=\"/my-image.svg\" unoptimized />",
            "filename": ""
          },
          {
            "language": "gdscript",
            "code": "module.exports = {\n  images: {\n    dangerouslyAllowSVG: true,\n    contentDispositionType: 'attachment',\n    contentSecurityPolicy: \"default-src 'self'; script-src 'none'; sandbox;\",\n  },\n}",
            "filename": ""
          },
          {
            "language": "gdscript",
            "code": "module.exports = {\n  images: {\n    contentDispositionType: 'inline',\n  },\n}",
            "filename": ""
          },
          {
            "language": "gdscript",
            "code": "module.exports = {\n  images: {\n    contentSecurityPolicy: \"default-src 'self'; script-src 'none'; sandbox;\",\n  },\n}",
            "filename": ""
          },
          {
            "language": "gdscript",
            "code": "module.exports = {\n  images: {\n    domains: ['assets.acme.com'],\n  },\n}",
            "filename": ""
          },
          {
            "language": "python",
            "code": "import { getImageProps } from 'next/image'\n \nconst { props } = getImageProps({\n  src: 'https://example.com/image.jpg',\n  alt: 'A scenic mountain view',\n  width: 1200,\n  height: 800,\n})\n \nfunction ImageWithCaption() {\n  return (\n    <figure>\n      <img {...props} />\n      <figcaption>A scenic mountain view</figcaption>\n    </figure>\n  )\n}",
            "filename": ""
          },
          {
            "language": "python",
            "code": "import styles from './styles.module.css'\n \nexport default function MyImage() {\n  return <Image className={styles.image} src=\"/my-image.png\" alt=\"My Image\" />\n}",
            "filename": ""
          },
          {
            "language": "gdscript",
            "code": "export default function MyImage() {\n  return (\n    <Image style={{ borderRadius: '8px' }} src=\"/my-image.png\" alt=\"My Image\" />\n  )\n}",
            "filename": ""
          },
          {
            "language": "xml+django",
            "code": "<div style={{ position: 'relative' }}>\n  <Image fill src=\"/my-image.png\" alt=\"My Image\" />\n</div>",
            "filename": ""
          },
          {
            "language": "python",
            "code": "import Image from 'next/image'\nimport mountains from '../public/mountains.jpg'\n \nexport default function Responsive() {\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column' }}>\n      <Image\n        alt=\"Mountains\"\n        // Importing an image will\n        // automatically set the width and height\n        src={mountains}\n        sizes=\"100vw\"\n        // Make the image display full width\n        // and preserve its aspect ratio\n        style={{\n          width: '100%',\n          height: 'auto',\n        }}\n      />\n    </div>\n  )\n}",
            "filename": ""
          },
          {
            "language": "python",
            "code": "import Image from 'next/image'\n \nexport default function Page({ photoUrl }) {\n  return (\n    <Image\n      src={photoUrl}\n      alt=\"Picture of the author\"\n      sizes=\"100vw\"\n      style={{\n        width: '100%',\n        height: 'auto',\n      }}\n      width={500}\n      height={300}\n    />\n  )\n}",
            "filename": ""
          },
          {
            "language": "python",
            "code": "import Image from 'next/image'\nimport mountains from '../public/mountains.jpg'\n \nexport default function Fill() {\n  return (\n    <div\n      style={{\n        display: 'grid',\n        gridGap: '8px',\n        gridTemplateColumns: 'repeat(auto-fit, minmax(400px, auto))',\n      }}\n    >\n      <div style={{ position: 'relative', width: '400px' }}>\n        <Image\n          alt=\"Mountains\"\n          src={mountains}\n          fill\n          sizes=\"(min-width: 808px) 50vw, 100vw\"\n          style={{\n            objectFit: 'cover', // cover, contain, none\n          }}\n        />\n      </div>\n      {/* And more images in the grid... */}\n    </div>\n  )\n}",
            "filename": ""
          },
          {
            "language": "python",
            "code": "import Image from 'next/image'\nimport mountains from '../public/mountains.jpg'\n \nexport default function Background() {\n  return (\n    <Image\n      alt=\"Mountains\"\n      src={mountains}\n      placeholder=\"blur\"\n      quality={100}\n      fill\n      sizes=\"100vw\"\n      style={{\n        objectFit: 'cover',\n      }}\n    />\n  )\n}",
            "filename": ""
          },
          {
            "language": "python",
            "code": "import Image from 'next/image'\n \nexport default function Page() {\n  return (\n    <Image\n      src=\"https://s3.amazonaws.com/my-bucket/profile.png\"\n      alt=\"Picture of the author\"\n      width={500}\n      height={500}\n    />\n  )\n}",
            "filename": ""
          },
          {
            "language": "gdscript",
            "code": "module.exports = {\n  images: {\n    remotePatterns: [\n      {\n        protocol: 'https',\n        hostname: 's3.amazonaws.com',\n        port: '',\n        pathname: '/my-bucket/**',\n        search: '',\n      },\n    ],\n  },\n}",
            "filename": ""
          },
          {
            "language": "gas",
            "code": ".imgDark {\n  display: none;\n}\n \n@media (prefers-color-scheme: dark) {\n  .imgLight {\n    display: none;\n  }\n  .imgDark {\n    display: unset;\n  }\n}",
            "filename": ""
          },
          {
            "language": "python",
            "code": "import styles from './theme-image.module.css'\nimport Image, { ImageProps } from 'next/image'\n \ntype Props = Omit<ImageProps, 'src' | 'preload' | 'loading'> & {\n  srcLight: string\n  srcDark: string\n}\n \nconst ThemeImage = (props: Props) => {\n  const { srcLight, srcDark, ...rest } = props\n \n  return (\n    <>\n      <Image {...rest} src={srcLight} className={styles.imgLight} />\n      <Image {...rest} src={srcDark} className={styles.imgDark} />\n    </>\n  )\n}",
            "filename": ""
          },
          {
            "language": "python",
            "code": "import { getImageProps } from 'next/image'\n \nexport default function Home() {\n  const common = { alt: 'Art Direction Example', sizes: '100vw' }\n  const {\n    props: { srcSet: desktop },\n  } = getImageProps({\n    ...common,\n    width: 1440,\n    height: 875,\n    quality: 80,\n    src: '/desktop.jpg',\n  })\n  const {\n    props: { srcSet: mobile, ...rest },\n  } = getImageProps({\n    ...common,\n    width: 750,\n    height: 1334,\n    quality: 70,\n    src: '/mobile.jpg',\n  })\n \n  return (\n    <picture>\n      <source media=\"(min-width: 1000px)\" srcSet={desktop} />\n      <source media=\"(min-width: 500px)\" srcSet={mobile} />\n      <img {...rest} style={{ width: '100%', height: 'auto' }} />\n    </picture>\n  )\n}",
            "filename": ""
          },
          {
            "language": "python",
            "code": "import { getImageProps } from 'next/image'\n \nfunction getBackgroundImage(srcSet = '') {\n  const imageSet = srcSet\n    .split(', ')\n    .map((str) => {\n      const [url, dpi] = str.split(' ')\n      return `url(\"${url}\") ${dpi}`\n    })\n    .join(', ')\n  return `image-set(${imageSet})`\n}\n \nexport default function Home() {\n  const {\n    props: { srcSet },\n  } = getImageProps({ alt: '', width: 128, height: 128, src: '/img.png' })\n  const backgroundImage = getBackgroundImage(srcSet)\n  const style = { height: '100vh', width: '100vw', backgroundImage }\n \n  return (\n    <main style={style}>\n      <h1>Hello World</h1>\n    </main>\n  )\n}",
            "filename": ""
          }
        ],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [],
    "prerequisites": [],
    "_content_hash": "ca578b1e6338d67c38f744fe37137f5811ea2e84f73a25e709e537928e33425b",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/components/link",
    "title": "Link Component",
    "type": "api",
    "summary": "This page documents the Next.js `<Link>` component, a React component that extends the HTML `<a>` element to provide prefetching and client-side navigation between routes. It covers the component's…",
    "sections": [
      {
        "heading": "Link Component",
        "content": "`<Link>` is a React component that extends the HTML `<a>` element to provide [prefetching](/docs/app/getting-started/linking-and-navigating#prefetching) and client-side navigation between routes. It…",
        "code_blocks": [
          {
            "language": "tsx",
            "code": "import Link from 'next/link'\n \nexport default function Page() {\n  return <Link href=\"/dashboard\">Dashboard</Link>\n}",
            "filename": "app/page.tsx"
          }
        ],
        "images": []
      },
      {
        "heading": "Reference",
        "content": "The following props can be passed to the `<Link>` component:\n\n| Prop | Example | Type | Required |\n| --- | --- | --- | --- |\n| [`href`](#href-required) | `href=\"/dashboard\"` | String or Object | Yes…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "href (required)",
        "content": "The path or URL to navigate to.",
        "code_blocks": [
          {
            "language": "tsx",
            "code": "import Link from 'next/link'\n \n// Navigate to /about?name=test\nexport default function Page() {\n  return (\n    <Link\n      href={{\n        pathname: '/about',\n        query: { name: 'test' },…",
            "filename": "app/page.tsx"
          }
        ],
        "images": []
      },
      {
        "heading": "replace",
        "content": "**Defaults to `false`.** When `true`, `next/link` will replace the current history state instead of adding a new URL into the [browser's…",
        "code_blocks": [
          {
            "language": "tsx",
            "code": "import Link from 'next/link'\n \nexport default function Page() {\n  return (\n    <Link href=\"/dashboard\" replace>\n      Dashboard\n    </Link>\n  )\n}",
            "filename": "app/page.tsx"
          }
        ],
        "images": []
      },
      {
        "heading": "scroll",
        "content": "**Defaults to `true`.** The default scrolling behavior of `<Link>` in Next.js **is to maintain scroll position**, similar to how browsers handle back and forwards navigation. When you navigate to a…",
        "code_blocks": [
          {
            "language": "tsx",
            "code": "import Link from 'next/link'\n \nexport default function Page() {\n  return (\n    <Link href=\"/dashboard\" scroll={false}>\n      Dashboard\n    </Link>\n  )\n}",
            "filename": "app/page.tsx"
          }
        ],
        "images": []
      },
      {
        "heading": "prefetch",
        "content": "Prefetching happens when a `<Link />` component enters the user's viewport (initially or through scroll). Next.js prefetches and loads the linked route (denoted by the `href`) and its data in the…",
        "code_blocks": [
          {
            "language": "tsx",
            "code": "import Link from 'next/link'\n \nexport default function Page() {\n  return (\n    <Link href=\"/dashboard\" prefetch={false}>\n      Dashboard\n    </Link>\n  )\n}",
            "filename": "app/page.tsx"
          }
        ],
        "images": []
      },
      {
        "heading": "onNavigate",
        "content": "An event handler called during client-side navigation. The handler receives an event object that includes a `preventDefault()` method, allowing you to cancel the navigation if needed.\n\n> **Good to…",
        "code_blocks": [
          {
            "language": "tsx",
            "code": "import Link from 'next/link'\n \nexport default function Page() {\n  return (\n    <Link\n      href=\"/dashboard\"\n      onNavigate={(e) => {\n        // Only executes during SPA navigation…",
            "filename": "app/page.tsx"
          }
        ],
        "images": []
      },
      {
        "heading": "transitionTypes",
        "content": "A list of transition types to apply to the navigation. These types are passed to [`React.addTransitionType`](https://react.dev/reference/react/addTransitionType) inside the navigation transition,…",
        "code_blocks": [
          {
            "language": "tsx",
            "code": "import Link from 'next/link'\n \nexport default function Page() {\n  return (\n    <Link href=\"/about\" transitionTypes={['slide-in']}>\n      About\n    </Link>\n  )\n}",
            "filename": "app/page.tsx"
          }
        ],
        "images": []
      },
      {
        "heading": "Examples",
        "content": "The following examples demonstrate how to use the `<Link>` component in different scenarios.",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Linking to dynamic route segments",
        "content": "When linking to [dynamic segments](/docs/app/api-reference/file-conventions/dynamic-routes), you can use [template literals and…",
        "code_blocks": [
          {
            "language": "tsx",
            "code": "import Link from 'next/link'\n \ninterface Post {\n  id: number\n  title: string\n  slug: string\n}\n \nexport default function PostList({ posts }: { posts: Post[] }) {\n  return (\n    <ul>…",
            "filename": "app/blog/post-list.tsx"
          }
        ],
        "images": []
      },
      {
        "heading": "Checking active links",
        "content": "You can use [`usePathname()`](/docs/app/api-reference/functions/use-pathname) to check if a link is active. For example, to add a class to the active link, you can check if the current `pathname`…",
        "code_blocks": [
          {
            "language": "tsx",
            "code": "'use client'\n \nimport { usePathname } from 'next/navigation'\nimport Link from 'next/link'\n \nexport function Links() {\n  const pathname = usePathname()\n \n  return (\n    <nav>\n      <Link…",
            "filename": "app/ui/nav-links.tsx"
          }
        ],
        "images": []
      },
      {
        "heading": "Scrolling to an `id`",
        "content": "If you'd like to scroll to a specific `id` on navigation, you can append your URL with a `#` hash link or just pass a hash link to the `href` prop. This is possible since `<Link>` renders to an `<a>`…",
        "code_blocks": [
          {
            "language": "jsx",
            "code": "<Link href=\"/dashboard#settings\">Settings</Link>\n \n// Output\n<a href=\"/dashboard#settings\">Settings</a>",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Replace the URL instead of push",
        "content": "The default behavior of the `Link` component is to `push` a new URL into the `history` stack. You can use the `replace` prop to prevent adding a new entry, as in the following example:",
        "code_blocks": [
          {
            "language": "js",
            "code": "import Link from 'next/link'\n \nexport default function Page() {\n  return (\n    <Link href=\"/about\" replace>\n      About us\n    </Link>\n  )\n}",
            "filename": "app/page.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Disable scrolling to the top of the page",
        "content": "The default scrolling behavior of `<Link>` in Next.js  **is to maintain scroll position**, similar to how browsers handle back and forwards navigation. When you navigate to a new…",
        "code_blocks": [
          {
            "language": "tsx",
            "code": "import Link from 'next/link'\n \nexport default function Page() {\n  return (\n    <Link href=\"/#hashid\" scroll={false}>\n      Disables scrolling to the top\n    </Link>\n  )\n}",
            "filename": "app/page.tsx"
          },
          {
            "language": "js",
            "code": "// useRouter\nimport { useRouter } from 'next/navigation'\n \nconst router = useRouter()\n \nrouter.push('/dashboard', { scroll: false })",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Scroll offset with sticky headers",
        "content": "Because Next.js skips sticky and fixed positioned elements when finding the scroll target, content may end up behind a sticky header after navigation. For example, if your layout has a sticky…",
        "code_blocks": [
          {
            "language": "tsx",
            "code": "import './globals.css'\n \nexport default function RootLayout({\n  children,\n}: {\n  children: React.ReactNode\n}) {\n  return (\n    <html lang=\"en\">\n      <body>\n        <header className=\"sticky top-0…",
            "filename": "app/layout.tsx"
          },
          {
            "language": "css",
            "code": "html {\n  scroll-padding-top: 64px; /* Match the height of your sticky header */\n}",
            "filename": "app/globals.css"
          }
        ],
        "images": []
      },
      {
        "heading": "Prefetching links in Proxy",
        "content": "It's common to use [Proxy](/docs/app/api-reference/file-conventions/proxy) for authentication or other purposes that involve rewriting the user to a different page. In order for the `<Link />`…",
        "code_blocks": [
          {
            "language": "ts",
            "code": "import { NextResponse } from 'next/server'\n \nexport function proxy(request: Request) {\n  const nextUrl = request.nextUrl\n  if (nextUrl.pathname === '/dashboard') {\n    if (request.cookies.authToken)…",
            "filename": "proxy.ts"
          },
          {
            "language": "tsx",
            "code": "'use client'\n \nimport Link from 'next/link'\nimport useIsAuthed from './hooks/useIsAuthed' // Your auth hook\n \nexport default function Page() {\n  const isAuthed = useIsAuthed()\n  const path = isAuthed…",
            "filename": "app/page.tsx"
          }
        ],
        "images": []
      },
      {
        "heading": "Blocking navigation",
        "content": "You can use the `onNavigate` prop to block navigation when certain conditions are met, such as when a form has unsaved changes. When you need to block navigation across multiple components in your…",
        "code_blocks": [
          {
            "language": "tsx",
            "code": "'use client'\n \nimport { createContext, useState, useContext } from 'react'\n \ninterface NavigationBlockerContextType {\n  isBlocked: boolean\n  setIsBlocked: (isBlocked: boolean) => void\n}\n \nexport…",
            "filename": "app/contexts/navigation-blocker.tsx"
          },
          {
            "language": "tsx",
            "code": "'use client'\n \nimport { useNavigationBlocker } from '../contexts/navigation-blocker'\n \nexport default function Form() {\n  const { setIsBlocked } = useNavigationBlocker()\n \n  return (\n    <form…",
            "filename": "app/components/form.tsx"
          },
          {
            "language": "tsx",
            "code": "'use client'\n \nimport Link from 'next/link'\nimport { useNavigationBlocker } from '../contexts/navigation-blocker'\n \ninterface CustomLinkProps extends React.ComponentProps<typeof Link> {\n  children:…",
            "filename": "app/components/custom-link.tsx"
          },
          {
            "language": "tsx",
            "code": "'use client'\n \nimport { CustomLink as Link } from './custom-link'\n \nexport default function Nav() {\n  return (\n    <nav>\n      <Link href=\"/\">Home</Link>\n      <Link href=\"/about\">About</Link>…",
            "filename": "app/components/nav.tsx"
          },
          {
            "language": "tsx",
            "code": "import { NavigationBlockerProvider } from './contexts/navigation-blocker'\n \nexport default function RootLayout({\n  children,\n}: {\n  children: React.ReactNode\n}) {\n  return (\n    <html lang=\"en\">…",
            "filename": "app/layout.tsx"
          },
          {
            "language": "tsx",
            "code": "import Nav from './components/nav'\nimport Form from './components/form'\n \nexport default function Page() {\n  return (\n    <div>\n      <Nav />\n      <main>\n        <h1>Welcome to the Dashboard</h1>…",
            "filename": "app/page.tsx"
          }
        ],
        "images": []
      },
      {
        "heading": "Version history",
        "content": "| Version | Changes |\n| --- | --- |\n| `v16.2.0` | Add `transitionTypes` prop. |\n| `v15.4.0` | Add `auto` as an alias to the default `prefetch` behavior. |\n| `v15.3.0` | Add `onNavigate` API |\n|…",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "href",
        "type": "String or Object",
        "description": "The path or URL to navigate to.",
        "default": "",
        "required": true
      },
      {
        "name": "replace",
        "type": "Boolean",
        "description": "When `true`, `next/link` will replace the current history state instead of adding a new URL into the browser's history stack.",
        "default": "false",
        "required": false
      },
      {
        "name": "scroll",
        "type": "Boolean",
        "description": "The default scrolling behavior of `<Link>` in Next.js is to maintain scroll position. When `scroll={false}`, Next.js will not attempt to scroll to the first Page element.",
        "default": "true",
        "required": false
      },
      {
        "name": "prefetch",
        "type": "Boolean or null",
        "description": "Prefetch behavior depends on whether the route is static or dynamic. When `true`, the full route is prefetched. When `false`, prefetching never happens. When `null` or `'auto'`, the default behavior…",
        "default": "null",
        "required": false
      },
      {
        "name": "onNavigate",
        "type": "Function",
        "description": "An event handler called during client-side navigation. The handler receives an event object that includes a `preventDefault()` method, allowing you to cancel the navigation if needed.",
        "default": "",
        "required": false
      },
      {
        "name": "transitionTypes",
        "type": "string[]",
        "description": "A list of transition types to apply to the navigation. These types are passed to `React.addTransitionType` inside the navigation transition, enabling `<ViewTransition>` components to apply different…",
        "default": "",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "Link",
      "React",
      "client-side navigation",
      "prefetching",
      "routing",
      "dynamic routes",
      "scroll behavior",
      "view transitions",
      "onNavigate",
      "transitionTypes"
    ],
    "prerequisites": [],
    "_content_hash": "55635a62060ba1cce94b2e402dd9daa8b8c92ea33c4432e0ab33bc41477e83a9",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/components/script",
    "title": "Script Component",
    "type": "api",
    "summary": "API reference for the Next.js Script component (next/script), covering its props, loading strategies, event handlers, and version history.",
    "sections": [
      {
        "heading": "Script Component",
        "content": "This API reference will help you understand how to use [props](#props) available for the Script Component. For features and usage, please see the [Optimizing Scripts](/docs/app/guides/scripts) page.",
        "code_blocks": [
          {
            "language": "tsx",
            "code": "import Script from 'next/script'\n \nexport default function Dashboard() {\n  return (\n    <>\n      <Script src=\"https://example.com/script.js\" />\n    </>\n  )\n}",
            "filename": "app/dashboard/page.tsx"
          }
        ],
        "images": []
      },
      {
        "heading": "Props",
        "content": "Here's a summary of the props available for the Script Component:\n\n| Prop | Example | Type | Required |\n| --- | --- | --- | --- |\n| `src` | `src=\"http://example.com/script\"` | String | Required…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Required Props",
        "content": "The `<Script />` component requires the following properties.",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "src",
        "content": "A path string specifying the URL of an external script. This can be either an absolute external URL or an internal path. The `src` property is required unless an inline script is used.",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Optional Props",
        "content": "The `<Script />` component accepts a number of additional properties beyond those which are required.",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "strategy",
        "content": "The loading strategy of the script. There are four different strategies that can be used:\n\n- `beforeInteractive`: Load before any Next.js code and before any page hydration occurs.\n-…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "beforeInteractive",
        "content": "Scripts that load with the `beforeInteractive` strategy are injected into the initial HTML from the server, downloaded before any Next.js module, and executed in the order they are placed.\n\nScripts…",
        "code_blocks": [
          {
            "language": "tsx",
            "code": "import Script from 'next/script'\n \nexport default function RootLayout({\n  children,\n}: {\n  children: React.ReactNode\n}) {\n  return (\n    <html lang=\"en\">\n      <body>\n        {children}…",
            "filename": "app/layout.tsx"
          }
        ],
        "images": []
      },
      {
        "heading": "afterInteractive",
        "content": "Scripts that use the `afterInteractive` strategy are injected into the HTML client-side and will load after some (or all) hydration occurs on the page. **This is the default strategy** of the Script…",
        "code_blocks": [
          {
            "language": "js",
            "code": "import Script from 'next/script'\n \nexport default function Page() {\n  return (\n    <>\n      <Script src=\"https://example.com/script.js\" strategy=\"afterInteractive\" />\n    </>\n  )\n}",
            "filename": "app/page.js"
          }
        ],
        "images": []
      },
      {
        "heading": "lazyOnload",
        "content": "Scripts that use the `lazyOnload` strategy are injected into the HTML client-side during browser idle time and will load after all resources on the page have been fetched. This strategy should be…",
        "code_blocks": [
          {
            "language": "js",
            "code": "import Script from 'next/script'\n \nexport default function Page() {\n  return (\n    <>\n      <Script src=\"https://example.com/script.js\" strategy=\"lazyOnload\" />\n    </>\n  )\n}",
            "filename": "app/page.js"
          }
        ],
        "images": []
      },
      {
        "heading": "worker",
        "content": "> **Warning:** The `worker` strategy is not yet stable and does not yet work with the App Router. Use with caution.\n\nScripts that use the `worker` strategy are off-loaded to a web worker in order to…",
        "code_blocks": [
          {
            "language": "js",
            "code": "module.exports = {\n  experimental: {\n    nextScriptWorkers: true,\n  },\n}",
            "filename": "next.config.js"
          },
          {
            "language": "tsx",
            "code": "import Script from 'next/script'\n \nexport default function Home() {\n  return (\n    <>\n      <Script src=\"https://example.com/script.js\" strategy=\"worker\" />\n    </>\n  )\n}",
            "filename": "pages/home.tsx"
          }
        ],
        "images": []
      },
      {
        "heading": "onLoad",
        "content": "> **Warning:** `onLoad` does not yet work with Server Components and can only be used in Client Components. Further, `onLoad` can't be used with `beforeInteractive` – consider using `onReady`…",
        "code_blocks": [
          {
            "language": "tsx",
            "code": "'use client'\n \nimport Script from 'next/script'\n \nexport default function Page() {\n  return (\n    <>\n      <Script…",
            "filename": "app/page.tsx"
          }
        ],
        "images": []
      },
      {
        "heading": "onReady",
        "content": "> **Warning:** `onReady` does not yet work with Server Components and can only be used in Client Components.\n\nSome third-party scripts require users to run JavaScript code after the script has…",
        "code_blocks": [
          {
            "language": "tsx",
            "code": "'use client'\n \nimport { useRef } from 'react'\nimport Script from 'next/script'\n \nexport default function Page() {\n  const mapRef = useRef()\n \n  return (\n    <>\n      <div ref={mapRef}></div>…",
            "filename": "app/page.tsx"
          }
        ],
        "images": []
      },
      {
        "heading": "onError",
        "content": "> **Warning:** `onError` does not yet work with Server Components and can only be used in Client Components. `onError` cannot be used with the `beforeInteractive` loading strategy.\n\nSometimes it is…",
        "code_blocks": [
          {
            "language": "tsx",
            "code": "'use client'\n \nimport Script from 'next/script'\n \nexport default function Page() {\n  return (\n    <>\n      <Script\n        src=\"https://example.com/script.js\"\n        onError={(e: Error) => {…",
            "filename": "app/page.tsx"
          }
        ],
        "images": []
      },
      {
        "heading": "Version History",
        "content": "| Version | Changes |\n| --- | --- |\n| `v13.0.0` | `beforeInteractive` and `afterInteractive` is modified to support `app`. |\n| `v12.2.4` | `onReady` prop added. |\n| `v12.2.2` | Allow `next/script`…",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "src",
        "type": "String",
        "description": "A path string specifying the URL of an external script. This can be either an absolute external URL or an internal path. The `src` property is required unless an inline script is used.",
        "default": "",
        "required": true
      },
      {
        "name": "strategy",
        "type": "String",
        "description": "The loading strategy of the script. One of `beforeInteractive`, `afterInteractive`, `lazyOnload`, or `worker`.",
        "default": "afterInteractive",
        "required": false
      },
      {
        "name": "onLoad",
        "type": "Function",
        "description": "Executes JavaScript code after the script has finished loading. Only works with `afterInteractive` or `lazyOnload` strategies. Cannot be used with Server Components or `beforeInteractive`.",
        "default": "",
        "required": false
      },
      {
        "name": "onReady",
        "type": "Function",
        "description": "Executes JavaScript code after the script's load event when it first loads and after every subsequent component re-mount. Cannot be used with Server Components.",
        "default": "",
        "required": false
      },
      {
        "name": "onError",
        "type": "Function",
        "description": "Handles errors when a script fails to load. Cannot be used with Server Components or the `beforeInteractive` loading strategy.",
        "default": "",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "Script",
      "next/script",
      "App Router",
      "Client Components",
      "Server Components",
      "loading strategies",
      "beforeInteractive",
      "afterInteractive",
      "lazyOnload",
      "worker",
      "onLoad",
      "onReady",
      "onError"
    ],
    "prerequisites": [],
    "_content_hash": "6ffb20ff2717f123929e3821efca7d8825dff79c19b9560b52f442020fbe5880",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config",
    "title": "Configuration",
    "type": "overview",
    "summary": "Overview page for Next.js configuration options, linking to documentation for next.config.js, TypeScript, and ESLint.",
    "sections": [
      {
        "heading": "Configuration",
        "content": "next.config.js: Learn how to configure your application with next.config.js.\n\nTypeScript: Next.js provides a TypeScript-first development experience for building your React application.\n\nESLint:…",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [
      "Next.js",
      "configuration",
      "next.config.js",
      "TypeScript",
      "ESLint"
    ],
    "prerequisites": [],
    "_content_hash": "5a3ab693cb6d3224201ab6a718abd38c5f286da2eb8011caded5eba67714aaef",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/eslint",
    "title": "ESLint Plugin",
    "type": "reference",
    "summary": "Explains how to configure ESLint for Next.js using eslint-config-next, including setup, available rules, examples, and migrating existing ESLint configurations.",
    "sections": [
      {
        "heading": "ESLint Plugin",
        "content": "Next.js provides an ESLint configuration package, [`eslint-config-next`](https://www.npmjs.com/package/eslint-config-next), that makes it easy to catch common issues in your application. It includes…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Setup ESLint",
        "content": "Get linting working quickly with the ESLint CLI (flat config):",
        "code_blocks": [
          {
            "language": "bash",
            "code": "pnpm add -D eslint eslint-config-next",
            "filename": ""
          },
          {
            "language": "js",
            "code": "import { defineConfig, globalIgnores } from 'eslint/config'\nimport nextVitals from 'eslint-config-next/core-web-vitals'\n\nconst eslintConfig = defineConfig([\n  ...nextVitals,\n  // Override default…",
            "filename": "eslint.config.mjs"
          },
          {
            "language": "bash",
            "code": "pnpm exec eslint .",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Reference",
        "content": "The `eslint-config-next` package includes the `recommended` rule-sets from the following ESLint plugins:\n\n- [`eslint-plugin-react`](https://www.npmjs.com/package/eslint-plugin-react)\n-…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Rules",
        "content": "The `@next/eslint-plugin-next` rules included are:\n\n| Enabled in recommended config | Rule | Description |\n| --- | --- | --- |\n|  |…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Examples",
        "content": "",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Specifying a root directory within a monorepo",
        "content": "If you're using `@next/eslint-plugin-next` in a project where Next.js isn't installed in your root directory (such as a monorepo), you can tell `@next/eslint-plugin-next` where to find your Next.js…",
        "code_blocks": [
          {
            "language": "js",
            "code": "import { defineConfig } from 'eslint/config'\nimport eslintNextPlugin from '@next/eslint-plugin-next'\n\nconst eslintConfig = defineConfig([\n  {\n    files: ['**/*.{js,jsx,ts,tsx}'],\n    plugins: {…",
            "filename": "eslint.config.mjs"
          }
        ],
        "images": []
      },
      {
        "heading": "Disabling rules",
        "content": "If you would like to modify or disable any rules provided by the supported plugins (`react`, `react-hooks`, `next`), you can directly change them using the `rules` property in your…",
        "code_blocks": [
          {
            "language": "js",
            "code": "import { defineConfig, globalIgnores } from 'eslint/config'\nimport nextVitals from 'eslint-config-next/core-web-vitals'\n\nconst eslintConfig = defineConfig([\n  ...nextVitals,\n  {\n    rules: {…",
            "filename": "eslint.config.mjs"
          }
        ],
        "images": []
      },
      {
        "heading": "With Core Web Vitals",
        "content": "Enable the `eslint-config-next/core-web-vitals` configuration in your ESLint config.\n\n`eslint-config-next/core-web-vitals` upgrades certain lint rules in `@next/eslint-plugin-next` from warnings to…",
        "code_blocks": [
          {
            "language": "js",
            "code": "import { defineConfig, globalIgnores } from 'eslint/config'\nimport nextVitals from 'eslint-config-next/core-web-vitals'\n\nconst eslintConfig = defineConfig([\n  ...nextVitals,\n  // Override default…",
            "filename": "eslint.config.mjs"
          }
        ],
        "images": []
      },
      {
        "heading": "With TypeScript",
        "content": "In addition to the Next.js ESLint rules, `create-next-app --typescript` will also add TypeScript-specific lint rules with `eslint-config-next/typescript` to your config:\n\nThose rules are based on…",
        "code_blocks": [
          {
            "language": "js",
            "code": "import { defineConfig, globalIgnores } from 'eslint/config'\nimport nextVitals from 'eslint-config-next/core-web-vitals'\nimport nextTs from 'eslint-config-next/typescript'\n\nconst eslintConfig =…",
            "filename": "eslint.config.mjs"
          }
        ],
        "images": []
      },
      {
        "heading": "With Prettier",
        "content": "ESLint also contains code formatting rules, which can conflict with your existing [Prettier](https://prettier.io/) setup. We recommend including…",
        "code_blocks": [
          {
            "language": "bash",
            "code": "pnpm add -D eslint-config-prettier",
            "filename": ""
          },
          {
            "language": "js",
            "code": "import { defineConfig, globalIgnores } from 'eslint/config'\nimport nextVitals from 'eslint-config-next/core-web-vitals'\nimport prettier from 'eslint-config-prettier/flat'\n\nconst eslintConfig =…",
            "filename": "eslint.config.mjs"
          }
        ],
        "images": []
      },
      {
        "heading": "Running lint on staged files",
        "content": "If you would like to use ESLint with [lint-staged](https://github.com/okonet/lint-staged) to run the linter on staged git files, add the following to the `.lintstagedrc.js` file in the root of your…",
        "code_blocks": [
          {
            "language": "js",
            "code": "const path = require('path')\n\nconst buildEslintCommand = (filenames) =>\n  `eslint --fix ${filenames\n    .map((f) => `\"${path.relative(process.cwd(), f)}\"`)\n    .join(' ')}`\n\nmodule.exports = {…",
            "filename": ".lintstagedrc.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Migrating existing config",
        "content": "If you already have ESLint configured in your application, there are two approaches to integrate Next.js linting rules, depending on your setup.",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Using the plugin directly",
        "content": "Use `@next/eslint-plugin-next` directly if you have any of the following already configured:\n\n- Conflicting plugins installed separately or through another config (such as `airbnb` or `react-app`):…",
        "code_blocks": [
          {
            "language": "bash",
            "code": "pnpm add -D @next/eslint-plugin-next",
            "filename": ""
          },
          {
            "language": "js",
            "code": "import { defineConfig } from 'eslint/config'\nimport nextPlugin from '@next/eslint-plugin-next'\n\nconst eslintConfig = defineConfig([\n  // Your other configurations...\n  {\n    files:…",
            "filename": "eslint.config.mjs"
          }
        ],
        "images": []
      },
      {
        "heading": "Adding to existing config",
        "content": "If you're adding Next.js to an existing ESLint setup, spread the Next.js config into your array:\n\nWhen you spread `...nextConfig`, you're adding multiple config objects that include file patterns,…",
        "code_blocks": [
          {
            "language": "js",
            "code": "import nextConfig from 'eslint-config-next/core-web-vitals'\n// Your other config imports...\n\nconst eslintConfig = [\n  // Your other configurations...\n  ...nextConfig,\n]\n\nexport default eslintConfig",
            "filename": "eslint.config.mjs"
          }
        ],
        "images": []
      },
      {
        "heading": "Version History",
        "content": "| Version | Changes |\n| --- | --- |\n| `v16.0.0` | `next lint` and the `eslint` next.config.js option were removed in favor of the ESLint CLI. A…",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [
      "Next.js",
      "ESLint",
      "eslint-config-next",
      "linting",
      "configuration",
      "TypeScript",
      "Prettier",
      "Core Web Vitals"
    ],
    "prerequisites": [],
    "_content_hash": "3b0a8cce836cf87628d55424f3af17405d425c2b04e47a0af35fa74aebe77a44",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js",
    "title": "next.config.js",
    "type": "reference",
    "summary": "Overview of Next.js configuration via next.config.js, including setup, ECMAScript modules, function-based configuration, TypeScript support, and a list of all available configuration options.",
    "sections": [
      {
        "heading": "next.config.js",
        "content": "Next.js can be configured through a `next.config.js` file in the root of your project directory (for example, by `package.json`) with a default export.",
        "code_blocks": [
          {
            "language": "js",
            "code": "// @ts-check\n \n/** @type {import('next').NextConfig} */\nconst nextConfig = {\n  /* config options here */\n}\n \nmodule.exports = nextConfig",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "ECMAScript Modules",
        "content": "`next.config.js` is a regular Node.js module, not a JSON file. It gets used by the Next.js server and build phases, and it's not included in the browser build.\n\nIf you need [ECMAScript…",
        "code_blocks": [
          {
            "language": "js",
            "code": "// @ts-check\n \n/**\n * @type {import('next').NextConfig}\n */\nconst nextConfig = {\n  /* config options here */\n}\n \nexport default nextConfig",
            "filename": "next.config.mjs"
          }
        ],
        "images": []
      },
      {
        "heading": "Configuration as a Function",
        "content": "You can also use a function:",
        "code_blocks": [
          {
            "language": "js",
            "code": "// @ts-check\n \nexport default (phase, { defaultConfig }) => {\n  /**\n   * @type {import('next').NextConfig}\n   */\n  const nextConfig = {\n    /* config options here */\n  }\n  return nextConfig\n}",
            "filename": "next.config.mjs"
          }
        ],
        "images": []
      },
      {
        "heading": "Async Configuration",
        "content": "Since Next.js 12.1.0, you can use an async function:",
        "code_blocks": [
          {
            "language": "js",
            "code": "// @ts-check\n \nmodule.exports = async (phase, { defaultConfig }) => {\n  /**\n   * @type {import('next').NextConfig}\n   */\n  const nextConfig = {\n    /* config options here */\n  }\n  return nextConfig\n}",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Phase",
        "content": "`phase` is the current context in which the configuration is loaded. You can see the [available phases](https://github.com/vercel/next.js/blob/5e6b008b561caf2710ab7be63320a3d549474a5b/packages/next/sh…",
        "code_blocks": [
          {
            "language": "js",
            "code": "// @ts-check\n \nconst { PHASE_DEVELOPMENT_SERVER } = require('next/constants')\n \nmodule.exports = (phase, { defaultConfig }) => {\n  if (phase === PHASE_DEVELOPMENT_SERVER) {\n    return {\n      /*…",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "TypeScript",
        "content": "If you are using TypeScript in your project, you can use `next.config.ts` to use TypeScript in your configuration:\n\nThe commented lines are the place where you can put the configs allowed by…",
        "code_blocks": [
          {
            "language": "ts",
            "code": "import type { NextConfig } from 'next'\n \nconst nextConfig: NextConfig = {\n  /* config options here */\n}\n \nexport default nextConfig",
            "filename": "next.config.ts"
          }
        ],
        "images": []
      },
      {
        "heading": "Unit Testing (experimental)",
        "content": "Starting in Next.js 15.1, the `next/experimental/testing/server` package contains utilities to help unit test `next.config.js` files.\n\nThe `unstable_getResponseFromNextConfig` function runs the…",
        "code_blocks": [
          {
            "language": "js",
            "code": "import {\n  getRedirectUrl,\n  unstable_getResponseFromNextConfig,\n} from 'next/experimental/testing/server'\n \nconst response = await unstable_getResponseFromNextConfig({\n  url:…",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Available configuration options",
        "content": "This page documents all the available configuration options:\n\n- **adapterPath**: Configure a custom adapter for Next.js to hook into the build process.\n- **allowedDevOrigins**: Use…",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [
      "Next.js",
      "configuration",
      "next.config.js",
      "ECMAScript modules",
      "TypeScript",
      "Turbopack",
      "webpack",
      "App Router",
      "Pages Router"
    ],
    "prerequisites": [],
    "_content_hash": "942201e9edfca7ac07aa8da94ff2148973e2cf86d79020fcd2ae779512629d02",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/adapterPath",
    "title": "adapterPath",
    "type": "api",
    "summary": "Documentation for the Next.js adapterPath configuration option, which allows deployment platforms or build systems to integrate with the Next.js build process via adapters.",
    "sections": [
      {
        "heading": "Overview",
        "content": "Next.js provides a built-in adapters API. It allows deployment platforms or build systems to integrate with the Next.js build process. For a full reference implementation, see the…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Configuration",
        "content": "To use an adapter, specify the path to your adapter module in `adapterPath`:\n\nAlternatively `NEXT_ADAPTER_PATH` can be set to enable zero-config usage in deployment platforms.",
        "code_blocks": [
          {
            "language": "js",
            "code": "/** @type {import('next').NextConfig} */\nconst nextConfig = {\n  adapterPath: require.resolve('./my-adapter.js'),\n}\n \nmodule.exports = nextConfig",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Adapters",
        "content": "For full adapter implementation details, use the dedicated Adapters section:\n\n- [Configuration](/docs/app/api-reference/adapters/configuration)\n- [Creating an…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Creating an Adapter",
        "content": "See [Creating an Adapter](/docs/app/api-reference/adapters/creating-an-adapter).",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "API Reference",
        "content": "See [API Reference](/docs/app/api-reference/adapters/api-reference).",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Testing Adapters",
        "content": "See [Testing Adapters](/docs/app/api-reference/adapters/testing-adapters).",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Routing with `@next/routing`",
        "content": "See [Routing with `@next/routing`](/docs/app/api-reference/adapters/routing-with-next-routing).",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Implementing PPR in an Adapter",
        "content": "See [Implementing PPR in an Adapter](/docs/app/api-reference/adapters/implementing-ppr-in-an-adapter).",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Runtime Integration",
        "content": "See [Runtime Integration](/docs/app/api-reference/adapters/runtime-integration).",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Invoking Entrypoints",
        "content": "See [Invoking Entrypoints](/docs/app/api-reference/adapters/invoking-entrypoints).",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Output Types",
        "content": "See [Output Types](/docs/app/api-reference/adapters/output-types).",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Routing Information",
        "content": "See [Routing Information](/docs/app/api-reference/adapters/routing-information).",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Use Cases",
        "content": "See [Use Cases](/docs/app/api-reference/adapters/use-cases).",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [
      "Next.js",
      "adapter",
      "configuration",
      "build process",
      "deployment"
    ],
    "prerequisites": [],
    "_content_hash": "70c3e2ca076e4e10cae81b6b6f9eed46f0465402a7af604c53cb63883c71b6fe",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/allowedDevOrigins",
    "title": "allowedDevOrigins",
    "type": "api",
    "summary": "Describes the `allowedDevOrigins` config option in Next.js, which allows additional origins to request the dev server during development.",
    "sections": [
      {
        "heading": "allowedDevOrigins",
        "content": "Next.js blocks cross-origin requests to dev-only assets and endpoints during development by default to prevent unauthorized access.\n\nTo configure a Next.js application to allow requests from origins…",
        "code_blocks": [
          {
            "language": "",
            "code": "module.exports = {\n  allowedDevOrigins: ['local-origin.dev', '*.local-origin.dev'],\n}",
            "filename": "next.config.js"
          }
        ],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "allowedDevOrigins",
        "type": "string[]",
        "description": "Sets additional origins that can request the dev server in development mode. Accepts exact hostnames and wildcard subdomains (e.g., 'local-origin.dev', '*.local-origin.dev').",
        "default": "[]",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "next.config.js",
      "configuration",
      "development",
      "CORS",
      "allowedDevOrigins",
      "dev server"
    ],
    "prerequisites": [],
    "_content_hash": "4d94af395892b80df75154b3060176cfd879678a7848d1615b27472dc2603a6c",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/appDir",
    "title": "appDir",
    "type": "api",
    "summary": "Documents the `appDir` configuration option in next.config.js, which enables the App Router. It is a legacy API, no longer needed as of Next.js 13.4.",
    "sections": [
      {
        "heading": "appDir",
        "content": "This is a legacy API and no longer recommended. It's still supported for backward compatibility.\n\nGood to know: This option is no longer needed as of Next.js 13.4. The App Router is now stable.\n\nThe…",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [
      "Next.js",
      "next.config.js",
      "appDir",
      "App Router",
      "legacy API"
    ],
    "prerequisites": [],
    "_content_hash": "2dcd8bbf716b71023b3f8b48f5f56626b93c4203793c041d367cf587f5d13ead",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/assetPrefix",
    "title": "assetPrefix",
    "type": "api",
    "summary": "Explains how to configure the `assetPrefix` option in `next.config.js` to serve static assets from a CDN.",
    "sections": [
      {
        "heading": "Set up a CDN",
        "content": "Attention: Deploying to Vercel automatically configures a global CDN for your Next.js project. You do not need to manually setup an Asset Prefix.\n\nGood to know: Next.js 9.5+ added support for a…",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "// @ts-check\nimport { PHASE_DEVELOPMENT_SERVER } from 'next/constants'\n \nexport default (phase) => {\n  const isDev = phase === PHASE_DEVELOPMENT_SERVER\n  /**\n   * @type {import('next').NextConfig}…",
            "filename": "next.config.mjs"
          },
          {
            "language": "text",
            "code": "/_next/static/chunks/4b9b41aaa062cbbfeff4add70f256968c51ece5d.4d708494b3aed70c04f0.js",
            "filename": ""
          },
          {
            "language": "text",
            "code": "https://cdn.mydomain.com/_next/static/chunks/4b9b41aaa062cbbfeff4add70f256968c51ece5d.4d708494b3aed70c04f0.js",
            "filename": ""
          }
        ],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "assetPrefix",
        "type": "string",
        "description": "The URL prefix to use for static assets when served from a CDN.",
        "default": "undefined",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "CDN",
      "assetPrefix",
      "config",
      "static assets"
    ],
    "prerequisites": [],
    "_content_hash": "3b0880163e5499ea3ef3255b164af9b772552e5582f9bdba3324635e77420044",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/authInterrupts",
    "title": "authInterrupts",
    "type": "api",
    "summary": "Reference for the experimental authInterrupts option in next.config.js, which enables the forbidden and unauthorized APIs in a Next.js application.",
    "sections": [
      {
        "heading": "authInterrupts",
        "content": "This feature is currently available in the canary channel and subject to change. Try it out by [upgrading Next.js](/docs/app/getting-started/upgrading#canary-version), and share your feedback on…",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "import type { NextConfig } from 'next'\n\nconst nextConfig: NextConfig = {\n  experimental: {\n    authInterrupts: true,\n  },\n}\n\nexport default nextConfig",
            "filename": "next.config.ts"
          }
        ],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "experimental.authInterrupts",
        "type": "boolean",
        "description": "Enables the use of the forbidden and unauthorized APIs in your application. While these functions are experimental, this option must be enabled to use them.",
        "default": "",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "next.config.js",
      "authInterrupts",
      "forbidden",
      "unauthorized",
      "experimental"
    ],
    "prerequisites": [],
    "_content_hash": "a7f0b96c1f67c9fa1c8371ba4aea92f225a71948392e71dfe03f510c74c902bb",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath",
    "title": "basePath",
    "type": "reference",
    "summary": "Explains how to use the basePath config option in next.config.js to deploy a Next.js application under a sub-path of a domain.",
    "sections": [
      {
        "heading": "basePath",
        "content": "To deploy a Next.js application under a sub-path of a domain you can use the `basePath` config option.\n\n`basePath` allows you to set a path prefix for the application. For example, to use `/docs`…",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "module.exports = {\n  basePath: '/docs',\n}",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Links",
        "content": "When linking to other pages using `next/link` and `next/router` the `basePath` will be automatically applied.\n\nFor example, using `/about` will automatically become `/docs/about` when `basePath` is…",
        "code_blocks": [
          {
            "language": "jsx",
            "code": "export default function HomePage() {\n  return (\n    <>\n      <Link href=\"/about\">About Page</Link>\n    </>\n  )\n}",
            "filename": ""
          },
          {
            "language": "html",
            "code": "<a href=\"/docs/about\">About Page</a>",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Images",
        "content": "When using the [`next/image`](/docs/app/api-reference/components/image) component, you will need to add the `basePath` in front of `src`.\n\nFor example, using `/docs/me.png` will properly serve your…",
        "code_blocks": [
          {
            "language": "jsx",
            "code": "import Image from 'next/image'\n \nfunction Home() {\n  return (\n    <>\n      <h1>My Homepage</h1>\n      <Image\n        src=\"/docs/me.png\"\n        alt=\"Picture of the author\"\n        width={500}…",
            "filename": ""
          }
        ],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "basePath",
        "type": "string",
        "description": "Path prefix for the application. Defaults to an empty string.",
        "default": "''",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "config",
      "basePath",
      "deployment",
      "sub-path"
    ],
    "prerequisites": [],
    "_content_hash": "88213ac6f8c088b9666ec9e2c53668c2ef8cfd15b40dacad50bff7d84c3824d4",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/cacheComponents",
    "title": "cacheComponents",
    "type": "api",
    "summary": "This page documents the `cacheComponents` configuration flag in Next.js, which enables component and function-level caching using the `use cache` directive, and implements Partial Prerendering as the…",
    "sections": [
      {
        "heading": "Usage",
        "content": "Cache Components enables component and function-level caching using the [`use cache`](/docs/app/api-reference/directives/use-cache) directive. Data fetching is dynamic by default, and you choose what…",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "import type { NextConfig } from 'next'\n \nconst nextConfig: NextConfig = {\n  cacheComponents: true,\n}\n \nexport default nextConfig",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Navigation with Activity",
        "content": "When `cacheComponents` is enabled, Next.js uses React's [`<Activity>`](https://react.dev/reference/react/Activity) component to preserve component state during client-side navigation.\n\nRather than…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Version History",
        "content": "| Version | Change |\n| --- | --- |\n| 16.0.0 | `cacheComponents` introduced. This flag controls the `ppr`, `useCache`, and `dynamicIO` flags as a single, unified configuration. |",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Learn more",
        "content": "[### Caching\n\nLearn how to cache data and UI in Next.js](/docs/app/getting-started/caching)[### ISR with Cache Components\n\nLearn how to prerender a subset of dynamic routes, serve App Shells for the…",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [
      "Next.js",
      "cacheComponents",
      "use cache",
      "Partial Prerendering",
      "Activity",
      "caching",
      "configuration"
    ],
    "prerequisites": [],
    "_content_hash": "4b067f9a6515338a23f2019d3a9705c11ff251bc216056888f9d2313b4145163",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/cacheHandlers",
    "title": "next.config.js: cacheHandlers | Next.js",
    "type": "api",
    "summary": "This page documents the `cacheHandlers` configuration in next.config.js, which lets you define custom cache storage implementations for `'use cache'` and `'use cache: remote'`. It covers handler…",
    "sections": [
      {
        "heading": "cacheHandlers",
        "content": "The `cacheHandlers` configuration allows you to define custom cache storage implementations for [`'use cache'`](/docs/app/api-reference/directives/use-cache) and [`'use cache:…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "When to use custom cache handlers",
        "content": "**Most applications don't need custom cache handlers.** The default in-memory cache works well in the typical use case.\n\nCustom cache handlers are for advanced scenarios where you need to either…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Usage",
        "content": "To configure custom cache handlers:\n\n- Define your cache handler in a separate file, see [examples](#examples) for implementation details.\n- Reference the file path in your Next config file",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "import type { NextConfig } from 'next'\n \nconst nextConfig: NextConfig = {\n  cacheHandlers: {\n    default: require.resolve('./cache-handlers/default-handler.js'),\n    remote:…",
            "filename": "next.config.ts"
          }
        ],
        "images": []
      },
      {
        "heading": "Handler types",
        "content": "- **`default`**: Used by the `'use cache'` directive\n- **`remote`**: Used by the `'use cache: remote'` directive\n\nIf you don't configure `cacheHandlers`, Next.js uses an in-memory LRU (Least Recently…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "API Reference",
        "content": "A cache handler must implement the [`CacheHandler`](https://github.com/vercel/next.js/blob/canary/packages/next/src/server/lib/cache-handlers/types.ts) interface with the following methods:",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "get()",
        "content": "Retrieve a cache entry for the given cache key.\n\n| Parameter | Type | Description |\n| --- | --- | --- |\n| `cacheKey` | `string` | The unique key for the cache entry. |\n| `softTags` | `string[]` |…",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "get(cacheKey: string, softTags: string[]): Promise<CacheEntry | undefined>",
            "filename": ""
          },
          {
            "language": "javascript",
            "code": "const cacheHandler = {\n  async get(cacheKey, softTags) {\n    const entry = cache.get(cacheKey)\n    if (!entry) return undefined\n \n    // Check if expired\n    const now = Date.now()\n    if (now >…",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "set()",
        "content": "Store a cache entry for the given cache key.\n\n| Parameter | Type | Description |\n| --- | --- | --- |\n| `cacheKey` | `string` | The unique key to store the entry under. |\n| `pendingEntry` |…",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "set(cacheKey: string, pendingEntry: Promise<CacheEntry>): Promise<void>",
            "filename": ""
          },
          {
            "language": "javascript",
            "code": "const cacheHandler = {\n  async set(cacheKey, pendingEntry) {\n    // Wait for the entry to be ready\n    const entry = await pendingEntry\n \n    // Store in your cache system\n    cache.set(cacheKey,…",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "refreshTags()",
        "content": "Called periodically before starting a new request to sync with external tag services.\n\nThis is useful if you're coordinating cache invalidation across multiple instances or services. For in-memory…",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "refreshTags(): Promise<void>",
            "filename": ""
          },
          {
            "language": "javascript",
            "code": "const cacheHandler = {\n  async refreshTags() {\n    // For in-memory cache, no action needed\n    // For distributed cache, sync tag state from external service\n  },\n}",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "getExpiration()",
        "content": "Get the maximum revalidation timestamp for a set of tags.\n\n| Parameter | Type | Description |\n| --- | --- | --- |\n| `tags` | `string[]` | Array of tags to check expiration for. |\n\nReturns:\n\n- `0` if…",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "getExpiration(tags: string[]): Promise<number>",
            "filename": ""
          },
          {
            "language": "javascript",
            "code": "const cacheHandler = {\n  async getExpiration(tags) {\n    // Return 0 if not tracking tag revalidation\n    return 0\n \n    // Or return the most recent revalidation timestamp\n    // return…",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "updateTags()",
        "content": "Called when tags are revalidated or expired.\n\n| Parameter | Type | Description |\n| --- | --- | --- |\n| `tags` | `string[]` | Array of tags to update. |\n| `durations` | `{ expire?: number }` |…",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "updateTags(tags: string[], durations?: { expire?: number }): Promise<void>",
            "filename": ""
          },
          {
            "language": "javascript",
            "code": "const cacheHandler = {\n  async updateTags(tags, durations) {\n    // Invalidate all cache entries with matching tags\n    for (const [key, entry] of cache.entries()) {\n      if (entry.tags.some((tag)…",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "CacheEntry Type",
        "content": "The [`CacheEntry`](https://github.com/vercel/next.js/blob/canary/packages/next/src/server/lib/cache-handlers/types.ts) object has the following structure:\n\n| Property | Type | Description |\n| --- |…",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "interface CacheEntry {\n  value: ReadableStream<Uint8Array>\n  tags: string[]\n  stale: number\n  timestamp: number\n  expire: number\n  revalidate: number\n}",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Examples",
        "content": "",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Basic in-memory cache handler",
        "content": "Here's a minimal implementation using a `Map` for storage. This example demonstrates the core concepts, but for a production-ready implementation with LRU eviction, error handling, and tag…",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "const cache = new Map()\nconst pendingSets = new Map()\n \nmodule.exports = {\n  async get(cacheKey, softTags) {\n    // Wait for any pending set operation to complete\n    const pendingPromise =…",
            "filename": "cache-handlers/memory-handler.js"
          }
        ],
        "images": []
      },
      {
        "heading": "External storage pattern",
        "content": "For durable storage like Redis or a database, you'll need to serialize the cache entries. Here's a simple Redis example:",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "const { createClient } = require('redis')\n \nconst client = createClient({ url: process.env.REDIS_URL })\nclient.connect()\n \nmodule.exports = {\n  async get(cacheKey, softTags) {\n    // Retrieve from…",
            "filename": "cache-handlers/redis-handler.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Distributed Tag Coordination",
        "content": "When running multiple Next.js instances, tag invalidation must be coordinated across instances. The default in-memory handler only tracks tags locally, so calling `revalidateTag()` on one instance…",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "const { createClient } = require('redis')\n \nconst client = createClient({ url: process.env.REDIS_URL })\nclient.connect()\n \n// Local cache of tag timestamps, synced via refreshTags\nconst…",
            "filename": "cache-handlers/distributed-tags.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Soft Tags",
        "content": "Soft tags are implicit tags that Next.js automatically generates based on the route path. For example, the route `/blog/hello` generates soft tags for `/`, `/blog`, `/blog/hello`, and their…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Handling Streams",
        "content": "The `CacheEntry.value` is a [`ReadableStream<Uint8Array>`](https://developer.mozilla.org/docs/Web/API/ReadableStream). When implementing a cache handler that stores entries externally, keep in…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Error Handling",
        "content": "Cache operations should be implemented defensively:\n\n- **`set()` failure**: the response is still served to the user because `set()` is called asynchronously after the response stream is already…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Platform Support",
        "content": "| Deployment Option | Supported |\n| --- | --- |\n| [Node.js server](/docs/app/getting-started/deploying#nodejs-server) | Yes |\n| [Docker container](/docs/app/getting-started/deploying#docker) | Yes…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Version History",
        "content": "| Version | Changes |\n| --- | --- |\n| `v16.0.0` | `cacheHandlers` introduced. |",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Related",
        "content": "View related API references.\n\n- [use cache](/docs/app/api-reference/directives/use-cache) — Learn how to use the \"use cache\" directive to cache data in your Next.js application.\n- [use cache:…",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "cacheKey",
        "type": "string",
        "description": "The unique key for the cache entry.",
        "default": "",
        "required": true
      },
      {
        "name": "softTags",
        "type": "string[]",
        "description": "Implicit tags derived from the route path. See Soft Tags for how to use them.",
        "default": "",
        "required": true
      },
      {
        "name": "cacheKey",
        "type": "string",
        "description": "The unique key to store the entry under.",
        "default": "",
        "required": true
      },
      {
        "name": "pendingEntry",
        "type": "Promise<CacheEntry>",
        "description": "A promise that resolves to the cache entry.",
        "default": "",
        "required": true
      },
      {
        "name": "tags",
        "type": "string[]",
        "description": "Array of tags to check expiration for.",
        "default": "",
        "required": true
      },
      {
        "name": "tags",
        "type": "string[]",
        "description": "Array of tags to update.",
        "default": "",
        "required": true
      },
      {
        "name": "durations",
        "type": "{ expire?: number }",
        "description": "Optional expiration duration in seconds.",
        "default": "",
        "required": false
      },
      {
        "name": "value",
        "type": "ReadableStream<Uint8Array>",
        "description": "The cached data as a stream.",
        "default": "",
        "required": true
      },
      {
        "name": "tags",
        "type": "string[]",
        "description": "Cache tags (excluding soft tags).",
        "default": "",
        "required": true
      },
      {
        "name": "stale",
        "type": "number",
        "description": "Duration in seconds for client-side staleness.",
        "default": "",
        "required": true
      },
      {
        "name": "timestamp",
        "type": "number",
        "description": "When the entry was created (timestamp in milliseconds).",
        "default": "",
        "required": true
      },
      {
        "name": "expire",
        "type": "number",
        "description": "How long the entry is allowed to be used (in seconds).",
        "default": "",
        "required": true
      },
      {
        "name": "revalidate",
        "type": "number",
        "description": "How long until the entry should be revalidated (in seconds).",
        "default": "",
        "required": true
      }
    ],
    "see_also": [],
    "tags": [
      "cacheHandlers",
      "Next.js",
      "next.config.js",
      "use cache",
      "cache",
      "Redis",
      "ReadableStream",
      "revalidation",
      "soft tags",
      "LRU",
      "in-memory cache",
      "distributed cache",
      "cache handler"
    ],
    "prerequisites": [],
    "_content_hash": "53533c69888890bf28346c74fc964747a5be9b320ce25c82c8ca31724f51813e",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/cacheLife",
    "title": "next.config.js: cacheLife | Next.js",
    "type": "api",
    "summary": "Reference for the cacheLife option in next.config.js, which lets you define custom cache profiles for use with the cacheLife function and the use cache directive.",
    "sections": [
      {
        "heading": "cacheLife",
        "content": "The `cacheLife` option allows you to define **custom cache profiles** when using the [`cacheLife`](/docs/app/api-reference/functions/cacheLife) function inside components or functions, and within the…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Usage",
        "content": "To define a profile, enable the [`cacheComponents` flag](/docs/app/api-reference/config/next-config-js/cacheComponents) and add the cache profile in the `cacheLife` object in the `next.config.js`…",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "import type { NextConfig } from 'next'\n \nconst nextConfig: NextConfig = {\n  cacheComponents: true,\n  cacheLife: {\n    blog: {\n      stale: 3600, // 1 hour\n      revalidate: 900, // 15 minutes…",
            "filename": "next.config.ts"
          },
          {
            "language": "typescript",
            "code": "import { cacheLife } from 'next/cache'\n \nexport async function getCachedData() {\n  'use cache'\n  cacheLife('blog')\n  const data = await fetch('/api/data')\n  return data\n}",
            "filename": "app/actions.ts"
          }
        ],
        "images": []
      },
      {
        "heading": "Reference",
        "content": "The configuration object has key values with the following format:\n\n| **Property** | **Value** | **Description** | **Requirement** |\n| --- | --- | --- | --- |\n| `stale` | `number` | Duration the…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Related",
        "content": "View related API references.\n\n- [use cache](/docs/app/api-reference/directives/use-cache) — Learn how to use the \"use cache\" directive to cache data in your Next.js application.\n-…",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "stale",
        "type": "number",
        "description": "Duration the client should cache a value without checking the server.",
        "default": "",
        "required": false
      },
      {
        "name": "revalidate",
        "type": "number",
        "description": "Frequency at which the cache should refresh on the server; stale values may be served while revalidating.",
        "default": "",
        "required": false
      },
      {
        "name": "expire",
        "type": "number",
        "description": "Maximum duration for which a value can remain stale before switching to dynamic. Must be longer than `revalidate`.",
        "default": "",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "next.config.js",
      "cacheLife",
      "use cache",
      "cacheComponents",
      "cache profiles",
      "caching"
    ],
    "prerequisites": [],
    "_content_hash": "24aa1936f1570b41e310f09ea52f7d50aed150860b172e6b64a358883f147b34",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/compress",
    "title": "compress",
    "type": "api",
    "summary": "This page describes the `compress` option in `next.config.js`, which controls gzip compression for rendered content and static files when using `next start` or a custom server.",
    "sections": [
      {
        "heading": "compress",
        "content": "By default, Next.js uses `gzip` to compress rendered content and static files when using `next start` or a custom server. This is an optimization for applications that do not have compression…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Disabling compression",
        "content": "To disable **compression**, set the `compress` config option to `false`:\n\nWe **do not recommend disabling compression** unless you have compression configured on your server, as compression reduces…",
        "code_blocks": [
          {
            "language": "",
            "code": "module.exports = {\n  compress: false,\n}",
            "filename": "next.config.js"
          }
        ],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "compress",
        "type": "boolean",
        "description": "Enables or disables gzip compression for rendered content and static files when using `next start` or a custom server. Defaults to `true` unless compression is already configured via a custom server.",
        "default": "true",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "next.config.js",
      "compress",
      "gzip",
      "compression",
      "brotli",
      "nginx"
    ],
    "prerequisites": [],
    "_content_hash": "7fdc5d072c62d6e960a0f860c296125c1beade653a88ebb3ef2d03346910c4be",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/crossOrigin",
    "title": "crossOrigin",
    "type": "api",
    "summary": "Use the `crossOrigin` option to add a `crossOrigin` attribute in all `<script>` tags generated by the `next/script` component, and define how cross-origin requests should be handled.",
    "sections": [
      {
        "heading": "crossOrigin",
        "content": "Use the `crossOrigin` option to add a [`crossOrigin` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) in all `<script>` tags generated by the…",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "module.exports = {\n  crossOrigin: 'anonymous',\n}",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Options",
        "content": "- `'anonymous'`: Adds [`crossOrigin=\"anonymous\"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin#anonymous) attribute.\n\n- `'use-credentials'`: Adds…",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "crossOrigin",
        "type": "string",
        "description": "Adds a crossOrigin attribute to all script tags generated by next/script. Can be 'anonymous' or 'use-credentials'.",
        "default": "",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "config",
      "crossOrigin",
      "script",
      "CORS"
    ],
    "prerequisites": [],
    "_content_hash": "a061f908ed19d61f56b22f6c9d63474447bb7a389d08d0c031c0f1df5674f25b",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/cssChunking",
    "title": "next.config.js: cssChunking",
    "type": "reference",
    "summary": "This page documents the experimental `cssChunking` option in Next.js configuration, which controls how CSS files are split and re-ordered into chunks to improve performance. It covers the available…",
    "sections": [
      {
        "heading": "cssChunking",
        "content": "This feature is currently experimental and subject to change, it's not recommended for production. Try it out and share your feedback on GitHub.\n\nCSS Chunking is a strategy used to improve the…",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "import type { NextConfig } from 'next'\n \nconst nextConfig = {\n  experimental: {\n    cssChunking: true, // default\n  },\n} satisfies NextConfig\n \nexport default nextConfig",
            "filename": "next.config.ts"
          }
        ],
        "images": []
      },
      {
        "heading": "Options",
        "content": "- **`true` (default)** (**webpack and Turbopack**): Next.js will try to merge CSS files whenever possible, determining explicit and implicit dependencies between files from import order to reduce the…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Choosing a strategy",
        "content": "For most applications, the default (`true`) is the right choice in either bundler: it merges CSS to make fewer requests. Reach for another strategy only for a specific reason.\n\nIn Turbopack, that…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Debugging what a route actually uses",
        "content": "While some unused CSS is acceptable, and most apps do not need to change anything, it is worth keeping render-blocking CSS in check. Lighthouse flags this as a **Reduce unused CSS** opportunity with…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Balancing requests and grouping",
        "content": "The `graph` strategy groups CSS into shared chunks to cut requests. Turn it on with the string form, which uses the default tuning:",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "import type { NextConfig } from 'next'\n \nconst nextConfig = {\n  experimental: {\n    cssChunking: 'graph',\n  },\n} satisfies NextConfig\n \nexport default nextConfig",
            "filename": "next.config.ts"
          }
        ],
        "images": []
      },
      {
        "heading": "Balancing requests and grouping (continued)",
        "content": "To shift that balance, pass an object instead. Both `requestCost` and `weightDistribution` are optional, so include only the one you want to change:",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "import type { NextConfig } from 'next'\n \nconst nextConfig = {\n  experimental: {\n    cssChunking: {\n      type: 'graph',\n      requestCost: 100000,\n      weightDistribution: 0.1,\n    },\n  },\n}…",
            "filename": "next.config.ts"
          }
        ],
        "images": []
      },
      {
        "heading": "Balancing requests and grouping (options)",
        "content": "- **`requestCost`** (default `20000`): the estimated cost, in bytes, of each additional CSS request. Larger values bias toward fewer, larger shared chunks, and fewer requests overall.\n\n-…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "How `graph` decides what to merge",
        "content": "Merging CSS into shared chunks is what the default (`true`) already does; `graph` just lets you control where it draws the line between merging and splitting.\n\nTake two routes that share a…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Graph algorithm overview",
        "content": "At a high level, the algorithm works with individual CSS files. It starts from the ordered list of CSS each route imports:\n\n```\n/dashboard  → [reset.css, theme.css, layout.css,…",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [
      "Next.js",
      "CSS",
      "chunking",
      "performance",
      "webpack",
      "Turbopack",
      "experimental"
    ],
    "prerequisites": [],
    "_content_hash": "81637ef84d90dc41af447537794c2e8859be598df6f9bee804ff7ce679e806f7",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/deploymentId",
    "title": "next.config.js: deploymentId",
    "type": "reference",
    "summary": "Documentation for the Next.js `deploymentId` configuration option, which sets a deployment identifier for version skew protection and cache busting during rolling deployments. Covers configuration,…",
    "sections": [
      {
        "heading": "deploymentId",
        "content": "The `deploymentId` option allows you to set an identifier for your deployment. This identifier is used for [version skew](https://nextjs.org/docs/app/guides/self-hosting#version-skew) protection and…",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "module.exports = {\n  deploymentId: 'my-deployment-id',\n}",
            "filename": "next.config.js"
          },
          {
            "language": "bash",
            "code": "NEXT_DEPLOYMENT_ID=my-deployment-id next build",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "How it works",
        "content": "When a `deploymentId` is configured, Next.js:\n\n- Appends `?dpl=<deploymentId>` to static asset URLs (JavaScript, CSS, images)\n- Adds an `x-deployment-id` header to client-side navigation requests\n-…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Use cases",
        "content": "",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Rolling deployments",
        "content": "During a rolling deployment, some server instances may be running the new version while others are still running the old version. Without a deployment ID, users might receive a mix of old and new…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Multi-server environments",
        "content": "When running multiple instances of your Next.js application behind a load balancer, all instances for the same deployment should use the same `deploymentId`.",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "module.exports = {\n  deploymentId: process.env.DEPLOYMENT_VERSION || process.env.GIT_SHA,\n}",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Version History",
        "content": "| Version | Changes |\n| --- | --- |\n| `v14.1.4` | `deploymentId` stabilized as top-level config option. |\n| `v13.4.10` | `experimental.deploymentId` introduced. |",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Related",
        "content": "- [Self-Hosting - Version Skew](https://nextjs.org/docs/app/guides/self-hosting#version-skew)\n- [generateBuildId](https://nextjs.org/docs/app/api-reference/config/next-config-js/generateBuildId)",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [
      "Next.js",
      "next.config.js",
      "deploymentId",
      "NEXT_DEPLOYMENT_ID",
      "version skew",
      "cache busting",
      "self-hosting",
      "rolling deployments"
    ],
    "prerequisites": [],
    "_content_hash": "34fc0368df11fb3b94fafda8d882e057f5782a427238a2148494060975c3325c",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/devIndicators",
    "title": "devIndicators",
    "type": "api",
    "summary": "Configuration for the on-screen development indicator in Next.js, allowing you to set its position or hide it entirely.",
    "sections": [
      {
        "heading": "devIndicators",
        "content": "`devIndicators` allows you to configure the on-screen indicator that gives context about the current route you're viewing during development. Open `next.config.ts` and set `position` to choose where…",
        "code_blocks": [
          {
            "language": "ts",
            "code": "import type { NextConfig } from 'next'\n \nconst nextConfig: NextConfig = {\n  devIndicators: {\n    position: 'bottom-right', // 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'\n  },\n}\n \nexport…",
            "filename": "next.config.ts"
          },
          {
            "language": "ts",
            "code": "const nextConfig: NextConfig = {\n  devIndicators: false,\n}\n \nexport default nextConfig",
            "filename": "next.config.ts"
          }
        ],
        "images": []
      },
      {
        "heading": "Troubleshooting",
        "content": "",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Indicator not marking a route as static",
        "content": "If you expect a route to be static and the indicator has marked it as dynamic, it's likely the route has opted out of prerendering. You can confirm if a route is…",
        "code_blocks": [
          {
            "language": "text",
            "code": "Route (app)\n┌ ○ /_not-found\n└ ƒ /products/[id]\n \n○  (Static)   prerendered as static content\nƒ  (Dynamic)  server-rendered on demand",
            "filename": "Build Output"
          }
        ],
        "images": []
      },
      {
        "heading": "Version History",
        "content": "| Version | Changes |\n| --- | --- |\n| `v16.0.0` | `appIsrStatus`, `buildActivity`, and `buildActivityPosition` options have been removed. |\n| `v15.2.0` | Improved on-screen indicator with new…",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "devIndicators",
        "type": "object | false",
        "description": "Configuration for the on-screen development indicator. Set to `false` to hide it entirely.",
        "default": "",
        "required": false
      },
      {
        "name": "position",
        "type": "'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'",
        "description": "Position of the indicator on the screen.",
        "default": "'bottom-left'",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "config",
      "devIndicators",
      "development",
      "indicator"
    ],
    "prerequisites": [],
    "_content_hash": "15ade31527c18a56b67a4bfb94f78df53f989b6c070205bfa1f9cc1030fb4107",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/distDir",
    "title": "distDir",
    "type": "reference",
    "summary": "Documentation for the distDir configuration option in next.config.js, which lets you specify a custom build directory instead of the default .next folder.",
    "sections": [
      {
        "heading": "distDir",
        "content": "You can specify a name to use for a custom build directory to use instead of `.next`.\n\nOpen `next.config.js` and add the `distDir` config:\n\nNow if you run `next build` Next.js will use `build`…",
        "code_blocks": [
          {
            "language": "js",
            "code": "module.exports = {\n  distDir: 'build',\n}",
            "filename": "next.config.js"
          }
        ],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [
      "Next.js",
      "next.config.js",
      "distDir",
      "build directory",
      "configuration"
    ],
    "prerequisites": [],
    "_content_hash": "7ac801620ed4124b8fea3c5ae9767df71b6e064dfe1a9bb187533c61a64e2f31",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/env",
    "title": "env",
    "type": "api",
    "summary": "Describes the legacy `env` config option in next.config.js for adding environment variables to the JavaScript bundle, noting it's no longer recommended.",
    "sections": [
      {
        "heading": "env",
        "content": "This is a legacy API and no longer recommended. It's still supported for backward compatibility.\n\n> Since the release of [Next.js 9.4](https://nextjs.org/blog/next-9-4) we now have a more intuitive…",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "module.exports = {\n  env: {\n    customKey: 'my-value',\n  },\n}",
            "filename": "next.config.js"
          },
          {
            "language": "jsx",
            "code": "function Page() {\n  return <h1>The value of customKey is: {process.env.customKey}</h1>\n}\n \nexport default Page",
            "filename": ""
          },
          {
            "language": "jsx",
            "code": "return <h1>The value of customKey is: {process.env.customKey}</h1>",
            "filename": ""
          },
          {
            "language": "jsx",
            "code": "return <h1>The value of customKey is: {'my-value'}</h1>",
            "filename": ""
          }
        ],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [
      "next.js",
      "environment variables",
      "config",
      "legacy"
    ],
    "prerequisites": [],
    "_content_hash": "d798ef0f85dc58ac2ac2cf864ef1e1a2bb4752b7f7e37e536da88d80f96004c5",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/expireTime",
    "title": "expireTime",
    "type": "api",
    "summary": "Describes the `expireTime` configuration option in Next.js, which sets a custom stale-while-revalidate expire time for CDNs in the Cache-Control header for ISR pages.",
    "sections": [
      {
        "heading": "expireTime",
        "content": "You can specify a custom `stale-while-revalidate` expire time for CDNs to consume in the `Cache-Control` header for ISR enabled pages.\n\nOpen `next.config.js` and add the `expireTime` config:\n\nNow…",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "module.exports = {\n  // one hour in seconds\n  expireTime: 3600,\n}",
            "filename": "next.config.js"
          }
        ],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "expireTime",
        "type": "number",
        "description": "Custom stale-while-revalidate expire time in seconds for CDNs to consume in the Cache-Control header for ISR enabled pages.",
        "default": "",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "next.js",
      "config",
      "expireTime",
      "ISR",
      "Cache-Control",
      "stale-while-revalidate"
    ],
    "prerequisites": [],
    "_content_hash": "e18288b84bc3a987c4907d9d315d734cd3bc4f5acc93f2667e50a775a036a8d1",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/exportPathMap",
    "title": "next.config.js: exportPathMap | Next.js",
    "type": "reference",
    "summary": "This page documents exportPathMap, a legacy Next.js configuration option for specifying a mapping of request paths to page destinations during static export.",
    "sections": [
      {
        "heading": "exportPathMap",
        "content": "This is a legacy API and no longer recommended. It's still supported for backward compatibility.\n\n> This feature is exclusive to `next export` and currently **deprecated** in favor of…",
        "code_blocks": [
          {
            "language": "js",
            "code": "module.exports = {\n  exportPathMap: async function (\n    defaultPathMap,\n    { dev, dir, outDir, distDir, buildId }\n  ) {\n    return {\n      '/': { page: '/' },\n      '/about': { page: '/about' },…",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Adding a trailing slash",
        "content": "It is possible to configure Next.js to export pages as `index.html` files and require trailing slashes, `/about` becomes `/about/index.html` and is routable via `/about/`. This was the default…",
        "code_blocks": [
          {
            "language": "js",
            "code": "module.exports = {\n  trailingSlash: true,\n}",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Customizing the output directory",
        "content": "[`next export`](/docs/app/guides/static-exports) will use `out` as the default output directory, you can customize this using the `-o` argument, like so:\n\n```terminal\nnext export -o outdir\n```\n\n>…",
        "code_blocks": [
          {
            "language": "bash",
            "code": "next export -o outdir",
            "filename": ""
          }
        ],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [
      "Next.js",
      "exportPathMap",
      "next.config.js",
      "next export",
      "static export",
      "getStaticPaths",
      "generateStaticParams"
    ],
    "prerequisites": [],
    "_content_hash": "5ca9538752c78cc2122c615611a569c87c72686ed6386478e59fffd4be0f6898",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/generateBuildId",
    "title": "generateBuildId",
    "type": "api",
    "summary": "Explains how to use the generateBuildId option in next.config.js to generate a consistent build ID for your Next.js application.",
    "sections": [
      {
        "heading": "generateBuildId",
        "content": "Next.js generates an ID during `next build` to identify which version of your application is being served. The same build should be used and boot up multiple containers.\n\nIf you are rebuilding for…",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "module.exports = {\n  generateBuildId: async () => {\n    // This could be anything, using the latest git hash\n    return process.env.GIT_HASH\n  },\n}",
            "filename": "next.config.js"
          }
        ],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [
      "Next.js",
      "config",
      "build ID",
      "generateBuildId"
    ],
    "prerequisites": [],
    "_content_hash": "569739b3f3aef5e52761c4098fd5d72b82ca0d8b23f0a8766d35a1f778637bae",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/generateEtags",
    "title": "generateEtags",
    "type": "api",
    "summary": "This page describes the `generateEtags` configuration option in `next.config.js`, which controls whether Next.js generates ETags for every page. It shows how to disable ETag generation for HTML pages.",
    "sections": [
      {
        "heading": "generateEtags",
        "content": "Next.js will generate [etags](https://en.wikipedia.org/wiki/HTTP_ETag) for every page by default. You may want to disable etag generation for HTML pages depending on your cache strategy.\n\nOpen…",
        "code_blocks": [
          {
            "language": "js",
            "code": "module.exports = {\n  generateEtags: false,\n}",
            "filename": "next.config.js"
          }
        ],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "generateEtags",
        "type": "boolean",
        "description": "When set to false, disables ETag generation for HTML pages. Defaults to true.",
        "default": "true",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "next.config.js",
      "ETag",
      "HTTP caching",
      "configuration"
    ],
    "prerequisites": [],
    "_content_hash": "6b39187acd571a410ae30dc2f8ac7532913d37120a21f129816d74e07256a344",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/headers",
    "title": "next.config.js: headers",
    "type": "api",
    "summary": "This page explains how to set custom HTTP headers on responses in Next.js using the `headers` key in `next.config.js`, covering path matching, regex, header/cookie/query matching, basePath/i18n…",
    "sections": [
      {
        "heading": "headers",
        "content": "Headers allow you to set custom HTTP headers on the response to an incoming request on a given path.\n\nTo set custom HTTP headers you can use the `headers` key in `next.config.js`:\n\n`headers` can be…",
        "code_blocks": [
          {
            "language": "",
            "code": "module.exports = {\n  headers() {\n    return [\n      {\n        source: '/about',\n        headers: [\n          {\n            key: 'x-custom-header',\n            value: 'my custom header value',…",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Header Overriding Behavior",
        "content": "If two headers match the same path and set the same header key, the last header key will override the first. Using the below headers, the path `/hello` will result in the header `x-hello` being…",
        "code_blocks": [
          {
            "language": "",
            "code": "module.exports = {\n  headers() {\n    return [\n      {\n        source: '/:path*',\n        headers: [\n          {\n            key: 'x-hello',\n            value: 'there',\n          },\n        ],…",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Path Matching",
        "content": "Path matches are allowed, for example `/blog/:slug` will match `/blog/first-post` (no nested paths):\n\nThe pattern `/blog/:slug` matches `/blog/first-post` and `/blog/post-1` but not a nested path…",
        "code_blocks": [
          {
            "language": "",
            "code": "module.exports = {\n  headers() {\n    return [\n      {\n        source: '/blog/:slug',\n        headers: [\n          {\n            key: 'x-slug',\n            value: ':slug', // Matched parameters can be…",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Wildcard Path Matching",
        "content": "To match a wildcard path you can use `*` after a parameter, for example `/blog/:slug*` will match `/blog/a/b/c/d/hello-world`:",
        "code_blocks": [
          {
            "language": "",
            "code": "module.exports = {\n  headers() {\n    return [\n      {\n        source: '/blog/:slug*',\n        headers: [\n          {\n            key: 'x-slug',\n            value: ':slug*', // Matched parameters can…",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Regex Path Matching",
        "content": "To match a regex path you can wrap the regex in parenthesis after a parameter, for example `/blog/:slug(\\d{1,})` will match `/blog/123` but not `/blog/abc`:\n\nThe following characters `(`, `)`, `{`,…",
        "code_blocks": [
          {
            "language": "",
            "code": "module.exports = {\n  headers() {\n    return [\n      {\n        source: '/blog/:post(\\\\d{1,})',\n        headers: [\n          {\n            key: 'x-post',\n            value: ':post',\n          },…",
            "filename": "next.config.js"
          },
          {
            "language": "",
            "code": "module.exports = {\n  headers() {\n    return [\n      {\n        // this will match `/english(default)/something` being requested\n        source: '/english\\\\(default\\\\)/:slug',\n        headers: […",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Header, Cookie, and Query Matching",
        "content": "To only apply a header when header, cookie, or query values also match the `has` field or don't match the `missing` field can be used. Both the `source` and all `has` items must match and all…",
        "code_blocks": [
          {
            "language": "",
            "code": "module.exports = {\n  headers() {\n    return [\n      // if the header `x-add-header` is present,\n      // the `x-another-header` header will be applied\n      {\n        source: '/:path*',\n        has:…",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Headers with basePath support",
        "content": "When leveraging [`basePath` support](/docs/app/api-reference/config/next-config-js/basePath) with headers each `source` is automatically prefixed with the `basePath` unless you add `basePath: false`…",
        "code_blocks": [
          {
            "language": "",
            "code": "module.exports = {\n  basePath: '/docs',\n \n  headers() {\n    return [\n      {\n        source: '/with-basePath', // becomes /docs/with-basePath\n        headers: [\n          {\n            key:…",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Headers with i18n support",
        "content": "When leveraging [`i18n` support](/docs/app/guides/internationalization) with headers each `source` is automatically prefixed to handle the configured `locales` unless you add `locale: false` to the…",
        "code_blocks": [
          {
            "language": "",
            "code": "module.exports = {\n  i18n: {\n    locales: ['en', 'fr', 'de'],\n    defaultLocale: 'en',\n  },\n \n  headers() {\n    return [\n      {\n        source: '/with-locale', // automatically handles all locales…",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Cache-Control",
        "content": "Next.js sets the `Cache-Control` header of `public, max-age=31536000, immutable` for truly immutable assets. It cannot be overridden. These immutable files contain a SHA-hash in the file name, so…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Options",
        "content": "",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "CORS",
        "content": "[Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/docs/Web/HTTP/CORS) is a security feature that allows you to control which sites can access your resources. You can set the…",
        "code_blocks": [
          {
            "language": "",
            "code": "headers() {\n    return [\n      {\n        source: \"/api/:path*\",\n        headers: [\n          {\n            key: \"Access-Control-Allow-Origin\",\n            value: \"*\", // Set your origin\n          },…",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "X-DNS-Prefetch-Control",
        "content": "[This header](https://developer.mozilla.org/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control) controls DNS prefetching, allowing browsers to proactively perform domain name resolution on external links,…",
        "code_blocks": [
          {
            "language": "",
            "code": "{\n  key: 'X-DNS-Prefetch-Control',\n  value: 'on'\n}",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Strict-Transport-Security",
        "content": "[This header](https://developer.mozilla.org/docs/Web/HTTP/Headers/Strict-Transport-Security) informs browsers it should only be accessed using HTTPS, instead of using HTTP. Using the configuration…",
        "code_blocks": [
          {
            "language": "",
            "code": "{\n  key: 'Strict-Transport-Security',\n  value: 'max-age=63072000; includeSubDomains; preload'\n}",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "X-Frame-Options",
        "content": "[This header](https://developer.mozilla.org/docs/Web/HTTP/Headers/X-Frame-Options) indicates whether the site should be allowed to be displayed within an `iframe`. This can prevent against…",
        "code_blocks": [
          {
            "language": "",
            "code": "{\n  key: 'X-Frame-Options',\n  value: 'SAMEORIGIN'\n}",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Permissions-Policy",
        "content": "[This header](https://developer.mozilla.org/docs/Web/HTTP/Headers/Permissions-Policy) allows you to control which features and APIs can be used in the browser. It was previously named…",
        "code_blocks": [
          {
            "language": "",
            "code": "{\n  key: 'Permissions-Policy',\n  value: 'camera=(), microphone=(), geolocation=(), browsing-topics=()'\n}",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "X-Content-Type-Options",
        "content": "[This header](https://developer.mozilla.org/docs/Web/HTTP/Headers/X-Content-Type-Options) prevents the browser from attempting to guess the type of content if the `Content-Type` header is not…",
        "code_blocks": [
          {
            "language": "",
            "code": "{\n  key: 'X-Content-Type-Options',\n  value: 'nosniff'\n}",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Referrer-Policy",
        "content": "[This header](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referrer-Policy) controls how much information the browser includes when navigating from the current website (origin) to another.",
        "code_blocks": [
          {
            "language": "",
            "code": "{\n  key: 'Referrer-Policy',\n  value: 'origin-when-cross-origin'\n}",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Content-Security-Policy",
        "content": "Learn more about adding a [Content Security Policy](/docs/app/guides/content-security-policy) to your application.",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Version History",
        "content": "| Version | Changes |\n| --- | --- |\n| `v13.3.0` | `missing` added. |\n| `v10.2.0` | `has` added. |\n| `v9.5.0` | Headers added. |",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "source",
        "type": "string",
        "description": "The incoming request path pattern.",
        "default": "",
        "required": true
      },
      {
        "name": "headers",
        "type": "Array<{ key: string, value: string }>",
        "description": "An array of response header objects, with `key` and `value` properties.",
        "default": "",
        "required": true
      },
      {
        "name": "basePath",
        "type": "false | undefined",
        "description": "If false the basePath won't be included when matching, can be used for external rewrites only.",
        "default": "undefined",
        "required": false
      },
      {
        "name": "locale",
        "type": "false | undefined",
        "description": "Whether the locale should not be included when matching.",
        "default": "undefined",
        "required": false
      },
      {
        "name": "has",
        "type": "Array<{ type: 'header' | 'cookie' | 'host' | 'query', key: string, value?: string | undefined }>",
        "description": "An array of has objects with the `type`, `key` and `value` properties. All must match for the header to be applied.",
        "default": "",
        "required": false
      },
      {
        "name": "missing",
        "type": "Array<{ type: 'header' | 'cookie' | 'host' | 'query', key: string, value?: string | undefined }>",
        "description": "An array of missing objects with the `type`, `key` and `value` properties. All must not match for the header to be applied.",
        "default": "",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "next.config.js",
      "headers",
      "HTTP headers",
      "path-to-regexp",
      "i18n",
      "basePath",
      "CORS",
      "Content Security Policy",
      "Security Headers",
      "Cache-Control"
    ],
    "prerequisites": [],
    "_content_hash": "de70ccc5cebb0ab496028a27f07125c3b4d612630d2879882e69663ff550d04b",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/htmlLimitedBots",
    "title": "htmlLimitedBots",
    "type": "api",
    "summary": "The `htmlLimitedBots` config allows you to specify a list of user agents that should receive blocking metadata instead of streaming metadata in Next.js.",
    "sections": [
      {
        "heading": "htmlLimitedBots",
        "content": "The `htmlLimitedBots` config allows you to specify a list of user agents that should receive blocking metadata instead of [streaming…",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "import type { NextConfig } from 'next'\n \nconst config: NextConfig = {\n  htmlLimitedBots: /MySpecialBot|MyAnotherSpecialBot|SimpleCrawler/,\n}\n \nexport default config",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Default list",
        "content": "Next.js includes a default list of HTML limited bots, including:\n\n- Google crawlers (e.g. Mediapartners-Google, AdsBot-Google, Google-PageRenderer)\n- Bingbot\n- Twitterbot\n- Slackbot\n\nSee the full…",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "const config: NextConfig = {\n  htmlLimitedBots: /MySpecialBot|MyAnotherSpecialBot|SimpleCrawler/,\n}\n \nexport default config",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Disabling",
        "content": "To fully disable streaming metadata:",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "import type { NextConfig } from 'next'\n \nconst config: NextConfig = {\n  htmlLimitedBots: /.*/,\n}\n \nexport default config",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Version History",
        "content": "| Version | Changes |\n| --- | --- |\n| 15.2.0 | `htmlLimitedBots` option introduced. |",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [
      "next.config.js",
      "htmlLimitedBots",
      "metadata",
      "streaming metadata",
      "bots",
      "user agents",
      "Next.js"
    ],
    "prerequisites": [],
    "_content_hash": "c9d7eda3e4a5a01ecad822a3a37f3c75adf7ea2bc4931369b96a048e44c76b7f",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/httpAgentOptions",
    "title": "httpAgentOptions",
    "type": "reference",
    "summary": "Explains the httpAgentOptions configuration in next.config.js, which controls HTTP Keep-Alive behavior for server-side fetch() calls. Shows how to disable Keep-Alive by setting keepAlive to false.",
    "sections": [
      {
        "heading": "httpAgentOptions",
        "content": "In Node.js versions prior to 18, Next.js automatically polyfills `fetch()` with [undici](/docs/architecture/supported-browsers#polyfills) and enables [HTTP…",
        "code_blocks": [
          {
            "language": "js",
            "code": "module.exports = {\n  httpAgentOptions: {\n    keepAlive: false,\n  },\n}",
            "filename": "next.config.js"
          }
        ],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "keepAlive",
        "type": "boolean",
        "description": "When set to false, disables HTTP Keep-Alive for all fetch() calls on the server-side.",
        "default": "True",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "next.config.js",
      "httpAgentOptions",
      "HTTP Keep-Alive",
      "fetch",
      "undici",
      "Node.js"
    ],
    "prerequisites": [],
    "_content_hash": "e54f4e541f0697bedf654141b6814a9fc0d32e454c8e7343995eaa217013370d",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/images",
    "title": "next.config.js: images",
    "type": "reference",
    "summary": "This page explains how to configure the `images` option in `next.config.js` to use a custom image loader for cloud providers, including example loader implementations for various providers.",
    "sections": [
      {
        "heading": "images",
        "content": "If you want to use a cloud provider to optimize images instead of using the Next.js built-in Image Optimization API, you can configure `next.config.js` with the following:\n\nThis `loaderFile` must…",
        "code_blocks": [
          {
            "language": "",
            "code": "module.exports = {\n  images: {\n    loader: 'custom',\n    loaderFile: './my/image/loader.js',\n  },\n}",
            "filename": "next.config.js"
          },
          {
            "language": "",
            "code": "'use client'\n \nexport default function myImageLoader({ src, width, quality }) {\n  return `https://example.com/${src}?w=${width}&q=${quality || 75}`\n}",
            "filename": "my/image/loader.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Example Loader Configuration",
        "content": "",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Akamai",
        "content": "",
        "code_blocks": [
          {
            "language": "",
            "code": "// Docs: https://techdocs.akamai.com/ivm/reference/test-images-on-demand\nexport default function akamaiLoader({ src, width, quality }) {\n  return `https://example.com/${src}?imwidth=${width}`\n}",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "AWS CloudFront",
        "content": "",
        "code_blocks": [
          {
            "language": "",
            "code": "// Docs: https://aws.amazon.com/developer/application-security-performance/articles/image-optimization\nexport default function cloudfrontLoader({ src, width, quality }) {\n  const url = new…",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Cloudinary",
        "content": "",
        "code_blocks": [
          {
            "language": "",
            "code": "// Demo: https://res.cloudinary.com/demo/image/upload/w_300,c_limit,q_auto/turtles.jpg\nexport default function cloudinaryLoader({ src, width, quality }) {\n  const params = ['f_auto', 'c_limit',…",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Cloudflare",
        "content": "",
        "code_blocks": [
          {
            "language": "",
            "code": "// Docs: https://developers.cloudflare.com/images/transform-images\nexport default function cloudflareLoader({ src, width, quality }) {\n  const params = [`width=${width}`, `quality=${quality || 75}`,…",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Contentful",
        "content": "",
        "code_blocks": [
          {
            "language": "",
            "code": "// Docs: https://www.contentful.com/developers/docs/references/images-api/\nexport default function contentfulLoader({ src, width, quality }) {\n  const url = new URL(`https://example.com${src}`)…",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Fastly",
        "content": "",
        "code_blocks": [
          {
            "language": "",
            "code": "// Docs: https://developer.fastly.com/reference/io/\nexport default function fastlyLoader({ src, width, quality }) {\n  const url = new URL(`https://example.com${src}`)\n  url.searchParams.set('auto',…",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Gumlet",
        "content": "",
        "code_blocks": [
          {
            "language": "",
            "code": "// Docs: https://docs.gumlet.com/reference/image-transform-size\nexport default function gumletLoader({ src, width, quality }) {\n  const url = new URL(`https://example.com${src}`)…",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "ImageEngine",
        "content": "",
        "code_blocks": [
          {
            "language": "",
            "code": "// Docs: https://support.imageengine.io/hc/en-us/articles/360058880672-Directives\nexport default function imageengineLoader({ src, width, quality }) {\n  const compression = 100 - (quality || 50)…",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Imgix",
        "content": "",
        "code_blocks": [
          {
            "language": "",
            "code": "// Demo: https://static.imgix.net/daisy.png?format=auto&fit=max&w=300\nexport default function imgixLoader({ src, width, quality }) {\n  const url = new URL(`https://example.com${src}`)\n  const params…",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "PixelBin",
        "content": "",
        "code_blocks": [
          {
            "language": "",
            "code": "// Doc (Resize): https://www.pixelbin.io/docs/transformations/basic/resize/#width-w\n// Doc (Optimise): https://www.pixelbin.io/docs/optimizations/quality/#image-quality-when-delivering\n// Doc (Auto…",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Sanity",
        "content": "",
        "code_blocks": [
          {
            "language": "",
            "code": "// Docs: https://www.sanity.io/docs/image-urls\nexport default function sanityLoader({ src, width, quality }) {\n  const prj = 'zp7mbokg'\n  const dataset = 'production'\n  const url = new…",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Sirv",
        "content": "",
        "code_blocks": [
          {
            "language": "",
            "code": "// Docs: https://sirv.com/help/articles/dynamic-imaging/\nexport default function sirvLoader({ src, width, quality }) {\n  const url = new URL(`https://example.com${src}`)\n  const params =…",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Supabase",
        "content": "",
        "code_blocks": [
          {
            "language": "",
            "code": "// Docs: https://supabase.com/docs/guides/storage/image-transformations#nextjs-loader\nexport default function supabaseLoader({ src, width, quality }) {\n  const url = new…",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Thumbor",
        "content": "",
        "code_blocks": [
          {
            "language": "",
            "code": "// Docs: https://thumbor.readthedocs.io/en/latest/\nexport default function thumborLoader({ src, width, quality }) {\n  const params = [`${width}x0`, `filters:quality(${quality || 75})`]\n  return…",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "ImageKit.io",
        "content": "",
        "code_blocks": [
          {
            "language": "",
            "code": "// Docs: https://imagekit.io/docs/image-transformation\nexport default function imageKitLoader({ src, width, quality }) {\n  const params = [`w-${width}`, `q-${quality || 80}`]\n  return…",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Nitrogen AIO",
        "content": "",
        "code_blocks": [
          {
            "language": "",
            "code": "// Docs: https://docs.n7.io/aio/intergrations/\nexport default function aioLoader({ src, width, quality }) {\n  const url = new URL(src, window.location.href)\n  const params = url.searchParams\n  const…",
            "filename": ""
          }
        ],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [
      "Next.js",
      "images",
      "loader",
      "cloud providers",
      "next.config.js",
      "Image Optimization"
    ],
    "prerequisites": [],
    "_content_hash": "b0c796db6ea736f3aef7f08b27a20528cf1ae646397119aca67705f16961bdca",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/incrementalCacheHandlerPath",
    "title": "Custom Next.js Cache Handler",
    "type": "api",
    "summary": "Explains how to configure a custom cache handler in next.config.js to persist cached pages and data to durable storage or share cache across instances, including method signatures and image…",
    "sections": [
      {
        "heading": "Custom Next.js Cache Handler",
        "content": "You can configure the Next.js cache location if you want to persist cached pages and data to durable storage, or share the cache across multiple containers or instances of your Next.js…",
        "code_blocks": [
          {
            "language": "js",
            "code": "module.exports = {\n  cacheHandler: require.resolve('./cache-handler.js'),\n  cacheMaxMemorySize: 0, // disable default in-memory caching\n}",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "API Reference",
        "content": "The cache handler can implement the following methods: `get`, `set`, `revalidateTag`, and `resetRequestCache`.",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "get()",
        "content": "The `ctx` parameter contains a `kind` property that indicates the type of cache entry being retrieved. Possible values include `'APP_PAGE'`, `'APP_ROUTE'`, `'PAGES'`, `'FETCH'`, and…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "set()",
        "content": "The `data` object contains a `kind` property that indicates the type of cache entry. For image optimization, `kind` will be `'IMAGE'` and the data will include properties like `buffer`, `etag`,…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "revalidateTag()",
        "content": "Returns `Promise<void>`. Learn more about [revalidating data](/docs/app/guides/incremental-static-regeneration) or the [`revalidateTag()`](/docs/app/api-reference/functions/revalidateTag)…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "resetRequestCache()",
        "content": "This method resets the temporary in-memory cache for a single request before the next request.\n\nReturns `void`.\n\n**Good to know:**\n\n- `revalidatePath` is a convenience layer on top of cache tags.…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Image Optimization Caching",
        "content": "The `cacheHandler` can also be used for caching optimized images from `next/image`. To enable this, set `images.customCacheHandler` to `true` in your `next.config.js`:\n\n> **Good to know** : This…",
        "code_blocks": [
          {
            "language": "js",
            "code": "module.exports = {\n  cacheHandler: require.resolve('./cache-handler.js'),\n  images: {\n    customCacheHandler: true,\n  },\n}",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Platform Support",
        "content": "| Deployment Option | Supported |\n| --- | --- |\n| [Node.js server](/docs/app/getting-started/deploying#nodejs-server) | Yes |\n| [Docker container](/docs/app/getting-started/deploying#docker) | Yes…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Version History",
        "content": "| Version | Changes |\n| --- | --- |\n| `v16.2.0` | `cacheHandler` support for image optimization caching. |\n| `v14.1.0` | Renamed to `cacheHandler` and became stable. |\n| `v13.4.0` |…",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "key",
        "type": "string",
        "description": "The key to the cached value (used in get).",
        "default": "",
        "required": true
      },
      {
        "name": "ctx",
        "type": "object",
        "description": "Context including the cache entry kind (used in get).",
        "default": "",
        "required": true
      },
      {
        "name": "key",
        "type": "string",
        "description": "The key to store the data under (used in set).",
        "default": "",
        "required": true
      },
      {
        "name": "data",
        "type": "Data or null",
        "description": "The data to be cached (used in set).",
        "default": "",
        "required": true
      },
      {
        "name": "ctx",
        "type": "{ tags: [] }",
        "description": "The cache tags provided (used in set).",
        "default": "",
        "required": true
      },
      {
        "name": "tag",
        "type": "string or string[]",
        "description": "The cache tags to revalidate (used in revalidateTag).",
        "default": "",
        "required": true
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "cacheHandler",
      "incrementalCacheHandlerPath",
      "ISR",
      "image optimization",
      "self-hosting",
      "caching"
    ],
    "prerequisites": [],
    "_content_hash": "3132d61a752782485051ecb09994eb7862311b87709219a0cdd8d1eebc87323a",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/inlineCss",
    "title": "next.config.js: inlineCss | Next.js",
    "type": "api",
    "summary": "Experimental Next.js configuration option that inlines CSS into the <head> by generating <style> tags instead of <link> tags, including trade-offs, benefits, and known limitations.",
    "sections": [
      {
        "heading": "inlineCss",
        "content": "This feature is currently experimental and subject to change, it's not recommended for production. Try it out and share your feedback on [GitHub](https://github.com/vercel/next.js/issues).",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Usage",
        "content": "Experimental support for inlining CSS in the ``. When this flag is enabled, all places where we normally generate a `<link>` tag will instead have a generated `<style>` tag.",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "import type { NextConfig } from 'next'\n \nconst nextConfig: NextConfig = {\n  experimental: {\n    inlineCss: true,\n  },\n}\n \nexport default nextConfig",
            "filename": "next.config.ts"
          }
        ],
        "images": []
      },
      {
        "heading": "Trade-Offs",
        "content": "- **Enable** if you use atomic CSS (like Tailwind) and want to optimize first-load performance for new visitors\n- **Skip** if returning visitors are common and you want them to benefit from cached…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "When Inline CSS Helps",
        "content": "Normally, the browser must download HTML, parse it, discover CSS `<link>` tags, then request stylesheets before it can render. Inlining [eliminates this request…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "When External CSS is Better",
        "content": "Inlined styles cannot be cached separately from HTML. Every page load re-downloads the same CSS.\n\nThis trade-off matters most with:\n\n- **Returning visitors**: Users who visit your site repeatedly…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Good to know",
        "content": "This feature is currently experimental and has some known limitations:\n\n- CSS inlining is applied globally and cannot be configured on a per-page basis\n- Styles are duplicated during initial page…",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [
      "Next.js",
      "next.config.js",
      "inlineCss",
      "CSS",
      "experimental",
      "configuration"
    ],
    "prerequisites": [],
    "_content_hash": "180b21dfd819514b831bef33f92931cbe4f0d11e831167a90cedaa80fd5b2c44",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/instrumentationClientInject",
    "title": "next.config.js: instrumentationClientInject | Next.js",
    "type": "api",
    "summary": "This page documents the `instrumentationClientInject` option in `next.config.js`, which allows plugins to inject client-side instrumentation modules that run before the user's…",
    "sections": [
      {
        "heading": "instrumentationClientInject",
        "content": "`instrumentationClientInject` is a list of modules that are imported on the client for their side effects before the user's…",
        "code_blocks": [
          {
            "language": "js",
            "code": "module.exports = function withMyInstrumentation(nextConfig = {}) {\n  return {\n    ...nextConfig,\n    instrumentationClientInject: [\n      ...(nextConfig.instrumentationClientInject ?? []),…",
            "filename": "withMyInstrumentation.js"
          },
          {
            "language": "js",
            "code": "/** @type {import('next').NextConfig} */\nmodule.exports = {\n  instrumentationClientInject: [\n    'my-analytics-package',\n    './lib/sentry-client.js',\n  ],\n}",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Execution order",
        "content": "Modules run on the client in this order:\n\n- Each entry in `instrumentationClientInject`, in array order.\n- The project's `instrumentation-client.{js,ts}` file, if present.\n- React hydration.",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Router navigation hook",
        "content": "Each injected module may optionally export an `onRouterTransitionStart` function with the same signature as the one documented for the [`instrumentation-client` file…",
        "code_blocks": [
          {
            "language": "js",
            "code": "// Side-effectful setup runs at load time.\nsetupSentry()\n \nexport function onRouterTransitionStart(url, navigationType) {\n  recordNavigationBreadcrumb(url, navigationType)\n}",
            "filename": "lib/sentry-client.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Version history",
        "content": "| Version | Changes |\n| --- | --- |\n| `v16.3.0` | `instrumentationClientInject` introduced |",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [
      "Next.js",
      "next.config.js",
      "instrumentationClientInject",
      "client instrumentation",
      "plugins",
      "React hydration",
      "onRouterTransitionStart"
    ],
    "prerequisites": [],
    "_content_hash": "0ebccfc42e2ece73c58da38ca661b1d69c2c0b8ed3058985aea9709fbc8ce209",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/logging",
    "title": "next.config.js: logging",
    "type": "api",
    "summary": "Configuration options for logging in Next.js, including fetch logging, server functions, incoming requests, browser console logs, and disabling logging.",
    "sections": [
      {
        "heading": "Options",
        "content": "",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Fetching",
        "content": "You can configure the logging level and whether the full URL is logged to the console when running Next.js in development mode.\n\nAny `fetch` requests that are restored from the [Server Components HMR…",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "module.exports = {\n  logging: {\n    fetches: {\n      fullUrl: true,\n    },\n  },\n}",
            "filename": ""
          },
          {
            "language": "javascript",
            "code": "module.exports = {\n  logging: {\n    fetches: {\n      hmrRefreshes: true,\n    },\n  },\n}",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Server Functions",
        "content": "[Server Function](https://react.dev/reference/rsc/server-functions) invocations are logged by default during development. You can disable this by setting `logging.serverFunctions` to `false`.\n\nWhen…",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "module.exports = {\n  logging: {\n    serverFunctions: false,\n  },\n}",
            "filename": ""
          },
          {
            "language": "terminal",
            "code": "POST /\n  └─ ƒ myAction(arg1, arg2) in 5ms app/actions.ts",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Incoming Requests",
        "content": "By default all the incoming requests will be logged in the console during development. You can use the `incomingRequests` option to decide which requests to ignore.\nSince this is only logged in…",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "module.exports = {\n  logging: {\n    incomingRequests: {\n      ignore: [/\\api\\/v1\\/health/],\n    },\n  },\n}",
            "filename": ""
          },
          {
            "language": "javascript",
            "code": "module.exports = {\n  logging: {\n    incomingRequests: false,\n  },\n}",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Browser Console Logs",
        "content": "You can forward browser console logs (such as `console.log`, `console.warn`, `console.error`) to the terminal during development. This is useful for debugging client-side code without needing to…",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "module.exports = {\n  logging: {\n    browserToTerminal: true,\n  },\n}",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Source Location",
        "content": "When enabled, browser logs include source location information (file path and line number) by default. For example:",
        "code_blocks": [
          {
            "language": "tsx",
            "code": "'use client'\n \nexport default function Home() {\n  return (\n    <button\n      type=\"button\"\n      onClick={() => {\n        console.log('Hello World')\n      }}\n    >\n      Click me\n    </button>\n  )\n}",
            "filename": ""
          },
          {
            "language": "terminal",
            "code": "[browser] Hello World (app/page.tsx:8:17)",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Disabling Logging",
        "content": "In addition, you can disable the development logging by setting `logging` to `false`.",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "module.exports = {\n  logging: false,\n}",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Version History",
        "content": "| Version | Changes |\n| --- | --- |\n| `v16.2.0` | `browserToTerminal` added (moved from `experimental.browserDebugInfoInTerminal`) |\n| `v15.4.0` | `experimental.browserDebugInfoInTerminal` introduced…",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "logging",
        "type": "boolean | object",
        "description": "Main logging configuration. Can be set to `false` to disable all development logging.",
        "default": "",
        "required": false
      },
      {
        "name": "logging.fetches.fullUrl",
        "type": "boolean",
        "description": "Whether to log the full URL for fetch requests in development.",
        "default": "",
        "required": false
      },
      {
        "name": "logging.fetches.hmrRefreshes",
        "type": "boolean",
        "description": "Whether to log fetch requests restored from the Server Components HMR cache.",
        "default": "",
        "required": false
      },
      {
        "name": "logging.serverFunctions",
        "type": "boolean",
        "description": "Whether to log Server Function invocations in development. Defaults to `true`.",
        "default": "",
        "required": false
      },
      {
        "name": "logging.incomingRequests",
        "type": "object | boolean",
        "description": "Configuration for logging incoming requests. Can be an object with an `ignore` array or `false` to disable.",
        "default": "",
        "required": false
      },
      {
        "name": "logging.incomingRequests.ignore",
        "type": "array",
        "description": "Array of regular expressions to match requests to ignore from logging.",
        "default": "",
        "required": false
      },
      {
        "name": "logging.browserToTerminal",
        "type": "boolean | string",
        "description": "Forward browser console logs to terminal. Can be `true`, `false`, `'warn'`, or `'error'`. Defaults to `'warn'`.",
        "default": "",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "logging",
      "configuration",
      "development",
      "fetch",
      "server functions",
      "browser console"
    ],
    "prerequisites": [],
    "_content_hash": "3be0ebd8dec48f48303c50ccee19d564181677880305f99360a1d8bd7994f9da",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/mdxRs",
    "title": "mdxRs",
    "type": "reference",
    "summary": "Explains the experimental `mdxRs` config option in Next.js, which enables the Rust compiler for MDX files when used with `@next/mdx`.",
    "sections": [
      {
        "heading": "mdxRs",
        "content": "For experimental use with `@next/mdx`. Compiles MDX files using the new Rust compiler.\n\nThis feature is currently experimental and subject to change, it's not recommended for production. Try it out…",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "const withMDX = require('@next/mdx')()\n \n/** @type {import('next').NextConfig} */\nconst nextConfig = {\n  pageExtensions: ['ts', 'tsx', 'mdx'],\n  experimental: {\n    mdxRs: true,\n  },\n}…",
            "filename": "next.config.js"
          }
        ],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [
      "Next.js",
      "MDX",
      "Rust compiler",
      "experimental",
      "config"
    ],
    "prerequisites": [],
    "_content_hash": "d6ea93fc0b3b95f7f4b95274d21e2f9523779a31c9c629d2fc68b465da34e3dc",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/onDemandEntries",
    "title": "next.config.js: onDemandEntries | Next.js",
    "type": "api",
    "summary": "Explains the onDemandEntries configuration option in next.config.js, which controls how the development server keeps built pages in memory.",
    "sections": [
      {
        "heading": "onDemandEntries",
        "content": "Next.js exposes some options that give you some control over how the server will dispose or keep in memory built pages in development.\n\nTo change the defaults, open `next.config.js` and add the…",
        "code_blocks": [
          {
            "language": "js",
            "code": "module.exports = {\n  onDemandEntries: {\n    // period (in ms) where the server will keep pages in the buffer\n    maxInactiveAge: 25 * 1000,\n    // number of pages that should be kept simultaneously…",
            "filename": "next.config.js"
          }
        ],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "maxInactiveAge",
        "type": "number",
        "description": "Period (in ms) where the server will keep pages in the buffer.",
        "default": "",
        "required": false
      },
      {
        "name": "pagesBufferLength",
        "type": "number",
        "description": "Number of pages that should be kept simultaneously without being disposed.",
        "default": "",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "next.config.js",
      "onDemandEntries",
      "development",
      "server",
      "memory"
    ],
    "prerequisites": [],
    "_content_hash": "5dfc8d22e97c1edc19b351c79175c50c54046e6c31882b732bfcd96bad53c5d2",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/optimizePackageImports",
    "title": "optimizePackageImports",
    "type": "api",
    "summary": "Describes the experimental `optimizePackageImports` option in next.config.js, which optimizes package imports by only loading the modules actually used, and lists the libraries optimized by default.",
    "sections": [
      {
        "heading": "optimizePackageImports",
        "content": "This feature is currently experimental and subject to change, it's not recommended for production. Try it out and share your feedback on GitHub.\n\nSome packages can export hundreds or thousands of…",
        "code_blocks": [
          {
            "language": "js",
            "code": "module.exports = {\n  experimental: {\n    optimizePackageImports: ['package-name'],\n  },\n}",
            "filename": "next.config.js"
          }
        ],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "experimental.optimizePackageImports",
        "type": "string[]",
        "description": "An array of package names to optimize. Adding a package to this option will only load the modules you are actually using, while still giving you the convenience of writing import statements with many…",
        "default": "",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "next.config.js",
      "optimizePackageImports",
      "experimental",
      "performance",
      "module optimization",
      "imports"
    ],
    "prerequisites": [],
    "_content_hash": "d7e23a8dd89c056ab4e38289cfc9cfdb1faf997c7d43a1dd2060269fe8c277d7",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/output",
    "title": "next.config.js: output | Next.js",
    "type": "reference",
    "summary": "This page documents the `output` option in `next.config.js`, which enables Next.js to trace page dependencies during builds and optionally create a standalone folder containing only the necessary…",
    "sections": [
      {
        "heading": "output",
        "content": "During a build, Next.js will automatically trace each page and its dependencies to determine all of the files that are needed for deploying a production version of your application.\n\nThis feature…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "How it Works",
        "content": "During `next build`, Next.js will use [`@vercel/nft`](https://github.com/vercel/nft) to statically analyze `import`, `require`, and `fs` usage to determine all files that a page might load.\n\nNext.js'…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Automatically Copying Traced Files",
        "content": "Next.js can automatically create a `standalone` folder that copies only the necessary files for a production deployment including select files in `node_modules`.\n\nTo leverage this automatic copying…",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "module.exports = {\n  output: 'standalone',\n}",
            "filename": "next.config.js"
          },
          {
            "language": "Terminal",
            "code": "cp -r public .next/standalone/ && cp -r .next/static .next/standalone/.next/",
            "filename": ""
          },
          {
            "language": "Terminal",
            "code": "node .next/standalone/server.js",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Caveats",
        "content": "While tracing in monorepo setups, the project directory is used for tracing by default. For `next build packages/web-app`, `packages/web-app` would be the tracing root and any files outside of that…",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "const path = require('path')\n \nmodule.exports = {\n  // this includes files from the monorepo base two directories up\n  outputFileTracingRoot: path.join(__dirname, '../../'),\n}",
            "filename": "packages/web-app/next.config.js"
          },
          {
            "language": "javascript",
            "code": "module.exports = {\n  outputFileTracingExcludes: {\n    '/api/hello': ['./un-necessary-folder/**/*'],\n  },\n  outputFileTracingIncludes: {\n    '/api/another': ['./necessary-folder/**/*'],…",
            "filename": "next.config.js"
          },
          {
            "language": "javascript",
            "code": "module.exports = {\n  outputFileTracingIncludes: {\n    '/products/*': ['src/lib/payments/**/*'],\n    '/*': ['src/config/runtime/**/*.json'],\n  },\n  outputFileTracingExcludes: {\n    '/api/*':…",
            "filename": "next.config.js"
          },
          {
            "language": "javascript",
            "code": "module.exports = {\n  outputFileTracingIncludes: {\n    '/*': ['src/i18n/locales/**/*.json'],\n  },\n}",
            "filename": "next.config.js"
          },
          {
            "language": "javascript",
            "code": "const path = require('path')\n \nmodule.exports = {\n  // Trace from the monorepo root\n  outputFileTracingRoot: path.join(__dirname, '../../'),\n  outputFileTracingIncludes: {\n    '/route1':…",
            "filename": "next.config.js"
          },
          {
            "language": "javascript",
            "code": "module.exports = {\n  outputFileTracingIncludes: {\n    '/*': ['node_modules/sharp/**/*', 'node_modules/aws-crt/dist/bin/**/*'],\n  },\n}",
            "filename": "next.config.js"
          }
        ],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "output",
        "type": "string",
        "description": "Set to 'standalone' to create a standalone folder at `.next/standalone` containing only the necessary files for a production deployment, including select files in `node_modules`.",
        "default": "",
        "required": false
      },
      {
        "name": "outputFileTracingRoot",
        "type": "string",
        "description": "Sets the root directory used for output file tracing. Useful in monorepo setups to include files outside the project directory.",
        "default": "",
        "required": false
      },
      {
        "name": "outputFileTracingExcludes",
        "type": "object",
        "description": "An object whose keys are route globs (matched with picomatch against the route path) and whose values are glob patterns resolved from the project root that specify files to exclude from the trace.",
        "default": "",
        "required": false
      },
      {
        "name": "outputFileTracingIncludes",
        "type": "object",
        "description": "An object whose keys are route globs (matched with picomatch against the route path) and whose values are glob patterns resolved from the project root that specify files to include in the trace.",
        "default": "",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "next.config.js",
      "output",
      "standalone",
      "output file tracing",
      "@vercel/nft",
      "deployment",
      "Docker",
      "monorepo"
    ],
    "prerequisites": [],
    "_content_hash": "3e13fef150e5ded542041b469706a90e545324234ce8ae05d1f1afe79d00aa21",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/outputHashSalt",
    "title": "outputHashSalt",
    "type": "reference",
    "summary": "This page documents the `outputHashSalt` option in Next.js configuration, which adds a salt string to output filenames to invalidate cached assets across deployments.",
    "sections": [
      {
        "heading": "Overview",
        "content": "`outputHashSalt` is an option that incorporates a configurable salt string into every content-addressed output filename (chunks, assets). Changing this value forces all output hashes to change, which…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Configuration",
        "content": "To configure the output hash salt, set `outputHashSalt` in `next.config.js`:",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "/** @type {import('next').NextConfig} */\nconst nextConfig = {\n  outputHashSalt: 'my-deployment-salt',\n}\n \nmodule.exports = nextConfig",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Bundler Support",
        "content": "This works with both Webpack and Turbopack bundlers.",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Environment Variable",
        "content": "The `NEXT_HASH_SALT` environment variable can also be used for the same purpose. When both are set, the values are **concatenated** (`outputHashSalt + NEXT_HASH_SALT`) to form the effective salt.…",
        "code_blocks": [
          {
            "language": "bash",
            "code": "NEXT_HASH_SALT=my-deployment-salt next build",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Version History",
        "content": "",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [
      "Next.js",
      "next.config.js",
      "outputHashSalt",
      "NEXT_HASH_SALT",
      "cache invalidation",
      "Webpack",
      "Turbopack"
    ],
    "prerequisites": [],
    "_content_hash": "01e22b138e907f1958d6b8f88038b375a46aa07d3bc48c65924c81e38461d4bf",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/pageExtensions",
    "title": "next.config.js: pageExtensions | Next.js",
    "type": "api",
    "summary": "Reference for the pageExtensions option in next.config.js, which customizes which file extensions Next.js treats as pages—for example, to support Markdown and MDX.",
    "sections": [
      {
        "heading": "pageExtensions",
        "content": "By default, Next.js accepts files with the following extensions: `.tsx`, `.ts`, `.jsx`, `.js`. This can be modified to allow other extensions like markdown (`.md`, `.mdx`).",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "const withMDX = require('@next/mdx')()\n \n/** @type {import('next').NextConfig} */\nconst nextConfig = {\n  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],\n}\n \nmodule.exports =…",
            "filename": "next.config.js"
          }
        ],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "pageExtensions",
        "type": "string[]",
        "description": "Modifies the file extensions that Next.js accepts for pages. Defaults to .tsx, .ts, .jsx, .js; can include markdown extensions like .md and .mdx.",
        "default": "['tsx', 'ts', 'jsx', 'js']",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "next.config.js",
      "pageExtensions",
      "MDX",
      "markdown",
      "configuration"
    ],
    "prerequisites": [],
    "_content_hash": "519a0383e21f78182854888b9085b89e42989b82d85bfc870e4b9794445042f2",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/partialPrefetching",
    "title": "partialPrefetching",
    "type": "api",
    "summary": "Configuration option for Next.js that enables Partial Prefetching at the app level, allowing the framework to prefetch reusable App Shells per route instead of per link.",
    "sections": [
      {
        "heading": "Usage",
        "content": "`partialPrefetching` requires [`cacheComponents`](/docs/app/api-reference/config/next-config-js/cacheComponents). Without it, `next dev` and `next build` throw at config validation.",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "import type { NextConfig } from 'next'\n \nconst nextConfig: NextConfig = {\n  cacheComponents: true,\n  partialPrefetching: true,\n}\n \nexport default nextConfig",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Reference",
        "content": "| Value | Description |\n| --- | --- |\n| `true` | Enables Partial Prefetching across the app. |\n| `false` | Default. No change to prefetch behavior. |",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "How prefetches resolve",
        "content": "Before Partial Prefetching, Next.js prefetched per visible link: a page with N links to N routes produced ~N route prefetches as those links entered the viewport.\n\nWith `partialPrefetching: true`,…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Per-segment overrides",
        "content": "A segment that exports an explicit [`prefetch`](/docs/app/api-reference/file-conventions/route-segment-config/prefetch) value overrides the app-level default for that route.",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Version History",
        "content": "| Version | Change |\n| --- | --- |\n| 16.3.0 | `partialPrefetching` introduced. Requires `cacheComponents` to be enabled. |",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Related",
        "content": "View related API references and guides.\n- [cacheComponents - Learn how to enable the cacheComponents flag in Next.js.](/docs/app/api-reference/config/next-config-js/cacheComponents)\n- [prefetch - API…",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "partialPrefetching",
        "type": "boolean",
        "description": "Enables Partial Prefetching at the app level. Requires `cacheComponents` to be enabled.",
        "default": "false",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "partialPrefetching",
      "prefetching",
      "config",
      "App Shell"
    ],
    "prerequisites": [],
    "_content_hash": "0e67cbd339002673d992608637df4430aacf497f5386b583699d4876571c18fb",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/poweredByHeader",
    "title": "next.config.js: poweredByHeader",
    "type": "reference",
    "summary": "Explains how to disable the `x-powered-by` header in Next.js by setting `poweredByHeader: false` in `next.config.js`.",
    "sections": [
      {
        "heading": "poweredByHeader",
        "content": "By default Next.js will add the `x-powered-by` header. To opt-out of it, open `next.config.js` and disable the `poweredByHeader` config:",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "module.exports = {\n  poweredByHeader: false,\n}",
            "filename": "next.config.js"
          }
        ],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [
      "Next.js",
      "config",
      "poweredByHeader",
      "x-powered-by",
      "header"
    ],
    "prerequisites": [],
    "_content_hash": "58412d83557148afe472386f49db21cb3a42c65d1dfbcb7f1dc54dffacff9f8b",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/prefetchInlining",
    "title": "prefetchInlining",
    "type": "api",
    "summary": "Describe the experimental `prefetchInlining` configuration option in Next.js, which controls whether App Router prefetch responses are bundled into a single response, and how to disable or customize…",
    "sections": [
      {
        "heading": "prefetchInlining",
        "content": "When the App Router prefetches a route, it can bundle small segment responses into a single response instead of requesting each one separately. This reduces the number of prefetch requests at the…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Usage",
        "content": "To turn off prefetch inlining, set `experimental.prefetchInlining` to `false`:\n\nTo override the thresholds instead of disabling inlining, pass an object. Any value you omit keeps its default:",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "import type { NextConfig } from 'next'\n \nconst nextConfig: NextConfig = {\n  experimental: {\n    prefetchInlining: false,\n  },\n}\n \nexport default nextConfig",
            "filename": "next.config.ts"
          },
          {
            "language": "typescript",
            "code": "import type { NextConfig } from 'next'\n \nconst nextConfig: NextConfig = {\n  experimental: {\n    prefetchInlining: {\n      maxSize: 2048,\n      maxBundleSize: 10240,\n    },\n  },\n}\n \nexport default…",
            "filename": "next.config.ts"
          }
        ],
        "images": []
      },
      {
        "heading": "Reference",
        "content": "| Value | Description |\n| --- | --- |\n| `true` | Inlines prefetch responses with the default thresholds. This is the default. |\n| `false` | Disables prefetch inlining. Each segment is prefetched as…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Version History",
        "content": "| Version | Change |\n| --- | --- |\n| 16.3.0 | `experimental.prefetchInlining` enabled by default. |\n| 16.2.0 | `experimental.prefetchInlining` added. |",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Related",
        "content": "View related API references and guides.\n\n[Link Component](/docs/app/api-reference/components/link) — Enable fast client-side navigation with the built-in `next/link`…",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "prefetchInlining",
        "type": "boolean | { maxSize?: number; maxBundleSize?: number }",
        "description": "Controls whether prefetch responses are inlined. `true` (default) inlines with default thresholds, `false` disables inlining, or an object customizes the thresholds.",
        "default": "true",
        "required": false
      },
      {
        "name": "maxSize",
        "type": "number",
        "description": "Largest a single segment response can be to still be eligible for inlining.",
        "default": "2048",
        "required": false
      },
      {
        "name": "maxBundleSize",
        "type": "number",
        "description": "Largest total size that can be inlined into one bundled prefetch response along a path.",
        "default": "10240",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "App Router",
      "prefetching",
      "experimental",
      "configuration",
      "prefetchInlining"
    ],
    "prerequisites": [],
    "_content_hash": "8df52aa7d104fc7f9437aaff3520857dfa691d835e55fd0e3ddb87c0c79fb69a",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/productionBrowserSourceMaps",
    "title": "productionBrowserSourceMaps",
    "type": "api",
    "summary": "Explains how to enable browser source map generation during production builds in Next.js using the productionBrowserSourceMaps configuration flag.",
    "sections": [
      {
        "heading": "productionBrowserSourceMaps",
        "content": "Source Maps are enabled by default during development. During production builds, they are disabled to prevent you leaking your source on the client, unless you specifically opt-in with the…",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "module.exports = {\n  productionBrowserSourceMaps: true,\n}",
            "filename": "next.config.js"
          }
        ],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "productionBrowserSourceMaps",
        "type": "boolean",
        "description": "Enables browser source map generation during production builds.",
        "default": "False",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "configuration",
      "source maps",
      "production build"
    ],
    "prerequisites": [],
    "_content_hash": "1ef5abd049ecdd5e7b8ebeba67d3d3e9b8a4b63414b7a66742adcee5568aeaaf",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/proxyClientMaxBodySize",
    "title": "next.config.js: proxyClientMaxBodySize",
    "type": "api",
    "summary": "Configuration option to set a size limit on the buffered request body when using proxy in Next.js, preventing excessive memory usage. Defaults to 10MB.",
    "sections": [
      {
        "heading": "Introduction",
        "content": "This feature is currently experimental and subject to change, it's not recommended for production. Try it out and share your feedback on GitHub. Last updated October 20, 2025\n\nWhen proxy is used,…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Options",
        "content": "",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "String format (recommended)",
        "content": "Specify the size using a human-readable string format:\n\nSupported units: b, kb, mb, gb",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "import type { NextConfig } from 'next'\n \nconst nextConfig: NextConfig = {\n  experimental: {\n    proxyClientMaxBodySize: '1mb',\n  },\n}\n \nexport default nextConfig",
            "filename": "next.config.ts"
          }
        ],
        "images": []
      },
      {
        "heading": "Number format",
        "content": "Alternatively, specify the size in bytes as a number:",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "import type { NextConfig } from 'next'\n \nconst nextConfig: NextConfig = {\n  experimental: {\n    proxyClientMaxBodySize: 1048576, // 1MB in bytes\n  },\n}\n \nexport default nextConfig",
            "filename": "next.config.ts"
          }
        ],
        "images": []
      },
      {
        "heading": "Behavior",
        "content": "When a request body exceeds the configured limit:\n\n- Next.js will buffer only the first N bytes (up to the limit)\n- A warning will be logged to the console indicating the route that exceeded the…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Example",
        "content": "",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "import { NextRequest, NextResponse } from 'next/server'\n \nexport async function proxy(request: NextRequest) {\n  // Next.js automatically buffers the body with the configured size limit\n  // You can…",
            "filename": "proxy.ts"
          },
          {
            "language": "typescript",
            "code": "import { NextRequest, NextResponse } from 'next/server'\n \nexport async function POST(request: NextRequest) {\n  // ...and the body is still available in your route handler\n  const body = await…",
            "filename": "app/api/upload/route.ts"
          }
        ],
        "images": []
      },
      {
        "heading": "Good to know",
        "content": "- This setting only applies when proxy is used in your application\n- The default limit of 10MB is designed to balance memory usage and typical use cases\n- The limit applies per-request, not globally…",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "proxyClientMaxBodySize",
        "type": "string | number",
        "description": "Sets a size limit on the buffered request body when proxy is used, preventing excessive memory usage. String format supports units b, kb, mb, gb; number format specifies bytes. If exceeded, only the…",
        "default": "10mb",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "next.config.js",
      "proxy",
      "body size",
      "experimental",
      "configuration",
      "TypeScript",
      "JavaScript"
    ],
    "prerequisites": [],
    "_content_hash": "1fb21ebb020c13b13a53af51418a03b1b3e1bd7e347c35f7cad5f06099a161e1",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/reactCompiler",
    "title": "reactCompiler",
    "type": "api",
    "summary": "This page documents the `reactCompiler` configuration option in Next.js, which enables the React Compiler to automatically optimize component rendering, reducing the need for manual memoization.",
    "sections": [
      {
        "heading": "How It Works",
        "content": "The React Compiler runs through a Babel plugin. To keep builds fast, Next.js uses a custom SWC optimization that only applies the React Compiler to relevant files—like those with JSX or React…",
        "code_blocks": [
          {
            "language": "bash",
            "code": "pnpm add -D babel-plugin-react-compiler",
            "filename": ""
          },
          {
            "language": "typescript",
            "code": "import type { NextConfig } from 'next'\n \nconst nextConfig: NextConfig = {\n  reactCompiler: true,\n}\n \nexport default nextConfig",
            "filename": "next.config.ts"
          }
        ],
        "images": []
      },
      {
        "heading": "Annotations",
        "content": "You can configure the compiler to run in \"opt-in\" mode as follows:\n\nThen, you can annotate specific components or hooks with the `\"use memo\"` directive from React to opt-in:\n\n> **Note:**  You can…",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "import type { NextConfig } from 'next'\n \nconst nextConfig: NextConfig = {\n  reactCompiler: {\n    compilationMode: 'annotation',\n  },\n}\n \nexport default nextConfig",
            "filename": "next.config.ts"
          },
          {
            "language": "typescript",
            "code": "export default function Page() {\n  'use memo'\n  // ...\n}",
            "filename": "app/page.tsx"
          }
        ],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "reactCompiler",
        "type": "boolean | { compilationMode?: 'annotation' | 'all' }",
        "description": "Enables the React Compiler. When set to true, the compiler runs on all relevant files. When set to an object with compilationMode: 'annotation', the compiler runs in opt-in mode, requiring 'use memo'…",
        "default": "",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "React Compiler",
      "SWC",
      "Babel",
      "memoization",
      "useMemo",
      "useCallback",
      "configuration"
    ],
    "prerequisites": [],
    "_content_hash": "f72312a43858e30d195054278cdfa2a0a0e8fdac057142b14654c1d933144132",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/reactMaxHeadersLength",
    "title": "reactMaxHeadersLength",
    "type": "api",
    "summary": "This page describes the `reactMaxHeadersLength` option in `next.config.js`, which controls the maximum length of headers emitted by React during prerendering, with a default value of 6000.",
    "sections": [
      {
        "heading": "reactMaxHeadersLength",
        "content": "During prerendering, React can emit headers that can be added to the response. These can be used to improve performance by allowing the browser to preload resources like fonts, scripts, and…",
        "code_blocks": [
          {
            "language": "js",
            "code": "module.exports = {\n  reactMaxHeadersLength: 1000,\n}",
            "filename": "next.config.js"
          }
        ],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "reactMaxHeadersLength",
        "type": "number",
        "description": "Maximum length of headers emitted by React during prerendering. Lower this value if a reverse proxy truncates long headers.",
        "default": "6000",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "next.config.js",
      "react",
      "headers",
      "prerendering",
      "App Router",
      "configuration"
    ],
    "prerequisites": [],
    "_content_hash": "0d0d1bc420a981bd83f3d3c9d33bffc518390ffb59abd198463cdeefde87a708",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/reactStrictMode",
    "title": "next.config.js: reactStrictMode | Next.js",
    "type": "reference",
    "summary": "This page documents the reactStrictMode configuration option in next.config.js, which enables React Strict Mode in Next.js applications, with notes on default behavior and migration options.",
    "sections": [
      {
        "heading": "reactStrictMode",
        "content": "Good to know: Since Next.js 13.5.1, Strict Mode is true by default with app router, so the above configuration is only necessary for pages. You can still disable Strict Mode by setting…",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "module.exports = {\n  reactStrictMode: true,\n}",
            "filename": "next.config.js"
          }
        ],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "reactStrictMode",
        "type": "boolean",
        "description": "Enables React Strict Mode in the Next.js application. Defaults to true since Next.js 13.5.1 for the app router, but can be set to false to disable.",
        "default": "true (for app router since 13.5.1)",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "reactStrictMode",
      "Strict Mode",
      "configuration",
      "next.config.js",
      "React"
    ],
    "prerequisites": [],
    "_content_hash": "dc1cbece534885d90496fba0bf033ad7b7c31cb37b0a9ee209187cf6bfe55d1b",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/redirects",
    "title": "next.config.js: redirects | Next.js",
    "type": "reference",
    "summary": "Documentation for the `redirects` key in `next.config.js`, which allows redirecting incoming request paths to different destination paths, including path matching, header/cookie/query matching,…",
    "sections": [
      {
        "heading": "redirects",
        "content": "Redirects allow you to redirect an incoming request path to a different destination path.\n\nTo use redirects you can use the `redirects` key in `next.config.js`:\n\n`redirects` can be defined as a…",
        "code_blocks": [
          {
            "language": "js",
            "code": "module.exports = {\n  redirects() {\n    return [\n      {\n        source: '/about',\n        destination: '/',\n        permanent: true,\n      },\n    ]\n  },\n}",
            "filename": "next.config.js"
          },
          {
            "language": "js",
            "code": "{\n  source: '/old-blog/:path*',\n  destination: '/blog/:path*',\n  permanent: false\n}",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Path Matching",
        "content": "Path matches are allowed, for example `/old-blog/:slug` will match `/old-blog/first-post` (no nested paths):\n\nThe pattern `/old-blog/:slug` matches `/old-blog/first-post` and `/old-blog/post-1` but…",
        "code_blocks": [
          {
            "language": "js",
            "code": "module.exports = {\n  redirects() {\n    return [\n      {\n        source: '/old-blog/:slug',\n        destination: '/news/:slug', // Matched parameters can be used in the destination\n        permanent:…",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Wildcard Path Matching",
        "content": "To match a wildcard path you can use `*` after a parameter, for example `/blog/:slug*` will match `/blog/a/b/c/d/hello-world`:",
        "code_blocks": [
          {
            "language": "js",
            "code": "module.exports = {\n  redirects() {\n    return [\n      {\n        source: '/blog/:slug*',\n        destination: '/news/:slug*', // Matched parameters can be used in the destination\n        permanent:…",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Regex Path Matching",
        "content": "To match a regex path you can wrap the regex in parentheses after a parameter, for example `/post/:slug(\\d{1,})` will match `/post/123` but not `/post/abc`:\n\nThe following characters `(`, `)`, `{`,…",
        "code_blocks": [
          {
            "language": "js",
            "code": "module.exports = {\n  redirects() {\n    return [\n      {\n        source: '/post/:slug(\\\\d{1,})',\n        destination: '/news/:slug', // Matched parameters can be used in the destination…",
            "filename": "next.config.js"
          },
          {
            "language": "js",
            "code": "module.exports = {\n  redirects() {\n    return [\n      {\n        // this will match `/english(default)/something` being requested\n        source: '/english\\\\(default\\\\)/:slug',\n        destination:…",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Header, Cookie, and Query Matching",
        "content": "To only match a redirect when header, cookie, or query values also match the `has` field or don't match the `missing` field can be used. Both the `source` and all `has` items must match and all…",
        "code_blocks": [
          {
            "language": "js",
            "code": "module.exports = {\n  redirects() {\n    return [\n      // if the header `x-redirect-me` is present,\n      // this redirect will be applied\n      {\n        source: '/:path((?!another-page$).*)',…",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Redirects with basePath support",
        "content": "When leveraging [`basePath` support](/docs/app/api-reference/config/next-config-js/basePath) with redirects each `source` and `destination` is automatically prefixed with the `basePath` unless you…",
        "code_blocks": [
          {
            "language": "js",
            "code": "module.exports = {\n  basePath: '/docs',\n \n  redirects() {\n    return [\n      {\n        source: '/with-basePath', // automatically becomes /docs/with-basePath\n        destination: '/another', //…",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Redirects with i18n support",
        "content": "When implementing redirects with internationalization in the App Router, you can include locales in `next.config.js` redirects, but only as hardcoded paths.\n\nFor dynamic or per-request locale…",
        "code_blocks": [
          {
            "language": "js",
            "code": "module.exports = {\n  redirects() {\n    return [\n      {\n        // Manually handle locale prefixes for App Router\n        source: '/en/old-path',\n        destination: '/en/new-path',…",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Other Redirects",
        "content": "- Inside [API Routes](/docs/pages/building-your-application/routing/api-routes) and [Route Handlers](/docs/app/api-reference/file-conventions/route), you can redirect based on the incoming request.\n-…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Version History",
        "content": "| Version | Changes |\n| --- | --- |\n| `v13.3.0` | `missing` added. |\n| `v10.2.0` | `has` added. |\n| `v9.5.0` | `redirects` added. |",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "source",
        "type": "string",
        "description": "The incoming request path pattern.",
        "default": "",
        "required": true
      },
      {
        "name": "destination",
        "type": "string",
        "description": "The path you want to route to.",
        "default": "",
        "required": true
      },
      {
        "name": "permanent",
        "type": "boolean",
        "description": "If `true` will use the 308 status code which instructs clients/search engines to cache the redirect forever, if `false` will use the 307 status code which is temporary and is not cached.",
        "default": "",
        "required": false
      },
      {
        "name": "basePath",
        "type": "boolean | undefined",
        "description": "If false the `basePath` won't be included when matching, can be used for external redirects only.",
        "default": "",
        "required": false
      },
      {
        "name": "locale",
        "type": "boolean | undefined",
        "description": "Whether the locale should not be included when matching.",
        "default": "",
        "required": false
      },
      {
        "name": "has",
        "type": "Array<{ type: 'header' | 'cookie' | 'host' | 'query', key: string, value?: string }>",
        "description": "An array of has objects with the `type`, `key` and `value` properties. Both the `source` and all `has` items must match for the redirect to be applied.",
        "default": "",
        "required": false
      },
      {
        "name": "missing",
        "type": "Array<{ type: 'header' | 'cookie' | 'host' | 'query', key: string, value?: string }>",
        "description": "An array of missing objects with the `type`, `key` and `value` properties. All `missing` items must not match for the redirect to be applied.",
        "default": "",
        "required": false
      },
      {
        "name": "statusCode",
        "type": "number",
        "description": "A custom status code for older HTTP Clients to properly redirect. Can be used instead of the `permanent` property, but not both. To ensure IE11 compatibility, a `Refresh` header is automatically…",
        "default": "",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "next.config.js",
      "redirects",
      "configuration",
      "path matching",
      "regex",
      "headers",
      "cookies",
      "query",
      "basePath",
      "i18n"
    ],
    "prerequisites": [],
    "_content_hash": "a64958c5873717b569a2ec87c858828332276e576771e0ea5d92b1d4ef720c5d",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/rewrites",
    "title": "next.config.js: rewrites | Next.js",
    "type": "reference",
    "summary": "Documentation for the rewrites configuration option in next.config.js, which allows mapping incoming request paths to different destination paths, acting as a URL proxy.",
    "sections": [
      {
        "heading": "rewrites",
        "content": "Rewrites allow you to map an incoming request path to a different destination path. Rewrites act as a URL proxy and mask the destination path, making it appear the user hasn't changed their location…",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "module.exports = {\n  rewrites() {\n    return [\n      {\n        source: '/about',\n        destination: '/',\n      },\n    ]\n  },\n}",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Rewrite properties",
        "content": "The following properties are available on each rewrite object:",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Rewrites array vs object",
        "content": "When the `rewrites` function returns an array, rewrites are applied after checking the filesystem (pages and `/public` files) and before dynamic routes. When the `rewrites` function returns an object…",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "module.exports = {\n  rewrites() {\n    return {\n      beforeFiles: [\n        // These rewrites are checked after headers/redirects\n        // and before all files including _next/public files which…",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Order of checks",
        "content": "The order Next.js routes are checked is: headers are checked/applied, redirects are checked/applied, proxy, `beforeFiles` rewrites: for each entry, if `source`, `has`, and `missing` matches the…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Rewrite parameters",
        "content": "When using parameters in a rewrite the parameters will be passed in the query by default when none of the parameters are used in the `destination`. If a parameter is used in the destination none of…",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "module.exports = {\n  rewrites() {\n    return [\n      {\n        source: '/old-about/:path*',\n        destination: '/about', // The :path parameter isn't used here so will be automatically passed in…",
            "filename": "next.config.js"
          },
          {
            "language": "javascript",
            "code": "module.exports = {\n  rewrites() {\n    return [\n      {\n        source: '/docs/:path*',\n        destination: '/:path*', // The :path parameter is used here so will not be automatically passed in the…",
            "filename": "next.config.js"
          },
          {
            "language": "javascript",
            "code": "module.exports = {\n  rewrites() {\n    return [\n      {\n        source: '/:first/:second',\n        destination: '/:first?second=:second',\n        // Since the :first parameter is used in the…",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Path Matching",
        "content": "Path matches are allowed, for example `/blog/:slug` will match `/blog/first-post` (no nested paths). The pattern `/blog/:slug` matches `/blog/first-post` and `/blog/post-1` but not `/blog/a/b` (no…",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "module.exports = {\n  rewrites() {\n    return [\n      {\n        source: '/blog/:slug',\n        destination: '/news/:slug', // Matched parameters can be used in the destination\n      },\n    ]\n  },\n}",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Wildcard Path Matching",
        "content": "To match a wildcard path you can use `*` after a parameter, for example `/blog/:slug*` will match `/blog/a/b/c/d/hello-world`.",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "module.exports = {\n  rewrites() {\n    return [\n      {\n        source: '/blog/:slug*',\n        destination: '/news/:slug*', // Matched parameters can be used in the destination\n      },\n    ]\n  },\n}",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Regex Path Matching",
        "content": "To match a regex path you can wrap the regex in parenthesis after a parameter, for example `/blog/:slug(\\d{1,})` will match `/blog/123` but not `/blog/abc`. The following characters `(`, `)`, `{`,…",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "module.exports = {\n  rewrites() {\n    return [\n      {\n        source: '/old-blog/:post(\\d{1,})',\n        destination: '/blog/:post', // Matched parameters can be used in the destination\n      },…",
            "filename": "next.config.js"
          },
          {
            "language": "javascript",
            "code": "module.exports = {\n  rewrites() {\n    return [\n      {\n        // this will match `/english(default)/something` being requested\n        source: '/english\\(default\\)/:slug',\n        destination:…",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Header, Cookie, and Query Matching",
        "content": "To only match a rewrite when header, cookie, or query values also match the `has` field or don't match the `missing` field can be used. Both the `source` and all `has` items must match and all…",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "module.exports = {\n  rewrites() {\n    return [\n      // if the header `x-rewrite-me` is present,\n      // this rewrite will be applied\n      {\n        source: '/:path*',\n        has: [\n          {…",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Rewriting to an external URL",
        "content": "Rewrites allow you to rewrite to an external URL. This is especially useful for incrementally adopting Next.js. The following is an example rewrite for redirecting the `/blog` route of your main app…",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "module.exports = {\n  rewrites() {\n    return [\n      {\n        source: '/blog',\n        destination: 'https://example.com/blog',\n      },\n      {\n        source: '/blog/:slug',\n        destination:…",
            "filename": "next.config.js"
          },
          {
            "language": "javascript",
            "code": "module.exports = {\n  trailingSlash: true,\n  rewrites() {\n    return [\n      {\n        source: '/blog/',\n        destination: 'https://example.com/blog/',\n      },\n      {\n        source:…",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Incremental adoption of Next.js",
        "content": "You can also have Next.js fall back to proxying to an existing website after checking all Next.js routes. This way you don't have to change the rewrites configuration when migrating more pages to…",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "module.exports = {\n  rewrites() {\n    return {\n      fallback: [\n        {\n          source: '/:path*',\n          destination: `https://custom-routes-proxying-endpoint.vercel.app/:path*`,\n        },…",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Rewrites with basePath support",
        "content": "When leveraging `basePath` support with rewrites each `source` and `destination` is automatically prefixed with the `basePath` unless you add `basePath: false` to the rewrite.",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "module.exports = {\n  basePath: '/docs',\n \n  rewrites() {\n    return [\n      {\n        source: '/with-basePath', // automatically becomes /docs/with-basePath\n        destination: '/another', //…",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Version History",
        "content": "| Version | Changes |\n| --- | --- |\n| `v13.3.0` | `missing` added. |\n| `v10.2.0` | `has` added. |\n| `v9.5.0` | Headers added. |",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "source",
        "type": "String",
        "description": "The incoming request path pattern.",
        "default": "",
        "required": true
      },
      {
        "name": "destination",
        "type": "String",
        "description": "The path you want to route to.",
        "default": "",
        "required": true
      },
      {
        "name": "basePath",
        "type": "false | undefined",
        "description": "If false the basePath won't be included when matching, can be used for external rewrites only.",
        "default": "",
        "required": false
      },
      {
        "name": "locale",
        "type": "false | undefined",
        "description": "Whether the locale should not be included when matching.",
        "default": "",
        "required": false
      },
      {
        "name": "has",
        "type": "Array",
        "description": "An array of has objects with the type, key and value properties.",
        "default": "",
        "required": false
      },
      {
        "name": "missing",
        "type": "Array",
        "description": "An array of missing objects with the type, key and value properties.",
        "default": "",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "next.js",
      "rewrites",
      "next.config.js",
      "routing",
      "configuration"
    ],
    "prerequisites": [],
    "_content_hash": "19640884a17b29b8020d943a86162c5be762d752b12dc47be67b22f0c7cde205",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/sassOptions",
    "title": "next.config.js: sassOptions | Next.js",
    "type": "api",
    "summary": "Reference for the `sassOptions` configuration option in next.config.js, which allows you to configure the Sass compiler.",
    "sections": [
      {
        "heading": "sassOptions",
        "content": "`sassOptions` allow you to configure the Sass compiler.\n\n> **Good to know:**\n> - `sassOptions` are not typed outside of `implementation` because Next.js does not maintain the other possible…",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "import type { NextConfig } from 'next'\n \nconst sassOptions = {\n  additionalData: `\n    $var: red;\n  `,\n}\n \nconst nextConfig: NextConfig = {\n  sassOptions: {\n    ...sassOptions,\n    implementation:…",
            "filename": "next.config.ts"
          }
        ],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "sassOptions",
        "type": "object",
        "description": "Options passed to the Sass compiler.",
        "default": "",
        "required": false
      },
      {
        "name": "sassOptions.implementation",
        "type": "string",
        "description": "Specifies the Sass implementation to use, e.g. 'sass-embedded'.",
        "default": "",
        "required": false
      },
      {
        "name": "sassOptions.additionalData",
        "type": "string",
        "description": "Additional data to prepend to every Sass file, e.g. Sass variables.",
        "default": "",
        "required": false
      },
      {
        "name": "sassOptions.functions",
        "type": "object",
        "description": "Custom Sass functions. Only supported with webpack; not available with Turbopack.",
        "default": "",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "next.config.js",
      "sassOptions",
      "Sass",
      "webpack",
      "Turbopack"
    ],
    "prerequisites": [],
    "_content_hash": "7708794ab247f944fddbf7ee0d0d5c62c4811261433f153a1e82a11f2ac2c272",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/serverActions",
    "title": "serverActions",
    "type": "api",
    "summary": "Options for configuring Server Actions behavior in Next.js application, including allowed origins and body size limit.",
    "sections": [
      {
        "heading": "allowedOrigins",
        "content": "A list of extra safe origin domains from which Server Actions can be invoked. Next.js compares the origin of a Server Action request with the host domain, ensuring they match to prevent CSRF attacks.…",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "/** @type {import('next').NextConfig} */\n\nmodule.exports = {\n  experimental: {\n    serverActions: {\n      allowedOrigins: ['my-proxy.com', '*.my-proxy.com'],\n    },\n  },\n}",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "bodySizeLimit",
        "content": "By default, the maximum size of the request body sent to a Server Action is 1MB, to prevent the consumption of excessive server resources in parsing large amounts of data, as well as potential DDoS…",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "/** @type {import('next').NextConfig} */\n\nmodule.exports = {\n  experimental: {\n    serverActions: {\n      bodySizeLimit: '2mb',\n    },\n  },\n}",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Enabling Server Actions (v13)",
        "content": "Server Actions became a stable feature in Next.js 14, and are enabled by default. However, if you are using an earlier version of Next.js, you can enable them by setting `experimental.serverActions`…",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "/** @type {import('next').NextConfig} */\nconst config = {\n  experimental: {\n    serverActions: true,\n  },\n}\n\nmodule.exports = config",
            "filename": ""
          }
        ],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "allowedOrigins",
        "type": "string[]",
        "description": "A list of extra safe origin domains from which Server Actions can be invoked. Next.js compares the origin of a Server Action request with the host domain, ensuring they match to prevent CSRF attacks.…",
        "default": "",
        "required": false
      },
      {
        "name": "bodySizeLimit",
        "type": "string | number",
        "description": "The maximum size of the request body sent to a Server Action. Defaults to 1MB. Can take the number of bytes or any string format supported by bytes, e.g. '500kb' or '3mb'. The limit applies to the…",
        "default": "'1mb'",
        "required": false
      },
      {
        "name": "serverActions",
        "type": "boolean",
        "description": "In Next.js 13, set to true to enable Server Actions. In Next.js 14 and later, Server Actions are enabled by default and this option is not needed.",
        "default": "true (in v14+)",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "Server Actions",
      "Configuration",
      "CSRF",
      "Body Size Limit",
      "Security"
    ],
    "prerequisites": [],
    "_content_hash": "a7d16dc3519be38900526c7bdf105391462891e37a8b65b08fbedf032d1f5948",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/serverComponentsHmrCache",
    "title": "serverComponentsHmrCache",
    "type": "api",
    "summary": "The experimental `serverComponentsHmrCache` option allows you to cache `fetch` responses in Server Components across HMR refreshes in local development, improving performance and reducing API costs.",
    "sections": [
      {
        "heading": "serverComponentsHmrCache",
        "content": "This feature is currently experimental and subject to change, it's not recommended for production. Try it out and share your feedback on GitHub.\n\nThe experimental `serverComponentsHmrCache` option…",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "import type { NextConfig } from 'next'\n \nconst nextConfig: NextConfig = {\n  experimental: {\n    serverComponentsHmrCache: false, // defaults to true\n  },\n}\n \nexport default nextConfig",
            "filename": ""
          }
        ],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "serverComponentsHmrCache",
        "type": "boolean",
        "description": "When set to false, disables the HMR cache for fetch responses in Server Components during development.",
        "default": "true",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "config",
      "serverComponentsHmrCache",
      "HMR",
      "fetch",
      "experimental"
    ],
    "prerequisites": [],
    "_content_hash": "add3a4166eddacdb8655ea9f60a7e9cd42036edc10fc49bd919c2564ee41073d",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/serverExternalPackages",
    "title": "serverExternalPackages",
    "type": "reference",
    "summary": "Describes the `serverExternalPackages` configuration option in Next.js, which allows opting out specific dependencies from Server Components bundling to use native Node.js require.",
    "sections": [
      {
        "heading": "serverExternalPackages",
        "content": "Dependencies used inside [Server Components](/docs/app/getting-started/server-and-client-components) and [Route Handlers](/docs/app/api-reference/file-conventions/route) will automatically be bundled…",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "/** @type {import('next').NextConfig} */\nconst nextConfig = {\n  serverExternalPackages: ['@acme/ui'],\n}\n \nmodule.exports = nextConfig",
            "filename": ""
          }
        ],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [
      "Next.js",
      "config",
      "serverExternalPackages",
      "Server Components",
      "bundling",
      "Node.js",
      "require"
    ],
    "prerequisites": [],
    "_content_hash": "303ffc64bb49c44f3f236c3ab95f933cb2653d9c7eced5551dc0a99c6f26aa7f",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/staleTimes",
    "title": "staleTimes",
    "type": "api",
    "summary": "This page documents the experimental `staleTimes` configuration option in `next.config.js`, which controls client cache revalidation times for dynamic and static page segments.",
    "sections": [
      {
        "heading": "staleTimes",
        "content": "This feature is currently experimental and subject to change, it's not recommended for production. Try it out and share your feedback on…",
        "code_blocks": [
          {
            "language": "js",
            "code": "/** @type {import('next').NextConfig} */\nconst nextConfig = {\n  experimental: {\n    staleTimes: {\n      dynamic: 30,\n      static: 180,\n    },\n  },\n}\n \nmodule.exports = nextConfig",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Version History",
        "content": "| Version | Changes |\n| --- | --- |\n| `v15.0.0` | The `dynamic` `staleTimes` default changed from 30s to 0s. |\n| `v14.2.0` | Experimental `staleTimes` introduced. |",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "dynamic",
        "type": "number",
        "description": "Used when the page is neither statically generated nor fully prefetched (e.g. with `prefetch={true}`). Default: 0 seconds (not cached).",
        "default": "0",
        "required": false
      },
      {
        "name": "static",
        "type": "number",
        "description": "Used for statically generated pages, or when the `prefetch` prop on `Link` is set to `true`, or when calling `router.prefetch`. Default: 5 minutes.",
        "default": "300 (5 minutes)",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "staleTimes",
      "next.config.js",
      "experimental",
      "Client Cache",
      "caching",
      "link prefetching",
      "dynamic",
      "static"
    ],
    "prerequisites": [],
    "_content_hash": "2599e1a79136afec0c67bf6fb89e9ed3756864af59167dd96e8dc347eff2182c",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/staticGeneration",
    "title": "next.config.js: staticGeneration*",
    "type": "api",
    "summary": "Explains the experimental `staticGeneration*` options in `next.config.js` that configure the Static Generation process, including retry count, maximum concurrency per worker, and minimum pages per…",
    "sections": [
      {
        "heading": "staticGeneration*",
        "content": "This feature is currently experimental and subject to change, it's not recommended for production. Try it out and share your feedback on GitHub. The `staticGeneration*` options allow you to configure…",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "import type { NextConfig } from 'next'\n \nconst nextConfig: NextConfig = {\n  experimental: {\n    staticGenerationRetryCount: 1,\n    staticGenerationMaxConcurrency: 8,…",
            "filename": "next.config.ts"
          }
        ],
        "images": []
      },
      {
        "heading": "Config Options",
        "content": "The following options are available:\n\n- `staticGenerationRetryCount`: The number of times to retry a failed page generation before failing the build.\n- `staticGenerationMaxConcurrency`: The maximum…",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "staticGenerationRetryCount",
        "type": "number",
        "description": "The number of times to retry a failed page generation before failing the build.",
        "default": "",
        "required": false
      },
      {
        "name": "staticGenerationMaxConcurrency",
        "type": "number",
        "description": "The maximum number of pages to be processed per worker.",
        "default": "",
        "required": false
      },
      {
        "name": "staticGenerationMinPagesPerWorker",
        "type": "number",
        "description": "The minimum number of pages to be processed before starting a new worker.",
        "default": "",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "next.config.js",
      "staticGeneration",
      "experimental",
      "configuration",
      "TypeScript"
    ],
    "prerequisites": [],
    "_content_hash": "f06e11fee376cd29120ad7a595d31833e4d67f3a7493f6badc7216a9cc6061a4",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/supportsImmutableAssets",
    "title": "next.config.js: supportsImmutableAssets | Next.js",
    "type": "api",
    "summary": "This page describes the `supportsImmutableAssets` configuration option in next.config.js, used primarily by adapter authors to opt out of immutable static assets when an adapter has enabled support…",
    "sections": [
      {
        "heading": "supportsImmutableAssets",
        "content": "**Attention**: This option is primarily intended for [adapter](/docs/app/api-reference/adapters) authors. App developers should only set it when troubleshooting adapter-specific issues.\n\n**Enabling…",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "/** @type {import('next').NextConfig} */\nconst nextConfig = {\n  supportsImmutableAssets: false,\n}\n \nmodule.exports = nextConfig",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Version History",
        "content": "| Version | Changes |\n| --- | --- |\n| `v16.3.0` | Added support for immutable static assets. |",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "supportsImmutableAssets",
        "type": "boolean",
        "description": "Set to `false` to opt out of immutable static assets when your adapter has enabled support for them. If the adapter has not enabled this feature, this option has no effect.",
        "default": "",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "next.config.js",
      "supportsImmutableAssets",
      "static assets",
      "immutable assets",
      "adapter",
      "skew protection"
    ],
    "prerequisites": [],
    "_content_hash": "2700fadb928fdeed2c1e5142d72c7eab5e42cb02ac0de9a9fbeb3b7f42abaccc",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/taint",
    "title": "next.config.js: taint | Next.js",
    "type": "reference",
    "summary": "Explains the experimental `taint` configuration option in Next.js, which enables React APIs for tainting objects and values to prevent sensitive data from being sent to the client. Includes usage,…",
    "sections": [
      {
        "heading": "Usage",
        "content": "The `taint` option enables support for experimental React APIs for tainting objects and values. This feature helps prevent sensitive data from being accidentally passed to the client. When enabled,…",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "import type { NextConfig } from 'next'\n \nconst nextConfig: NextConfig = {\n  experimental: {\n    taint: true,\n  },\n}\n \nexport default nextConfig",
            "filename": "next.config.ts"
          }
        ],
        "images": []
      },
      {
        "heading": "Caveats",
        "content": "Tainting can only keep track of objects by reference. Copying an object creates an untainted version, which loses all guarantees given by the API. You'll need to taint the copy.\n\nTainting cannot keep…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Examples",
        "content": "",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Tainting an object reference",
        "content": "In this case, the `getUserDetails` function returns data about a given user. We taint the user object reference, so that it cannot cross a Server-Client boundary. For example, assuming `UserCard` is…",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "import { experimental_taintObjectReference } from 'react'\n \nfunction getUserDetails(id: string): UserDetails {\n  const user = await db.queryUserById(id)\n \n  experimental_taintObjectReference(\n    'Do…",
            "filename": ""
          },
          {
            "language": "typescript",
            "code": "export async function ContactPage({\n  params,\n}: {\n  params: Promise<{ id: string }>\n}) {\n  const { id } = await params\n  const userDetails = await getUserDetails(id)\n \n  return (\n    <UserCard…",
            "filename": ""
          },
          {
            "language": "typescript",
            "code": "export async function ContactPage({\n  params,\n}: {\n  params: Promise<{ id: string }>\n}) {\n  const userDetails = await getUserDetails(id)\n \n  // Throws an error\n  return <UserCard user={userDetails}…",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Tainting a unique value",
        "content": "In this case, we can access the server configuration by awaiting calls to `config.getConfigDetails`. However, the system configuration contains the `SERVICE_API_KEY` that we don't want to expose to…",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "import { experimental_taintUniqueValue } from 'react'\n \nfunction getSystemConfig(): SystemConfig {\n  const config = await config.getConfigDetails()\n \n  experimental_taintUniqueValue(\n    'Do not pass…",
            "filename": ""
          },
          {
            "language": "typescript",
            "code": "export async function Dashboard() {\n  const systemConfig = await getSystemConfig()\n \n  return <ClientDashboard version={systemConfig.SERVICE_API_VERSION} />\n}",
            "filename": ""
          },
          {
            "language": "typescript",
            "code": "export async function Dashboard() {\n  const systemConfig = await getSystemConfig()\n  // Someone makes a mistake in a PR\n  const version = systemConfig.SERVICE_API_KEY\n \n  return <ClientDashboard…",
            "filename": ""
          },
          {
            "language": "typescript",
            "code": "export async function Dashboard() {\n  const systemConfig = await getSystemConfig()\n  // Someone makes a mistake in a PR\n  const version = `version::${systemConfig.SERVICE_API_KEY}`\n \n  return…",
            "filename": ""
          }
        ],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [
      "Next.js",
      "configuration",
      "taint",
      "security",
      "React",
      "experimental"
    ],
    "prerequisites": [],
    "_content_hash": "bb5ed33a15a596ebce79cd247cc85415009a89946dd1eb8aa8a138d82362bbcb",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/trailingSlash",
    "title": "trailingSlash",
    "type": "reference",
    "summary": "Describes the `trailingSlash` configuration option in Next.js, which controls whether URLs with trailing slashes are redirected to non-trailing-slash versions or vice versa, with exceptions for…",
    "sections": [
      {
        "heading": "trailingSlash",
        "content": "By default Next.js will redirect URLs with trailing slashes to their counterpart without a trailing slash. For example `/about/` will redirect to `/about`. You can configure this behavior to act the…",
        "code_blocks": [
          {
            "language": "js",
            "code": "module.exports = {\n  trailingSlash: true,\n}",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Version History",
        "content": "| Version | Changes |\n| --- | --- |\n| `v9.5.0` | `trailingSlash` added. |",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "trailingSlash",
        "type": "boolean",
        "description": "When true, URLs without trailing slashes are redirected to their counterparts with trailing slashes. When false (default), URLs with trailing slashes are redirected to their counterparts without…",
        "default": "False",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "config",
      "trailingSlash",
      "trailing slash",
      "redirect",
      "static export"
    ],
    "prerequisites": [],
    "_content_hash": "c4a2ffd74a747965d58d038fb2af26c7e2e071f7b666fa6f40278a10e5f9fb9b",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/transpilePackages",
    "title": "transpilePackages",
    "type": "api",
    "summary": "Use transpilePackages to compile and bundle a dependency instead of treating it as untouched runtime code. This page explains when the option is needed and provides configuration examples.",
    "sections": [
      {
        "heading": "Overview",
        "content": "Use `transpilePackages` to compile and bundle a dependency instead of treating it as untouched runtime code. Values are package names, including scoped names like `@scope/pkg`. Paths and glob…",
        "code_blocks": [
          {
            "language": "js",
            "code": "/** @type {import('next').NextConfig} */\nconst nextConfig = {\n  transpilePackages: ['package-name', '@scope/pkg'],\n}\n \nmodule.exports = nextConfig",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "When you need it",
        "content": "Turbopack transpiles workspace packages (npm, pnpm, or Yarn workspaces) in your monorepo automatically under both routers. Webpack does the same for the App Router. Add a package to…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Version History",
        "content": "| Version | Changes |\n| --- | --- |\n| `v13.0.0` | `transpilePackages` added. |",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "transpilePackages",
        "type": "string[]",
        "description": "Package names to compile and bundle a dependency instead of treating it as untouched runtime code. Values are package names, including scoped names like `@scope/pkg`. Paths and glob patterns are not…",
        "default": "",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "next.config.js",
      "transpilePackages",
      "webpack",
      "Turbopack",
      "monorepo",
      "dependencies"
    ],
    "prerequisites": [],
    "_content_hash": "a563ec59e988828b67465c29e890cee53c2248166ecfc31878394ea2404f9d44",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/turbopack",
    "title": "turbopack",
    "type": "api",
    "summary": "The `turbopack` option lets you customize Turbopack to transform different files and change how modules are resolved.",
    "sections": [
      {
        "heading": "Overview",
        "content": "The `turbopack` option lets you customize [Turbopack](/docs/app/api-reference/turbopack) to transform different files and change how modules are resolved.\n\n> **Good to know** : The `turbopack` option…",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "import type { NextConfig } from 'next'\n \nconst nextConfig: NextConfig = {\n  turbopack: {\n    // ...\n  },\n}\n \nexport default nextConfig",
            "filename": "next.config.ts"
          }
        ],
        "images": []
      },
      {
        "heading": "Reference",
        "content": "",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Options",
        "content": "The following options are available for the `turbopack` configuration:\n\n| Option | Description |\n| --- | --- |\n| `root` | Sets the application root directory. Should be an absolute path. |\n| `rules`…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Supported loaders",
        "content": "The following loaders have been tested to work with Turbopack's webpack loader implementation, but many other webpack loaders should work as well even if not listed here:\n\n-…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Missing Webpack loader features",
        "content": "Turbopack uses the [`loader-runner`](https://github.com/webpack/loader-runner) library to execute webpack loaders, which provides most of the standard loader API. However, some features are not…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Examples",
        "content": "",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Root directory",
        "content": "Turbopack uses the root directory to resolve modules. Files outside of the project root are not resolved.\n\nThe reason files are not resolved outside of the project root is to improve cache…",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "const path = require('path')\nmodule.exports = {\n  turbopack: {\n    root: path.join(__dirname, '..'),\n  },\n}",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Configuring webpack loaders",
        "content": "If you need loader support beyond what's built in, many webpack loaders already work with Turbopack. There are currently some limitations:\n\n- Only a core subset of the webpack loader API is…",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "module.exports = {\n  turbopack: {\n    rules: {\n      '*.svg': {\n        loaders: ['@svgr/webpack'],\n        as: '*.js',\n      },\n    },\n  },\n}",
            "filename": "next.config.js"
          },
          {
            "language": "javascript",
            "code": "module.exports = {\n  turbopack: {\n    rules: {\n      '*.svg': {\n        loaders: [\n          {\n            loader: '@svgr/webpack',\n            options: {\n              icon: true,\n            },…",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Advanced webpack loader conditions",
        "content": "You can further restrict where a loader runs using the advanced `condition` syntax:\n\n- Supported boolean operators are `{all: [...]}`, `{any: [...]}` and `{not: ...}`.\n- Supported customizable…",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "module.exports = {\n  turbopack: {\n    rules: {\n      // '*' will match all file paths, but we restrict where our\n      // rule runs with a condition.\n      '*': {\n        condition: {\n          all:…",
            "filename": "next.config.js"
          },
          {
            "language": "javascript",
            "code": "module.exports = {\n  turbopack: {\n    rules: {\n      '*.svg': [\n        {\n          condition: 'browser',\n          loaders: ['@svgr/webpack'],\n          as: '*.js',\n        },\n        {…",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Module types",
        "content": "You can set the module type directly without using a loader. This is useful for changing how files are processed, similar to webpack's [`type`](https://webpack.js.org/configuration/module/#ruletype)…",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "module.exports = {\n  turbopack: {\n    rules: {\n      '*.svg': {\n        type: 'asset',\n      },\n    },\n  },\n}",
            "filename": "next.config.js"
          },
          {
            "language": "typescript",
            "code": "import svgUrl from './icon.svg'\n \nexport default function Page() {\n  return <img src={svgUrl} alt=\"Icon\" />\n}",
            "filename": "app/page.tsx"
          }
        ],
        "images": []
      },
      {
        "heading": "Inline loader configuration with import attributes",
        "content": "You can apply a Turbopack loader to an individual import using the `with` clause (import attributes). This is specified per-import rather than globally via `turbopack.rules`.\n\nThis is useful when you…",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "// Apply a raw loader to import a .txt file as a JavaScript module\nimport rawText from '../data.txt' with { turbopackLoader: 'raw-loader', turbopackAs: '*.js' }\n \nexport default function Page() {…",
            "filename": "app/page.tsx"
          },
          {
            "language": "typescript",
            "code": "import value from '../data.js' with { turbopackLoader: 'string-replace-loader', turbopackLoaderOptions: '{\"search\":\"PLACEHOLDER\",\"replace\":\"replaced value\"}' }",
            "filename": "app/page.tsx"
          }
        ],
        "images": []
      },
      {
        "heading": "Resolving aliases",
        "content": "Turbopack can be configured to modify module resolution through aliases, similar to webpack's [`resolve.alias`](https://webpack.js.org/configuration/resolve/#resolvealias) configuration.\n\nTo…",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "module.exports = {\n  turbopack: {\n    resolveAlias: {\n      underscore: 'lodash',\n      mocha: { browser: 'mocha/browser-entry.js' },\n    },\n  },\n}",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Resolving custom extensions",
        "content": "Turbopack can be configured to resolve modules with custom extensions, similar to webpack's [`resolve.extensions`](https://webpack.js.org/configuration/resolve/#resolveextensions) configuration.\n\nTo…",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "module.exports = {\n  turbopack: {\n    resolveExtensions: ['.mdx', '.tsx', '.ts', '.jsx', '.js', '.mjs', '.json'],\n  },\n}",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Debug IDs",
        "content": "Turbopack can be configured to generate [debug IDs](https://github.com/tc39/ecma426/blob/main/proposals/debug-id.md) in JavaScript bundles and source maps.\n\nTo configure debug IDs, use the `debugIds`…",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "module.exports = {\n  turbopack: {\n    debugIds: true,\n  },\n}",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Version History",
        "content": "| Version | Changes |\n| --- | --- |\n| `16.2.0` | `turbopackLoader` import attributes were added. |\n| `16.2.0` | `turbopack.rules.*.type` was added. |\n| `16.2.0` |…",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "root",
        "type": "string",
        "description": "Sets the application root directory. Should be an absolute path.",
        "default": "",
        "required": false
      },
      {
        "name": "rules",
        "type": "object",
        "description": "List of supported webpack loaders to apply when running with Turbopack.",
        "default": "",
        "required": false
      },
      {
        "name": "resolveAlias",
        "type": "object",
        "description": "Map aliased imports to modules to load in their place.",
        "default": "",
        "required": false
      },
      {
        "name": "resolveExtensions",
        "type": "array",
        "description": "List of extensions to resolve when importing files.",
        "default": "",
        "required": false
      },
      {
        "name": "debugIds",
        "type": "boolean",
        "description": "Enable generation of debug IDs in JavaScript bundles and source maps.",
        "default": "",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "Turbopack",
      "webpack",
      "loaders",
      "configuration",
      "resolve",
      "aliases",
      "debug IDs",
      "import attributes"
    ],
    "prerequisites": [],
    "_content_hash": "d9aa95f02fe2d58ca7ab86954be825e3577fe5926ca32b913bec08c1aa78e137",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/turbopackChunking",
    "title": "turbopackChunking",
    "type": "api",
    "summary": "Configuration options for Turbopack's production JavaScript chunker in next.config.js, including size thresholds, component chunks, and heuristics for merging chunks.",
    "sections": [
      {
        "heading": "Overview",
        "content": "This feature is currently experimental and subject to change, it's not recommended for production. Try it out and share your feedback on…",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "import type { NextConfig } from 'next'\n \nconst nextConfig = {\n  experimental: {\n    turbopackChunking: {\n      minChunkSize: 50000,\n      maxChunkCountPerGroup: 40,\n      maxMergeChunkSize: 200000,…",
            "filename": "next.config.ts"
          }
        ],
        "images": []
      },
      {
        "heading": "Size Thresholds",
        "content": "The following options control how aggressively Turbopack merges chunks and how large a chunk is allowed to grow. Sizes are in bytes of uncompressed, unminified code (roughly 5x the size of the…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Component Chunks",
        "content": "Producing component chunks is an experimental feature that aims to give you the initial page load benefits of merged chunks without sacrificing reusability. This feature lets the runtime dynamically…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Heuristics",
        "content": "These change the assumptions the chunker makes when weighing whether merging two chunks is worth it.\n\n- **`firstPageLoadPriority`** (a number between `0` and `1`): how heavily to weight the benefit…",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "minChunkSize",
        "type": "number",
        "description": "Turbopack will avoid creating more than one chunk smaller than this size by merging small chunks into larger ones. Raising this number will produce fewer, larger chunks. Meanwhile, lowering it will…",
        "default": "50000",
        "required": false
      },
      {
        "name": "maxChunkCountPerGroup",
        "type": "number",
        "description": "Turbopack will not emit more than this many chunks per chunk group (eg. a route or a dynamic import). Lowering this number will lead to more aggressive merging and less network requests per-page.…",
        "default": "40",
        "required": false
      },
      {
        "name": "maxMergeChunkSize",
        "type": "number",
        "description": "Turbopack never merges a chunk larger than this size with other chunks. This keeps the code in large chunks from being duplicated across multiple large output chunks.",
        "default": "200000",
        "required": false
      },
      {
        "name": "generateComponentChunks",
        "type": "boolean",
        "description": "When enabled, each merged production chunk also emits its constituent component chunks alongside it, so the browser runtime can fetch individual component chunks.",
        "default": "False",
        "required": false
      },
      {
        "name": "minComponentChunkSize",
        "type": "number",
        "description": "Component chunks smaller than this size are folded into a single component instead of being emitted on their own, to avoid producing many tiny chunks.",
        "default": "20000",
        "required": false
      },
      {
        "name": "firstPageLoadPriority",
        "type": "number",
        "description": "How heavily to weight the benefit of merging chunks for a single page load. Higher values merge more eagerly. If you don't have a better value, your site's bounce rate is a good approximation.",
        "default": "",
        "required": false
      },
      {
        "name": "priorityRoutes",
        "type": "array<RegExp>",
        "description": "Routes that are often the first page a visitor lands on (e.g. the homepage). Their client-side bundles are merged more eagerly to reduce the single-route request cost, at the cost of extra requests…",
        "default": "",
        "required": false
      },
      {
        "name": "priorityBoost",
        "type": "number",
        "description": "A multiplier on the single-request probability of priorityRoutes routes. Higher values merge those routes' bundles more aggressively.",
        "default": "1.5",
        "required": false
      },
      {
        "name": "requestCost",
        "type": "number",
        "description": "The estimated cost of an additional request, in bytes of uncompressed, unminified code. Larger values bias toward fewer, larger chunks and fewer requests overall.",
        "default": "200000",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "turbopack",
      "chunking",
      "next.config.js",
      "experimental",
      "JavaScript"
    ],
    "prerequisites": [],
    "_content_hash": "f696001d776de7791362fd4335d558e81749c48d297f36d3c32078f06ab97d58",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/turbopackFileSystemCache",
    "title": "Turbopack FileSystem Caching",
    "type": "api",
    "summary": "This page describes the Turbopack FileSystem Cache configuration options in Next.js, which enable caching of Turbopack's work across dev and build commands to speed up subsequent runs.",
    "sections": [
      {
        "heading": "Usage",
        "content": "Turbopack FileSystem Cache enables Turbopack to reduce work across `next dev` or `next build` commands. When enabled, Turbopack will save and restore data under the `.next` directory between runs,…",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "import type { NextConfig } from 'next'\n \nconst nextConfig: NextConfig = {\n  experimental: {\n    turbopackFileSystemCacheForDev: true,\n    turbopackFileSystemCacheForBuild: true,\n  },\n}\n \nexport…",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Options",
        "content": "- **`turbopackFileSystemCacheForDev`**  (default: `true`): caches Turbopack's work for `next dev` in `.next/dev/cache/turbopack`. Restarting the dev server reuses the previous compilation.\n\n-…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Build environments",
        "content": "The build cache lives in `.next/cache`. Builds only get faster when that directory is restored before each build.\n\n- **Self-hosted builds** : reuse the same working directory between builds.…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Version History",
        "content": "| Version | Changes |\n| --- | --- |\n| `v16.3.0` | FileSystem caching is enabled by default for builds |\n| `v16.1.0` | FileSystem caching is enabled by default for development |\n| `v16.0.0` | Beta…",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "turbopackFileSystemCacheForDev",
        "type": "boolean",
        "description": "caches Turbopack's work for `next dev` in `.next/dev/cache/turbopack`. Restarting the dev server reuses the previous compilation.",
        "default": "true",
        "required": false
      },
      {
        "name": "turbopackFileSystemCacheForBuild",
        "type": "boolean",
        "description": "caches Turbopack's work for `next build` in `.next/cache/turbopack`. Subsequent builds start warm. See Build environments.",
        "default": "true",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "Turbopack",
      "FileSystem Cache",
      "config",
      "caching"
    ],
    "prerequisites": [],
    "_content_hash": "b8985cda929002aab25a74c71ec2b550ba4838135567230c741dc34f78927fd1",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/turbopackIgnoreIssue",
    "title": "turbopack.ignoreIssue",
    "type": "api",
    "summary": "The `turbopack.ignoreIssue` option allows you to filter out specific Turbopack errors and warnings so they do not appear in the CLI output or the error overlay. This is useful for suppressing known…",
    "sections": [
      {
        "heading": "turbopack.ignoreIssue",
        "content": "The `turbopack.ignoreIssue` option allows you to filter out specific Turbopack errors and warnings so they do not appear in the CLI output or the error overlay. This is useful for suppressing known…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Usage",
        "content": "",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "import type { NextConfig } from 'next'\n \nconst nextConfig: NextConfig = {\n  turbopack: {\n    ignoreIssue: [\n      {\n        path: '**/vendor/**',\n      },\n    ],\n  },\n}\n \nexport default nextConfig",
            "filename": "next.config.ts"
          }
        ],
        "images": []
      },
      {
        "heading": "Options",
        "content": "Each rule in the `ignoreIssue` array is an object with the following fields:\n\n| Field | Type | Required | Description |\n| --- | --- | --- | --- |\n| `path` | `string \\| RegExp` | Yes | Matches against…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "path",
        "content": "A **glob pattern** (when a string) or **regular expression** that matches against the file path where the issue originated.",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "module.exports = {\n  turbopack: {\n    ignoreIssue: [\n      // Glob pattern: suppress issues from any file under vendor/\n      { path: '**/vendor/**' },\n      // RegExp: suppress issues from files…",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "title",
        "content": "An **exact string match** (when a string) or **regular expression** that matches against the issue title.",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "module.exports = {\n  turbopack: {\n    ignoreIssue: [\n      {\n        path: '**/src/**',\n        title: 'Module not found',\n      },\n    ],\n  },\n}",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "description",
        "content": "An **exact string match** (when a string) or **regular expression** that matches against the issue description.",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "module.exports = {\n  turbopack: {\n    ignoreIssue: [\n      {\n        path: '**/src/**',\n        description: /Cannot find module 'optional-dep'/,\n      },\n    ],\n  },\n}",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Examples",
        "content": "",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Suppressing warnings for optional dependencies",
        "content": "If your code uses `try/catch` around an optional `require()` call, Turbopack may report a \"Module not found\" warning. You can suppress it:",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "import type { NextConfig } from 'next'\n \nconst nextConfig: NextConfig = {\n  turbopack: {\n    ignoreIssue: [\n      {\n        path: '**/lib/optional-feature/**',\n        title: 'Module not found',…",
            "filename": "next.config.ts"
          }
        ],
        "images": []
      },
      {
        "heading": "Combining multiple rules",
        "content": "You can specify multiple rules to suppress different issues:",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "module.exports = {\n  turbopack: {\n    ignoreIssue: [\n      { path: '**/vendor/**' },\n      { path: '**/legacy/**', title: 'Module not found' },\n      { path: /generated\\//, description: /expected…",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Version History",
        "content": "| Version | Changes |\n| --- | --- |\n| `v16.2.0` | `turbopack.ignoreIssue` introduced. |",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Next Steps",
        "content": "Learn more about Turbopack configuration.\n\n- [turbopack: Configure Next.js with Turbopack-specific options](/docs/app/api-reference/config/next-config-js/turbopack)\n- [Turbopack: Turbopack is an…",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "path",
        "type": "string | RegExp",
        "description": "Matches against the file path of the issue. A glob pattern (when a string) or a regular expression.",
        "default": "",
        "required": true
      },
      {
        "name": "title",
        "type": "string | RegExp",
        "description": "Matches against the issue title. An exact string match (when a string) or a regular expression.",
        "default": "",
        "required": false
      },
      {
        "name": "description",
        "type": "string | RegExp",
        "description": "Matches against the issue description. An exact string match (when a string) or a regular expression.",
        "default": "",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "Turbopack",
      "next.config.js",
      "configuration",
      "ignoreIssue",
      "warnings",
      "errors",
      "CLI",
      "error overlay"
    ],
    "prerequisites": [],
    "_content_hash": "0a63b169eca4112f1b00d626c1d6f60fce8c49445def01dbdf74243c9ed46da2",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/turbopackLocalPostcssConfig",
    "title": "turbopackLocalPostcssConfig",
    "type": "reference",
    "summary": "This page documents the `turbopackLocalPostcssConfig` option in Next.js configuration, which changes how Turbopack resolves `postcss.config.js` files, allowing per-directory configs to take…",
    "sections": [
      {
        "heading": "Overview",
        "content": "The `turbopackLocalPostcssConfig` option changes how Turbopack resolves `postcss.config.js` files. When enabled, Turbopack searches for the config starting from the CSS file's own directory first,…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Usage",
        "content": "To enable the option, set `experimental.turbopackLocalPostcssConfig` to `true` in your `next.config.ts` file.",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "import type { NextConfig } from 'next'\n \nconst nextConfig: NextConfig = {\n  experimental: {\n    turbopackLocalPostcssConfig: true,\n  },\n}\n \nexport default nextConfig",
            "filename": "next.config.ts"
          }
        ],
        "images": []
      },
      {
        "heading": "Behavior",
        "content": "The table below shows the config resolution order for each setting:\n\n- `false` (default): Project root → CSS file's directory\n- `true`: CSS file's directory → project root\n\nWith the default behavior,…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Example",
        "content": "This is useful for projects that need different PostCSS transforms in different directories, such as a monorepo with multiple apps or design system packages. The following directory structure…",
        "code_blocks": [
          {
            "language": "text",
            "code": "my-app/\n├── postcss.config.js          ← fallback (applied if no local config is found)\n├── app/\n│   └── page.module.css        ← uses root config\n└── packages/\n    └── ui/\n        ├──…",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Version History",
        "content": "The following table lists the version history for this feature:\n\n- `v16.3.0`: `turbopackLocalPostcssConfig` introduced.",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [
      "Next.js",
      "Turbopack",
      "PostCSS",
      "configuration",
      "experimental"
    ],
    "prerequisites": [],
    "_content_hash": "619ea265880ba05138e2fd7555d71d53bde7410d9b10eec3bc775343eb664795",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/turbopackMemoryEviction",
    "title": "next.config.js: turbopackMemoryEviction | Next.js",
    "type": "api",
    "summary": "Explains the experimental `turbopackMemoryEviction` option in Next.js, which controls whether Turbopack reclaims memory when the FileSystem cache is enabled, including its three possible settings and…",
    "sections": [
      {
        "heading": "Usage",
        "content": "`turbopackMemoryEviction` controls whether Turbopack reclaims memory while the persistent (FileSystem) cache is enabled. After Turbopack writes a snapshot of its cache to disk, it can 'evict' the…",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "import type { NextConfig } from 'next'\n \nconst nextConfig: NextConfig = {\n  experimental: {\n    turbopackMemoryEviction: 'auto',\n  },\n}\n \nexport default nextConfig",
            "filename": "next.config.ts"
          }
        ],
        "images": []
      },
      {
        "heading": "Version Changes",
        "content": "| Version | Changes |\n| --- | --- |\n| `v16.3.0` | `turbopackMemoryEviction` released as experimental. |",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "turbopackMemoryEviction",
        "type": "string | boolean",
        "description": "Controls whether Turbopack reclaims memory while the persistent (FileSystem) cache is enabled. Accepts `false`, `'auto'`, or `'full'`.",
        "default": "'auto'",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "Turbopack",
      "Memory Eviction",
      "FileSystem Cache",
      "next.config.js",
      "experimental",
      "config"
    ],
    "prerequisites": [],
    "_content_hash": "73bf1ab2da22040a874e07eeeadeaceb263e63eb96ea0dd6c6b1a490b613aefe",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/turbopackRustReactCompiler",
    "title": "turbopackRustReactCompiler",
    "type": "api",
    "summary": "The `experimental.turbopackRustReactCompiler` option enables the native Rust version of the React Compiler, running it directly inside Turbopack as native code instead of through Node.js with the…",
    "sections": [
      {
        "heading": "turbopackRustReactCompiler",
        "content": "This feature is currently experimental and subject to change, it's not recommended for production. Try it out and share your feedback on GitHub.\n\nThe `experimental.turbopackRustReactCompiler` option…",
        "code_blocks": [
          {
            "language": "ts",
            "code": "import type { NextConfig } from 'next'\n\nconst nextConfig: NextConfig = {\n  // Enable the React Compiler\n  reactCompiler: true,\n  experimental: {\n    // Use the Rust port instead of the Babel…",
            "filename": "next.config.ts"
          }
        ],
        "images": []
      },
      {
        "heading": "Good to know",
        "content": "- This option requires `reactCompiler` to be enabled. It selects which implementation runs, but does not turn the compiler on by itself.\n- This option is only supported with Turbopack. Using it with…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Version History",
        "content": "| Version | Changes |\n| --- | --- |\n| `v16.3.0` | Introduced the experimental `turbopackRustReactCompiler` option for the native Rust React Compiler. |",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [
      "Next.js",
      "next.config.js",
      "Turbopack",
      "React Compiler",
      "Rust",
      "experimental",
      "configuration"
    ],
    "prerequisites": [],
    "_content_hash": "edbbbbd82dffbc19ccf2582c503b20c35b90274397831286443031b8eb312f29",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/typedRoutes",
    "title": "typedRoutes",
    "type": "api",
    "summary": "Configuration option for Next.js that enables statically typed links. Requires TypeScript in the project.",
    "sections": [
      {
        "heading": "typedRoutes",
        "content": "Note: This option has been marked as stable, so you should use `typedRoutes` instead of `experimental.typedRoutes`.\n\nSupport for statically typed links. This feature requires using TypeScript in your…",
        "code_blocks": [
          {
            "language": "js",
            "code": "/** @type {import('next').NextConfig} */\nconst nextConfig = {\n  typedRoutes: true,\n}\n \nmodule.exports = nextConfig",
            "filename": "next.config.js"
          }
        ],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [
      "Next.js",
      "typedRoutes",
      "TypeScript",
      "config",
      "statically typed links"
    ],
    "prerequisites": [],
    "_content_hash": "95bbb6c5156f454ef550e6e2963019f007b0ffa277effe1be213c640fca59764",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/typescript",
    "title": "typescript",
    "type": "api",
    "summary": "Configure TypeScript behavior with the `typescript` option in `next.config.js`.",
    "sections": [
      {
        "heading": "typescript",
        "content": "Configure TypeScript behavior with the `typescript` option in `next.config.js`:",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "module.exports = {\n  typescript: {\n    ignoreBuildErrors: false,\n    tsconfigPath: 'tsconfig.json',\n  },\n}",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "Options",
        "content": "",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "ignoreBuildErrors",
        "content": "Next.js fails your **production build** (`next build`) when TypeScript errors are present in your project.\n\nIf you'd like Next.js to dangerously produce production code even when your application has…",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "module.exports = {\n  typescript: {\n    // !! WARN !!\n    // Dangerously allow production builds to successfully complete even if\n    // your project has type errors.\n    // !! WARN !!…",
            "filename": "next.config.js"
          }
        ],
        "images": []
      },
      {
        "heading": "tsconfigPath",
        "content": "Use a different TypeScript configuration file for builds or tooling:\n\nSee the [TypeScript configuration](/docs/app/api-reference/config/typescript#custom-tsconfig-path) page for more details.",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "module.exports = {\n  typescript: {\n    tsconfigPath: 'tsconfig.build.json',\n  },\n}",
            "filename": "next.config.js"
          }
        ],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "ignoreBuildErrors",
        "type": "boolean",
        "description": "Allow production builds to complete even with TypeScript errors.",
        "default": "false",
        "required": false
      },
      {
        "name": "tsconfigPath",
        "type": "string",
        "description": "Path to a custom `tsconfig.json` file.",
        "default": "'tsconfig.json'",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "TypeScript",
      "configuration",
      "next.config.js"
    ],
    "prerequisites": [],
    "_content_hash": "349e387a8479692bd1b02583305402a421a5e15cd2f95be6be54c248788576d9",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/urlImports",
    "title": "next.config.js: urlImports | Next.js",
    "type": "reference",
    "summary": "Documentation for the experimental urlImports feature in Next.js, which allows importing modules directly from external URLs, with configuration, security model, lockfile behavior, and examples.",
    "sections": [
      {
        "heading": "urlImports",
        "content": "URL imports are an experimental feature that allows you to import modules directly from external servers (instead of from the local disk).\n\n> **Warning** : Only use domains that you trust to download…",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "module.exports = {\n  experimental: {\n    urlImports: ['https://example.com/assets/', 'https://cdn.skypack.dev'],\n  },\n}",
            "filename": "next.config.js"
          },
          {
            "language": "javascript",
            "code": "import { a, b, c } from 'https://example.com/assets/some/module.js'",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "Security Model",
        "content": "This feature is being designed with **security as the top priority** . To start, we added an experimental flag forcing you to explicitly allow the domains you accept URL imports from. We're working…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Lockfile",
        "content": "When using URL imports, Next.js will create a `next.lock` directory containing a lockfile and fetched assets. This directory **must be committed to Git** , not ignored by `.gitignore`.\n\n- When…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Examples",
        "content": "###### Skypack\n\n###### Static Image Imports\n\n###### URLs in CSS\n\n###### Asset Imports",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "import confetti from 'https://cdn.skypack.dev/canvas-confetti'\nimport { useEffect } from 'react'\n \nexport default () => {\n  useEffect(() => {\n    confetti()\n  })\n  return <p>Hello</p>\n}",
            "filename": ""
          },
          {
            "language": "javascript",
            "code": "import Image from 'next/image'\nimport logo from 'https://example.com/assets/logo.png'\n \nexport default () => (\n  <div>\n    <Image src={logo} placeholder=\"blur\" />\n  </div>\n)",
            "filename": ""
          },
          {
            "language": "css",
            "code": ".className {\n  background: url('https://example.com/assets/hero.jpg');\n}",
            "filename": ""
          },
          {
            "language": "javascript",
            "code": "const logo = new URL('https://example.com/assets/file.txt', import.meta.url)\n \nconsole.log(logo.pathname)\n \n// prints \"/_next/static/media/file.a9727b5d.txt\"",
            "filename": ""
          }
        ],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [
      "Next.js",
      "urlImports",
      "experimental",
      "configuration",
      "security",
      "lockfile",
      "Edge Runtime",
      "Skypack",
      "static imports",
      "CSS",
      "asset imports"
    ],
    "prerequisites": [],
    "_content_hash": "a54a5110c2e8686d6dd68e92970556626738b57780adfbccb30c6a324065ef83",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/useLightningcss",
    "title": "useLightningcss",
    "type": "api",
    "summary": "Experimental support for using Lightning CSS with webpack, and configuration options for controlling CSS feature transpilation.",
    "sections": [
      {
        "heading": "useLightningcss",
        "content": "This feature is currently experimental and subject to change, it's not recommended for production. Try it out and share your feedback on GitHub.\n\nExperimental support for using Lightning CSS with…",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "import type { NextConfig } from 'next'\n \nconst nextConfig: NextConfig = {\n  experimental: {\n    useLightningcss: false, // default, ignored on Turbopack\n  },\n}\n \nexport default nextConfig",
            "filename": "next.config.ts"
          }
        ],
        "images": []
      },
      {
        "heading": "lightningCssFeatures",
        "content": "By default, Lightning CSS decides which CSS features to transpile based on your browserslist targets. The `lightningCssFeatures` option lets you override this by forcing specific features to always…",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "import type { NextConfig } from 'next'\n \nconst nextConfig: NextConfig = {\n  experimental: {\n    useLightningcss: true,\n    lightningCssFeatures: {\n      // Always transpile these features, even if…",
            "filename": "next.config.ts"
          }
        ],
        "images": []
      },
      {
        "heading": "Options",
        "content": "| Option | Type | Description |\n| --- | --- | --- |\n| `include` | `string[]` | Features to always transpile, regardless of browser targets. |\n| `exclude` | `string[]` | Features to never transpile,…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Available features",
        "content": "Individual features:\n\n| Feature name | Description |\n| --- | --- |\n| `nesting` | CSS Nesting |\n| `not-selector-list` | `:not` with multiple selectors |\n| `dir-selector` | `:dir()` selector |\n|…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Version History",
        "content": "| Version | Changes |\n| --- | --- |\n| `16.2.0` | `lightningCssFeatures` added. |\n| `15.1.0` | Support for `useSwcCss` was removed from Turbopack. |\n| `14.2.0` | Turbopack's default CSS processor was…",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "useLightningcss",
        "type": "boolean",
        "description": "Enables Lightning CSS for webpack. Defaults to false. Ignored on Turbopack.",
        "default": "false",
        "required": false
      },
      {
        "name": "lightningCssFeatures.include",
        "type": "string[]",
        "description": "Features to always transpile, regardless of browser targets.",
        "default": "",
        "required": false
      },
      {
        "name": "lightningCssFeatures.exclude",
        "type": "string[]",
        "description": "Features to never transpile, even when browser targets would require them.",
        "default": "",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "config",
      "lightningcss",
      "webpack",
      "turbopack",
      "CSS",
      "experimental"
    ],
    "prerequisites": [],
    "_content_hash": "142854399c0dba9b0c44bf4501c8afcf331dd3206b43bd8efc47a0057545c1ec",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/useOffline",
    "title": "next.config.js: useOffline | Next.js",
    "type": "reference",
    "summary": "This page documents the experimental `useOffline` configuration option in Next.js, which enables offline connectivity detection, automatic retry of failed navigation, prefetch, and Server Action…",
    "sections": [
      {
        "heading": "useOffline",
        "content": "This feature is currently experimental and subject to change, it's not recommended for production. Try it out and share your feedback on GitHub.\n\nThe `useOffline` configuration option enables offline…",
        "code_blocks": [
          {
            "language": "typescript",
            "code": "import type { NextConfig } from 'next'\n \nconst nextConfig: NextConfig = {\n  experimental: {\n    useOffline: true,\n  },\n}\n \nexport default nextConfig",
            "filename": "next.config.ts"
          }
        ],
        "images": []
      },
      {
        "heading": "How retry works",
        "content": "The offline state is entered through one of two paths:\n\n- **Browser event.** Next.js registers a `window.addEventListener('offline', ...)` listener. When the OS reports the network interface as down,…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "The connectivity check",
        "content": "Each check issues a single `HEAD` request to the current page's URL with the RSC header set, the same endpoint navigations use. The request is aborted after 200 ms.\n\nTwo outcomes count as…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Backoff",
        "content": "Delays between checks are stepped, not exponential, and capped at 3 seconds:\n\n| Attempt | Delay before next check |\n| --- | --- |\n| 1 | 500 ms |\n| 2 | 1 s |\n| 3 | 2 s |\n| 4 and after | 3 s |\n\nThe…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Giving up",
        "content": "The polling loop never gives up on its own. It continues at the 3-second cap until a check succeeds or the page unloads. A device that goes offline for hours and then regains connectivity will have…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Retry of framework requests",
        "content": "While the offline state is active, any navigation, prefetch, or Server Action waits for the next connectivity check to succeed, whether it was newly issued or already in flight when the connection…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Traffic at reconnection",
        "content": "A single client does not produce a runaway burst of traffic against its origin:\n\n- While the client is offline, a failed `fetch()` rejects locally at the browser's network layer. The request never…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Version History",
        "content": "| Version | Changes |\n| --- | --- |\n| `v16.x.0` | `experimental.useOffline` configuration option introduced. |",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [
      "Next.js",
      "configuration",
      "offline",
      "experimental",
      "useOffline",
      "connectivity",
      "retry",
      "prefetch",
      "Server Actions",
      "navigation"
    ],
    "prerequisites": [],
    "_content_hash": "f5d4cc76cc4743fd20d4cddc4c9bf868435989a753f09cb4cbdfca1f978e19a3",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/useTypeScriptCli",
    "title": "next.config.js: useTypeScriptCli | Next.js",
    "type": "api",
    "summary": "Documents the experimental `experimental.useTypeScriptCli` configuration option, which controls whether `next build` uses the project-local `tsc` CLI or the TypeScript JavaScript compiler API for…",
    "sections": [
      {
        "heading": "useTypeScriptCli",
        "content": "This feature is currently experimental and subject to change, it's not recommended for production. Try it out and share your feedback on [GitHub](https://github.com/vercel/next.js/issues).\n\nBy…",
        "code_blocks": [
          {
            "language": "bash",
            "code": "pnpm add -D typescript@^7",
            "filename": ""
          },
          {
            "language": "typescript",
            "code": "import type { NextConfig } from 'next'\n \nconst nextConfig: NextConfig = {\n  experimental: {\n    useTypeScriptCli: false,\n  },\n}\n \nexport default nextConfig",
            "filename": "next.config.ts"
          }
        ],
        "images": []
      },
      {
        "heading": "Behavior",
        "content": "- Next.js continues to generate `next-env.d.ts` and route types and to apply its recommended `tsconfig` settings before running the checker.\n\n- TypeScript diagnostics are printed directly from `tsc`.…",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "experimental.useTypeScriptCli",
        "type": "boolean",
        "description": "When true, `next build` uses the project-local `tsc` CLI command for type checking. When false, Next.js loads the TypeScript JavaScript compiler API instead. This is experimental; setting it to false…",
        "default": "true",
        "required": false
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "next.config.js",
      "TypeScript",
      "useTypeScriptCli",
      "tsc",
      "TypeScript 7",
      "experimental",
      "type checking"
    ],
    "prerequisites": [],
    "_content_hash": "d032b9359b2721ab639cb9a35c218f3266d388708b77db105d929361ed18ce82",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/webVitalsAttribution",
    "title": "webVitalsAttribution",
    "type": "reference",
    "summary": "Explains the experimental webVitalsAttribution option in next.config.js, which enables per-metric Web Vitals attribution to help pinpoint the source of Web Vitals issues.",
    "sections": [
      {
        "heading": "webVitalsAttribution",
        "content": "This feature is currently experimental and subject to change, it's not recommended for production. Try it out and share your feedback on [GitHub](https://github.com/vercel/next.js/issues).\n\nWhen…",
        "code_blocks": [
          {
            "language": "js",
            "code": "module.exports = {\n  experimental: {\n    webVitalsAttribution: ['CLS', 'LCP'],\n  },\n}",
            "filename": "next.config.js"
          }
        ],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [
      "Next.js",
      "next.config.js",
      "web-vitals",
      "attribution",
      "CLS",
      "LCP",
      "experimental"
    ],
    "prerequisites": [],
    "_content_hash": "e00c0b41eff785658ac0de0868fdd1b3e00edb1366a93d96334a4164fd0c0845",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/next-config-js/webpack",
    "title": "Custom Webpack Config",
    "type": "api",
    "summary": "Describes how to customize the webpack configuration in Next.js using the `webpack` option in `next.config.js`, including the properties available in the second argument and an example of extending…",
    "sections": [
      {
        "heading": "Custom Webpack Config",
        "content": "**Good to know** : changes to webpack config are not covered by semver so proceed at your own risk\n\nBefore continuing to add custom webpack configuration to your application make sure Next.js doesn't…",
        "code_blocks": [
          {
            "language": "javascript",
            "code": "module.exports = {\n  webpack: (\n    config,\n    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }\n  ) => {\n    // Important: return the modified config\n    return config\n  },\n}",
            "filename": "next.config.js"
          },
          {
            "language": "javascript",
            "code": "// Example config for adding a loader that depends on babel-loader\n// This source was taken from the @next/mdx plugin source:\n//…",
            "filename": ""
          }
        ],
        "images": []
      },
      {
        "heading": "nextRuntime",
        "content": "Notice that `isServer` is `true` when `nextRuntime` is `\"edge\"` or `\"nodejs\"`, `nextRuntime` `\"edge\"` is currently for proxy and Server Components in edge runtime only.",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [
      {
        "name": "config",
        "type": "Object",
        "description": "The webpack configuration object that should be modified and returned.",
        "default": "",
        "required": true
      },
      {
        "name": "buildId",
        "type": "String",
        "description": "The build id, used as a unique identifier between builds.",
        "default": "",
        "required": true
      },
      {
        "name": "dev",
        "type": "Boolean",
        "description": "Indicates if the compilation will be done in development.",
        "default": "",
        "required": true
      },
      {
        "name": "isServer",
        "type": "Boolean",
        "description": "It's `true` for server-side compilation, and `false` for client-side compilation.",
        "default": "",
        "required": true
      },
      {
        "name": "nextRuntime",
        "type": "String | undefined",
        "description": "The target runtime for server-side compilation; either `\"edge\"` or `\"nodejs\"`, it's `undefined` for client-side compilation.",
        "default": "",
        "required": true
      },
      {
        "name": "defaultLoaders",
        "type": "Object",
        "description": "Default loaders used internally by Next.js. Contains `babel`: `Object` - Default `babel-loader` configuration.",
        "default": "",
        "required": true
      },
      {
        "name": "webpack",
        "type": "Object",
        "description": "The webpack instance used by Next.js.",
        "default": "",
        "required": true
      }
    ],
    "see_also": [],
    "tags": [
      "Next.js",
      "webpack",
      "next.config.js",
      "configuration",
      "build",
      "bundler"
    ],
    "prerequisites": [],
    "_content_hash": "ae1f928a2b66c268bcc350bac28580b1f61edcd64fcbcfe34efc1594198b0b09",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/config/typescript",
    "title": "Configuration: TypeScript | Next.js",
    "type": "reference",
    "summary": "Extraction fallback content.",
    "sections": [
      {
        "heading": "Configuration: TypeScript | Next.js",
        "content": "This page is also available as Markdown: request this page's URL with an `Accept: text/markdown` header.   For an index of  Next.js documentation , see  [/docs/llms.txt](/docs/llms.txt).Copy page\n\n##### TypeScript\n\nLast updated  August 3, 2026\n\n\nNext.js comes with built-in TypeScript, automatically installing the necessary packages and configuring the proper settings when you create a new project with `create-next-app`.\n\n\n\n\nTo add TypeScript to an existing project, rename a file to `.ts` / `.tsx`. Run `next dev` and `next build` to automatically install the necessary dependencies and add a `tsconfig.json` file with the recommended config options.\n\n\n\n\n> **Good to know** : If you already have a `jsconfig.json` file, copy the `paths` compiler option from the old `jsconfig.json` into the new `tsconfig.json` file, and delete the old `jsconfig.json` file.\n\n\n\n\n##### Using TypeScript 7\n\n\n\n\n[TypeScript 7](https://devblogs.microsoft.com/typescript/announcing-typescript-7-0/) does not currently provide the JavaScript compiler API. To use TypeScript 7 during `next build`, install it in your project:\n\n\npnpmnpmyarnbunTerminal\n \n \n \n\n\nNext.js uses the project-local `tsc` CLI by default, so no additional configuration is required. To use the JavaScript compiler API instead, set [`experimental.useTypeScriptCli`](/docs/app/api-reference/config/next-config-js/useTypeScriptCli) to `false`.\n\n\n\n\n> **Good to know** :\n> \n> \n> \n> \n> \n> \n> - CLI type checking prints the native `tsc` diagnostics. It does not apply Next.js-specific code frames or rewrite errors for routes, pages, layouts, or route handlers.\n> \n> - The CLI checks the complete project selected by your `tsconfig` file. This includes test files and `.next/dev/types` when they are included by that configuration. [`next build --debug-build-paths`](/docs/app/api-reference/cli/next#next-build-options) does not narrow the files that are type checked and produces a warning when used with this option.\n> \n> - [`typescript.tsconfigPath`](#custom-tsconfig-path) continues to select the configuration passed to `tsc`. [`typescript.ignoreBuildErrors`](#disabling-typescript-errors-in-production) skips the type-checking step, including the CLI checker.\n> \n> - `experimental.useTypeScriptCli` is experimental and its behavior may change.\n\n\n\n\n##### IDE Plugin\n\n\n\nNext.js includes a custom TypeScript plugin and type checker, which VSCode and other code editors can use for advanced type-checking and auto-completion.\n\n\n\nYou can enable the plugin in VS Code by:\n\n\n\n\n\n- Opening the command palette (`Ctrl/⌘` + `Shift` + `P`)\n\n- Searching for \"TypeScript: Select TypeScript Version\"\n\n- Selecting \"Use Workspace Version\"\n\n\n<img src=\"/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fdocs%2Flight%2Ftypescript-command-palette.png&w=3840&q=75\" alt=\"TypeScript Command Palette\"><img src=\"/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fdocs%2Fdark%2Ftypescript-command-palette.png&w=3840&q=75\" alt=\"TypeScript Command Palette\">\n\nNow, when editing files, the custom plugin will be enabled. By default, the project-local `tsc` CLI is used when running `next build`. Set [`experimental.useTypeScriptCli`](#using-typescript-7) to `false` to use the custom type checker instead.\n\n\n\nThe TypeScript plugin can help with:\n\n\n\n\n\n- Warning if invalid values for [segment config options](/docs/app/api-reference/file-conventions/route-segment-config) are passed.\n\n- Showing available options and in-context documentation.\n\n- Ensuring the `'use client'` directive is used correctly.\n\n- Ensuring client hooks (like `useState`) are only used in Client Components.\n\n\n\n\n> **🎥 Watch:**  Learn about the built-in TypeScript plugin → [YouTube (3 minutes)](https://www.youtube.com/watch?v=pqMqn9fKEf8)\n\n\n\n##### End-to-End Type Safety\n\n\n\nThe Next.js App Router has  **enhanced type safety** . This includes:\n\n\n\n\n\n- **No serialization of data between fetching function and page** : You can `fetch` directly in components, layouts, and pages on the server. This data  *does not*  need to be serialized (converted to a string) to be passed to the client side for consumption in React. Instead, since `app` uses Server Components by default, we can use values like `Date`, `Map`, `Set`, and more without any extra steps. Previously, you needed to manually type the boundary between server and client with Next.js-specific types.\n\n- **Streamlined data flow between components** : With the removal of `_app` in favor of root layouts, it is now easier to visualize the data flow between components and pages. Previously, data flowing between individual `pages` and `_app` were difficult to type and could introduce confusing bugs. With [colocated data fetching](/docs/app/getting-started/fetching-data) in the App Router, this is no longer an issue.\n\n\n\n\n[Data Fetching in Next.js](/docs/app/getting-started/fetching-data) now provides as close to end-to-end type safety as possible without being prescriptive about your database or content provider selection.\n\n\n\nWe're able to type the response data as you would expect with normal TypeScript. For example:\n\napp/page.tsxTypeScriptJavaScriptTypeScript\n\nFor  *complete*  end-to-end type safety, this also requires your database or content provider to support TypeScript. This could be through using an [ORM](https://en.wikipedia.org/wiki/Object%E2%80%93relational_mapping) or type-safe query builder.\n\n\n\n##### Route-Aware Type Helpers\n\n\n\nNext.js generates global helpers for App Router route types. These are available without imports and are generated during `next dev`, `next build`, or via [`next typegen`](/docs/app/api-reference/cli/next#next-typegen-options):\n\n\n\n\n\n- [`PageProps`](/docs/app/api-reference/file-conventions/page#page-props-helper)\n\n- [`LayoutProps`](/docs/app/api-reference/file-conventions/layout#layout-props-helper)\n\n- [`RouteContext`](/docs/app/api-reference/file-conventions/route#route-context-helper)\n\n\n\n\n\n##### `next-env.d.ts`\n\n\n\n\nNext.js generates a `next-env.d.ts` file in your project root. This file references Next.js type definitions, allowing TypeScript to recognize non-code imports (images, stylesheets, etc.) and Next.js-specific types.\n\n\n\n\nRunning `next dev`, `next build`, or [`next typegen`](/docs/app/api-reference/cli/next#next-typegen-options) regenerates this file.\n\n\n\n\n> **Good to know** :\n> \n> \n> \n> \n> \n> \n> - `next-env.d.ts` is managed by Next.js. Its contents are an implementation detail and may change over time. Add it to `.gitignore`. If your project already tracks the file, remove it from Git. Do not edit this file manually.\n> \n> - The file must be in your `tsconfig.json` `include` array (`create-next-app` does this automatically).\n\n\n\n\n##### Examples\n\n\n\n\n###### Type Checking Next.js Configuration Files\n\n\n\n\nYou can use TypeScript and import types in your Next.js configuration by using `next.config.ts`.\n\n\nnext.config.ts\n\n\nModule resolution in `next.config.ts` is currently limited to CommonJS. However, ECMAScript Modules (ESM) syntax is available when [using Node.js native TypeScript resolver](#using-nodejs-native-typescript-resolver-for-nextconfigts) for Node.js v22.10.0 and higher.\n\n\n\n\nWhen using the `next.config.js` file, you can add some type checking in your IDE using JSDoc as below:\n\n\nnext.config.js\n\n\n###### Using Node.js Native TypeScript Resolver for `next.config.ts`\n\n\n\n\n> **Note** : Available on Node.js v22.10.0+ and only when the feature is enabled. Next.js does not enable it.\n\n\n\n\nNext.js detects the [Node.js native TypeScript resolver](https://nodejs.org/api/typescript.html) via [`process.features.typescript`](https://nodejs.org/api/process.html#processfeaturestypescript), added in  **v22.10.0** . When present, `next.config.ts` can use native ESM, including top‑level `await` and dynamic `import()`. This mechanism inherits the capabilities and limitations of Node's resolver.\n\n\n\n\nIn Node.js versions  **v22.18.0+** , `process.features.typescript` is enabled by default. For versions between  **v22.10.0**  and  **22.17.x** , opt in with `NODE_OPTIONS=--experimental-transform-types`:\n\n\nTerminal\n\n\n###### For CommonJS Projects (Default)\n\n\n\n\nAlthough `next.config.ts` supports native ESM syntax in CommonJS projects, Node.js will still assume `next.config.ts` is a CommonJS file by default, resulting in Node.js reparsing the file as ESM when module syntax is detected. Therefore, we recommend using the `next.config.mts` file for CommonJS projects to explicitly indicate it's an ESM module:\n\n\nnext.config.mts\n\n\n###### For ESM Projects\n\n\n\n\nWhen `\"type\"` is set to `\"module\"` in `package.json`, your project uses ESM. Learn more about this setting [in the Node.js docs](https://nodejs.org/api/packages.html#type). In this case, you can write `next.config.ts` directly with ESM syntax.\n\n\n\n\n> **Good to know** : When using `\"type\": \"module\"` in your `package.json`, all `.js` and `.ts` files in your project are treated as ESM modules by default. You may need to rename files with CommonJS syntax to `.cjs` or `.cts` extensions if needed.\n\n\n\n\n###### Statically Typed Links\n\n\n\n\nNext.js can statically type links to prevent typos and other errors when using `next/link`, improving type safety when navigating between pages.\n\n\n\n\nWorks in both the Pages and App Router for the `href` prop in `next/link`. In the App Router, it also types `next/navigation` methods like `push`, `replace`, and `prefetch`. It does not type `next/router` methods in Pages Router.\n\n\n\n\nLiteral `href` strings are validated, while non-literal `href`s may require a cast with `as Route`.\n\n\n\n\nTo opt-into this feature, `typedRoutes` needs to be enabled and the project needs to be using TypeScript.\n\n\nnext.config.ts\n\n\nNext.js will generate a link definition in `.next/types` that contains information about all existing routes in your application, which TypeScript can then use to provide feedback in your editor about invalid links.\n\n\n\n\n> **Good to know** : If you set up your project without `create-next-app`, ensure the generated Next.js types are included by adding `.next/types/**/*.ts` to the `include` array in your `tsconfig.json`:\n\n\n \ntsconfig.json\n \n\n\nCurrently, support includes any string literal, including dynamic segments. For non-literal strings, you need to manually cast with `as Route`. The example below shows both `next/link` and `next/navigation` usage:\n\n\napp/example-client.tsx\n\n\nThe same applies for redirecting routes defined by proxy:\n\n\nproxy.ts\napp/some/page.tsx\n\n\nTo accept `href` in a custom component wrapping `next/link`, use a generic:\n\n\n\n\n\nYou can also type a simple data structure and iterate to render links:\n\n\ncomponents/nav-items.ts\n\n\nThen, map over the items to render `Link`s:\n\n\ncomponents/nav.tsx\n\n\n> **How does it work?** \n> \n> \n> \n> \n> When running, `next typegen`, `next dev` or `next build`, Next.js generates a hidden `.d.ts` file inside `.next` that contains information about all existing routes in your application (all valid routes as the `href` type of `Link`). This `.d.ts` file is included in `tsconfig.json` and the TypeScript compiler will check that `.d.ts` and provide feedback in your editor about invalid links.\n\n\n\n\n###### Type IntelliSense for Environment Variables\n\n\n\n\nDuring development, Next.js generates a `.d.ts` file in `.next/types` that contains information about the loaded environment variables for your editor's IntelliSense. If the same environment variable key is defined in multiple files, it is deduplicated according to the [Environment Variable Load Order](/docs/app/guides/environment-variables#environment-variable-load-order).\n\n\n\n\nTo opt-into this feature, `experimental.typedEnv` needs to be enabled and the project needs to be using TypeScript.\n\n\nnext.config.ts\n\n\n> **Good to know** : Types are generated based on the environment variables loaded at development runtime, which excludes variables from `.env.production*` files by default. To include production-specific variables, run `next dev` with `NODE_ENV=production`.\n\n\n\n\n###### With Async Server Components\n\n\n\nTo use an `async` Server Component with TypeScript, ensure you are using TypeScript `5.1.3` or higher and `@types/react` `18.2.8` or higher.\n\n\n\nIf you are using an older version of TypeScript, you may see a `'Promise<Element>' is not a valid JSX element` type error. Updating to the latest version of TypeScript and `@types/react` should resolve this issue.\n\n\n \n\n\n###### Incremental type checking\n\n\n\n\nSince `v10.2.1` Next.js supports [incremental type checking](https://www.typescriptlang.org/tsconfig#incremental) when enabled in your `tsconfig.json`, this can help speed up type checking in larger applications.\n\n\n\n\n###### Custom `tsconfig` path\n\n\n\n\nIn some cases, you might want to use a different TypeScript configuration for builds or tooling. To do that, set `typescript.tsconfigPath` in `next.config.ts` to point Next.js to another `tsconfig` file.\n\n\nnext.config.ts\n\n\nFor example, switch to a different config for production builds:\n\n\nnext.config.ts\nWhy you might use a separate `tsconfig` for builds\n\nYou might need to relax checks in scenarios like monorepos, where the build also validates shared dependencies that don't match your project's standards, or when loosening checks in CI to continue delivering while migrating locally to stricter TypeScript settings (and still wanting your IDE to highlight misuse).\n\n\n\nFor example, if your project uses `useUnknownInCatchVariables` but some monorepo dependencies still assume `any`:\n\ntsconfig.build.json\n\nThis keeps your editor strict via `tsconfig.json` while allowing the production build to use relaxed settings.\n\n\n\n\n> **Good to know** :\n> \n> \n> \n> \n> \n> \n> - IDEs typically read `tsconfig.json` for diagnostics and IntelliSense, so you can still see IDE warnings while production builds use the alternate config. Mirror critical options if you want parity in the editor.\n> \n> - In development, only `tsconfig.json` is watched for changes. If you edit a different file name via `typescript.tsconfigPath`, restart the dev server to apply changes.\n> \n> - The configured file is used in `next dev`, `next build`, and `next typegen`.\n\n\n\n\n###### Disabling TypeScript errors in production\n\n\n\n\nNext.js fails your  **production build**  (`next build`) when TypeScript errors are present in your project.\n\n\n\n\nIf you'd like Next.js to dangerously produce production code even when your application has errors, you can disable the built-in type checking step.\n\n\n\n\nIf disabled, be sure you are running type checks as part of your build or deploy process, otherwise this can be very dangerous.\n\n\n\n\nOpen `next.config.ts` and enable the `ignoreBuildErrors` option in the [`typescript`](/docs/app/api-reference/config/next-config-js/typescript) config:\n\n\nnext.config.ts\n\n\n> **Good to know** : You can run `tsc --noEmit` to check for TypeScript errors yourself before building. This is useful for CI/CD pipelines where you'd like to check for TypeScript errors before deploying.\n\n\n\n\n###### Custom type declarations\n\n\n\n\nWhen you need to declare custom types, you might be tempted to modify `next-env.d.ts`. However, this file is automatically generated, so any changes you make will be overwritten. Instead, you should create a new file, let's call it `new-types.d.ts`, and reference it in your `tsconfig.json`:\n\n\ntsconfig.json\n\n\n##### Version Changes\n\n\n\n\n\n\n\n| Version | Changes |\n| --- | --- |\n\n\n\n\n| `v15.0.0` | [`next.config.ts`](#type-checking-nextjs-configuration-files) support added for TypeScript projects. |\n| `v13.2.0` | Statically typed links are available in beta. |\n| `v12.0.0` | [SWC](/docs/architecture/nextjs-compiler) is now used by default to compile TypeScript and TSX for faster builds. |\n| `v10.2.1` | [Incremental type checking](https://www.typescriptlang.org/tsconfig#incremental) support added when enabled in your `tsconfig.json`. |\n\n\n\n\n\nWas this helpful?\n\nsupported.Send",
        "code_blocks": [
          {
            "language": "carbon",
            "code": "pnpm add -D typescript@^7",
            "filename": ""
          },
          {
            "language": "gdscript",
            "code": "async function getData() {\n  const res = await fetch('https://api.example.com/...')\n  // The return value is *not* serialized\n  // You can return Date, Map, Set, etc.\n  return res.json()\n}\n \nexport default async function Page() {\n  const name = await getData()\n \n  return '...'\n}",
            "filename": ""
          },
          {
            "language": "python",
            "code": "import type { NextConfig } from 'next'\n \nconst nextConfig: NextConfig = {\n  /* config options here */\n}\n \nexport default nextConfig",
            "filename": ""
          },
          {
            "language": "gdscript",
            "code": "// @ts-check\n \n/** @type {import('next').NextConfig} */\nconst nextConfig = {\n  /* config options here */\n}\n \nmodule.exports = nextConfig",
            "filename": ""
          },
          {
            "language": "carbon",
            "code": "NODE_OPTIONS=--experimental-transform-types next <command>",
            "filename": ""
          },
          {
            "language": "python",
            "code": "import type { NextConfig } from 'next'\n \n// Top-level await and dynamic import are supported\nconst flags = await import('./flags.js').then((m) => m.default ?? m)\n \nconst nextConfig: NextConfig = {\n  /* config options here */\n  typedRoutes: Boolean(flags?.typedRoutes),\n}\n \nexport default nextConfig",
            "filename": ""
          },
          {
            "language": "python",
            "code": "import type { NextConfig } from 'next'\n \nconst nextConfig: NextConfig = {\n  typedRoutes: true,\n}\n \nexport default nextConfig",
            "filename": ""
          },
          {
            "language": "carbon",
            "code": "{\n  \"include\": [\n    \"next-env.d.ts\",\n    \".next/types/**/*.ts\",\n    \"**/*.ts\",\n    \"**/*.tsx\"\n  ],\n  \"exclude\": [\"node_modules\"]\n}",
            "filename": ""
          },
          {
            "language": "python",
            "code": "'use client'\n \nimport type { Route } from 'next'\nimport Link from 'next/link'\nimport { useRouter } from 'next/navigation'\n \nexport default function Example() {\n  const router = useRouter()\n  const slug = 'nextjs'\n \n  return (\n    <>\n      {/* Link: literal and dynamic */}\n      <Link href=\"/about\" />\n      <Link href={`/blog/${slug}`} />\n      <Link href={('/blog/' + slug) as Route} />\n      {/* TypeScript error if href is not a valid route */}\n      <Link href=\"/aboot\" />\n \n      {/* Router: literal and dynamic strings are validated */}\n      <button onClick={() => router.push('/about')}>Push About</button>\n      <button onClick={() => router.replace(`/blog/${slug}`)}>\n        Replace Blog\n      </button>\n      <button onClick={() => router.prefetch('/contact')}>\n        Prefetch Contact\n      </button>\n \n      {/* For non-literal strings, cast to Route */}\n      <button onClick={() => router.push(('/blog/' + slug) as Route)}>\n        Push Non-literal Blog\n      </button>\n    </>\n  )\n}",
            "filename": ""
          },
          {
            "language": "python",
            "code": "import { NextRequest, NextResponse } from 'next/server'\n \nexport function proxy(request: NextRequest) {\n  if (request.nextUrl.pathname === '/proxy-redirect') {\n    return NextResponse.redirect(new URL('/', request.url))\n  }\n \n  return NextResponse.next()\n}",
            "filename": ""
          },
          {
            "language": "python",
            "code": "import type { Route } from 'next'\n \nexport default function Page() {\n  return <Link href={'/proxy-redirect' as Route}>Link Text</Link>\n}",
            "filename": ""
          },
          {
            "language": "python",
            "code": "import type { Route } from 'next'\nimport Link from 'next/link'\n \nfunction Card<T extends string>({ href }: { href: Route<T> | URL }) {\n  return (\n    <Link href={href}>\n      <div>My Card</div>\n    </Link>\n  )\n}",
            "filename": ""
          },
          {
            "language": "python",
            "code": "import type { Route } from 'next'\n \ntype NavItem<T extends string = string> = {\n  href: T\n  label: string\n}\n \nexport const navItems: NavItem<Route>[] = [\n  { href: '/', label: 'Home' },\n  { href: '/about', label: 'About' },\n  { href: '/blog', label: 'Blog' },\n]",
            "filename": ""
          },
          {
            "language": "python",
            "code": "import Link from 'next/link'\nimport { navItems } from './nav-items'\n \nexport function Nav() {\n  return (\n    <nav>\n      {navItems.map((item) => (\n        <Link key={item.href} href={item.href}>\n          {item.label}\n        </Link>\n      ))}\n    </nav>\n  )\n}",
            "filename": ""
          },
          {
            "language": "python",
            "code": "import type { NextConfig } from 'next'\n \nconst nextConfig: NextConfig = {\n  experimental: {\n    typedEnv: true,\n  },\n}\n \nexport default nextConfig",
            "filename": ""
          },
          {
            "language": "python",
            "code": "import type { NextConfig } from 'next'\n \nconst nextConfig: NextConfig = {\n  typescript: {\n    tsconfigPath: 'tsconfig.build.json',\n  },\n}\n \nexport default nextConfig",
            "filename": ""
          },
          {
            "language": "python",
            "code": "import type { NextConfig } from 'next'\n \nconst isProd = process.env.NODE_ENV === 'production'\n \nconst nextConfig: NextConfig = {\n  typescript: {\n    tsconfigPath: isProd ? 'tsconfig.build.json' : 'tsconfig.json',\n  },\n}\n \nexport default nextConfig",
            "filename": ""
          },
          {
            "language": "text",
            "code": "{\n  \"extends\": \"./tsconfig.json\",\n  \"compilerOptions\": {\n    \"useUnknownInCatchVariables\": false\n  }\n}",
            "filename": ""
          },
          {
            "language": "python",
            "code": "import type { NextConfig } from 'next'\n \nconst nextConfig: NextConfig = {\n  typescript: {\n    // !! WARN !!\n    // Dangerously allow production builds to successfully complete even if\n    // your project has type errors.\n    // !! WARN !!\n    ignoreBuildErrors: true,\n  },\n}\n \nexport default nextConfig",
            "filename": ""
          },
          {
            "language": "carbon",
            "code": "{\n  \"compilerOptions\": {\n    \"skipLibCheck\": true\n    //...truncated...\n  },\n  \"include\": [\n    \"new-types.d.ts\",\n    \"next-env.d.ts\",\n    \".next/types/**/*.ts\",\n    \"**/*.ts\",\n    \"**/*.tsx\"\n  ],\n  \"exclude\": [\"node_modules\"]\n}",
            "filename": ""
          }
        ],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [],
    "prerequisites": [],
    "_content_hash": "b6197612bfa8131f8f3b545e9e76fc57ac9544976abfcc2e23d0c67dbadd0d57",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/directives",
    "title": "Directives",
    "type": "reference",
    "summary": "This page provides an index of Next.js directives, including use cache, use client, and use server, with links to their detailed documentation.",
    "sections": [
      {
        "heading": "Directives",
        "content": "The following directives are available:\n\n- [use cache](/docs/app/api-reference/directives/use-cache): Learn how to use the \"use cache\" directive to cache data in your Next.js application.\n- [use…",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [
      "Next.js",
      "directives",
      "use cache",
      "use cache: private",
      "use cache: remote",
      "use client",
      "use server"
    ],
    "prerequisites": [],
    "_content_hash": "5733a7867e43d66f8922591aa49bb0117cfbe071a1fb2c75e0e906c96220f0b9",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/directives/use-cache",
    "title": "Directives: use cache | Next.js",
    "type": "reference",
    "summary": "Extraction fallback content.",
    "sections": [
      {
        "heading": "Directives: use cache | Next.js",
        "content": "This page is also available as Markdown: request this page's URL with an `Accept: text/markdown` header.   For an index of  Next.js documentation , see  [/docs/llms.txt](/docs/llms.txt).Copy page\n\n##### use cache\n\nLast updated  July 22, 2026\n\nThe `use cache` directive allows you to mark a route, React component, or a function as cacheable. It can be used at the top of a file to indicate that all exports in the file should be cached, or inline at the top of a function or component to cache the return value. Functions and components that use `use cache` must be async.\n\n\n\n\n> **Good to know:** \n> \n> \n> \n> \n> \n> \n> - To use cookies or headers, read them outside cached scopes and pass values as arguments. This is the preferred pattern.\n> \n> - If the in-memory cache isn't sufficient for runtime data, [`'use cache: remote'`](/docs/app/api-reference/directives/use-cache-remote) allows platforms to provide a dedicated cache handler, though it requires a network roundtrip to check the cache and typically incurs platform fees.\n> \n> - For compliance requirements or when you can't refactor to pass runtime data as arguments to a `use cache` scope, see [`'use cache: private'`](/docs/app/api-reference/directives/use-cache-private).\n\n\n\n\n##### Usage\n\n\n\n\n`use cache` is a Cache Components feature. To enable it, add the [`cacheComponents`](/docs/app/api-reference/config/next-config-js/cacheComponents) option to your `next.config.ts` file:\n\n\nnext.config.tsTypeScriptJavaScriptTypeScript\n \n\n\nThen, add `use cache` at the file, component, or function level. All functions and components using `use cache` must be async. When used at file level, every exported function becomes a cached function and must also be async:\n\n\n\n\n\n##### How `use cache` works\n\n\n\n\n###### Cache keys\n\n\n\n\nA cache entry's key is generated using a serialized version of its inputs, which includes:\n\n\n\n\n\n\n- **Build ID**  - Unique per build, changing this invalidates all cache entries. If [`deploymentId`](/docs/app/api-reference/config/next-config-js/deploymentId) is configured, it overrides the build ID for cache key purposes.\n\n- **Function ID**  - A secure hash of the function's location and signature in the codebase\n\n- **Serializable arguments**  - Props (for components) or function arguments\n\n- **HMR refresh hash**  (development only) - Invalidates cache on hot module replacement\n\n\n\n\n\nWhen a cached function references variables from outer scopes, those variables are automatically captured and bound as arguments, making them part of the cache key.\n\n\nlib/data.ts\n\n\nIn the snippet above, `userId` is captured from the outer scope and `filter` is passed as an argument, so both become part of the `getData` function's cache key. This means different user and filter combinations will have separate cache entries.\n\n\n\n\n> **Good to know:**  When a cached function reads [root parameters](/docs/app/api-reference/functions/next-root-params), only the ones it actually reads become part of its cache key.\n\n\n\n\n##### Serialization\n\n\n\n\nArguments to cached functions and their return values must be serializable.\n\n\n\n\nFor a complete reference, see:\n\n\n\n\n\n\n- [Serializable arguments](https://react.dev/reference/rsc/use-server#serializable-parameters-and-return-values) - Uses  **React Server Components**  serialization\n\n- [Serializable return types](https://react.dev/reference/rsc/use-client#serializable-types) - Uses  **React Client Components**  serialization\n\n\n\n\n\n> **Good to know:**  Arguments and return values use different serialization systems. Server Component serialization (for arguments) is more restrictive than Client Component serialization (for return values). This means you can return JSX elements but cannot accept them as arguments unless using pass-through patterns.\n\n\n\n\n###### Supported types\n\n\n\n\n **Arguments:** \n\n\n\n\n\n\n- Primitives: `string`, `number`, `boolean`, `null`, `undefined`\n\n- Plain objects: `{ key: value }`\n\n- Arrays: `[1, 2, 3]`\n\n- Dates, Maps, Sets, TypedArrays, ArrayBuffers\n\n- React elements (as pass-through only)\n\n\n\n\n\n **Return values:** \n\n\n\n\n\n\n- Same as arguments, plus JSX elements\n\n\n\n\n\n###### Unsupported types\n\n\n\n\n\n\n- Class instances\n\n- Functions (except as pass-through)\n\n- Symbols, WeakMaps, WeakSets\n\n- URL instances\n\n\n\napp/components/user-card.tsx\n\n\n###### Pass-through (non-serializable arguments)\n\n\n\n\nYou can accept non-serializable values  **as long as you don't introspect them** . This enables composition patterns with `children` and Server Actions:\n\n\napp/components/cached-wrapper.tsx\n\n\nYou can also pass Server Actions through cached components:\n\n\napp/components/cached-form.tsx\n\n\n##### Constraints\n\n\n\n\nCached functions execute in an isolated environment. The following constraints ensure cache behavior remains predictable and secure.\n\n\n\n\n###### Request-time APIs\n\n\n\n\nCached functions and components  **cannot**  access runtime APIs like `cookies()`, `headers()`, or `searchParams`, and the restriction follows the call stack: a helper the cached function calls that reads one of these fails the same way, with the [`next-request-in-use-cache`](/docs/messages/next-request-in-use-cache) error. On a dynamically rendered route this surfaces when the route runs, so it can pass `next build` and fail under `next start`. Read these values outside the cached scope and pass them as arguments.\n\n\n\n\n###### Runtime caching considerations\n\n\n\n\nWhile `use cache` is designed primarily to include uncached data in the static shell, it can also cache data at runtime using in-memory LRU (Least Recently Used) storage.\n\n\n\n\nWith the default in-memory handler, runtime cache behavior depends on your hosting environment:\n\n\n\n\n\n\n\n| Environment | Runtime Caching Behavior |\n| --- | --- |\n\n\n\n\n| **Serverless** | Cache entries typically don't persist across requests (each request can be a different instance), or during revalidation. Build-time caching works normally. |\n| **Self-hosted** | Cache entries persist across requests. Control cache size with [`cacheMaxMemorySize`](/docs/app/api-reference/config/next-config-js/incrementalCacheHandlerPath). |\n\n\n\n\n\n\nFor example, in a serverless environment, a cached function shared by two pages executes on each static shell revalidation, whereas in self-hosted or environments with persistent memory, the cached output is reused if it's still fresh.\n\n\n\n\nIf the default in-memory cache isn't enough, consider  **[`use cache: remote`](/docs/app/api-reference/directives/use-cache-remote)**  which allows platforms to provide a dedicated cache handler (like Redis or KV database). This helps reduce hits against data sources not scaled to your total traffic, though it comes with costs (storage, network latency, platform fees).\n\n\n\n\nWith the default in-memory handler, serverless instances are ephemeral, so entries may not be reused between requests, unlike with `use cache: remote`. Neither caching directive carries over to a new deploy, because the [cache key](#cache-keys) includes the build (or `deploymentId`) ID.\n\n\n\nFor data that needs to persist across deploys, use [`unstable_cache`](/docs/app/api-reference/functions/unstable_cache) for non-`fetch` functions or the [`fetch`](/docs/app/api-reference/functions/fetch) cache.\n\n\n\n\nVery rarely, for compliance requirements or when you can't refactor your code to pass runtime data as arguments to a `use cache` scope, you might need [`use cache: private`](/docs/app/api-reference/directives/use-cache-private).\n\n\n\n\n###### Draft Mode\n\n\n\n\nWhen [Draft Mode](/docs/app/guides/draft-mode) is enabled, all cached functions and components re-execute on every request, and results are not saved to the cache. This ensures draft content is always fresh without requiring any changes to your caching code.\n\n\n\n\nYou can read `isEnabled` from [`draftMode()`](/docs/app/api-reference/functions/draft-mode) inside a `use cache` scope, however, other runtime APIs like `cookies()` and `headers()` are not allowed, even when Draft Mode is active. See [Passing runtime values to cached functions](/docs/app/getting-started/caching#passing-runtime-values-to-cached-functions) for the recommended pattern.\n\n\napp/components/content.tsx\n\n\nCalling `enable()` or `disable()` inside a caching directive scope will also throw an error. Draft Mode can only be toggled in [Route Handlers](/docs/app/api-reference/file-conventions/route) or [Server Actions](/docs/app/getting-started/mutating-data).\n\n\n\n\n###### React.cache isolation\n\n\n\n\n[`React.cache`](https://react.dev/reference/react/cache) operates in an isolated scope inside `use cache` boundaries. Values stored via `React.cache` outside a `use cache` function are not visible inside it.\n\n\n\n\nThis means you cannot use `React.cache` to pass data into a `use cache` scope:\n\n\n\n\n\nThis isolation ensures cached functions have predictable, self-contained behavior. To pass data into a `use cache` scope, use function arguments instead.\n\n\n\n\n##### `use cache` at runtime\n\n\n\n\nOn the  **server** , cache entries are stored in-memory and respect the `revalidate` and `expire` times from your `cacheLife` configuration. You can customize the cache storage by configuring [`cacheHandlers`](/docs/app/api-reference/config/next-config-js/cacheHandlers) in your `next.config.js` file.\n\n\n\n\nOn the  **client** , content from the server cache is stored in the browser's memory for the duration defined by the `stale` time. The client router enforces a  **minimum 30-second stale time** , regardless of configuration.\n\n\n\n\nThe `x-nextjs-stale-time` response header communicates cache lifetime from server to client, ensuring coordinated behavior.\n\n\n\n\n##### Revalidation\n\n\n\n\nCached functions revalidate based on the `revalidate` and `expire` times in their `cacheLife` profile, or on-demand through tags. These two approaches are not mutually exclusive and are often paired:\n\n\n\n\n\n\n- **[Time-based](#time-based-revalidation)** : refresh automatically after a set duration with [`cacheLife`](/docs/app/api-reference/functions/cacheLife).\n\n- **[On-demand](#on-demand-revalidation)** : invalidate after a mutation with [`cacheTag`](/docs/app/api-reference/functions/cacheTag) and [`revalidateTag`](/docs/app/api-reference/functions/revalidateTag) or [`updateTag`](/docs/app/api-reference/functions/updateTag).\n\n\n\n\n\nFor example, a blog post that changes only when its author edits it can use a long `cacheLife` like `max` with a `cacheTag`, then invalidate on demand when the post is saved. A list of recent posts that updates throughout the day can use a shorter profile like `hours` to refresh on its own, without manual invalidation.\n\n\n\n\n###### Time-based revalidation\n\n\n\n\nSet an explicit cache lifetime with [`cacheLife`](/docs/app/api-reference/functions/cacheLife) in every `use cache` scope. It makes the cache behavior clear at the call site, instead of depending on the `default` profile or surrounding caches.\n\n\nlib/data.ts\n\n\nIf you omit `cacheLife`, the `default` profile applies and the lifetime is no longer explicit at the call site:\n\n\n\n\n\n\n- **stale** : 5 minutes (client-side)\n\n- **revalidate** : 15 minutes (server-side)\n\n- **expire** : never expires by time\n\n\n\nlib/data.ts\n\n\nNesting a short-lived use cache inside one without an explicit [cacheLife](/docs/app/api-reference/functions/cacheLife) fails the build during prerendering. See [Nested short-lived caches](/docs/app/api-reference/functions/cacheLife#nested-short-lived-caches) for the rule and fix.\n\n\n\n\n###### On-demand revalidation\n\n\n\n\nUse [`cacheTag`](/docs/app/api-reference/functions/cacheTag), [`updateTag`](/docs/app/api-reference/functions/updateTag), or [`revalidateTag`](/docs/app/api-reference/functions/revalidateTag) for on-demand cache invalidation:\n\n\nlib/data.ts\napp/actions.ts\n\n\nBoth `cacheLife` and `cacheTag` integrate across client and server caching layers, meaning you configure your caching semantics in one place and they apply everywhere.\n\n\n\n\n##### Examples\n\n\n\n\n###### Caching an entire route with `use cache`\n\n\n\n\nTo prerender an entire route, add `use cache` to the top of  **both**  the `layout` and `page` files. Each of these segments are treated as separate entry points in your application, and will be cached independently.\n\n\napp/layout.tsxTypeScriptJavaScriptTypeScript\n \n\n\nAny components imported and nested in `page` file are part of the cache output associated with the `page`.\n\n\napp/page.tsxTypeScriptJavaScriptTypeScript\n \n\n\n> **Good to know** :\n> \n> \n> \n> \n> \n> \n> - If `use cache` is added only to the `layout` or the `page`, only that route segment and any components imported into it will be cached.\n\n\n\n\n###### Caching a component's output with `use cache`\n\n\n\n\nYou can use `use cache` at the component level to cache any fetches or computations performed within that component. The cache entry will be reused as long as the serialized props produce the same value in each instance.\n\n\napp/components/bookings.tsxTypeScriptJavaScriptTypeScript\n \n\n\n###### Caching function output with `use cache`\n\n\n\n\nSince you can add `use cache` to any asynchronous function, you aren't limited to caching components or routes only. You might want to cache a network request, a database query, or a slow computation.\n\n\napp/actions.tsTypeScriptJavaScriptTypeScript\n \n\n\n> **Good to know:**  When a cached directive (`use cache`, [`use cache: private`](/docs/app/api-reference/directives/use-cache-private), or [`use cache: remote`](/docs/app/api-reference/directives/use-cache-remote)) is at the top of a file, you can import its exported functions into a Client Component and call them directly; they run on the server and return the result, similar to a [Server Function](/docs/app/glossary#server-function). Prefer calling cached functions on the server and passing results down as props.\n\n\n\n\n###### Interleaving\n\n\n\n\nIn React, composition with `children` or slots is a well-known pattern for building flexible components. When using `use cache`, you can continue to compose your UI in this way. Anything included as `children`, or other compositional slots, in the returned JSX will be passed through the cached component without affecting its cache entry.\n\n\n\n\nAs long as you don't directly reference any of the JSX slots inside the body of the cacheable function itself, their presence in the returned output won't affect the cache entry.\n\n\napp/page.tsxTypeScriptJavaScriptTypeScript\n \n\n\nYou can also pass Server Actions through cached components to Client Components without invoking them inside the cacheable function.\n\n\napp/page.tsxTypeScriptJavaScriptTypeScript\n \napp/ClientComponent.tsxTypeScriptJavaScriptTypeScript\n \n\n\n##### Troubleshooting\n\n\n\n\n###### Debugging cache behavior\n\n\n\n\n###### Verbose logging\n\n\n\n\nSet `NEXT_PRIVATE_DEBUG_CACHE=1` for verbose cache logging:\n\n\n\n\n\n> **Good to know:**  This environment variable also logs ISR and other caching mechanisms. See [Verifying correct production behavior](/docs/app/guides/incremental-static-regeneration#verifying-correct-production-behavior) for more details.\n\n\n\n\n###### Console log replays\n\n\n\n\nIn development, console logs from cached functions appear with a `Cache` prefix.\n\n\n\n\n###### Build Hangs (Cache Timeout)\n\n\n\n\nIf your build hangs, you're accessing Promises that resolve to uncached or runtime data, created outside a `use cache` boundary. The cached function waits for data that can't resolve during the build, causing a timeout after 50 seconds.\n\n\n\n\nWhen the build timeouts you'll see this error message:\n\n\n\n\n> Error: Filling a cache during prerender timed out, likely because request-specific arguments such as params, searchParams, cookies() or uncached data were used inside \"use cache\".\n\n\n\n\nCommon ways this happens: passing such Promises as props, accessing them via closure, or retrieving them from shared storage (Maps).\n\n\n\n\n> **Good to know:**  Directly calling `cookies()` or `headers()` inside `use cache` fails immediately with a [different error](/docs/messages/next-request-in-use-cache), not a timeout.\n\n\n\n\n **Passing runtime data Promises as props:** \n\n\napp/page.tsx\n\n\nAwait the `cookies` store in the `Dynamic` component, and pass a cookie value to the `Cached` component.\n\n\n\n\n **Shared deduplication storage:** \n\n\napp/page.tsx\n\n\nUse Next.js's built-in `fetch()` deduplication or use separate Maps for cached and uncached contexts.\n\n\n\n\n##### Platform Support\n\n\n\n\n\n\n\n| Deployment Option | Supported |\n| --- | --- |\n\n\n\n\n| [Node.js server](/docs/app/getting-started/deploying#nodejs-server) | Yes |\n| [Docker container](/docs/app/getting-started/deploying#docker) | Yes |\n| [Static export](/docs/app/getting-started/deploying#static-export) | No |\n| [Adapters](/docs/app/getting-started/deploying#adapters) | Platform-specific |\n\n\n\n\n\n\nLearn how to [configure caching](/docs/app/guides/self-hosting#caching-and-isr) when self-hosting Next.js.\n\n\n\n\n##### Version History\n\n\n\n\n\n\n\n| Version | Changes |\n| --- | --- |\n\n\n\n\n| `v16.0.0` | `\"use cache\"` is enabled with the Cache Components feature. |\n| `v15.0.0` | `\"use cache\"` is introduced as an experimental feature. |\n\n\n\n\n\n##### Related\n\nView related API references.[### use cache: private\n\nLearn how to use the \"use cache: private\" directive to cache functions that access runtime request APIs.](/docs/app/api-reference/directives/use-cache-private)[### cacheComponents\n\nLearn how to enable the cacheComponents flag in Next.js.](/docs/app/api-reference/config/next-config-js/cacheComponents)[### cacheLife\n\nLearn how to set up cacheLife configurations in Next.js.](/docs/app/api-reference/config/next-config-js/cacheLife)[### cacheHandlers\n\nConfigure custom cache handlers for use cache directives in Next.js.](/docs/app/api-reference/config/next-config-js/cacheHandlers)[### cacheTag\n\nLearn how to use the cacheTag function to manage cache invalidation in your Next.js application.](/docs/app/api-reference/functions/cacheTag)[### cacheLife\n\nLearn how to use the cacheLife function to set the cache expiration time for a cached function or component.](/docs/app/api-reference/functions/cacheLife)[### revalidateTag\n\nAPI Reference for the revalidateTag function.](/docs/app/api-reference/functions/revalidateTag)\n\nWas this helpful?\n\nsupported.Send",
        "code_blocks": [
          {
            "language": "python",
            "code": "import type { NextConfig } from 'next'\n \nconst nextConfig: NextConfig = {\n  cacheComponents: true,\n}\n \nexport default nextConfig",
            "filename": ""
          },
          {
            "language": "gdscript",
            "code": "// File level\n'use cache'\n \nexport default async function Page() {\n  // ...\n}\n \n// Component level\nexport async function MyComponent() {\n  'use cache'\n  return <></>\n}\n \n// Function level\nexport async function getData() {\n  'use cache'\n  const data = await fetch('/api/data')\n  return data\n}",
            "filename": ""
          },
          {
            "language": "gdscript",
            "code": "async function Component({ userId }: { userId: string }) {\n  const getData = async (filter: string) => {\n    'use cache'\n    // Cache key includes both userId (from closure) and filter (argument)\n    return fetch(`/api/users/${userId}/data?filter=${filter}`)\n  }\n \n  return getData('active')\n}",
            "filename": ""
          },
          {
            "language": "xml",
            "code": "// Valid - primitives and plain objects\nasync function UserCard({\n  id,\n  config,\n}: {\n  id: string\n  config: { theme: string }\n}) {\n  'use cache'\n  return <div>{id}</div>\n}\n \n// Invalid - class instance\nasync function UserProfile({ user }: { user: UserClass }) {\n  'use cache'\n  // Error: Cannot serialize class instance\n  return <div>{user.name}</div>\n}",
            "filename": ""
          },
          {
            "language": "xml",
            "code": "async function CachedWrapper({ children }: { children: ReactNode }) {\n  'use cache'\n  // Don't read or modify children - just pass it through\n  return (\n    <div className=\"wrapper\">\n      <header>Cached Header</header>\n      {children}\n    </div>\n  )\n}\n \n// Usage: children can be dynamic\nexport default function Page() {\n  return (\n    <CachedWrapper>\n      <DynamicComponent /> {/* Not cached, passed through */}\n    </CachedWrapper>\n  )\n}",
            "filename": ""
          },
          {
            "language": "xml",
            "code": "async function CachedForm({ action }: { action: () => Promise<void> }) {\n  'use cache'\n  // Don't call action here - just pass it through\n  return <form action={action}>{/* ... */}</form>\n}",
            "filename": ""
          },
          {
            "language": "python",
            "code": "import { draftMode } from 'next/headers'\n \nasync function Content() {\n  'use cache'\n \n  const { isEnabled } = await draftMode()\n  const url = isEnabled\n    ? 'https://draft.example.com/content'\n    : 'https://production.example.com/content'\n \n  const data = await fetch(url)\n  return <article>{/* ... */}</article>\n}",
            "filename": ""
          },
          {
            "language": "python",
            "code": "import { cache } from 'react'\n \nconst store = cache(() => ({ current: null as string | null }))\n \nfunction Parent() {\n  const shared = store()\n  shared.current = 'value from parent'\n  return <Child />\n}\n \nasync function Child() {\n  'use cache'\n  const shared = store()\n  // shared.current is null, not 'value from parent'\n  // use cache has its own isolated React.cache scope\n  return <div>{shared.current}</div>\n}",
            "filename": ""
          },
          {
            "language": "python",
            "code": "import { cacheLife } from 'next/cache'\n \nasync function getData() {\n  'use cache'\n  cacheLife('hours') // Use built-in 'hours' profile\n  return fetch('/api/data')\n}",
            "filename": ""
          },
          {
            "language": "teratermmacro",
            "code": "async function getData() {\n  'use cache'\n  // Implicitly uses the 'default' profile\n  return fetch('/api/data')\n}",
            "filename": ""
          },
          {
            "language": "python",
            "code": "import { cacheTag } from 'next/cache'\n \nasync function getProducts() {\n  'use cache'\n  cacheTag('products')\n  return fetch('/api/products')\n}",
            "filename": ""
          },
          {
            "language": "python",
            "code": "'use server'\n \nimport { updateTag } from 'next/cache'\n \nexport async function updateProduct() {\n  await db.products.update(...)\n  updateTag('products') // Invalidates all 'products' caches\n}",
            "filename": ""
          },
          {
            "language": "xml",
            "code": "'use cache'\n \nexport default async function Layout({ children }: { children: ReactNode }) {\n  return <div>{children}</div>\n}",
            "filename": ""
          },
          {
            "language": "xml",
            "code": "'use cache'\n \nasync function Users() {\n  const users = await fetch('/api/users')\n  // loop through users\n}\n \nexport default async function Page() {\n  return (\n    <main>\n      <Users />\n    </main>\n  )\n}",
            "filename": ""
          },
          {
            "language": "gdscript",
            "code": "export async function Bookings({ type = 'haircut' }: BookingsProps) {\n  'use cache'\n  async function getBookingsData() {\n    const data = await fetch(`/api/bookings?type=${encodeURIComponent(type)}`)\n    return data\n  }\n  return //...\n}\n \ninterface BookingsProps {\n  type: string\n}",
            "filename": ""
          },
          {
            "language": "gdscript",
            "code": "export async function getData() {\n  'use cache'\n \n  const data = await fetch('/api/data')\n  return data\n}",
            "filename": ""
          },
          {
            "language": "xml",
            "code": "export default async function Page() {\n  const uncachedData = await getData()\n  return (\n    // Pass compositional slots as props, e.g. header and children\n    <CacheComponent header={<h1>Home</h1>}>\n      {/* DynamicComponent is provided as the children slot */}\n      <DynamicComponent data={uncachedData} />\n    </CacheComponent>\n  )\n}\n \nasync function CacheComponent({\n  header, // header: a compositional slot, injected as a prop\n  children, // children: another slot for nested composition\n}: {\n  header: ReactNode\n  children: ReactNode\n}) {\n  'use cache'\n  const cachedData = await fetch('/api/cached-data')\n  return (\n    <div>\n      {header}\n      <PrerenderedComponent data={cachedData} />\n      {children}\n    </div>\n  )\n}",
            "filename": ""
          },
          {
            "language": "python",
            "code": "import ClientComponent from './ClientComponent'\n \nexport default async function Page() {\n  const performUpdate = async () => {\n    'use server'\n    // Perform some server-side update\n    await db.update(...)\n  }\n \n  return <CachedComponent performUpdate={performUpdate} />\n}\n \nasync function CachedComponent({\n  performUpdate,\n}: {\n  performUpdate: () => Promise<void>\n}) {\n  'use cache'\n  // Do not call performUpdate here\n  return <ClientComponent action={performUpdate} />\n}",
            "filename": ""
          },
          {
            "language": "xml",
            "code": "'use client'\n \nexport default function ClientComponent({\n  action,\n}: {\n  action: () => Promise<void>\n}) {\n  return <button onClick={action}>Update</button>\n}",
            "filename": ""
          },
          {
            "language": "scdoc",
            "code": "NEXT_PRIVATE_DEBUG_CACHE=1 npm run dev\n# or for production\nNEXT_PRIVATE_DEBUG_CACHE=1 npm run start",
            "filename": ""
          },
          {
            "language": "python",
            "code": "import { cookies } from 'next/headers'\nimport { Suspense } from 'react'\n \nexport default function Page() {\n  return (\n    <Suspense fallback={<div>Loading...</div>}>\n      <Dynamic />\n    </Suspense>\n  )\n}\n \nasync function Dynamic() {\n  const cookieStore = cookies()\n  return <Cached promise={cookieStore} /> // Build hangs\n}\n \nasync function Cached({ promise }: { promise: Promise<unknown> }) {\n  'use cache'\n  const data = await promise // Waits for runtime data during build\n  return <p>..</p>\n}",
            "filename": ""
          },
          {
            "language": "python",
            "code": "// Problem: Map stores dynamic Promises, accessed by cached code\nimport { Suspense } from 'react'\n \nconst cache = new Map<string, Promise<string>>()\n \nexport default function Page() {\n  return (\n    <>\n      <Suspense fallback={<div>Loading...</div>}>\n        <Dynamic id=\"data\" />\n      </Suspense>\n      <Cached id=\"data\" />\n    </>\n  )\n}\n \nasync function Dynamic({ id }: { id: string }) {\n  // Stores dynamic Promise in shared Map\n  cache.set(\n    id,\n    fetch(`https://api.example.com/${id}`).then((r) => r.text())\n  )\n  return <p>Dynamic</p>\n}\n \nasync function Cached({ id }: { id: string }) {\n  'use cache'\n  return <p>{await cache.get(id)}</p> // Build hangs - retrieves dynamic Promise\n}",
            "filename": ""
          }
        ],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [],
    "prerequisites": [],
    "_content_hash": "498e04f0959df79a449ec09c5f70a81ea652e28cdc085211220a8452a3a9d4ec",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  },
  {
    "url": "https://nextjs.org/docs/app/api-reference/directives/use-cache-private",
    "title": "use cache: private",
    "type": "api",
    "summary": "This page documents the 'use cache: private' directive in Next.js, which allows functions to access runtime request APIs within a cached scope while caching results only in the browser's memory and…",
    "sections": [
      {
        "heading": "Overview",
        "content": "The `'use cache: private'` directive allows functions to access runtime request APIs like `cookies()`, `headers()`, and `searchParams` within a cached scope. However, results are **never stored on…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Usage",
        "content": "To use `'use cache: private'`, enable the [`cacheComponents`](/docs/app/api-reference/config/next-config-js/cacheComponents) flag in your `next.config.ts` file:\n\nThen add `'use cache: private'` to…",
        "code_blocks": [
          {
            "language": "ts",
            "code": "import type { NextConfig } from 'next'\n\nconst nextConfig: NextConfig = {\n  cacheComponents: true,\n}\n\nexport default nextConfig",
            "filename": "next.config.ts"
          }
        ],
        "images": []
      },
      {
        "heading": "Basic example",
        "content": "In this example, we demonstrate that you can access cookies within a `'use cache: private'` scope:\n\n> **Good to know** : The `stale` time must be at least 30 seconds for per-link prefetching to work,…",
        "code_blocks": [
          {
            "language": "tsx",
            "code": "import { Suspense } from 'react'\nimport { cookies } from 'next/headers'\nimport { cacheLife, cacheTag } from 'next/cache'\n\nexport async function generateStaticParams() {\n  return [{ id: '1'…",
            "filename": "app/product/[id]/page.tsx"
          }
        ],
        "images": []
      },
      {
        "heading": "Request APIs allowed in private caches",
        "content": "The following request-specific APIs can be used inside `'use cache: private'` functions:\n\n| API | Allowed in `use cache` | Allowed in `'use cache: private'` |\n| --- | --- | --- |\n| `cookies()` | No |…",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Version History",
        "content": "| Version | Changes |\n| --- | --- |\n| `v16.0.0` | `\"use cache: private\"` is enabled with the Cache Components feature. |",
        "code_blocks": [],
        "images": []
      },
      {
        "heading": "Related",
        "content": "View related API references.\n\n- [### use cache - Learn how to use the \"use cache\" directive to cache data in your Next.js application.](/docs/app/api-reference/directives/use-cache)\n- [###…",
        "code_blocks": [],
        "images": []
      }
    ],
    "parameters": [],
    "see_also": [],
    "tags": [
      "Next.js",
      "use cache: private",
      "cache",
      "cacheComponents",
      "cacheLife",
      "cookies",
      "headers",
      "searchParams"
    ],
    "prerequisites": [],
    "_content_hash": "2dec17b296f67914e0dd454498aa7cf7d595ed155d86d3f7af796aa684255f49",
    "error": "",
    "finish_reason": "",
    "_canonical": true
  }
]