Next.js

https://github.com/vercel/next.js
Admin
Next.js enables you to create full-stack web applications by extending the latest React features and...
Tokens:836,410
Snippets:5,907
Trust Score:10
License:MIT
Update:7 hours ago
Show doc for...
Tokens:
Raw
### Quickstart with create-next-app using npm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/testing/jest.mdx

Bootstrap a Next.js project preconfigured with Jest using the with-jest example template.

```bash
npx create-next-app@latest --example with-jest with-jest-app
```

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

### Example project directory structure

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/keeping-pages-static.mdx

Outlines the file organization for the store, guides, UI components, and utility libraries.

```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
```

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

### Quickstart with create-next-app using Bun

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/testing/jest.mdx

Bootstrap a Next.js project preconfigured with Jest using the with-jest example template.

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

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

### Quickstart with create-next-app using pnpm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/testing/jest.mdx

Bootstrap a Next.js project preconfigured with Jest using the with-jest example template.

```bash
pnpm create next-app --example with-jest with-jest-app
```

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

### Quickstart with create-next-app using Yarn

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/testing/jest.mdx

Bootstrap a Next.js project preconfigured with Jest using the with-jest example template.

```bash
yarn create next-app --example with-jest with-jest-app
```

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

### Add and run next-partial-prefetching-adoption Skill

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/ai-agents.mdx

Installs the `next-partial-prefetching-adoption` skill and provides the prompt to guide the agent in moving the project to Partial Prefetching. Requires Cache Components already adopted and a production-like build for verification.

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

```prompt
Adopt Partial Prefetching in this project using the next-partial-prefetching-adoption Skill.
```

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

### Run development server to trigger Partytown setup

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/scripts.mdx

Runs the Next.js development server, which will prompt instructions to install `@qwik.dev/partytown`.

```bash
pnpm dev
```

```bash
npm run dev
```

```bash
yarn dev
```

```bash
bun dev
```

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

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

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/optimizing-prefetching.mdx

Installs the optimizer skill for AI coding agents to automate partial prefetching setup and tests.

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

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

### Order documentation routes with two-digit numerical prefixes

Source: https://github.com/vercel/next.js/blob/canary/docs/04-community/01-contribution-guide.mdx

Demonstrates custom sequential ordering by prepending two-digit numbers (00-) to file names, useful for structured learning flows like the App Router getting started guide.

```txt
01-getting-started
├── 01-installation.mdx
├── 02-project-structure.mdx
├── 03-layouts-and-pages.mdx
└── ...
```

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

### Set up client instrumentation in instrumentation-client.js

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/analytics.mdx

Create an instrumentation-client.js or instrumentation-client.ts file in the application root directory to run code before frontend execution starts. Use this setup to initialize global analytics or attach window error listeners.

```javascript
// Initialize analytics before the app starts
console.log('Analytics initialized')

// Set up global error tracking
window.addEventListener('error', (event) => {
  // Send to your error tracking service
  reportError(event.error)
})
```

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

### Install @next/bundle-analyzer

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/package-bundling.mdx

Install the bundle analyzer plugin using your preferred package manager.

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

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

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

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

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

### Create and run Next.js app with pnpm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/01-getting-started/01-installation.mdx

Initializes a new Next.js application named `my-app` and starts the development server using pnpm. The `--yes` flag automatically applies default setup configurations including TypeScript, Tailwind CSS, ESLint, App Router, and Turbopack.

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

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

### Install the next-cache-components-adoption skill

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/migrating-to-cache-components.mdx

Install the adoption skill to allow a coding agent to drive the Cache Components migration.

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

```

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

### Prompt agent for view transitions

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/view-transitions.mdx

Example prompt instructing an agent to apply view transitions to an app using the installed skill.

```prompt
Add view transitions to this app using the vercel-react-view-transitions skill.

```

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

### Install Cypress with Bun

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/testing/cypress.mdx

Installs Cypress as a development dependency using Bun.

```bash
bun add -D cypress
```

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

### Install and prompt the next-cache-components-adoption Skill

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/ai-agents.mdx

Install the next-cache-components-adoption skill and prompt the agent to migrate the application to Cache Components step-by-step.

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

```prompt
Adopt Cache Components in this project using the next-cache-components-adoption Skill.
```

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

### Install @next/third-parties using bun

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/third-party-libraries.mdx

Install the experimental `@next/third-parties` package alongside `next` using bun.

```bash
bun add @next/third-parties@latest next@latest
```

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

### Build and start application with testing API enabled

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/03-api-reference/05-config/01-next-config-js/exposeTestingApiInProductionBuild.mdx

Sets the environment variable when executing next build, then serves the build with next start. Setting the variable only during next start will not add the testing API to an existing build.

```bash
EXPOSE_TESTING_API=1 pnpm build
pnpm start
```

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

### Install web-push globally using bun

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/progressive-web-apps.mdx

Installs the `web-push` CLI globally using bun for generating VAPID keys.

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

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

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

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/adopting-partial-prefetching.mdx

Installs the adoption skill into your project to drive Partial Prefetching migration with a coding agent.

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

```

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

### Install and prompt the next-bundle-optimizer Skill

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/ai-agents.mdx

Install the next-bundle-optimizer skill and prompt the agent in audit-only mode to generate a report on initial load performance.

```bash
npx skills add vercel/next.js --skill next-bundle-optimizer
```

```prompt
Use the next-bundle-optimizer skill to produce a report of the initial load performance of this site.
```

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

### Install web-push globally using pnpm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/progressive-web-apps.mdx

Installs the `web-push` CLI globally using pnpm for generating VAPID keys.

```bash
pnpm add -g web-push
```

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

### Install @next/third-parties using npm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/third-party-libraries.mdx

Install the experimental `@next/third-parties` package alongside `next` using npm.

```bash
npm install @next/third-parties@latest next@latest
```

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

### Install Next.js with Bun

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/01-getting-started/01-installation.mdx

Installs the required Next.js, React, and React DOM packages using Bun.

```bash
bun add next@latest react@latest react-dom@latest
```

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

### Install TypeScript 7 with Bun

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/03-api-reference/05-config/01-next-config-js/useTypeScriptCli.mdx

Install TypeScript 7 as a development dependency using Bun.

```bash
bun add -D typescript@^7
```

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

### Install @next/third-parties using pnpm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/third-party-libraries.mdx

Install the experimental `@next/third-parties` package alongside `next` using pnpm.

```bash
pnpm add @next/third-parties@latest next@latest
```

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

### Install web-push globally using yarn

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/progressive-web-apps.mdx

Installs the `web-push` CLI globally using yarn for generating VAPID keys.

```bash
yarn global add web-push
```

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

### Install Next.js with npm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/01-getting-started/01-installation.mdx

Installs the required Next.js, React, and React DOM packages using npm.

```bash
npm i next@latest react@latest react-dom@latest
```

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

### Implement InstallPrompt and Page components for PWA

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/progressive-web-apps.mdx

Checks whether the client is iOS or already in standalone display mode before rendering the install prompt. Returns null if already installed to avoid showing redundant install buttons.

```tsx
function InstallPrompt() {
  const [isIOS, setIsIOS] = useState(false)
  const [isStandalone, setIsStandalone] = useState(false)

  useEffect(() => {
    setIsIOS(
      /iPad|iPhone|iPod/.test(navigator.userAgent) && !(window as any).MSStream
    )

    setIsStandalone(window.matchMedia('(display-mode: standalone)').matches)
  }, [])

  if (isStandalone) {
    return null // Don't show install button if already installed
  }

  return (
    <div>
      <h3>Install App</h3>
      <button>Add to Home Screen</button>
      {isIOS && (
        <p>
          To install this app on your iOS device, tap the share button
          <span role="img" aria-label="share icon">
            {' '}
            ⎋{' '}
          </span>
          and then "Add to Home Screen"
          <span role="img" aria-label="plus icon">
            {' '}
            ➕{' '}
          </span>
          .
        </p>
      )}
    </div>
  )
}

export default function Page() {
  return (
    <div>
      <PushNotificationManager />
      <InstallPrompt />
    </div>
  )
}
```

```jsx
function InstallPrompt() {
  const [isIOS, setIsIOS] = useState(false);
  const [isStandalone, setIsStandalone] = useState(false);

  useEffect(() => {
    setIsIOS(
      /iPad|iPhone|iPod/.test(navigator.userAgent) && !(window as any).MSStream
    );

    setIsStandalone(window.matchMedia('(display-mode: standalone)').matches);
  }, []);

  if (isStandalone) {
    return null; // Don't show install button if already installed
  }

  return (
    <div>
      <h3>Install App</h3>
      <button>Add to Home Screen</button>
      {isIOS && (
        <p>
          To install this app on your iOS device, tap the share button
          <span role="img" aria-label="share icon">
            {' '}
            ⎋{' '}
          </span>
          and then "Add to Home Screen"
          <span role="img" aria-label="plus icon">
            {' '}
            ➕{' '}
          </span>
          .
        </p>
      )}
    </div>
  );
}

export default function Page() {
  return (
    <div>
      <PushNotificationManager />
      <InstallPrompt />
    </div>
  );
}
```

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

### Project directory layout for per-directory PostCSS configs

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/03-api-reference/05-config/01-next-config-js/turbopackLocalPostcssConfig.mdx

Example structure illustrating how per-directory `postcss.config.js` files take precedence over the root fallback in multi-package or monorepo setups.

```plaintext
my-app/
├── postcss.config.js          ← fallback (applied if no local config is found)
├── app/
│   └── page.module.css        ← uses root config
└── packages/
    └── ui/
        ├── postcss.config.js  ← takes precedence for files in this directory
        └── button.module.css  ← uses packages/ui/postcss.config.js
```

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

### Install web-push globally using npm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/progressive-web-apps.mdx

Installs the `web-push` CLI globally using npm for generating VAPID keys.

```bash
npm install -g web-push
```

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

### Start agent upgrade with experimental-future policy

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/upgrading/agent-upgrade.mdx

Applies the latest policy and prepares adoption guides and Skills for future defaults like Cache Components on Next.js 16.3+ App Router projects.

```bash
npx next@canary upgrade --agent=experimental-future
```

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

### Install OpenTelemetry packages

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/open-telemetry.mdx

Install `@vercel/otel` along with required OpenTelemetry logging and instrumentation dependencies.

```bash
pnpm add @vercel/otel @opentelemetry/sdk-logs @opentelemetry/api-logs @opentelemetry/instrumentation
```

```bash
npm install @vercel/otel @opentelemetry/sdk-logs @opentelemetry/api-logs @opentelemetry/instrumentation
```

```bash
yarn add @vercel/otel @opentelemetry/sdk-logs @opentelemetry/api-logs @opentelemetry/instrumentation
```

```bash
bun add @vercel/otel @opentelemetry/sdk-logs @opentelemetry/api-logs @opentelemetry/instrumentation
```

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

### Start Next.js development server

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/mcp.mdx

Starts the local development server required for the next-devtools-mcp agent connection.

```bash
pnpm dev

```

```bash
npm run dev

```

```bash
yarn dev

```

```bash
bun dev

```

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

### Install Tailwind CSS v3 using Bun

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/tailwind-v3-css.mdx

Install Tailwind CSS v3 with PostCSS and Autoprefixer, then run the init command using Bun.

```bash
bun add -D tailwindcss@^3 postcss autoprefixer
bunx tailwindcss init -p
```

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

### Install Cypress with pnpm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/testing/cypress.mdx

Installs Cypress as a development dependency using pnpm.

```bash
pnpm add -D cypress
```

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

### Install Cypress with Yarn

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/testing/cypress.mdx

Installs Cypress as a development dependency using Yarn.

```bash
yarn add -D cypress
```

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

### Install Cypress with npm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/testing/cypress.mdx

Installs Cypress as a development dependency using npm.

```bash
npm install -D cypress
```

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

### Install Sass using Bun

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/sass.mdx

Installs the `sass` package as a development dependency using Bun.

```bash
bun add -D sass
```

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

### Install Next.js using bun

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/migrating/from-vite.mdx

Installs the latest Next.js package as a project dependency using Bun.

```bash
bun add next@latest
```

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

### Install and prompt the next-cache-components-optimizer Skill

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/ai-agents.mdx

Install the next-cache-components-optimizer skill and prompt the agent to expand a target route's static shell UI for initial load optimization.

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

```prompt
Optimize the static shell for /dashboard using the next-cache-components-optimizer Skill. On an initial load, the header and project list should be available immediately.
```

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

### Install @next/third-parties using yarn

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/third-party-libraries.mdx

Install the experimental `@next/third-parties` package alongside `next` using yarn.

```bash
yarn add @next/third-parties@latest next@latest
```

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

### Install @opentelemetry/api

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/open-telemetry.mdx

Install the OpenTelemetry API package to instrument custom spans in your application.

```bash
pnpm add @opentelemetry/api
```

```bash
npm install @opentelemetry/api
```

```bash
yarn add @opentelemetry/api
```

```bash
bun add @opentelemetry/api
```

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

### Install and run custom webpack with bun

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/custom-webpack.mdx

Install webpack as a development dependency and pass `--custom-webpack` to `next dev` or `next build` using bun and bunx.

```bash
bun add -D webpack@^5.98.0
bunx next dev --custom-webpack
bunx next build --custom-webpack
```

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

### Install @next/playwright and @playwright/test using bun

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/instant-navigation.mdx

Install @next/playwright alongside @playwright/test as development dependencies using bun.

```bash
bun add -D @next/playwright @playwright/test
```

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

### Create and run Next.js app with npm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/01-getting-started/01-installation.mdx

Initializes a new Next.js application named `my-app` and starts the development server using npm. The `--yes` flag skips interactive prompts using saved preferences or defaults.

```bash
npx create-next-app@latest my-app --yes
cd my-app
npm run dev
```

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

### Install and prompt the next-dev-loop Skill

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/ai-agents.mdx

Add the next-dev-loop runtime foundation skill to verify changes against a running dev server using MCP and the browser.

```bash
npx skills add vercel/next.js --skill next-dev-loop
```

```prompt
After every edit, verify the page still works at runtime using the next-dev-loop Skill.
```

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

### Fetch guide data from database

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/keeping-pages-static.mdx

Helper function querying the database for a guide by its unique ID.

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

export async function getGuide(id: string) {
  return db.guide.findUniqueOrThrow({ where: { id } })
}
```

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

### Install TypeScript 7 with Yarn

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/03-api-reference/05-config/01-next-config-js/useTypeScriptCli.mdx

Install TypeScript 7 as a development dependency using Yarn.

```bash
yarn add -D typescript@^7
```

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

### Install next-devtools-mcp using add-mcp

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/mcp.mdx

Installs next-devtools-mcp for coding agents across your machine using add-mcp.

```bash
npx add-mcp next-devtools-mcp@latest
```

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

### Install TypeScript 7 with pnpm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/03-api-reference/05-config/01-next-config-js/useTypeScriptCli.mdx

Install TypeScript 7 as a development dependency using pnpm.

```bash
pnpm add -D typescript@^7
```

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

### Install TypeScript 7 with npm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/03-api-reference/05-config/01-next-config-js/useTypeScriptCli.mdx

Install TypeScript 7 as a development dependency using npm.

```bash
npm install -D typescript@^7
```

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

### Minimum working example with Link component in app/page.tsx

Source: https://github.com/vercel/next.js/blob/canary/docs/04-community/01-contribution-guide.mdx

Provides a complete, runnable code example including both the import statement and component usage.

```tsx
import Link from 'next/link'

export default function Page() {
  return <Link href="/about">About</Link>
}
```

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

### Install Next.js with Yarn

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/01-getting-started/01-installation.mdx

Installs the required Next.js, React, and React DOM packages using Yarn.

```bash
yarn add next@latest react@latest react-dom@latest
```

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

### Install and run custom webpack with npm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/custom-webpack.mdx

Install webpack as a development dependency and pass `--custom-webpack` to `next dev` or `next build` using npm and npx.

```bash
npm install -D webpack@^5.98.0
npx next dev --custom-webpack
npx next build --custom-webpack
```

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

### Add and run next-partial-prefetching-optimizer Skill

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/ai-agents.mdx

Installs the `next-partial-prefetching-optimizer` skill and provides a prompt to optimize navigation prefetching. Requires Cache Components and Partial Prefetching to already be adopted.

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

```prompt
Make the product title instant when navigating from /products to /products/[id]. Use the next-partial-prefetching-optimizer Skill.
```

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

### Install Next.js using npm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/migrating/from-vite.mdx

Installs the latest Next.js package as a project dependency using npm.

```bash
npm install next@latest
```

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

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

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/03-api-reference/05-config/03-eslint.mdx

Use this command to install the Next.js ESLint plugin as a dev dependency when using bun.

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

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

### Install the next-bundle-optimizer AI skill

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/package-bundling.mdx

Installs the `next-bundle-optimizer` skill to allow AI agents to access Turbopack bundle analysis data.

```bash
npx skills add vercel/next.js --skill next-bundle-optimizer
```

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

### Install babel-plugin-react-compiler using bun

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/03-api-reference/05-config/01-next-config-js/reactCompiler.mdx

Install the required React Compiler Babel plugin as a development dependency using bun.

```bash
bun add -D babel-plugin-react-compiler
```

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

### Install Sass using pnpm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/sass.mdx

Installs the `sass` package as a development dependency using pnpm.

```bash
pnpm add -D sass
```

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

### Create Next.js app with Vitest using bun

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/testing/vitest.mdx

Bootstrap a Next.js application pre-configured with Vitest using bun and the with-vitest example template.

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

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

### Install Next.js with pnpm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/01-getting-started/01-installation.mdx

Installs the required Next.js, React, and React DOM packages using pnpm.

```bash
pnpm i next@latest react@latest react-dom@latest
```

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

### Install Sass using Yarn

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/sass.mdx

Installs the `sass` package as a development dependency using Yarn.

```bash
yarn add -D sass
```

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

### Install Sass using npm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/sass.mdx

Installs the `sass` package as a development dependency using npm.

```bash
npm install --save-dev sass
```

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

### Initialize Jest configuration with Bun

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/testing/jest.mdx

Run the Jest interactive prompt to generate a starter configuration file.

```bash
bun create jest@latest
```

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

### Install vercel-react-view-transitions skill

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/view-transitions.mdx

Installs the vercel-react-view-transitions agent skill using npx skills to teach coding agents view transition patterns and CSS recipes.

```bash
npx skills add vercel-labs/agent-skills --skill vercel-react-view-transitions

```

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

### Create and run Next.js app with Bun

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/01-getting-started/01-installation.mdx

Initializes a new Next.js application named `my-app` and starts the development server using Bun. The `--yes` flag bypasses CLI prompts and applies default settings.

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

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

### Initialize Jest configuration with npm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/testing/jest.mdx

Run the Jest interactive prompt to generate a starter configuration file.

```bash
npm init jest@latest
```

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

### Install Next.js using yarn

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/migrating/from-vite.mdx

Installs the latest Next.js package as a project dependency using Yarn.

```bash
yarn add next@latest
```

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

### Install and run custom webpack with pnpm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/custom-webpack.mdx

Install webpack as a development dependency and pass `--custom-webpack` to `next dev` or `next build` using pnpm.

```bash
pnpm add -D webpack@^5.98.0
pnpm next dev --custom-webpack
pnpm next build --custom-webpack
```

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

### Install Next.js using pnpm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/migrating/from-vite.mdx

Installs the latest Next.js package as a project dependency using pnpm.

```bash
pnpm add next@latest
```

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

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

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/03-api-reference/05-config/03-eslint.mdx

Use this command to install the Next.js ESLint plugin as a dev dependency when using pnpm.

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

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

### Create Next.js app with Playwright example using npm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/testing/playwright.mdx

Use create-next-app with the with-playwright example to create a Next.js project with Playwright configured. Run this command with npm.

```bash
npx create-next-app@latest --example with-playwright with-playwright-app
```

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

### Create Next.js app with Playwright example using bun

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/testing/playwright.mdx

Use create-next-app with the with-playwright example to create a Next.js project with Playwright configured. Run this command with bun.

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

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

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

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/03-api-reference/05-config/03-eslint.mdx

Use this command to install the Next.js ESLint plugin as a dev dependency when using npm.

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

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

### Install @next/playwright and @playwright/test using pnpm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/instant-navigation.mdx

Install @next/playwright alongside @playwright/test as development dependencies using pnpm.

```bash
pnpm add -D @next/playwright @playwright/test
```

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

### View default create-next-app prompts

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/01-getting-started/01-installation.mdx

Displays the initial interactive prompts presented in the terminal on 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
```

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

### Create Next.js app with Vitest using npm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/testing/vitest.mdx

Bootstrap a Next.js application pre-configured with Vitest using create-next-app and the with-vitest example template.

```bash
npx create-next-app@latest --example with-vitest with-vitest-app
```

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

### Install babel-plugin-react-compiler using npm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/03-api-reference/05-config/01-next-config-js/reactCompiler.mdx

Install the required React Compiler Babel plugin as a development dependency using npm.

```bash
npm install -D babel-plugin-react-compiler
```

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

### Install and run custom webpack with yarn

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/custom-webpack.mdx

Install webpack as a development dependency and pass `--custom-webpack` to `next dev` or `next build` using yarn.

```bash
yarn add -D webpack@^5.98.0
yarn next dev --custom-webpack
yarn next build --custom-webpack
```

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

### Install ESLint and eslint-config-next with bun

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/03-api-reference/05-config/03-eslint.mdx

Use this command to add ESLint and the Next.js ESLint config as development dependencies using bun.

```bash
bun add -d eslint eslint-config-next
```

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

### Install @next/playwright and @playwright/test using yarn

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/instant-navigation.mdx

Install @next/playwright alongside @playwright/test as development dependencies using yarn.

```bash
yarn add -D @next/playwright @playwright/test
```

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

### Install @next/mdx and related dependencies

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/mdx.mdx

Install required packages to configure Next.js to compile markdown and MDX sourced from local files.

```bash
pnpm add @next/mdx @mdx-js/loader @mdx-js/react @types/mdx
```

```bash
npm install @next/mdx @mdx-js/loader @mdx-js/react @types/mdx
```

```bash
yarn add @next/mdx @mdx-js/loader @mdx-js/react @types/mdx
```

```bash
bun add @next/mdx @mdx-js/loader @mdx-js/react @types/mdx
```

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

### Install babel-plugin-react-compiler using pnpm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/03-api-reference/05-config/01-next-config-js/reactCompiler.mdx

Install the required React Compiler Babel plugin as a development dependency using pnpm.

```bash
pnpm add -D babel-plugin-react-compiler
```

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

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

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/03-api-reference/05-config/03-eslint.mdx

Use this command to install the Next.js ESLint plugin as a dev dependency when using yarn.

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

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

### Install @next/playwright and @playwright/test using npm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/instant-navigation.mdx

Install @next/playwright alongside @playwright/test as development dependencies using npm.

```bash
npm install -D @next/playwright @playwright/test
```

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

### Create Cypress project with Bun

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/testing/cypress.mdx

Bootstraps a new Next.js project preconfigured with Cypress using Bun.

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

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

### Create Next.js app with Playwright example using pnpm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/testing/playwright.mdx

Use create-next-app with the with-playwright example to create a Next.js project with Playwright configured. Run this command with pnpm.

```bash
pnpm create next-app --example with-playwright with-playwright-app
```

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

### Install OpenTelemetry packages

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/open-telemetry.mdx

Install the required OpenTelemetry Node.js SDK, resources, semantic conventions, and OTLP exporter packages using your preferred package manager.

```bash
pnpm add @opentelemetry/sdk-node @opentelemetry/resources @opentelemetry/semantic-conventions @opentelemetry/sdk-trace-node @opentelemetry/exporter-trace-otlp-http
```

```bash
npm install @opentelemetry/sdk-node @opentelemetry/resources @opentelemetry/semantic-conventions @opentelemetry/sdk-trace-node @opentelemetry/exporter-trace-otlp-http
```

```bash
yarn add @opentelemetry/sdk-node @opentelemetry/resources @opentelemetry/semantic-conventions @opentelemetry/sdk-trace-node @opentelemetry/exporter-trace-otlp-http
```

```bash
bun add @opentelemetry/sdk-node @opentelemetry/resources @opentelemetry/semantic-conventions @opentelemetry/sdk-trace-node @opentelemetry/exporter-trace-otlp-http
```

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

### Render guide page reading theme from cookies

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/keeping-pages-static.mdx

Wraps the guide component in a `<Suspense>` boundary and retrieves dynamic theme data from cookies alongside database content.

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

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 eslint-config-prettier with bun

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/03-api-reference/05-config/03-eslint.mdx

Install the eslint-config-prettier dependency using bun to make ESLint and Prettier work together.

```bash
bun add -d eslint-config-prettier
```

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

### Create Next.js app with Vitest using pnpm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/testing/vitest.mdx

Bootstrap a Next.js application pre-configured with Vitest using pnpm and the with-vitest example template.

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

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

### Start Next.js development server with Turbopack

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/migrating/from-create-react-app.mdx

Runs the Next.js local development server using Turbopack by default.

```bash
next dev  # Uses Turbopack by default
```

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

### Set NEXT_MANUAL_SIG_HANDLE in package.json start script

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/self-hosting.mdx

Add the NEXT_MANUAL_SIG_HANDLE=true environment variable directly to the start script in package.json. This must be set in the script, not in a .env file.

```json
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "NEXT_MANUAL_SIG_HANDLE=true next start"
  }
}
```

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

### Initialize Jest configuration with pnpm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/testing/jest.mdx

Run the Jest interactive prompt to generate a starter configuration file.

```bash
pnpm create jest@latest
```

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

### Install ESLint and eslint-config-next with npm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/03-api-reference/05-config/03-eslint.mdx

Use this command to add ESLint and the Next.js ESLint config as development dependencies using npm.

```bash
npm i -D eslint eslint-config-next
```

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

### Install the next-cache-components-optimizer skill

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/optimizing-the-static-shell.mdx

Installs the Cache Components optimizer skill using the Next.js skills CLI to assist coding agents in optimizing route static shells.

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

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

### Install Playwright using bun

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/testing/playwright.mdx

Run this command to install Playwright with bun. It will take you through a series of prompts to set up and configure Playwright for your project, including adding a playwright.config.ts file.

```bash
bun create playwright
```

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

### Install server-only package using bun

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/01-getting-started/05-server-and-client-components.mdx

Installing server-only is optional in Next.js unless required by your linting rules to avoid extraneous dependency flags.

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

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

### Install babel-plugin-react-compiler using yarn

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/03-api-reference/05-config/01-next-config-js/reactCompiler.mdx

Install the required React Compiler Babel plugin as a development dependency using yarn.

```bash
yarn add -D babel-plugin-react-compiler
```

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

### Create and run Next.js app with Yarn

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/01-getting-started/01-installation.mdx

Initializes a new Next.js application named `my-app` and starts the development server using Yarn. The `--yes` flag skips prompts to quickly bootstrap with default configurations.

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

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

### Configure build and start scripts in package.json

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/01-getting-started/17-deploying.mdx

Defines the required build and start scripts in package.json for building and running a Next.js application on a Node.js server.

```json
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}
```

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

### Run Turbopack Bundle Analyzer with Bun

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/package-bundling.mdx

Starts the Next.js bundle analyzer using Bun and opens the interactive view in the browser.

```bash
bunx next analyze
```

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

### Enable HTTPS with self-signed certificate

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/03-api-reference/06-cli/next.mdx

Starts the development server with HTTPS enabled on localhost:3000 using a self-signed certificate generated via mkcert.

```bash
next dev --experimental-https
```

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

### Install eslint-config-prettier with npm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/03-api-reference/05-config/03-eslint.mdx

Install the eslint-config-prettier dependency using npm to make ESLint and Prettier work together.

```bash
npm i -D eslint-config-prettier
```

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

### Install eslint-config-prettier with pnpm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/03-api-reference/05-config/03-eslint.mdx

Install the eslint-config-prettier dependency using pnpm to make ESLint and Prettier work together.

```bash
pnpm add -D eslint-config-prettier
```

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

### Manually install latest Next.js and React with bun

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/upgrading/version-16.mdx

Install the latest Next.js and React versions manually with bun. If using TypeScript, also upgrade `@types/react` and `@types/react-dom` to their latest versions.

```bash
bun add next@latest react@latest react-dom@latest
```

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

### Install Jest and Testing Library dependencies with Bun

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/testing/jest.mdx

Install required dev dependencies for Jest, jsdom environment, and React Testing Library.

```bash
bun add -D jest jest-environment-jsdom @testing-library/react @testing-library/dom @testing-library/jest-dom ts-node @types/jest
```

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

### Import ImageResponse from next/server (Before transform)

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/upgrading/codemods.mdx

Example showing ImageResponse imported from next/server prior to running the codemod.

```js
import { ImageResponse } from 'next/server'
```

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

### Install Tailwind CSS v3 using npm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/tailwind-v3-css.mdx

Install Tailwind CSS v3 and peer dependencies as dev dependencies and run the init command to generate tailwind.config.js and postcss.config.js using npm.

```bash
npm install -D tailwindcss@^3 postcss autoprefixer
npx tailwindcss init -p
```

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

### Prompt an agent to adopt Cache Components and Partial Prefetching

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/instant-navigation.mdx

Use this prompt with an AI agent to guide the step-by-step migration process using dedicated skills.

```prompt
Adopt Cache Components and Partial Prefetching in this app so its navigations become instant. There is a Skill for each migration.

1. Before you change anything, explain to me in plain terms what Instant Navigation is and what adopting it will change.

2. Install the Skills you need, then verify your changes against a running dev server with next-dev-loop and agent-browser as you go:
   - next-cache-components-adoption: https://www.skills.sh/vercel/next.js/next-cache-components-adoption
   - next-partial-prefetching-adoption: https://www.skills.sh/vercel/next.js/next-partial-prefetching-adoption
   - next-dev-loop: https://www.skills.sh/vercel/next.js/next-dev-loop

3. Each Skill leaves decisions to me, like how much of the work lands in each pull request. Put those questions to me and wait for my answers instead of deciding on my behalf. Adopt Cache Components first, then Partial Prefetching, following the workflow each Skill lays out. Don't rush to a passing build.

4. When you finish a step, show me a table of the routes you touched and what changed on each, and talk me through what it means for the app. Keep it to the outcome, not the implementation details.
```

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

### Install @next/env package

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/environment-variables.mdx

Installs the @next/env utility package to load environment variables outside of the Next.js runtime.

```bash
pnpm add @next/env
```

```bash
npm install @next/env
```

```bash
yarn add @next/env
```

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

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

### Run Turbopack Bundle Analyzer with npm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/package-bundling.mdx

Starts the Next.js bundle analyzer and opens the interactive module graph visualization in the browser.

```bash
npx next analyze
```

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

### Install server-only package using pnpm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/01-getting-started/05-server-and-client-components.mdx

Installing server-only is optional in Next.js unless required by your linting rules to avoid extraneous dependency flags.

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

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

### Install Jest and Testing Library dependencies with pnpm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/testing/jest.mdx

Install required dev dependencies for Jest, jsdom environment, and React Testing Library.

```bash
pnpm add -D jest jest-environment-jsdom @testing-library/react @testing-library/dom @testing-library/jest-dom ts-node @types/jest
```

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

### Start agent upgrade with default or configured policy

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/upgrading/agent-upgrade.mdx

Omit the policy argument to use the value configured in experimental.agentUpgrade, or default to security. Note that --agent cannot be combined with --revision.

```bash
npx next@canary upgrade --agent
```

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

### Create Next.js app with Vitest using yarn

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/testing/vitest.mdx

Bootstrap a Next.js application pre-configured with Vitest using yarn and the with-vitest example template.

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

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

### Install eslint-config-prettier with yarn

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/03-api-reference/05-config/03-eslint.mdx

Install the eslint-config-prettier dependency using yarn to make ESLint and Prettier work together.

```bash
yarn add --dev eslint-config-prettier
```

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

### Create Next.js app with Playwright example using yarn

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/testing/playwright.mdx

Use create-next-app with the with-playwright example to create a Next.js project with Playwright configured. Run this command with yarn.

```bash
yarn create next-app --example with-playwright with-playwright-app
```

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

### Install Vitest testing dependencies with bun

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/testing/vitest.mdx

Installs Vitest, React Testing Library, jsdom, and optional TypeScript path resolution dependencies for bun projects.

```bash
# Using TypeScript
bun add -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom vite-tsconfig-paths
# Using JavaScript
bun add -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom
```

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

### Install ESLint and eslint-config-next with pnpm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/03-api-reference/05-config/03-eslint.mdx

Use this command to add ESLint and the Next.js ESLint config as development dependencies using pnpm.

```bash
pnpm add -D eslint eslint-config-next
```

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

### Create Cypress project with npm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/testing/cypress.mdx

Bootstraps a new Next.js project preconfigured with Cypress using npx.

```bash
npx create-next-app@latest --example with-cypress with-cypress-app
```

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

### Install Jest and Testing Library dependencies with npm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/testing/jest.mdx

Install required dev dependencies for Jest, jsdom environment, and React Testing Library.

```bash
npm install -D jest jest-environment-jsdom @testing-library/react @testing-library/dom @testing-library/jest-dom ts-node @types/jest
```

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

### Generate a Turbopack trace file during development

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/local-development.mdx

Start the development server with the --internal-trace flag to produce a trace-turbopack.bin file in the .next-profiles folder.

```bash
pnpm dev --internal-trace
```

```bash
npm run dev -- --internal-trace
```

```bash
yarn dev --internal-trace
```

```bash
bun dev --internal-trace
```

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

### Install Tailwind CSS using bun in App Router

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/01-getting-started/11-css.mdx

Installs Tailwind CSS and the `@tailwindcss/postcss` plugin as development dependencies using bun.

```bash
bun add -D tailwindcss @tailwindcss/postcss
```

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

### Install Tailwind CSS v3 using pnpm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/tailwind-v3-css.mdx

Install Tailwind CSS v3, PostCSS, and Autoprefixer as development dependencies and generate configuration files using pnpm.

```bash
pnpm add -D tailwindcss@^3 postcss autoprefixer
npx tailwindcss init -p
```

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

### Create a new Next.js app with create-next-app

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/03-api-reference/06-cli/create-next-app.mdx

Initializes a new Next.js application using the default template or a public GitHub example repository across supported package managers.

```bash
pnpm create next-app [project-name] [options]
```

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

```bash
yarn create next-app [project-name] [options]
```

```bash
bun create next-app [project-name] [options]
```

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

### Build dynamic route with loading fallback

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/building.mdx

Runs next build and outputs route details showing Partial Prerendering (◐) for the dynamic product route.

```bash
next build
```

```bash
Route (app)
┌ ○ /
├ ○ /_not-found
└ ◐ /products/[id]

○  (Static)             prerendered as static content
◐  (Partial Prerender)  prerendered as static HTML with dynamic server-streamed content
```

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

### Manually install latest Next.js and React with npm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/upgrading/version-16.mdx

Install the latest Next.js and React versions manually with npm. If using TypeScript, also upgrade `@types/react` and `@types/react-dom` to their latest versions.

```bash
npm install next@latest react@latest react-dom@latest
```

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

### Install Playwright using pnpm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/testing/playwright.mdx

Run this command to install Playwright with pnpm. It will take you through a series of prompts to set up and configure Playwright for your project, including adding a playwright.config.ts file.

```bash
pnpm create playwright
```

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

### Set port using PORT environment variable

Source: https://github.com/vercel/next.js/blob/canary/docs/02-pages/02-guides/upgrading/version-11.mdx

Runs next start on a custom port configured via the PORT environment variable.

```bash
PORT=4000 next start
```

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

### Install server-only package using npm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/01-getting-started/05-server-and-client-components.mdx

Installing server-only is optional in Next.js unless required by your linting rules to avoid extraneous dependency flags.

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

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

### Install Playwright using npm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/testing/playwright.mdx

Run this command to install Playwright with npm. It will take you through a series of prompts to set up and configure Playwright for your project, including adding a playwright.config.ts file.

```bash
npm init playwright
```

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

### Run Cypress with npm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/testing/cypress.mdx

Launches the Cypress test suite for the first time using npm, allowing configuration of E2E or Component Testing.

```bash
npm run cypress:open
```

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

### Install babel-plugin-react-compiler with bun

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/upgrading/version-16.mdx

Install the latest React Compiler Babel plugin as a development dependency using bun. Required before enabling reactCompiler in Next.js 16.

```bash
bun add -D babel-plugin-react-compiler
```

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

### Initialize Jest configuration with Yarn

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/testing/jest.mdx

Run the Jest interactive prompt to generate a starter configuration file.

```bash
yarn create jest@latest
```

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

### Start agent upgrade from workspace root

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/upgrading/agent-upgrade.mdx

Pass the specific app directory path when initiating the agent upgrade from the root of a workspace or monorepo.

```bash
npx next@canary upgrade apps/web --agent=latest
```

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

### Install server-only package using yarn

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/01-getting-started/05-server-and-client-components.mdx

Installing server-only is optional in Next.js unless required by your linting rules to avoid extraneous dependency flags.

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

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

### Run Turbopack Bundle Analyzer with pnpm

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/package-bundling.mdx

Starts the Next.js bundle analyzer using pnpm and opens the interactive view in the browser.

```bash
pnpm next analyze
```

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

### Start Next.js development server with Webpack

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/migrating/from-create-react-app.mdx

Runs the Next.js development server using Webpack instead of Turbopack for compatibility with Create React App configurations.

```bash
next dev --webpack
```

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

### Inspect bundled documentation structure

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/ai-agents.mdx

Displays the directory structure of the documentation bundled inside the installed Next.js package.

```txt
node_modules/next/dist/docs/
├── 01-app/
│   ├── 01-getting-started/
│   ├── 02-guides/
│   └── 03-api-reference/
├── 02-pages/
├── 03-architecture/
└── index.mdx
```

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

### Run agent-guided upgrade with next upgrade

Source: https://github.com/vercel/next.js/blob/canary/docs/01-app/02-guides/ai-agents.mdx

Checks for available Next.js upgrades, collects version-matched migration guides, and delegates the upgrade task to a coding agent.

```bash
npx next@canary upgrade --agent=latest

```