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

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

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

```

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

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

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

### 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.

```

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

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

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

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

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

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

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

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

```

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

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

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

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

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

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

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

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

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

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

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

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

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

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