Next.js

https://nextjs.org/docs
Admin
Next.js is a React framework for building full-stack web applications. It provides additional...
Tokens:907,786
Snippets:6,876
Trust Score:10
Update:1 week ago
Show doc for...
Tokens:
Raw
### View example project directory structure

Source: https://nextjs.org/docs/app/guides/keeping-pages-static

Shows the directory tree structure for the store, guides, and shared UI components.

```txt
app/
├── store/
│   ├── layout.tsx         # Shared layout with the cart
│   ├── page.tsx           # Product catalog
│   └── products/
│       └── [slug]/
│           └── page.tsx   # Product details and cart status
├── guides/
│   └── [id]/
│       └── page.tsx       # Editorial buying guides
└── ui/
    ├── cart.tsx
    └── product.tsx
lib/
└── guides.ts
```

--------------------------------

### Create app from official example using bun

Source: https://nextjs.org/docs/app/api-reference/cli/create-next-app

Bootstraps a project from an official Next.js example using bun and the --example flag.

```bash
bun create next-app --example [example-name] [your-project-name]
```

--------------------------------

### Create app from official example using npx

Source: https://nextjs.org/docs/app/api-reference/cli/create-next-app

Bootstraps a project from an official Next.js example using npx and the --example flag.

```bash
npx create-next-app@latest --example [example-name] [your-project-name]
```

--------------------------------

### Create app from official example using pnpm

Source: https://nextjs.org/docs/app/api-reference/cli/create-next-app

Bootstraps a project from an official Next.js example using pnpm and the --example flag.

```bash
pnpm create next-app --example [example-name] [your-project-name]
```

--------------------------------

### Install Playwright manually using bun

Source: https://nextjs.org/docs/app/guides/testing/playwright

Initializes Playwright setup prompts and configuration in an existing project via bun.

```bash
bun create playwright
```

--------------------------------

### Create app from official example using yarn

Source: https://nextjs.org/docs/app/api-reference/cli/create-next-app

Bootstraps a project from an official Next.js example using yarn and the --example flag.

```bash
yarn create next-app --example [example-name] [your-project-name]
```

--------------------------------

### Install @next/bundle-analyzer using Bun

Source: https://nextjs.org/docs/app/guides/package-bundling

Installs the bundle analyzer plugin using Bun.

```bash
bun add @next/bundle-analyzer
```

--------------------------------

### Start development server with npm

Source: https://nextjs.org/docs/app/guides/mcp

Starts the Next.js development server using npm.

```bash
npm run dev
```

--------------------------------

### Start development server with bun

Source: https://nextjs.org/docs/app/guides/mcp

Starts the Next.js development server using bun.

```bash
bun dev
```

--------------------------------

### Install @next/bundle-analyzer using npm

Source: https://nextjs.org/docs/app/guides/package-bundling

Installs the bundle analyzer plugin using npm.

```bash
npm install @next/bundle-analyzer
```

--------------------------------

### Install server-only package using bun

Source: https://nextjs.org/docs/app/getting-started/server-and-client-components

Installs the `server-only` package using bun if linting rules flag extraneous dependencies. Installation is optional in Next.js.

```bash
bun add server-only
```

--------------------------------

### Install @next/eslint-plugin-next with bun

Source: https://nextjs.org/docs/app/api-reference/config/eslint

Install @next/eslint-plugin-next as a development dependency using bun.

```bash
bun add -d @next/eslint-plugin-next
```

--------------------------------

### Install @next/bundle-analyzer using Yarn

Source: https://nextjs.org/docs/app/guides/package-bundling

Installs the bundle analyzer plugin using Yarn.

```bash
yarn add @next/bundle-analyzer
```

--------------------------------

### Start development server with yarn

Source: https://nextjs.org/docs/app/guides/mcp

Starts the Next.js development server using yarn.

```bash
yarn dev
```

--------------------------------

### Install @next/bundle-analyzer using pnpm

Source: https://nextjs.org/docs/app/guides/package-bundling

Installs the bundle analyzer plugin using pnpm.

```bash
pnpm add @next/bundle-analyzer
```

--------------------------------

### Install @next/env package using Bun

Source: https://nextjs.org/docs/app/guides/environment-variables

Installs the @next/env package via bun.

```bash
bun add @next/env
```

--------------------------------

### GET /api/search

Source: https://nextjs.org/docs/app/api-reference/file-conventions/route

Handles GET requests with URL query parameters parsed from NextRequest. Example demonstrates extracting the query parameter.

```APIDOC
## GET /api/search

### Description
Handles GET requests using search query parameters accessed through `request.nextUrl.searchParams`.

### Method
GET

### Endpoint
`/api/search`

### Parameters
#### Query Parameters
- **query** (string) - Optional - Search query parameter (e.g., `/api/search?query=hello`).
```

--------------------------------

### Installation Prompts (Recommended Defaults)

Source: https://nextjs.org/docs/app/getting-started/installation

Displays the initial interactive prompts seen in the terminal during installation.

```txt
What is your project named? my-app
Would you like to use the recommended Next.js defaults?
    Yes, use recommended defaults - TypeScript, ESLint, No React Compiler, Tailwind CSS, No src/ directory, App Router, Cache Components, AGENTS.md
    No, reuse previous settings
    No, customize settings - Choose your own preferences

```

--------------------------------

### Install next-cache-components-adoption skill with npx skills

Source: https://nextjs.org/docs/app/guides/ai-agents

Installs the next-cache-components-adoption skill from vercel/next.js. Use this skill to guide an AI agent through migrating routes to Cache Components.

```bash
npx skills add vercel/next.js --skill next-cache-components-adoption
```

--------------------------------

### Initial create-next-app installation prompts

Source: https://nextjs.org/docs/pages/getting-started/installation

Displays the default configuration prompts encountered when running `create-next-app`.

```txt
What is your project named? my-app
Would you like to use the recommended Next.js defaults?
    Yes, use recommended defaults - TypeScript, ESLint, No React Compiler, Tailwind CSS, No src/ directory, App Router, Cache Components, AGENTS.md
    No, reuse previous settings
    No, customize settings - Choose your own preferences
```

--------------------------------

### Install Playwright manually using yarn

Source: https://nextjs.org/docs/app/guides/testing/playwright

Initializes Playwright setup prompts and configuration in an existing project via yarn.

```bash
yarn create playwright
```

--------------------------------

### Install Playwright manually using npm

Source: https://nextjs.org/docs/app/guides/testing/playwright

Initializes Playwright setup prompts and configuration in an existing project via npm.

```bash
npm init playwright
```

--------------------------------

### Install Playwright manually using pnpm

Source: https://nextjs.org/docs/app/guides/testing/playwright

Initializes Playwright setup prompts and configuration in an existing project via pnpm.

```bash
pnpm create playwright
```

--------------------------------

### Create app from public GitHub repo using bun

Source: https://nextjs.org/docs/app/api-reference/cli/create-next-app

Bootstraps a project from a public GitHub repository URL using bun and the --example option.

```bash
bun create next-app --example "https://github.com/.../" [your-project-name]
```

--------------------------------

### Return Non-UI Responses (RSS Feed Example)

Source: https://nextjs.org/docs/app/api-reference/file-conventions/route

Return non-UI content like XML using standard Response objects in a GET Route Handler.

```ts
export async function GET() {
  return new Response(
    `<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0">

<channel>
  <title>Next.js Documentation</title>
  <link>https://nextjs.org/docs</link>
  <description>The React Framework for the Web</description>
</channel>

</rss>`,
    {
      headers: {
        'Content-Type': 'text/xml',
      },
    }
  )
}
```

```js
export async function GET() {
  return new Response(`<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0">

<channel>
  <title>Next.js Documentation</title>
  <link>https://nextjs.org/docs</link>
  <description>The React Framework for the Web</description>
</channel>

</rss>`)
}
```

--------------------------------

### Inspect terminal output when launching Next.js with --inspect

Source: https://nextjs.org/docs/app/guides/debugging

Example terminal output showing the debugger websocket listening address when the development server starts with inspector enabled.

```bash
Debugger listening on ws://127.0.0.1:9229/0cf90313-350d-4466-a748-cd60f4e47c95
For help, see: https://nodejs.org/learn/getting-started/debugging
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
```

--------------------------------

### Create and run Next.js app using yarn

Source: https://nextjs.org/docs/app/getting-started/installation

Creates a Next.js application with default configuration and starts the development server using yarn. The `--yes` flag bypasses CLI setup prompts.

```bash
yarn create next-app@latest my-app --yes
cd my-app
yarn dev
```

--------------------------------

### Create app from public GitHub repo using npx

Source: https://nextjs.org/docs/app/api-reference/cli/create-next-app

Bootstraps a project from a public GitHub repository URL using npx and the --example option.

```bash
npx create-next-app@latest --example "https://github.com/.../" [your-project-name]
```

--------------------------------

### Defer loading message body until navigation with navigation() in app/inbox/[threadId]/thread.tsx and lib/mail.ts

Source: https://nextjs.org/docs/app/guides/optimizing-prefetching

Await navigation() inside a Suspense boundary to defer fetching data until the user navigates to the route. This example pairs the component setup in thread.tsx with the cached data fetchers defined in lib/mail.ts.

```tsx
import { Suspense } from 'react'
import { navigation } from 'next/cache'
import { getLatestMessage, getThreadSummary } from '@/lib/mail'

export async function Thread({ threadId }: { threadId: string }) {
  const thread = await getThreadSummary(threadId)

  return (
    <article>
      <h1>{thread.subject}</h1>
      <Suspense fallback={<p>Loading message...</p>}>
        <LatestMessage threadId={threadId} />
      </Suspense>
    </article>
  )
}

async function LatestMessage({ threadId }: { threadId: string }) {
  await navigation()
  const message = await getLatestMessage(threadId)
  return <p>{message.body}</p>
}
```

```ts
import { db } from '@/lib/db'

export async function getThreadSummary(threadId: string) {
  'use cache'
  return db.thread.findUniqueOrThrow({
    select: { subject: true },
    where: { id: threadId },
  })
}

export async function getLatestMessage(threadId: string) {
  'use cache'
  return db.message.findFirstOrThrow({
    orderBy: { sentAt: 'desc' },
    select: { body: true },
    where: { threadId },
  })
}
```

--------------------------------

### Create a new Next.js project with an example API route using bun

Source: https://nextjs.org/docs/app/guides/backend-for-frontend

Initialize a new project using bun with the `--api` flag to automatically include an example `route.ts` in the `app/` folder.

```bash
bun create next-app --api
```

--------------------------------

### Implement generateStaticParams for Dynamic Guide Route

Source: https://nextjs.org/docs/app/guides/keeping-pages-static

Fetches guide IDs and implements generateStaticParams to statically prerender guide pages during the build.

```ts
export async function getGuideIds() {
  const guides = await db.guide.findMany({ select: { id: true } })
  return guides.map(({ id }) => id)
}
```

```tsx
import { Suspense } from 'react'
import { cookies } from 'next/headers'
import { getGuide, getGuideIds } from '@/lib/guides'

export const ensureStatic = 'navigation'

export async function generateStaticParams() {
  const ids = await getGuideIds()
  return ids.map((id) => ({ id }))
}

export default function GuidePage({ params }: PageProps<'/guides/[id]'>) {
  return (
    <Suspense fallback={<p>Loading guide...</p>}>
      <Guide params={params} />
    </Suspense>
  )
}

async function Guide({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const guide = await getGuide(id)
  const theme = (await cookies()).get('theme')?.value
  return <article data-theme={theme}>{guide.content}</article>
}
```

--------------------------------

### Install the next-partial-prefetching-adoption skill

Source: https://nextjs.org/docs/app/guides/adopting-partial-prefetching

Installs the adoption skill for coding agents to automate Partial Prefetching migration.

```bash
npx skills add vercel/next.js --skill next-partial-prefetching-adoption
```

--------------------------------

### Create app from public GitHub repo using pnpm

Source: https://nextjs.org/docs/app/api-reference/cli/create-next-app

Bootstraps a project from a public GitHub repository URL using pnpm and the --example option.

```bash
pnpm create next-app --example "https://github.com/.../" [your-project-name]
```

--------------------------------

### Create Next.js app with Cypress example (bun)

Source: https://nextjs.org/docs/app/guides/testing/cypress

Scaffold a new Next.js project preconfigured with Cypress using bun.

```bash
bun create next-app --example with-cypress with-cypress-app
```

--------------------------------

### Run Cypress testing suite (bun)

Source: https://nextjs.org/docs/app/guides/testing/cypress

Execute the cypress:open script for the first time using bun.

```bash
bun run cypress:open
```

--------------------------------

### Create a new Next.js project with an example API route using npx

Source: https://nextjs.org/docs/app/guides/backend-for-frontend

Initialize a new project using npx with the `--api` flag to automatically include an example `route.ts` in the `app/` folder.

```bash
npx create-next-app@latest --api
```

--------------------------------

### Install server-only package using pnpm

Source: https://nextjs.org/docs/app/getting-started/server-and-client-components

Installs the `server-only` package using pnpm if linting rules flag extraneous dependencies. Installation is optional in Next.js.

```bash
pnpm add server-only
```

--------------------------------

### View example output of next info

Source: https://nextjs.org/docs/app/api-reference/cli/next

Prints relevant system, binary, package, and Next.js config information for reporting bugs when opening a GitHub issue.

```bash
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.6.0
  Available memory (MB): 65536
  Available CPU cores: 10
Binaries:
  Node: 20.12.0
  npm: 10.5.0
  Yarn: 1.22.19
  pnpm: 9.6.0
Relevant Packages:
  next: 15.0.0-canary.115 // Latest available version is detected (15.0.0-canary.115).
  eslint-config-next: 14.2.5
  react: 19.0.0-rc
  react-dom: 19.0.0
  typescript: 5.5.4
Next.js Config:
  output: N/A
```

--------------------------------

### Install server-only package using yarn

Source: https://nextjs.org/docs/app/getting-started/server-and-client-components

Installs the `server-only` package using yarn if linting rules flag extraneous dependencies. Installation is optional in Next.js.

```bash
yarn add server-only
```

--------------------------------

### Install server-only package using npm

Source: https://nextjs.org/docs/app/getting-started/server-and-client-components

Installs the `server-only` package using npm if linting rules flag extraneous dependencies. Installation is optional in Next.js.

```bash
npm install server-only
```

--------------------------------

### Start development server with --inspect using bun

Source: https://nextjs.org/docs/app/guides/debugging

Runs the Next.js development server with Node inspector enabled using Bun.

```bash
bun run dev --inspect
```

--------------------------------

### Write a custom deploy script for adapter testing

Source: https://nextjs.org/docs/app/api-reference/adapters/testing-adapters

Follows the deploy script contract by setting up the adapter dependency, building the application, logging metadata to files, and outputting the deployment URL to stdout.

```bash
#!/usr/bin/env bash
set -euo pipefail

# Install the adapter, build the app, and deploy or start it.
node -e "
const pkg=JSON.parse(require('fs').readFileSync('package.json','utf8'));
pkg.dependencies=pkg.dependencies||{};
pkg.dependencies['adapter']='file:${ADAPTER_DIR}';
require('fs').writeFileSync('package.json',JSON.stringify(pkg,null,2));
" >&2

# Set the adapter path so that the app uses it.
export NEXT_ADAPTER_PATH="${ADAPTER_DIR}/dist/index.js"

# Build the app
pnpm build

# Write any metadata needed later to files in the working directory.
BUILD_ID="$(cat .next/BUILD_ID)"
DEPLOYMENT_ID="my-adapter-local"
# If your adapter enables immutable static assets, set this to "1".
NEXT_SUPPORTS_IMMUTABLE_ASSETS="0"

{
  echo "BUILD_ID: $BUILD_ID"
  echo "DEPLOYMENT_ID: $DEPLOYMENT_ID"
  echo "NEXT_SUPPORTS_IMMUTABLE_ASSETS: $NEXT_SUPPORTS_IMMUTABLE_ASSETS"
} >> .adapter-build.log

# Start or deploy the app. Capture the URL at this point or make the script output the URL to stdout.
provider-cli-to-deploy

# Example URL output:
# echo "http://127.0.0.1:3000"
```

--------------------------------

### Install @next/eslint-plugin-next with yarn

Source: https://nextjs.org/docs/app/api-reference/config/eslint

Install @next/eslint-plugin-next as a development dependency using yarn.

```bash
yarn add --dev @next/eslint-plugin-next
```

--------------------------------

### Install @next/eslint-plugin-next with npm

Source: https://nextjs.org/docs/app/api-reference/config/eslint

Install @next/eslint-plugin-next as a development dependency using npm.

```bash
npm i -D @next/eslint-plugin-next
```

--------------------------------

### Install @next/eslint-plugin-next with pnpm

Source: https://nextjs.org/docs/app/api-reference/config/eslint

Install @next/eslint-plugin-next as a development dependency using pnpm.

```bash
pnpm add -D @next/eslint-plugin-next
```

--------------------------------

### Install web-push globally using bun

Source: https://nextjs.org/docs/app/guides/progressive-web-apps

Installs the web-push CLI globally via bun to generate VAPID keys.

```bash
bun add -g web-push
```

--------------------------------

### Create a Next.js app with the with-vitest template using bun

Source: https://nextjs.org/docs/app/guides/testing/vitest

Quickly bootstrap a Next.js project pre-configured with Vitest using bun create next-app.

```bash
bun create next-app --example with-vitest with-vitest-app
```

--------------------------------

### Run build with bun

Source: https://nextjs.org/docs/app/guides/building

Execute the build command using Bun.

```bash
bun run build
```
Tokens:
Raw