[{"id": "49a7b011671231e5", "url": "https://nextjs.org/docs", "page_title": "Next.js Docs", "page_type": "overview", "page_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…", "heading": "What is Next.js?", "content": "Page: Next.js Docs\nSection: What is Next.js?\n\nNext.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": [], "chunk_position": 0, "heading_path": "What is Next.js? > What is Next.js?", "breadcrumbs": "Next.js Docs > What is Next.js? > What is Next.js?"}, {"id": "c1cff99d047ba4f1", "url": "https://nextjs.org/docs", "page_title": "Next.js Docs", "page_type": "overview", "page_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…", "heading": "How to use the docs", "content": "Page: Next.js Docs\nSection: How to use the docs\n\nThe 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": [], "chunk_position": 0, "heading_path": "How to use the docs > How to use the docs", "breadcrumbs": "Next.js Docs > How to use the docs > How to use the docs"}, {"id": "db1a3cafb5485ac1", "url": "https://nextjs.org/docs", "page_title": "Next.js Docs", "page_type": "overview", "page_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…", "heading": "App Router and Pages Router", "content": "Page: Next.js Docs\nSection: App Router and Pages Router\n\nNext.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": [], "chunk_position": 0, "heading_path": "App Router and Pages Router > App Router and Pages Router", "breadcrumbs": "Next.js Docs > App Router and Pages Router > App Router and Pages Router"}, {"id": "c281309403440bdc", "url": "https://nextjs.org/docs", "page_title": "Next.js Docs", "page_type": "overview", "page_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…", "heading": "React version handling", "content": "Page: Next.js Docs\nSection: React version handling\n\nThe 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": [], "chunk_position": 0, "heading_path": "React version handling > React version handling", "breadcrumbs": "Next.js Docs > React version handling > React version handling"}, {"id": "63373484bff266c6", "url": "https://nextjs.org/docs", "page_title": "Next.js Docs", "page_type": "overview", "page_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…", "heading": "Pre-requisite knowledge", "content": "Page: Next.js Docs\nSection: Pre-requisite knowledge\n\nOur 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": [], "chunk_position": 0, "heading_path": "Pre-requisite knowledge > Pre-requisite knowledge", "breadcrumbs": "Next.js Docs > Pre-requisite knowledge > Pre-requisite knowledge"}, {"id": "84cf626ad71d9311", "url": "https://nextjs.org/docs", "page_title": "Next.js Docs", "page_type": "overview", "page_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…", "heading": "Accessibility", "content": "Page: Next.js Docs\nSection: Accessibility\n\nFor the best experience when using a screen reader, we recommend using Firefox and NVDA, or Safari and VoiceOver.", "code_blocks": [], "chunk_position": 0, "heading_path": "Accessibility > Accessibility", "breadcrumbs": "Next.js Docs > Accessibility > Accessibility"}, {"id": "d81ecb471907b5ee", "url": "https://nextjs.org/docs", "page_title": "Next.js Docs", "page_type": "overview", "page_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…", "heading": "Join our Community", "content": "Page: Next.js Docs\nSection: Join our Community\n\nIf 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": [], "chunk_position": 0, "heading_path": "Join our Community > Join our Community", "breadcrumbs": "Next.js Docs > Join our Community > Join our Community"}, {"id": "d0d5a5d432558735", "url": "https://nextjs.org/docs", "page_title": "Next.js Docs", "page_type": "overview", "page_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…", "heading": "Next Steps", "content": "Page: Next.js Docs\nSection: Next Steps\n\nCreate your first application and learn the core Next.js features.", "code_blocks": [], "chunk_position": 0, "heading_path": "Next Steps > Next Steps", "breadcrumbs": "Next.js Docs > Next Steps > Next Steps"}, {"id": "ebe9df97ca6b3493", "url": "https://nextjs.org/docs/app", "page_title": "App Router", "page_type": "overview", "page_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.", "heading": "App Router", "content": "Page: App Router\nSection: App Router\n\nThe App Router is a file-system based router that uses React's latest features such as Server Components, Suspense, and Server Functions.", "code_blocks": [], "chunk_position": 1, "heading_path": "App Router > App Router", "breadcrumbs": "App Router > App Router > App Router"}, {"id": "8a5db630cecc0987", "url": "https://nextjs.org/docs/app", "page_title": "App Router", "page_type": "overview", "page_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.", "heading": "Next Steps", "content": "Page: App Router\nSection: Next Steps\n\nLearn 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": [], "chunk_position": 1, "heading_path": "Next Steps > Next Steps", "breadcrumbs": "App Router > Next Steps > Next Steps"}, {"id": "1e243e78040f0979", "url": "https://nextjs.org/docs/app/api-reference", "page_title": "API Reference", "page_type": "overview", "page_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.", "heading": "Directives", "content": "Page: API Reference\nSection: Directives\n\nDirectives are used to modify the behavior of your Next.js application.", "code_blocks": [], "chunk_position": 2, "heading_path": "Directives > Directives", "breadcrumbs": "API Reference > Directives > Directives"}, {"id": "f3364551f3f1b391", "url": "https://nextjs.org/docs/app/api-reference", "page_title": "API Reference", "page_type": "overview", "page_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.", "heading": "File-system conventions", "content": "Page: API Reference\nSection: File-system conventions\n\nAPI Reference for Next.js file-system conventions.", "code_blocks": [], "chunk_position": 2, "heading_path": "File-system conventions > File-system conventions", "breadcrumbs": "API Reference > File-system conventions > File-system conventions"}, {"id": "2a2ee6bdcc5ddf9c", "url": "https://nextjs.org/docs/app/api-reference", "page_title": "API Reference", "page_type": "overview", "page_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.", "heading": "CLI", "content": "Page: API Reference\nSection: CLI\n\nAPI Reference for the Next.js Command Line Interface (CLI) tools.", "code_blocks": [], "chunk_position": 2, "heading_path": "CLI > CLI", "breadcrumbs": "API Reference > CLI > CLI"}, {"id": "1e5c99dc3959af46", "url": "https://nextjs.org/docs/app/api-reference", "page_title": "API Reference", "page_type": "overview", "page_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.", "heading": "Adapters", "content": "Page: API Reference\nSection: Adapters\n\nBuild deployment adapters for Next.js platforms and infrastructure.", "code_blocks": [], "chunk_position": 2, "heading_path": "Adapters > Adapters", "breadcrumbs": "API Reference > Adapters > Adapters"}, {"id": "9c88e40140f73918", "url": "https://nextjs.org/docs/app/api-reference", "page_title": "API Reference", "page_type": "overview", "page_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.", "heading": "Turbopack", "content": "Page: API Reference\nSection: Turbopack\n\nTurbopack is an incremental bundler optimized for JavaScript and TypeScript, written in Rust, and built into Next.js.", "code_blocks": [], "chunk_position": 2, "heading_path": "Turbopack > Turbopack", "breadcrumbs": "API Reference > Turbopack > Turbopack"}, {"id": "ab4ce0d7a8015902", "url": "https://nextjs.org/docs/app/api-reference/adapters", "page_title": "Adapters", "page_type": "overview", "page_summary": "Overview of Next.js deployment adapter documentation, covering configuration, creation, API reference, testing, routing, PPR, runtime integration, entrypoints, output types, routing information, use…", "heading": "Adapters", "content": "Page: Adapters\nSection: Adapters\n\nUse this section to build and validate deployment adapters that integrate with the Next.js build and runtime model.", "code_blocks": [], "chunk_position": 3, "heading_path": "Adapters > Adapters", "breadcrumbs": "Adapters > Adapters > Adapters"}, {"id": "fbe1d539e3734824", "url": "https://nextjs.org/docs/app/api-reference/adapters", "page_title": "Adapters", "page_type": "overview", "page_summary": "Overview of Next.js deployment adapter documentation, covering configuration, creation, API reference, testing, routing, PPR, runtime integration, entrypoints, output types, routing information, use…", "heading": "Configuration", "content": "Page: Adapters\nSection: Configuration\n\nConfigure `adapterPath` or `NEXT_ADAPTER_PATH` to use a custom deployment adapter.", "code_blocks": [], "chunk_position": 3, "heading_path": "Configuration > Configuration", "breadcrumbs": "Adapters > Configuration > Configuration"}, {"id": "87631253c4d743a9", "url": "https://nextjs.org/docs/app/api-reference/adapters", "page_title": "Adapters", "page_type": "overview", "page_summary": "Overview of Next.js deployment adapter documentation, covering configuration, creation, API reference, testing, routing, PPR, runtime integration, entrypoints, output types, routing information, use…", "heading": "Creating an Adapter", "content": "Page: Adapters\nSection: Creating an Adapter\n\nCreate an adapter module that implements the `NextAdapter` interface.", "code_blocks": [], "chunk_position": 3, "heading_path": "Creating an Adapter > Creating an Adapter", "breadcrumbs": "Adapters > Creating an Adapter > Creating an Adapter"}, {"id": "802a50b65afb8297", "url": "https://nextjs.org/docs/app/api-reference/adapters", "page_title": "Adapters", "page_type": "overview", "page_summary": "Overview of Next.js deployment adapter documentation, covering configuration, creation, API reference, testing, routing, PPR, runtime integration, entrypoints, output types, routing information, use…", "heading": "API Reference", "content": "Page: Adapters\nSection: API Reference\n\nReference for `modifyConfig` and `onBuildComplete` in the `NextAdapter` interface.", "code_blocks": [], "chunk_position": 3, "heading_path": "API Reference > API Reference", "breadcrumbs": "Adapters > API Reference > API Reference"}, {"id": "e096e482d88084f9", "url": "https://nextjs.org/docs/app/api-reference/adapters", "page_title": "Adapters", "page_type": "overview", "page_summary": "Overview of Next.js deployment adapter documentation, covering configuration, creation, API reference, testing, routing, PPR, runtime integration, entrypoints, output types, routing information, use…", "heading": "Testing Adapters", "content": "Page: Adapters\nSection: Testing Adapters\n\nValidate adapters with the Next.js compatibility test harness and custom lifecycle scripts.", "code_blocks": [], "chunk_position": 3, "heading_path": "Testing Adapters > Testing Adapters", "breadcrumbs": "Adapters > Testing Adapters > Testing Adapters"}, {"id": "a8a22241e7fb99cc", "url": "https://nextjs.org/docs/app/api-reference/adapters", "page_title": "Adapters", "page_type": "overview", "page_summary": "Overview of Next.js deployment adapter documentation, covering configuration, creation, API reference, testing, routing, PPR, runtime integration, entrypoints, output types, routing information, use…", "heading": "Routing with @next/routing", "content": "Page: Adapters\nSection: Routing with @next/routing\n\nUse `@next/routing` to apply Next.js route matching behavior in adapters.", "code_blocks": [], "chunk_position": 3, "heading_path": "Routing with @next/routing > Routing with @next/routing", "breadcrumbs": "Adapters > Routing with @next/routing > Routing with @next/routing"}, {"id": "8d6adfab7675d75d", "url": "https://nextjs.org/docs/app/api-reference/adapters", "page_title": "Adapters", "page_type": "overview", "page_summary": "Overview of Next.js deployment adapter documentation, covering configuration, creation, API reference, testing, routing, PPR, runtime integration, entrypoints, output types, routing information, use…", "heading": "Implementing PPR in an Adapter", "content": "Page: Adapters\nSection: Implementing PPR in an Adapter\n\nImplement Partial Prerendering support in an adapter using fallback output and cache hooks.", "code_blocks": [], "chunk_position": 3, "heading_path": "Implementing PPR in an Adapter > Implementing PPR in an Adapter", "breadcrumbs": "Adapters > Implementing PPR in an Adapter > Implementing PPR in an Adapter"}, {"id": "349731e475e6e96f", "url": "https://nextjs.org/docs/app/api-reference/adapters", "page_title": "Adapters", "page_type": "overview", "page_summary": "Overview of Next.js deployment adapter documentation, covering configuration, creation, API reference, testing, routing, PPR, runtime integration, entrypoints, output types, routing information, use…", "heading": "Runtime Integration", "content": "Page: Adapters\nSection: Runtime Integration\n\nUnderstand how build-time adapters and runtime cache interfaces work together.", "code_blocks": [], "chunk_position": 3, "heading_path": "Runtime Integration > Runtime Integration", "breadcrumbs": "Adapters > Runtime Integration > Runtime Integration"}, {"id": "33b4091494635aac", "url": "https://nextjs.org/docs/app/api-reference/adapters", "page_title": "Adapters", "page_type": "overview", "page_summary": "Overview of Next.js deployment adapter documentation, covering configuration, creation, API reference, testing, routing, PPR, runtime integration, entrypoints, output types, routing information, use…", "heading": "Invoking Entrypoints", "content": "Page: Adapters\nSection: Invoking Entrypoints\n\nInvoke Node.js and Edge build entrypoints with adapter runtime context.", "code_blocks": [], "chunk_position": 3, "heading_path": "Invoking Entrypoints > Invoking Entrypoints", "breadcrumbs": "Adapters > Invoking Entrypoints > Invoking Entrypoints"}, {"id": "6946585e872c9618", "url": "https://nextjs.org/docs/app/api-reference/adapters", "page_title": "Adapters", "page_type": "overview", "page_summary": "Overview of Next.js deployment adapter documentation, covering configuration, creation, API reference, testing, routing, PPR, runtime integration, entrypoints, output types, routing information, use…", "heading": "Output Types", "content": "Page: Adapters\nSection: Output Types\n\nReference for all build output types exposed to adapters.", "code_blocks": [], "chunk_position": 3, "heading_path": "Output Types > Output Types", "breadcrumbs": "Adapters > Output Types > Output Types"}, {"id": "00af66b262bd8af4", "url": "https://nextjs.org/docs/app/api-reference/adapters", "page_title": "Adapters", "page_type": "overview", "page_summary": "Overview of Next.js deployment adapter documentation, covering configuration, creation, API reference, testing, routing, PPR, runtime integration, entrypoints, output types, routing information, use…", "heading": "Routing Information", "content": "Page: Adapters\nSection: Routing Information\n\nReference for routing phases and route fields exposed in `onBuildComplete`.", "code_blocks": [], "chunk_position": 3, "heading_path": "Routing Information > Routing Information", "breadcrumbs": "Adapters > Routing Information > Routing Information"}, {"id": "23883c94e87c4b67", "url": "https://nextjs.org/docs/app/api-reference/adapters", "page_title": "Adapters", "page_type": "overview", "page_summary": "Overview of Next.js deployment adapter documentation, covering configuration, creation, API reference, testing, routing, PPR, runtime integration, entrypoints, output types, routing information, use…", "heading": "Use Cases", "content": "Page: Adapters\nSection: Use Cases\n\nCommon patterns and examples for deployment adapter implementations.", "code_blocks": [], "chunk_position": 3, "heading_path": "Use Cases > Use Cases", "breadcrumbs": "Adapters > Use Cases > Use Cases"}, {"id": "ccd6a7012033b5d0", "url": "https://nextjs.org/docs/app/api-reference/adapters/api-reference", "page_title": "API Reference", "page_type": "api", "page_summary": "This page describes the Next.js adapter API, including functions to modify configuration and handle build completion.", "heading": "`async modifyConfig(config, context)`", "content": "Page: API Reference\nSection: `async modifyConfig(config, context)`\n\nCalled 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": [], "chunk_position": 4, "heading_path": "`async modifyConfig(config, context)` > `async modifyConfig(config, context)`", "breadcrumbs": "API Reference > `async modifyConfig(config, context)` > `async modifyConfig(config, context)`"}, {"id": "ef56d4d12b7be83d", "url": "https://nextjs.org/docs/app/api-reference/adapters/api-reference", "page_title": "API Reference", "page_type": "api", "page_summary": "This page describes the Next.js adapter API, including functions to modify configuration and handle build completion.", "heading": "`async onBuildComplete(context)`", "content": "Page: API Reference\nSection: `async onBuildComplete(context)`\n\nCalled 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": [], "chunk_position": 4, "heading_path": "`async onBuildComplete(context)` > `async onBuildComplete(context)`", "breadcrumbs": "API Reference > `async onBuildComplete(context)` > `async onBuildComplete(context)`"}, {"id": "0b75438d8a28d34d", "url": "https://nextjs.org/docs/app/api-reference/adapters/configuration", "page_title": "Configuration", "page_type": "api", "page_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.", "heading": "Configuration", "content": "Page: Configuration\nSection: Configuration\n\nTo 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"}], "chunk_position": 5, "heading_path": "Configuration > Configuration", "breadcrumbs": "Configuration > Configuration > Configuration"}, {"id": "1cc09ee7efea8e7d", "url": "https://nextjs.org/docs/app/api-reference/adapters/creating-an-adapter", "page_title": "Creating an Adapter", "page_type": "guide", "page_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.", "heading": "Creating an Adapter", "content": "Page: Creating an Adapter\nSection: Creating an Adapter\n\nAn 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\n has?: RouteHas[]\n missing?: RouteHas[]\n status?: number\n priority?: boolean\n}…", "filename": ""}], "chunk_position": 6, "heading_path": "Creating an Adapter > Creating an Adapter", "breadcrumbs": "Creating an Adapter > Creating an Adapter > Creating an Adapter"}, {"id": "94f1963d787e81fc", "url": "https://nextjs.org/docs/app/api-reference/adapters/immutable-static-assets", "page_title": "Adapters: Supporting Immutable Static Assets | Next.js", "page_type": "reference", "page_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…", "heading": "Supporting Immutable Static Assets", "content": "Page: Adapters: Supporting Immutable Static Assets | Next.js\nSection: Supporting Immutable Static Assets\n\nSee [`config.supportsImmutableAssets`](/docs/app/api-reference/config/next-config-js/supportsImmutableAssets) for end-user-facing information about this feature.\n\nWhen…", "code_blocks": [], "chunk_position": 7, "heading_path": "Supporting Immutable Static Assets > Supporting Immutable Static Assets", "breadcrumbs": "Adapters: Supporting Immutable Static Assets | Next.js > Supporting Immutable Static Assets > Supporting Immutable Static Assets"}, {"id": "a824a0d7709cd033", "url": "https://nextjs.org/docs/app/api-reference/adapters/immutable-static-assets", "page_title": "Adapters: Supporting Immutable Static Assets | Next.js", "page_type": "reference", "page_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…", "heading": "Adapter Implementation", "content": "Page: Adapters: Supporting Immutable Static Assets | Next.js\nSection: Adapter Implementation\n\nYou 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"}], "chunk_position": 7, "heading_path": "Adapter Implementation > Adapter Implementation", "breadcrumbs": "Adapters: Supporting Immutable Static Assets | Next.js > Adapter Implementation > Adapter Implementation"}, {"id": "50e5cad42453595c", "url": "https://nextjs.org/docs/app/api-reference/adapters/implementing-ppr-in-an-adapter", "page_title": "Implementing PPR in an Adapter", "page_type": "guide", "page_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…", "heading": "Overview", "content": "Page: Implementing PPR in an Adapter\nSection: Overview\n\nFor 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": [], "chunk_position": 8, "heading_path": "Overview > Overview", "breadcrumbs": "Implementing PPR in an Adapter > Overview > Overview"}, {"id": "87e8bd59499d7d6d", "url": "https://nextjs.org/docs/app/api-reference/adapters/implementing-ppr-in-an-adapter", "page_title": "Implementing PPR in an Adapter", "page_type": "guide", "page_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…", "heading": "1. Seed shell + postponed state at build time", "content": "Page: Implementing PPR in an Adapter\nSection: 1. Seed shell + postponed state at build time\n\n```ts\nimport { 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…\n```", "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"}], "chunk_position": 8, "heading_path": "1. Seed shell + postponed state at build time > 1. Seed shell + postponed state at build time", "breadcrumbs": "Implementing PPR in an Adapter > 1. Seed shell + postponed state at build time > 1. Seed shell + postponed state at build time"}, {"id": "bffa069a55350e33", "url": "https://nextjs.org/docs/app/api-reference/adapters/implementing-ppr-in-an-adapter", "page_title": "Implementing PPR in an Adapter", "page_type": "guide", "page_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…", "heading": "2. Runtime flow: serve cached shell and resume in background", "content": "Page: Implementing PPR in an Adapter\nSection: 2. Runtime flow: serve cached shell and resume in background\n\nAt 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": ""}], "chunk_position": 8, "heading_path": "2. Runtime flow: serve cached shell and resume in background > 2. Runtime flow: serve cached shell and resume in background", "breadcrumbs": "Implementing PPR in an Adapter > 2. Runtime flow: serve cached shell and resume in background > 2. Runtime flow: serve cached shell and resume in background"}, {"id": "e14a82faf291d7fa", "url": "https://nextjs.org/docs/app/api-reference/adapters/implementing-ppr-in-an-adapter", "page_title": "Implementing PPR in an Adapter", "page_type": "guide", "page_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…", "heading": "3. Update cache with `requestMeta.onCacheEntryV2`", "content": "Page: Implementing PPR in an Adapter\nSection: 3. Update cache with `requestMeta.onCacheEntryV2`\n\n`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": ""}], "chunk_position": 8, "heading_path": "3. Update cache with `requestMeta.onCacheEntryV2` > 3. Update cache with `requestMeta.onCacheEntryV2`", "breadcrumbs": "Implementing PPR in an Adapter > 3. Update cache with `requestMeta.onCacheEntryV2` > 3. Update cache with `requestMeta.onCacheEntryV2`"}, {"id": "b7acaec6f16ccac2", "url": "https://nextjs.org/docs/app/api-reference/adapters/invoking-entrypoints", "page_title": "Adapters: Invoking Entrypoints | Next.js", "page_type": "reference", "page_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`…", "heading": "Invoking Entrypoints", "content": "Page: Adapters: Invoking Entrypoints | Next.js\nSection: Invoking Entrypoints\n\nBuild output entrypoints use a `handler(..., ctx)` interface, with runtime-specific request/response types.", "code_blocks": [], "chunk_position": 9, "heading_path": "Invoking Entrypoints > Invoking Entrypoints", "breadcrumbs": "Adapters: Invoking Entrypoints | Next.js > Invoking Entrypoints > Invoking Entrypoints"}, {"id": "c2a15b77271fbfb9", "url": "https://nextjs.org/docs/app/api-reference/adapters/invoking-entrypoints", "page_title": "Adapters: Invoking Entrypoints | Next.js", "page_type": "reference", "page_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`…", "heading": "Node.js runtime (`runtime: 'nodejs'`)", "content": "Page: Adapters: Invoking Entrypoints | Next.js\nSection: Node.js runtime (`runtime: 'nodejs'`)\n\nNode.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\n requestMeta?: RequestMeta\n }\n): Promise", "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": ""}], "chunk_position": 9, "heading_path": "Node.js runtime (`runtime: 'nodejs'`) > Node.js runtime (`runtime: 'nodejs'`)", "breadcrumbs": "Adapters: Invoking Entrypoints | Next.js > Node.js runtime (`runtime: 'nodejs'`) > Node.js runtime (`runtime: 'nodejs'`)"}, {"id": "e143f80116b7aa13", "url": "https://nextjs.org/docs/app/api-reference/adapters/invoking-entrypoints", "page_title": "Adapters: Invoking Entrypoints | Next.js", "page_type": "reference", "page_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`…", "heading": "Edge runtime (`runtime: 'edge'`) (deprecated)", "content": "Page: Adapters: Invoking Entrypoints | Next.js\nSection: Edge runtime (`runtime: 'edge'`) (deprecated)\n\n> 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\n signal?: AbortSignal\n requestMeta?: RequestMeta\n }\n): Promise", "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": ""}], "chunk_position": 9, "heading_path": "Edge runtime (`runtime: 'edge'`) (deprecated) > Edge runtime (`runtime: 'edge'`) (deprecated)", "breadcrumbs": "Adapters: Invoking Entrypoints | Next.js > Edge runtime (`runtime: 'edge'`) (deprecated) > Edge runtime (`runtime: 'edge'`) (deprecated)"}, {"id": "54e2ad60ebdc198a", "url": "https://nextjs.org/docs/app/api-reference/adapters/output-types", "page_title": "Adapters: Output Types", "page_type": "api", "page_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…", "heading": "Output Types", "content": "Page: Adapters: Output Types\nSection: Output Types\n\nThe `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": [], "chunk_position": 10, "heading_path": "Output Types > Output Types", "breadcrumbs": "Adapters: Output Types > Output Types > Output Types"}, {"id": "262c8dd3030a6b2f", "url": "https://nextjs.org/docs/app/api-reference/adapters/output-types", "page_title": "Adapters: Output Types", "page_type": "api", "page_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…", "heading": "App Routes (`outputs.appRoutes`)", "content": "Page: Adapters: Output Types\nSection: App Routes (`outputs.appRoutes`)\n\nAPI 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": ""}], "chunk_position": 10, "heading_path": "App Routes (`outputs.appRoutes`) > App Routes (`outputs.appRoutes`)", "breadcrumbs": "Adapters: Output Types > App Routes (`outputs.appRoutes`) > App Routes (`outputs.appRoutes`)"}, {"id": "ef4a942ee43f5471", "url": "https://nextjs.org/docs/app/api-reference/adapters/output-types", "page_title": "Adapters: Output Types", "page_type": "api", "page_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…", "heading": "Prerender classification", "content": "Page: Adapters: Output Types\nSection: Prerender classification\n\n`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": [], "chunk_position": 10, "heading_path": "Prerender classification > Prerender classification", "breadcrumbs": "Adapters: Output Types > Prerender classification > Prerender classification"}, {"id": "89de3a99004fd55a", "url": "https://nextjs.org/docs/app/api-reference/adapters/output-types", "page_title": "Adapters: Output Types", "page_type": "api", "page_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…", "heading": "Static Files (`outputs.staticFiles`)", "content": "Page: Adapters: Output Types\nSection: Static Files (`outputs.staticFiles`)\n\nStatic 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": ""}], "chunk_position": 10, "heading_path": "Static Files (`outputs.staticFiles`) > Static Files (`outputs.staticFiles`)", "breadcrumbs": "Adapters: Output Types > Static Files (`outputs.staticFiles`) > Static Files (`outputs.staticFiles`)"}, {"id": "8e918fd93aa14b69", "url": "https://nextjs.org/docs/app/api-reference/adapters/output-types", "page_title": "Adapters: Output Types", "page_type": "api", "page_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…", "heading": "Middleware (`outputs.middleware`)", "content": "Page: Adapters: Output Types\nSection: Middleware (`outputs.middleware`)\n\n`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": ""}], "chunk_position": 10, "heading_path": "Middleware (`outputs.middleware`) > Middleware (`outputs.middleware`)", "breadcrumbs": "Adapters: Output Types > Middleware (`outputs.middleware`) > Middleware (`outputs.middleware`)"}, {"id": "777171ccf75c1789", "url": "https://nextjs.org/docs/app/api-reference/adapters/routing-information", "page_title": "Adapters: Routing Information", "page_type": "api", "page_summary": "Describes the `routing` object available in `onBuildComplete`, including the route phases and common fields that make up deployment-ready routing information.", "heading": "Routing Information", "content": "Page: Adapters: Routing Information\nSection: Routing Information\n\nThe `routing` object in `onBuildComplete` provides complete routing information with processed patterns ready for deployment:", "code_blocks": [], "chunk_position": 11, "heading_path": "Routing Information > Routing Information", "breadcrumbs": "Adapters: Routing Information > Routing Information > Routing Information"}, {"id": "4172f842573e25d0", "url": "https://nextjs.org/docs/app/api-reference/adapters/routing-information", "page_title": "Adapters: Routing Information", "page_type": "api", "page_summary": "Describes the `routing` object available in `onBuildComplete`, including the route phases and common fields that make up deployment-ready routing information.", "heading": "routing.beforeMiddleware", "content": "Page: Adapters: Routing Information\nSection: routing.beforeMiddleware\n\nRoutes applied before middleware execution. These include generated header and redirect behavior.", "code_blocks": [], "chunk_position": 11, "heading_path": "routing.beforeMiddleware > routing.beforeMiddleware", "breadcrumbs": "Adapters: Routing Information > routing.beforeMiddleware > routing.beforeMiddleware"}, {"id": "132bc4fb141dcf56", "url": "https://nextjs.org/docs/app/api-reference/adapters/routing-information", "page_title": "Adapters: Routing Information", "page_type": "api", "page_summary": "Describes the `routing` object available in `onBuildComplete`, including the route phases and common fields that make up deployment-ready routing information.", "heading": "routing.beforeFiles", "content": "Page: Adapters: Routing Information\nSection: routing.beforeFiles\n\nRewrite routes checked before filesystem route matching.", "code_blocks": [], "chunk_position": 11, "heading_path": "routing.beforeFiles > routing.beforeFiles", "breadcrumbs": "Adapters: Routing Information > routing.beforeFiles > routing.beforeFiles"}, {"id": "5ea99c9da9401c45", "url": "https://nextjs.org/docs/app/api-reference/adapters/routing-information", "page_title": "Adapters: Routing Information", "page_type": "api", "page_summary": "Describes the `routing` object available in `onBuildComplete`, including the route phases and common fields that make up deployment-ready routing information.", "heading": "routing.afterFiles", "content": "Page: Adapters: Routing Information\nSection: routing.afterFiles\n\nRewrite routes checked after filesystem route matching.", "code_blocks": [], "chunk_position": 11, "heading_path": "routing.afterFiles > routing.afterFiles", "breadcrumbs": "Adapters: Routing Information > routing.afterFiles > routing.afterFiles"}, {"id": "b6c6fc45dc855eda", "url": "https://nextjs.org/docs/app/api-reference/adapters/routing-information", "page_title": "Adapters: Routing Information", "page_type": "api", "page_summary": "Describes the `routing` object available in `onBuildComplete`, including the route phases and common fields that make up deployment-ready routing information.", "heading": "routing.dynamicRoutes", "content": "Page: Adapters: Routing Information\nSection: routing.dynamicRoutes\n\nDynamic matchers generated from route segments such as `[slug]` and catch-all routes.", "code_blocks": [], "chunk_position": 11, "heading_path": "routing.dynamicRoutes > routing.dynamicRoutes", "breadcrumbs": "Adapters: Routing Information > routing.dynamicRoutes > routing.dynamicRoutes"}, {"id": "dd7f10874a88847c", "url": "https://nextjs.org/docs/app/api-reference/adapters/routing-information", "page_title": "Adapters: Routing Information", "page_type": "api", "page_summary": "Describes the `routing` object available in `onBuildComplete`, including the route phases and common fields that make up deployment-ready routing information.", "heading": "routing.onMatch", "content": "Page: Adapters: Routing Information\nSection: routing.onMatch\n\nRoutes that apply after a successful match, such as immutable cache headers for hashed static assets.", "code_blocks": [], "chunk_position": 11, "heading_path": "routing.onMatch > routing.onMatch", "breadcrumbs": "Adapters: Routing Information > routing.onMatch > routing.onMatch"}, {"id": "c8dc2f6c89be20f1", "url": "https://nextjs.org/docs/app/api-reference/adapters/routing-information", "page_title": "Adapters: Routing Information", "page_type": "api", "page_summary": "Describes the `routing` object available in `onBuildComplete`, including the route phases and common fields that make up deployment-ready routing information.", "heading": "routing.fallback", "content": "Page: Adapters: Routing Information\nSection: routing.fallback\n\nFinal rewrite routes checked when earlier phases did not produce a match.", "code_blocks": [], "chunk_position": 11, "heading_path": "routing.fallback > routing.fallback", "breadcrumbs": "Adapters: Routing Information > routing.fallback > routing.fallback"}, {"id": "662db1af7a134336", "url": "https://nextjs.org/docs/app/api-reference/adapters/routing-information", "page_title": "Adapters: Routing Information", "page_type": "api", "page_summary": "Describes the `routing` object available in `onBuildComplete`, including the route phases and common fields that make up deployment-ready routing information.", "heading": "Common Route Fields", "content": "Page: Adapters: Routing Information\nSection: Common Route Fields\n\nEach 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": [], "chunk_position": 11, "heading_path": "Common Route Fields > Common Route Fields", "breadcrumbs": "Adapters: Routing Information > Common Route Fields > Common Route Fields"}, {"id": "5b15c89664d946b2", "url": "https://nextjs.org/docs/app/api-reference/adapters/routing-with-next-routing", "page_title": "Routing with @next/routing", "page_type": "api", "page_summary": "Explains how to use the `@next/routing` package's `resolveRoutes()` function to reproduce Next.js route matching behavior with data from `onBuildComplete`.", "heading": "Routing with @next/routing", "content": "Page: Routing with @next/routing\nSection: Routing with @next/routing\n\nYou 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": ""}], "chunk_position": 12, "heading_path": "Routing with @next/routing > Routing with @next/routing", "breadcrumbs": "Routing with @next/routing > Routing with @next/routing > Routing with @next/routing"}, {"id": "41e3f3bcffc4e6fc", "url": "https://nextjs.org/docs/app/api-reference/adapters/runtime-integration", "page_title": "Runtime Integration", "page_type": "api", "page_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.", "heading": "Overview", "content": "Page: Runtime Integration\nSection: Overview\n\nThe 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": [], "chunk_position": 13, "heading_path": "Overview > Overview", "breadcrumbs": "Runtime Integration > Overview > Overview"}, {"id": "24ec6b5b7d9e6783", "url": "https://nextjs.org/docs/app/api-reference/adapters/runtime-integration", "page_title": "Runtime Integration", "page_type": "api", "page_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.", "heading": "Handler Context", "content": "Page: Runtime Integration\nSection: Handler Context\n\nWhen 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": [], "chunk_position": 13, "heading_path": "Handler Context > Handler Context", "breadcrumbs": "Runtime Integration > Handler Context > Handler Context"}, {"id": "8230a10a5672c3d6", "url": "https://nextjs.org/docs/app/api-reference/adapters/runtime-integration", "page_title": "Runtime Integration", "page_type": "api", "page_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.", "heading": "PPR Chain Headers", "content": "Page: Runtime Integration\nSection: PPR Chain Headers\n\nIn the [prerenders output type](/docs/app/api-reference/adapters/output-types#prerenders-outputsprerenders), `pprChain.headers` contains the headers needed for the [resume…", "code_blocks": [], "chunk_position": 13, "heading_path": "PPR Chain Headers > PPR Chain Headers", "breadcrumbs": "Runtime Integration > PPR Chain Headers > PPR Chain Headers"}, {"id": "4ea5ee4063119936", "url": "https://nextjs.org/docs/app/api-reference/adapters/testing-adapters", "page_title": "Testing Adapters", "page_type": "guide", "page_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,…", "heading": "Testing Adapters", "content": "Page: Testing Adapters\nSection: Testing Adapters\n\nNext.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"}], "chunk_position": 14, "heading_path": "Testing Adapters > Testing Adapters", "breadcrumbs": "Testing Adapters > Testing Adapters > Testing Adapters"}, {"id": "9cc4e8196f3118d9", "url": "https://nextjs.org/docs/app/api-reference/adapters/testing-adapters", "page_title": "Testing Adapters", "page_type": "guide", "page_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,…", "heading": "Custom deploy script contract", "content": "Page: Testing Adapters\nSection: Custom deploy script contract\n\nThe 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"}], "chunk_position": 14, "heading_path": "Custom deploy script contract > Custom deploy script contract", "breadcrumbs": "Testing Adapters > Custom deploy script contract > Custom deploy script contract"}, {"id": "9b222946dd8afad4", "url": "https://nextjs.org/docs/app/api-reference/adapters/testing-adapters", "page_title": "Testing Adapters", "page_type": "guide", "page_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,…", "heading": "Custom logs script contract", "content": "Page: Testing Adapters\nSection: Custom logs script contract\n\nThe 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"}], "chunk_position": 14, "heading_path": "Custom logs script contract > Custom logs script contract", "breadcrumbs": "Testing Adapters > Custom logs script contract > Custom logs script contract"}, {"id": "d60fde46d21a3e24", "url": "https://nextjs.org/docs/app/api-reference/adapters/testing-adapters", "page_title": "Testing Adapters", "page_type": "guide", "page_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,…", "heading": "Custom cleanup script contract", "content": "Page: Testing Adapters\nSection: Custom cleanup script contract\n\nThe 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": [], "chunk_position": 14, "heading_path": "Custom cleanup script contract > Custom cleanup script contract", "breadcrumbs": "Testing Adapters > Custom cleanup script contract > Custom cleanup script contract"}, {"id": "12f09acef880747b", "url": "https://nextjs.org/docs/app/api-reference/adapters/use-cases", "page_title": "Adapters: Use Cases | Next.js", "page_type": "guide", "page_summary": "Common use cases for Next.js adapters, including deployment platform integration, asset processing, monitoring, custom bundling, build validation, and route generation.", "heading": "Use Cases", "content": "Page: Adapters: Use Cases | Next.js\nSection: Use Cases\n\nCommon 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": [], "chunk_position": 15, "heading_path": "Use Cases > Use Cases", "breadcrumbs": "Adapters: Use Cases | Next.js > Use Cases > Use Cases"}, {"id": "a49d4d545ee28f33", "url": "https://nextjs.org/docs/app/api-reference/cli", "page_title": "API Reference: CLI | Next.js", "page_type": "reference", "page_summary": "Overview of the two Next.js Command Line Interface (CLI) tools: create-next-app and next, with links to their API references.", "heading": "CLI", "content": "Page: API Reference: CLI | Next.js\nSection: CLI\n\nNext.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": [], "chunk_position": 16, "heading_path": "CLI > CLI", "breadcrumbs": "API Reference: CLI | Next.js > CLI > CLI"}, {"id": "1a792862cf8786ef", "url": "https://nextjs.org/docs/app/api-reference/cli", "page_title": "API Reference: CLI | Next.js", "page_type": "reference", "page_summary": "Overview of the two Next.js Command Line Interface (CLI) tools: create-next-app and next, with links to their API references.", "heading": "create-next-app", "content": "Page: API Reference: CLI | Next.js\nSection: create-next-app\n\nCreate Next.js apps using one command with the create-next-app CLI.", "code_blocks": [], "chunk_position": 16, "heading_path": "create-next-app > create-next-app", "breadcrumbs": "API Reference: CLI | Next.js > create-next-app > create-next-app"}, {"id": "c7ab804bb7da2ac4", "url": "https://nextjs.org/docs/app/api-reference/cli", "page_title": "API Reference: CLI | Next.js", "page_type": "reference", "page_summary": "Overview of the two Next.js Command Line Interface (CLI) tools: create-next-app and next, with links to their API references.", "heading": "next CLI", "content": "Page: API Reference: CLI | Next.js\nSection: next CLI\n\nLearn how to run and build your application with the Next.js CLI.", "code_blocks": [], "chunk_position": 16, "heading_path": "next CLI > next CLI", "breadcrumbs": "API Reference: CLI | Next.js > next CLI > next CLI"}, {"id": "f75bfdce79c0baf9", "url": "https://nextjs.org/docs/app/api-reference/cli/create-next-app", "page_title": "create-next-app", "page_type": "api", "page_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.", "heading": "Basic usage", "content": "Page: create-next-app\nSection: Basic usage\n\n```bash\npnpm create next-app [project-name] [options]\n```", "code_blocks": [{"language": "bash", "code": "pnpm create next-app [project-name] [options]", "filename": ""}], "chunk_position": 17, "heading_path": "Basic usage > Basic usage", "breadcrumbs": "create-next-app > Basic usage > Basic usage"}, {"id": "136386e911c5c3b7", "url": "https://nextjs.org/docs/app/api-reference/cli/create-next-app", "page_title": "create-next-app", "page_type": "api", "page_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.", "heading": "With the default template", "content": "Page: create-next-app\nSection: With the default template\n\nTo 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": ""}], "chunk_position": 17, "heading_path": "With the default template > With the default template", "breadcrumbs": "create-next-app > With the default template > With the default template"}, {"id": "91194c23573d753f", "url": "https://nextjs.org/docs/app/api-reference/cli/create-next-app", "page_title": "create-next-app", "page_type": "api", "page_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.", "heading": "Linter Options", "content": "Page: create-next-app\nSection: Linter Options\n\n**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": [], "chunk_position": 17, "heading_path": "Linter Options > Linter Options", "breadcrumbs": "create-next-app > Linter Options > Linter Options"}, {"id": "87ecb58e77bf1737", "url": "https://nextjs.org/docs/app/api-reference/cli/create-next-app", "page_title": "create-next-app", "page_type": "api", "page_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.", "heading": "With an official Next.js example", "content": "Page: create-next-app\nSection: With an official Next.js example\n\nTo 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": ""}], "chunk_position": 17, "heading_path": "With an official Next.js example > With an official Next.js example", "breadcrumbs": "create-next-app > With an official Next.js example > With an official Next.js example"}, {"id": "80e47d9efc35a874", "url": "https://nextjs.org/docs/app/api-reference/cli/create-next-app", "page_title": "create-next-app", "page_type": "api", "page_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.", "heading": "With any public GitHub example", "content": "Page: create-next-app\nSection: With any public GitHub example\n\nTo 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": ""}], "chunk_position": 17, "heading_path": "With any public GitHub example > With any public GitHub example", "breadcrumbs": "create-next-app > With any public GitHub example > With any public GitHub example"}, {"id": "2c8f53daf00d0e7b", "url": "https://nextjs.org/docs/app/api-reference/cli/next", "page_title": "next CLI", "page_type": "api", "page_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.", "heading": "Basic Usage", "content": "Page: next CLI\nSection: Basic Usage\n\nThe 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": ""}], "chunk_position": 18, "heading_path": "Basic Usage > Basic Usage", "breadcrumbs": "next CLI > Basic Usage > Basic Usage"}, {"id": "2749511c270d1e4e", "url": "https://nextjs.org/docs/app/api-reference/cli/next", "page_title": "next CLI", "page_type": "api", "page_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.", "heading": "Reference", "content": "Page: next CLI\nSection: Reference\n\nThe 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": [], "chunk_position": 18, "heading_path": "Reference > Reference", "breadcrumbs": "next CLI > Reference > Reference"}, {"id": "dda8e8aa688444f0", "url": "https://nextjs.org/docs/app/api-reference/cli/next", "page_title": "next CLI", "page_type": "api", "page_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.", "heading": "Commands", "content": "Page: next CLI\nSection: Commands\n\nThe 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": [], "chunk_position": 18, "heading_path": "Commands > Commands", "breadcrumbs": "next CLI > Commands > Commands"}, {"id": "a9250a08ec7c86a7", "url": "https://nextjs.org/docs/app/api-reference/cli/next", "page_title": "next CLI", "page_type": "api", "page_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.", "heading": "next dev options", "content": "Page: next CLI\nSection: next dev options\n\n`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": [], "chunk_position": 18, "heading_path": "next dev options > next dev options", "breadcrumbs": "next CLI > next dev options > next dev options"}, {"id": "d34e6df3832fcc89", "url": "https://nextjs.org/docs/app/api-reference/cli/next", "page_title": "next CLI", "page_type": "api", "page_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.", "heading": "next build options", "content": "Page: next CLI\nSection: next build options\n\n`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": ""}], "chunk_position": 18, "heading_path": "next build options > next build options", "breadcrumbs": "next CLI > next build options > next build options"}, {"id": "3afa73e866f6db55", "url": "https://nextjs.org/docs/app/api-reference/cli/next", "page_title": "next CLI", "page_type": "api", "page_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.", "heading": "next start options", "content": "Page: next CLI\nSection: next start options\n\n`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": [], "chunk_position": 18, "heading_path": "next start options > next start options", "breadcrumbs": "next CLI > next start options > next start options"}, {"id": "e0a90add63697b1c", "url": "https://nextjs.org/docs/app/api-reference/cli/next", "page_title": "next CLI", "page_type": "api", "page_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.", "heading": "next info options", "content": "Page: next CLI\nSection: next info options\n\n`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": ""}], "chunk_position": 18, "heading_path": "next info options > next info options", "breadcrumbs": "next CLI > next info options > next info options"}, {"id": "3df0a0eda8221b37", "url": "https://nextjs.org/docs/app/api-reference/cli/next", "page_title": "next CLI", "page_type": "api", "page_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.", "heading": "next telemetry options", "content": "Page: next CLI\nSection: next telemetry options\n\nNext.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": [], "chunk_position": 18, "heading_path": "next telemetry options > next telemetry options", "breadcrumbs": "next CLI > next telemetry options > next telemetry options"}, {"id": "34ce949e7f181899", "url": "https://nextjs.org/docs/app/api-reference/cli/next", "page_title": "next CLI", "page_type": "api", "page_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.", "heading": "next typegen options", "content": "Page: next CLI\nSection: next typegen options\n\n`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": ""}], "chunk_position": 18, "heading_path": "next typegen options > next typegen options", "breadcrumbs": "next CLI > next typegen options > next typegen options"}, {"id": "e1eb304d0d16837e", "url": "https://nextjs.org/docs/app/api-reference/cli/next", "page_title": "next CLI", "page_type": "api", "page_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.", "heading": "next upgrade options", "content": "Page: next CLI\nSection: next upgrade options\n\n`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": [], "chunk_position": 18, "heading_path": "next upgrade options > next upgrade options", "breadcrumbs": "next CLI > next upgrade options > next upgrade options"}, {"id": "d3e6bf231dc59346", "url": "https://nextjs.org/docs/app/api-reference/cli/next", "page_title": "next CLI", "page_type": "api", "page_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.", "heading": "next experimental-analyze options", "content": "Page: next CLI\nSection: next experimental-analyze options\n\n`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": ""}], "chunk_position": 18, "heading_path": "next experimental-analyze options > next experimental-analyze options", "breadcrumbs": "next CLI > next experimental-analyze options > next experimental-analyze options"}, {"id": "d1efb6f1c3410804", "url": "https://nextjs.org/docs/app/api-reference/cli/next", "page_title": "next CLI", "page_type": "api", "page_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.", "heading": "Debugging prerender errors", "content": "Page: next CLI\nSection: Debugging prerender errors\n\nIf 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": ""}], "chunk_position": 18, "heading_path": "Debugging prerender errors > Debugging prerender errors", "breadcrumbs": "next CLI > Debugging prerender errors > Debugging prerender errors"}, {"id": "91837272b373348a", "url": "https://nextjs.org/docs/app/api-reference/cli/next", "page_title": "next CLI", "page_type": "api", "page_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.", "heading": "Building specific routes", "content": "Page: next CLI\nSection: Building specific routes\n\nYou 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": ""}], "chunk_position": 18, "heading_path": "Building specific routes > Building specific routes", "breadcrumbs": "next CLI > Building specific routes > Building specific routes"}, {"id": "86fa96eb78addb75", "url": "https://nextjs.org/docs/app/api-reference/cli/next", "page_title": "next CLI", "page_type": "api", "page_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.", "heading": "Changing the default port", "content": "Page: next CLI\nSection: Changing the default port\n\nBy 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": ""}], "chunk_position": 18, "heading_path": "Changing the default port > Changing the default port", "breadcrumbs": "next CLI > Changing the default port > Changing the default port"}, {"id": "b2136f2a4925ff4e", "url": "https://nextjs.org/docs/app/api-reference/cli/next", "page_title": "next CLI", "page_type": "api", "page_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.", "heading": "Using HTTPS during development", "content": "Page: next CLI\nSection: Using HTTPS during development\n\nFor 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": ""}], "chunk_position": 18, "heading_path": "Using HTTPS during development > Using HTTPS during development", "breadcrumbs": "next CLI > Using HTTPS during development > Using HTTPS during development"}, {"id": "4125f8124c6ef37c", "url": "https://nextjs.org/docs/app/api-reference/cli/next", "page_title": "next CLI", "page_type": "api", "page_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.", "heading": "Configuring a timeout for downstream proxies", "content": "Page: next CLI\nSection: Configuring a timeout for downstream proxies\n\nWhen 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": ""}], "chunk_position": 18, "heading_path": "Configuring a timeout for downstream proxies > Configuring a timeout for downstream proxies", "breadcrumbs": "next CLI > Configuring a timeout for downstream proxies > Configuring a timeout for downstream proxies"}, {"id": "aa54a941b3c3d89f", "url": "https://nextjs.org/docs/app/api-reference/cli/next", "page_title": "next CLI", "page_type": "api", "page_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.", "heading": "Passing Node.js arguments", "content": "Page: next CLI\nSection: Passing Node.js arguments\n\nYou 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": ""}], "chunk_position": 18, "heading_path": "Passing Node.js arguments > Passing Node.js arguments", "breadcrumbs": "next CLI > Passing Node.js arguments > Passing Node.js arguments"}, {"id": "e8479b1629ffc664", "url": "https://nextjs.org/docs/app/api-reference/cli/next", "page_title": "next CLI", "page_type": "api", "page_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.", "heading": "CPU profiling", "content": "Page: next CLI\nSection: CPU profiling\n\nYou 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": ""}], "chunk_position": 18, "heading_path": "CPU profiling > CPU profiling", "breadcrumbs": "next CLI > CPU profiling > CPU profiling"}, {"id": "3c0cd84dbecc78bd", "url": "https://nextjs.org/docs/app/api-reference/cli/next", "page_title": "next CLI", "page_type": "api", "page_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.", "heading": "Version History", "content": "Page: next CLI\nSection: Version History\n\n| 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": [], "chunk_position": 18, "heading_path": "Version History > Version History", "breadcrumbs": "next CLI > Version History > Version History"}, {"id": "c5a12be468e70a7a", "url": "https://nextjs.org/docs/app/api-reference/components", "page_title": "Components", "page_type": "overview", "page_summary": "This page provides an index of Next.js built-in components for optimizing fonts, forms, images, links, and scripts.", "heading": "Components", "content": "Page: Components\nSection: Components\n\nThis 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": [], "chunk_position": 19, "heading_path": "Components > Components", "breadcrumbs": "Components > Components > Components"}, {"id": "328d35585f6a7d64", "url": "https://nextjs.org/docs/app/api-reference/components/font", "page_title": "Font Module", "page_type": "api", "page_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…", "heading": "Reference", "content": "Page: Font Module\nSection: Reference\n\nThe 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": [], "chunk_position": 20, "heading_path": "Reference > Reference", "breadcrumbs": "Font Module > Reference > Reference"}, {"id": "910086b5823cd873", "url": "https://nextjs.org/docs/app/api-reference/components/font", "page_title": "Font Module", "page_type": "api", "page_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…", "heading": "src", "content": "Page: Font Module\nSection: src\n\nThe 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": [], "chunk_position": 20, "heading_path": "src > src", "breadcrumbs": "Font Module > src > src"}, {"id": "fbc56a2fcb96e4a9", "url": "https://nextjs.org/docs/app/api-reference/components/font", "page_title": "Font Module", "page_type": "api", "page_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…", "heading": "weight", "content": "Page: Font Module\nSection: weight\n\nThe 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": [], "chunk_position": 20, "heading_path": "weight > weight", "breadcrumbs": "Font Module > weight > weight"}, {"id": "ab4ebaead49031e9", "url": "https://nextjs.org/docs/app/api-reference/components/font", "page_title": "Font Module", "page_type": "api", "page_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…", "heading": "style", "content": "Page: Font Module\nSection: style\n\nThe 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": [], "chunk_position": 20, "heading_path": "style > style", "breadcrumbs": "Font Module > style > style"}, {"id": "2774d25a2e702888", "url": "https://nextjs.org/docs/app/api-reference/components/font", "page_title": "Font Module", "page_type": "api", "page_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…", "heading": "subsets", "content": "Page: Font Module\nSection: subsets\n\nThe 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": [], "chunk_position": 20, "heading_path": "subsets > subsets", "breadcrumbs": "Font Module > subsets > subsets"}, {"id": "ce839b0bf6ade8e3", "url": "https://nextjs.org/docs/app/api-reference/components/font", "page_title": "Font Module", "page_type": "api", "page_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…", "heading": "axes", "content": "Page: Font Module\nSection: axes\n\nSome 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": [], "chunk_position": 20, "heading_path": "axes > axes", "breadcrumbs": "Font Module > axes > axes"}, {"id": "5d71ecdfb56df3e9", "url": "https://nextjs.org/docs/app/api-reference/components/font", "page_title": "Font Module", "page_type": "api", "page_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…", "heading": "display", "content": "Page: Font Module\nSection: display\n\nThe 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": [], "chunk_position": 20, "heading_path": "display > display", "breadcrumbs": "Font Module > display > display"}, {"id": "71310a66ee730e51", "url": "https://nextjs.org/docs/app/api-reference/components/font", "page_title": "Font Module", "page_type": "api", "page_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…", "heading": "preload", "content": "Page: Font Module\nSection: preload\n\nA 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": [], "chunk_position": 20, "heading_path": "preload > preload", "breadcrumbs": "Font Module > preload > preload"}, {"id": "f153a631d1868db1", "url": "https://nextjs.org/docs/app/api-reference/components/font", "page_title": "Font Module", "page_type": "api", "page_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…", "heading": "fallback", "content": "Page: Font Module\nSection: fallback\n\nThe 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": [], "chunk_position": 20, "heading_path": "fallback > fallback", "breadcrumbs": "Font Module > fallback > fallback"}, {"id": "8db5261363937f36", "url": "https://nextjs.org/docs/app/api-reference/components/font", "page_title": "Font Module", "page_type": "api", "page_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…", "heading": "adjustFontFallback", "content": "Page: Font Module\nSection: adjustFontFallback\n\n- 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": [], "chunk_position": 20, "heading_path": "adjustFontFallback > adjustFontFallback", "breadcrumbs": "Font Module > adjustFontFallback > adjustFontFallback"}, {"id": "2cc19cb909b296d4", "url": "https://nextjs.org/docs/app/api-reference/components/font", "page_title": "Font Module", "page_type": "api", "page_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…", "heading": "variable", "content": "Page: Font Module\nSection: variable\n\nA 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": [], "chunk_position": 20, "heading_path": "variable > variable", "breadcrumbs": "Font Module > variable > variable"}, {"id": "5f05d9e7fc3fa829", "url": "https://nextjs.org/docs/app/api-reference/components/font", "page_title": "Font Module", "page_type": "api", "page_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…", "heading": "declarations", "content": "Page: Font Module\nSection: declarations\n\nAn 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": [], "chunk_position": 20, "heading_path": "declarations > declarations", "breadcrumbs": "Font Module > declarations > declarations"}, {"id": "70d89098084a56fa", "url": "https://nextjs.org/docs/app/api-reference/components/font", "page_title": "Font Module", "page_type": "api", "page_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…", "heading": "Google Fonts", "content": "Page: Font Module\nSection: Google Fonts\n\nTo 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"}], "chunk_position": 20, "heading_path": "Google Fonts > Google Fonts", "breadcrumbs": "Font Module > Google Fonts > Google Fonts"}, {"id": "ac7331093766e293", "url": "https://nextjs.org/docs/app/api-reference/components/font", "page_title": "Font Module", "page_type": "api", "page_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…", "heading": "Specifying a subset", "content": "Page: Font Module\nSection: Specifying a subset\n\nGoogle 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"}], "chunk_position": 20, "heading_path": "Specifying a subset > Specifying a subset", "breadcrumbs": "Font Module > Specifying a subset > Specifying a subset"}, {"id": "bd7f82d84b6ea335", "url": "https://nextjs.org/docs/app/api-reference/components/font", "page_title": "Font Module", "page_type": "api", "page_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…", "heading": "Using Multiple Fonts", "content": "Page: Font Module\nSection: Using Multiple Fonts\n\nYou 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 \n …", "filename": "app/layout.tsx"}, {"language": "tsx", "code": "import { roboto_mono } from './fonts'\n \nexport default function Page() {\n return (\n <>\n

My page

\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"}], "chunk_position": 20, "heading_path": "Using Multiple Fonts > Using Multiple Fonts", "breadcrumbs": "Font Module > Using Multiple Fonts > Using Multiple Fonts"}, {"id": "64291e30fe9ef62e", "url": "https://nextjs.org/docs/app/api-reference/components/font", "page_title": "Font Module", "page_type": "api", "page_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…", "heading": "Local Fonts", "content": "Page: Font Module\nSection: Local Fonts\n\nImport `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": ""}], "chunk_position": 20, "heading_path": "Local Fonts > Local Fonts", "breadcrumbs": "Font Module > Local Fonts > Local Fonts"}, {"id": "48f7446b8753b6fc", "url": "https://nextjs.org/docs/app/api-reference/components/font", "page_title": "Font Module", "page_type": "api", "page_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…", "heading": "With Tailwind CSS", "content": "Page: Font Module\nSection: With Tailwind CSS\n\n`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": "

The quick brown fox ...

\n

The quick brown fox ...

", "filename": ""}], "chunk_position": 20, "heading_path": "With Tailwind CSS > With Tailwind CSS", "breadcrumbs": "Font Module > With Tailwind CSS > With Tailwind CSS"}, {"id": "e8211623b9629c6f", "url": "https://nextjs.org/docs/app/api-reference/components/font", "page_title": "Font Module", "page_type": "api", "page_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…", "heading": "Applying Styles", "content": "Page: Font Module\nSection: Applying Styles\n\nYou can apply the font styles in three ways:\n\n- [`className`](#classname)\n- [`style`](#style-1)\n- [CSS Variables](#css-variables)", "code_blocks": [], "chunk_position": 20, "heading_path": "Applying Styles > Applying Styles", "breadcrumbs": "Font Module > Applying Styles > Applying Styles"}, {"id": "5ceca495aa7bdeab", "url": "https://nextjs.org/docs/app/api-reference/components/font", "page_title": "Font Module", "page_type": "api", "page_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…", "heading": "className", "content": "Page: Font Module\nSection: className\n\nReturns a read-only CSS `className` for the loaded font to be passed to an HTML element.", "code_blocks": [{"language": "jsx", "code": "

Hello, Next.js!

", "filename": ""}], "chunk_position": 20, "heading_path": "className > className", "breadcrumbs": "Font Module > className > className"}, {"id": "8904e9adebaa1583", "url": "https://nextjs.org/docs/app/api-reference/components/font", "page_title": "Font Module", "page_type": "api", "page_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…", "heading": "CSS Variables", "content": "Page: Font Module\nSection: CSS Variables\n\nIf 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": "
\n

Hello World

\n
", "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"}], "chunk_position": 20, "heading_path": "CSS Variables > CSS Variables", "breadcrumbs": "Font Module > CSS Variables > CSS Variables"}, {"id": "eb453931652078ad", "url": "https://nextjs.org/docs/app/api-reference/components/font", "page_title": "Font Module", "page_type": "api", "page_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…", "heading": "Using a font definitions file", "content": "Page: Font Module\nSection: Using a font definitions file\n\nEvery 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
\n

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"}], "chunk_position": 20, "heading_path": "Using a font definitions file > Using a font definitions file", "breadcrumbs": "Font Module > Using a font definitions file > Using a font definitions file"}, {"id": "d1dc95c63a4bb077", "url": "https://nextjs.org/docs/app/api-reference/components/font", "page_title": "Font Module", "page_type": "api", "page_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…", "heading": "Preloading", "content": "Page: Font Module\nSection: Preloading\n\nWhen 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": [], "chunk_position": 20, "heading_path": "Preloading > Preloading", "breadcrumbs": "Font Module > Preloading > Preloading"}, {"id": "8bef6d43829b3c39", "url": "https://nextjs.org/docs/app/api-reference/components/font", "page_title": "Font Module", "page_type": "api", "page_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…", "heading": "Version Changes", "content": "Page: Font Module\nSection: Version Changes\n\nThe following table lists the version history for the Font Module.", "code_blocks": [], "chunk_position": 20, "heading_path": "Version Changes > Version Changes", "breadcrumbs": "Font Module > Version Changes > Version Changes"}, {"id": "8edc93ab7373ad5d", "url": "https://nextjs.org/docs/app/api-reference/components/form", "page_title": "Form Component", "page_type": "api", "page_summary": "The

component extends the HTML element to provide prefetching of loading UI, client-side navigation on submission, and progressive enhancement. It is useful for forms that update URL…", "heading": "Overview", "content": "Page: Form Component\nSection: Overview\n\nThe `` component extends the HTML `` 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 \n {/* On submission, the input value will be appended to\n the URL, e.g.…", "filename": "/app/ui/search.tsx"}], "chunk_position": 21, "heading_path": "Overview > Overview", "breadcrumbs": "Form Component > Overview > Overview"}, {"id": "82370306fdb848a3", "url": "https://nextjs.org/docs/app/api-reference/components/form", "page_title": "Form Component", "page_type": "api", "page_summary": "The component extends the HTML element to provide prefetching of loading UI, client-side navigation on submission, and progressive enhancement. It is useful for forms that update URL…", "heading": "Reference", "content": "Page: Form Component\nSection: Reference\n\nThe behavior of the `` component depends on whether the `action` prop is passed a `string` or `function`.\n\n- When `action` is a **string**, the `` behaves like a native HTML form that…", "code_blocks": [], "chunk_position": 21, "heading_path": "Reference > Reference", "breadcrumbs": "Form Component > Reference > Reference"}, {"id": "9d5188ae75bdf2ac", "url": "https://nextjs.org/docs/app/api-reference/components/form", "page_title": "Form Component", "page_type": "api", "page_summary": "The component extends the HTML element to provide prefetching of loading UI, client-side navigation on submission, and progressive enhancement. It is useful for forms that update URL…", "heading": "action (string) Props", "content": "Page: Form Component\nSection: action (string) Props\n\nWhen `action` is a string, the `` 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": [], "chunk_position": 21, "heading_path": "action (string) Props > action (string) Props", "breadcrumbs": "Form Component > action (string) Props > action (string) Props"}, {"id": "168a25f8073ad3ce", "url": "https://nextjs.org/docs/app/api-reference/components/form", "page_title": "Form Component", "page_type": "api", "page_summary": "The component extends the HTML element to provide prefetching of loading UI, client-side navigation on submission, and progressive enhancement. It is useful for forms that update URL…", "heading": "action (function) Props", "content": "Page: Form Component\nSection: action (function) Props\n\nWhen `action` is a function, the `` component supports the following prop:\n\n- **`action`** : The Server Action to be called when the form is submitted. See the [React…", "code_blocks": [], "chunk_position": 21, "heading_path": "action (function) Props > action (function) Props", "breadcrumbs": "Form Component > action (function) Props > action (function) Props"}, {"id": "670b712dc806bcb0", "url": "https://nextjs.org/docs/app/api-reference/components/form", "page_title": "Form Component", "page_type": "api", "page_summary": "The component extends the HTML element to provide prefetching of loading UI, client-side navigation on submission, and progressive enhancement. It is useful for forms that update URL…", "heading": "Caveats", "content": "Page: Form Component\nSection: Caveats\n\n- **`formAction`** : Can be used in a `\n
\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
Loading...
\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
\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 \n )\n}", "filename": ""}, {"language": "python", "code": "import Image from 'next/image'\n \nexport default function Page() {\n return (\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 & {\n srcLight: string\n srcDark: string\n}\n \nconst ThemeImage = (props: Props) => {\n const { srcLight, srcDark, ...rest } = props\n \n return (\n <>\n \n \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 \n \n \n \n \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
\n

Hello World

\n
\n )\n}", "filename": ""}], "chunk_position": 22, "heading_path": "Components: Image Component | Next.js > Components: Image Component | Next.js", "breadcrumbs": "Components: Image Component | Next.js > Components: Image Component | Next.js > Components: Image Component | Next.js"}, {"id": "a5808d6aaaa28d3a", "url": "https://nextjs.org/docs/app/api-reference/components/link", "page_title": "Link Component", "page_type": "api", "page_summary": "This page documents the Next.js `` component, a React component that extends the HTML `` element to provide prefetching and client-side navigation between routes. It covers the component's…", "heading": "Link Component", "content": "Page: Link Component\nSection: Link Component\n\n`` is a React component that extends the HTML `` 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 Dashboard\n}", "filename": "app/page.tsx"}], "chunk_position": 23, "heading_path": "Link Component > Link Component", "breadcrumbs": "Link Component > Link Component > Link Component"}, {"id": "d3ee5623c026ae2c", "url": "https://nextjs.org/docs/app/api-reference/components/link", "page_title": "Link Component", "page_type": "api", "page_summary": "This page documents the Next.js `` component, a React component that extends the HTML `` element to provide prefetching and client-side navigation between routes. It covers the component's…", "heading": "Reference", "content": "Page: Link Component\nSection: Reference\n\nThe following props can be passed to the `` component:\n\n| Prop | Example | Type | Required |\n| --- | --- | --- | --- |\n| [`href`](#href-required) | `href=\"/dashboard\"` | String or Object | Yes…", "code_blocks": [], "chunk_position": 23, "heading_path": "Reference > Reference", "breadcrumbs": "Link Component > Reference > Reference"}, {"id": "aa4b335b9b25e220", "url": "https://nextjs.org/docs/app/api-reference/components/link", "page_title": "Link Component", "page_type": "api", "page_summary": "This page documents the Next.js `` component, a React component that extends the HTML `` element to provide prefetching and client-side navigation between routes. It covers the component's…", "heading": "replace", "content": "Page: Link Component\nSection: replace\n\n**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 \n Dashboard\n \n )\n}", "filename": "app/page.tsx"}], "chunk_position": 23, "heading_path": "replace > replace", "breadcrumbs": "Link Component > replace > replace"}, {"id": "1d37c56e23153d25", "url": "https://nextjs.org/docs/app/api-reference/components/link", "page_title": "Link Component", "page_type": "api", "page_summary": "This page documents the Next.js `` component, a React component that extends the HTML `` element to provide prefetching and client-side navigation between routes. It covers the component's…", "heading": "scroll", "content": "Page: Link Component\nSection: scroll\n\n**Defaults to `true`.** The default scrolling behavior of `` 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 \n Dashboard\n \n )\n}", "filename": "app/page.tsx"}], "chunk_position": 23, "heading_path": "scroll > scroll", "breadcrumbs": "Link Component > scroll > scroll"}, {"id": "2659582036d9895d", "url": "https://nextjs.org/docs/app/api-reference/components/link", "page_title": "Link Component", "page_type": "api", "page_summary": "This page documents the Next.js `` component, a React component that extends the HTML `` element to provide prefetching and client-side navigation between routes. It covers the component's…", "heading": "prefetch", "content": "Page: Link Component\nSection: prefetch\n\nPrefetching happens when a `` 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 \n Dashboard\n \n )\n}", "filename": "app/page.tsx"}], "chunk_position": 23, "heading_path": "prefetch > prefetch", "breadcrumbs": "Link Component > prefetch > prefetch"}, {"id": "46cc6ec820db6c74", "url": "https://nextjs.org/docs/app/api-reference/components/link", "page_title": "Link Component", "page_type": "api", "page_summary": "This page documents the Next.js `` component, a React component that extends the HTML `` element to provide prefetching and client-side navigation between routes. It covers the component's…", "heading": "onNavigate", "content": "Page: Link Component\nSection: onNavigate\n\nAn 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 {\n // Only executes during SPA navigation…", "filename": "app/page.tsx"}], "chunk_position": 23, "heading_path": "onNavigate > onNavigate", "breadcrumbs": "Link Component > onNavigate > onNavigate"}, {"id": "6575de20fc9d772a", "url": "https://nextjs.org/docs/app/api-reference/components/link", "page_title": "Link Component", "page_type": "api", "page_summary": "This page documents the Next.js `` component, a React component that extends the HTML `` element to provide prefetching and client-side navigation between routes. It covers the component's…", "heading": "transitionTypes", "content": "Page: Link Component\nSection: transitionTypes\n\nA 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 \n About\n \n )\n}", "filename": "app/page.tsx"}], "chunk_position": 23, "heading_path": "transitionTypes > transitionTypes", "breadcrumbs": "Link Component > transitionTypes > transitionTypes"}, {"id": "9ccb9980728ab5fb", "url": "https://nextjs.org/docs/app/api-reference/components/link", "page_title": "Link Component", "page_type": "api", "page_summary": "This page documents the Next.js `` component, a React component that extends the HTML `` element to provide prefetching and client-side navigation between routes. It covers the component's…", "heading": "Examples", "content": "Page: Link Component\nSection: Examples\n\nThe following examples demonstrate how to use the `` component in different scenarios.", "code_blocks": [], "chunk_position": 23, "heading_path": "Examples > Examples", "breadcrumbs": "Link Component > Examples > Examples"}, {"id": "75960b948fce3802", "url": "https://nextjs.org/docs/app/api-reference/components/link", "page_title": "Link Component", "page_type": "api", "page_summary": "This page documents the Next.js `` component, a React component that extends the HTML `` element to provide prefetching and client-side navigation between routes. It covers the component's…", "heading": "Linking to dynamic route segments", "content": "Page: Link Component\nSection: Linking to dynamic route segments\n\nWhen 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