Next.js 15

https://nextjs.org/docs/15
Admin
Next.js 15 is a React framework for building full-stack web applications, featuring server-side...
Tokens:449,188
Snippets:5,728
Trust Score:10
Update:5 months ago
Show doc for...
Tokens:
Raw
### Interactive Prompts for Project Setup

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

These are the prompts you will encounter when running `create-next-app` without specific options. They guide you through project configuration.

```txt
What is your project named?  my-app
Would you like to use TypeScript?  No / Yes
Which linter would you like to use?  ESLint / Biome / None
Would you like to use Tailwind CSS?  No / Yes
Would you like your code inside a `src/` directory?  No / Yes
Would you like to use App Router? (recommended)  No / Yes
Would you like to use Turbopack? (recommended)  No / Yes
Would you like to customize the import alias (`@/*` by default)?  No / Yes
```

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

### Install Playwright (bun)

Source: https://nextjs.org/docs/15/pages/guides/testing/playwright

Install Playwright and its dependencies using bun. This command initiates an interactive setup process.

```bash
bun create playwright
```

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

### create-next-app CLI Examples

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

Examples demonstrating how to use the create-next-app CLI with different configurations.

```APIDOC
## DELETE /api/users/{id}

### Description
Deletes a specific user from the system.

### Method
DELETE

### Endpoint
/api/users/{id}

### Parameters
#### Path Parameters
- **id** (string) - Required - The unique identifier of the user to delete.

### Response
#### Success Response (204)
No content is returned upon successful deletion.

#### Response Example
(No content)
```

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

### Install Playwright (yarn)

Source: https://nextjs.org/docs/15/pages/guides/testing/playwright

Install Playwright and its dependencies using yarn. This command initiates an interactive setup process.

```bash
yarn create playwright
```

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

### Create Next.js App with Official Example

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

Use this command to create a new Next.js app based on an official example from the Next.js repository. View available examples in the Next.js GitHub repository.

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

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

### Create Next.js App with Official Example (bun)

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

Create a Next.js app using a specific official example from the Next.js repository with bun. Replace `[example-name]` with the desired example and `[your-project-name]` with your project's name.

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

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

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

Source: https://nextjs.org/docs/15/pages/guides/third-party-libraries

Install the `@next/third-parties` library and `next` using bun. This package is experimental and recommended to be installed with the latest or canary flags.

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

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

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

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

Install the @next/eslint-plugin-next package using bun.

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

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

### Install @next/bundle-analyzer (bun)

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

Install the bundle analyzer plugin for Webpack using bun.

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

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

### Install Playwright (pnpm)

Source: https://nextjs.org/docs/15/pages/guides/testing/playwright

Install Playwright and its dependencies using pnpm. This command initiates an interactive setup process.

```bash
pnpm create playwright
```

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

### Install Playwright (npm)

Source: https://nextjs.org/docs/15/pages/guides/testing/playwright

Install Playwright and its dependencies using npm. This command initiates an interactive setup process.

```bash
npm init playwright
```

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

### Install Prompt Component for iOS

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

Guides iOS users to install the app by instructing them to use the share button and 'Add to Home Screen' option. It only displays if the app is not already in standalone mode.

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

```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>
  );
}
```

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

### Install @next/bundle-analyzer

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

Install the bundle analyzer plugin using npm, yarn, or pnpm.

```bash
npm i @next/bundle-analyzer
# or
yarn add @next/bundle-analyzer
# or
pnpm add @next/bundle-analyzer
```

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

### Install Cypress with bun

Source: https://nextjs.org/docs/15/pages/guides/testing/cypress

Install Cypress as a development dependency using bun.

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

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

### Create Next.js App with Official Example (pnpm)

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

Create a Next.js app using a specific official example from the Next.js repository with pnpm. Replace `[example-name]` with the desired example and `[your-project-name]` with your project's name.

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

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

### Create Next.js App with Official Example (yarn)

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

Create a Next.js app using a specific official example from the Next.js repository with yarn. Replace `[example-name]` with the desired example and `[your-project-name]` with your project's name.

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

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

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

Source: https://nextjs.org/docs/15/pages/guides/third-party-libraries

Install the `@next/third-parties` library and `next` using pnpm. This package is experimental and recommended to be installed with the latest or canary flags.

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

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

### Install @next/bundle-analyzer (yarn)

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

Install the bundle analyzer plugin for Webpack using yarn.

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

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

### Install web-push CLI

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

Installs the web-push command-line interface globally, which is necessary for generating VAPID keys.

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

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

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

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

Install the @next/eslint-plugin-next package using npm.

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

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

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

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

Install the @next/eslint-plugin-next package using pnpm.

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

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

### Install OpenTelemetry SDK with bun

Source: https://nextjs.org/docs/15/pages/guides/open-telemetry

Installs the required OpenTelemetry SDK packages using bun.

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

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

### Install ESLint and Next.js Config (bun)

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

Install ESLint and the `eslint-config-next` package as development dependencies using bun.

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

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

### Install @next/bundle-analyzer (pnpm)

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

Install the bundle analyzer plugin for Webpack using pnpm.

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

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

### Install server-only package with bun

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

Use this command to install the `server-only` package using bun.

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

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

### Create Next.js App with Vitest Example

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

Use this command to quickly set up a new Next.js project with Vitest pre-configured.

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

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

### Basic GET Request Handler

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

A simple example of a GET request handler that returns a JSON response. This is a common starting point for API routes.

```typescript
export async function GET() {
  return Response.json({ message: 'Hello World' })
}
```

```javascript
export async function GET() {
  return Response.json({ message: 'Hello World' })
}
```

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

### Link Component Examples

Source: https://nextjs.org/docs/15/pages/api-reference/components/link

Examples demonstrating the usage of the `<Link>` component for various navigation scenarios.

```APIDOC
## Link Component Examples

### Scrolling to an `id`

If you'd like to scroll to a specific `id` on navigation, you can append your URL with a `#` hash link or just pass a hash link to the `href` prop. This is possible since `<Link>` renders to an `<a>` element.

```jsx
<Link href="/dashboard#settings">Settings</Link>

// Output
<a href="/dashboard#settings">Settings</a>
```

### Replace the URL instead of push

The default behavior of the `Link` component is to `push` a new URL into the `history` stack. You can use the `replace` prop to prevent adding a new entry, as in the following example:

### Disable scrolling to the top of the page

To disable the default scrolling behavior to the top of the page on navigation, set the `scroll` prop to `false`.

```jsx
<Link href="/about" scroll={false}>
  About Us
</Link>
```
```

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

### create-next-app CLI Usage

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

The create-next-app CLI allows you to create a new Next.js application using the default template or an example from a public GitHub repository. It is the easiest way to get started with Next.js.

```APIDOC
## POST /api/users

### Description
Creates a new user in the system.

### Method
POST

### Endpoint
/api/users

### Parameters
#### Query Parameters
- **limit** (integer) - Optional - The maximum number of users to return.

#### Request Body
- **name** (string) - Required - The name of the user.
- **email** (string) - Required - The email address of the user.

### Request Example
{
  "name": "John Doe",
  "email": "john.doe@example.com"
}

### Response
#### Success Response (201)
- **id** (string) - The unique identifier for the newly created user.
- **name** (string) - The name of the user.
- **email** (string) - The email address of the user.

#### Response Example
{
  "id": "user-123",
  "name": "John Doe",
  "email": "john.doe@example.com"
}
```

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

### Create Next.js App with Jest Example (bun)

Source: https://nextjs.org/docs/15/pages/guides/testing/jest

Use this command to quickly set up a Next.js project with Jest pre-configured using bun.

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

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

### Basic GET Request Handler

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

A simple example of a GET request handler that returns a JSON response.

```APIDOC
## GET /

### Description
Handles GET requests for a given route.

### Method
GET

### Endpoint
/

### Request Body
None

### Response
#### Success Response (200)
- **message** (string) - A greeting message.

### Response Example
```json
{
  "message": "Hello World"
}
```
```

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

### Display next start command options

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

Shows all available options for the `next start` command. Use this to understand how to configure the production server.

```bash
next start --help
```

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

### Install ESLint and Next.js Config (npm)

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

Install ESLint and the `eslint-config-next` package as development dependencies using npm.

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

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

### Create Next.js App with Jest Example

Source: https://nextjs.org/docs/15/app/guides/testing/jest

Use this command to quickly set up a new Next.js project with Jest pre-configured.

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

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

### Start Minimal Server

Source: https://nextjs.org/docs/15/app/api-reference/config/next-config-js/output

Use the generated `server.js` file in the `.next/standalone` directory to start your application locally. This server is optimized for standalone deployments.

```bash
node .next/standalone/server.js
```

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

### Create Next.js App with Jest Example (yarn)

Source: https://nextjs.org/docs/15/pages/guides/testing/jest

Use this command to quickly set up a Next.js project with Jest pre-configured using yarn.

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

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

### Create Next.js App with Jest Example (pnpm)

Source: https://nextjs.org/docs/15/pages/guides/testing/jest

Use this command to quickly set up a Next.js project with Jest pre-configured using pnpm.

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

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

### Route Handler Example

Source: https://nextjs.org/docs/15/app/api-reference/functions/revalidateTag

Example of a GET Route Handler that revalidates a cache tag provided via a query parameter.

```APIDOC
## GET /api/revalidate

### Description
Revalidates a cache tag specified in the query parameters.

### Method
GET

### Endpoint
`/api/revalidate`

### Parameters
#### Path Parameters
None

#### Query Parameters
- **tag** (string) - Required - The cache tag to revalidate.

#### Request Body
None

### Request Example
```http
GET /api/revalidate?tag=posts
```

### Response
#### Success Response (200)
- **revalidated** (boolean) - Indicates if the tag was successfully revalidated.
- **now** (number) - The current timestamp.

#### Response Example
```json
{
  "revalidated": true,
  "now": 1723123456789
}
```

#### Error Response (400)
- **revalidated** (boolean) - Always false.
- **now** (number) - The current timestamp.
- **message** (string) - Error message indicating missing tag.

#### Error Response Example
```json
{
  "revalidated": false,
  "now": 1723123456789,
  "message": "Missing tag to revalidate"
}
```
```

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

### Basic GET Route Handler

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

This example demonstrates how to create a basic GET request handler for the /api route using the route.ts file convention.

```typescript
export function GET(request: Request) {}
```

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

### Basic GET Route Handler (JavaScript)

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

This example demonstrates how to create a basic GET request handler for the /api route using the route.js file convention.

```javascript
export function GET(request) {}
```

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

### Adaptive Bitrate Streaming Example with Cloudinary

Source: https://nextjs.org/docs/15/app/guides/videos

Integrate Adaptive Bitrate Streaming (ABS) using the CldVideoPlayer component with Cloudinary. This example demonstrates a basic setup for dynamic video quality adjustment.

```jsx
import { CldVideoPlayer } from 'next-cloudinary';
import 'next-cloudinary/dist/cld-video-player.css';

function MyAbrVideo() {
  return (
    <CldVideoPlayer
      width="1920"
      height="1080"
      src="your-public-id"
      // Enable Adaptive Bitrate Streaming
      adaptiveStreaming={true}
      // other props
    />
  );
}
```

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

### Manual Installation with bun

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

Manually install Next.js, React, and ReactDOM using bun. Bun is a fast JavaScript runtime and package manager.

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

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

### Create Next.js App with Public GitHub Example (bun)

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

Create a Next.js app using a public GitHub example with bun. Provide the GitHub repository URL for `[your-project-name]` and your project's name.

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

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

### Single Line Note Example

Source: https://nextjs.org/docs/15/community/contribution-guide

Format important but non-critical information using the `>` blockquote syntax, starting with 'Good to know:'.

```mdx
> **Good to know**: This is a single line note.
```

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

### Run ESLint with Next.js

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

Runs ESLint for specified directories and provides guided setup for missing dependencies if ESLint is not configured.

```bash
npx next lint
```

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

### next lint command

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

Runs ESLint on your project files to enforce code quality and consistency, with guided setup for missing dependencies.

```APIDOC
## next lint

### Description
Executes ESLint across specified directories (`/src`, `/app`, `/pages`, `/components`, `/lib`) to check for code quality issues. It can also guide you through installing necessary ESLint dependencies if they are not present.

### Method
CLI Command

### Endpoint
npx next lint [options]

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```bash
npx next lint
```

### Response
Reports ESLint findings, including errors and warnings. If ESLint is not configured, it may prompt for setup.
```

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

### Create Next.js App with Playwright Example

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

Use this command to quickly set up a new Next.js project with Playwright pre-configured.

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

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

### Set application port with PORT environment variable

Source: https://nextjs.org/docs/15/pages/guides/upgrading/version-11

Example of starting a Next.js application using the PORT environment variable to specify the port.

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

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

### Example Directory Structure for Routing Section

Source: https://nextjs.org/docs/15/community/contribution-guide

Illustrates using two-digit prefixes for numerical sorting of MDX files in a documentation section to control learning order.

```txt
01-routing
├── 01-defining-routes.mdx
├── 02-pages.mdx
├── 03-layouts-and-templates.mdx
└── ...
```

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

### Create Next.js App with CLI

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

Use `create-next-app` to quickly set up a new Next.js project. It handles all necessary configurations automatically.

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

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

### Create a Basic Route Handler for Draft Mode

Source: https://nextjs.org/docs/15/app/guides/draft-mode

This is a basic GET request handler for a route. It serves as a starting point for enabling draft mode.

```typescript
export async function GET(request: Request) {
  return new Response('')
}
```

```javascript
export async function GET() {
  return new Response('')
}
```

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

### Next.js Dev Server Inspector Output

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

This is an example of the terminal output when the Next.js dev server starts with the Node.js inspector enabled, indicating the debugging port.

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

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

### Run Cypress Open Command

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

Execute the 'cypress:open' script to initialize Cypress and configure testing options.

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

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

### Invalidate Route Handler Data Cache

Source: https://nextjs.org/docs/15/app/api-reference/functions/revalidatePath

Invalidates Data Cache entries accessed within route handlers. This example shows invalidating a GET handler for '/api/data'.

```typescript
export async function GET() {
  const data = await fetch('https://api.vercel.app/blog', {
    cache: 'force-cache',
  })

  return Response.json(await data.json())
}
```

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

### Route Handler to Revalidate Tag

Source: https://nextjs.org/docs/15/app/api-reference/functions/revalidateTag

Example of a GET route handler that revalidates a tag provided as a query parameter. It returns a JSON response indicating the revalidation status.

```typescript
import type { NextRequest } from 'next/server'
import { revalidateTag } from 'next/cache'

export async function GET(request: NextRequest) {
  const tag = request.nextUrl.searchParams.get('tag')

  if (tag) {
    revalidateTag(tag)
    return Response.json({ revalidated: true, now: Date.now() })
  }

  return Response.json({
    revalidated: false,
    now: Date.now(),
    message: 'Missing tag to revalidate',
  })
}
```

```javascript
import { revalidateTag } from 'next/cache'

export async function GET(request) {
  const tag = request.nextUrl.searchParams.get('tag')

  if (tag) {
    revalidateTag(tag)
    return Response.json({ revalidated: true, now: Date.now() })
  }

  return Response.json({
    revalidated: false,
    now: Date.now(),
    message: 'Missing tag to revalidate',
  })
}
```

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

### Create Next.js App with Playwright Example (bun)

Source: https://nextjs.org/docs/15/pages/guides/testing/playwright

Use this command to quickly scaffold a new Next.js project with Playwright pre-configured using bun.

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

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

### Create Next.js App with API Flag

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

Use this command to automatically include an example route.ts file for creating an API endpoint when starting a new Next.js project.

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

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

### Read and Set Cookies with `cookies`

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

Use the `cookies` function from `next/headers` to get, set, or delete cookies within a route handler. This example demonstrates basic cookie manipulation.

```typescript
import { cookies } from 'next/headers'

export async function GET(request: NextRequest) {
  const cookieStore = await cookies()

  const a = cookieStore.get('a')
  const b = cookieStore.set('b', '1')
  const c = cookieStore.delete('c')
}
```

```javascript
import { cookies } from 'next/headers'

export async function GET(request) {
  const cookieStore = await cookies()

  const a = cookieStore.get('a')
  const b = cookieStore.set('b', '1')
  const c = cookieStore.delete('c')
}
```

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

### Configure Node.js Server Scripts in package.json

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

Ensure your package.json includes the "build" and "start" scripts for Node.js deployments. This setup is essential for building and running your Next.js application on a Node.js server.

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

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

### Install @next/eslint-plugin-next (Yarn)

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

Installs the Next.js ESLint plugin using Yarn. This package should be installed as a dev dependency.

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

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

### Create Next.js App with Public GitHub Example (pnpm)

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

Create a Next.js app using a public GitHub example with pnpm. Provide the GitHub repository URL for `[your-project-name]` and your project's name.

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

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

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

Source: https://nextjs.org/docs/15/pages/guides/third-party-libraries

Install the `@next/third-parties` library and `next` using yarn. This package is experimental and recommended to be installed with the latest or canary flags.

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

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

### Manual Installation with npm

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

Manually install Next.js, React, and ReactDOM using npm. This is an alternative to using pnpm or yarn for dependency management.

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

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

### Example Directory Structure for Functions API

Source: https://nextjs.org/docs/15/community/contribution-guide

Demonstrates alphabetical sorting of MDX files within a documentation directory for API reference.

```txt
04-functions
├── after.mdx
├── cacheLife.mdx
├── cacheTag.mdx
└── ...
```

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

### Install eslint-config-prettier

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

Installs the `eslint-config-prettier` dependency to resolve conflicts between ESLint and Prettier code formatting rules. This command is for installation via npm.

```bash
npm install --save-dev eslint-config-prettier
```

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

### Install Tailwind CSS v3 with bun

Source: https://nextjs.org/docs/15/app/guides/tailwind-v3-css

Install Tailwind CSS and its peer dependencies using bun. Run the init command to generate configuration files.

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

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

### Create Next.js App with Public GitHub Example

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

Use this command to create a new Next.js app from any public GitHub repository. Provide the full URL to the GitHub repository.

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

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

### Example next info command output

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

This output provides system and package details relevant for reporting Next.js bugs. It includes OS information, binary versions, and package versions.

```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 Cypress with yarn

Source: https://nextjs.org/docs/15/pages/guides/testing/cypress

Install Cypress as a development dependency using yarn.

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

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

### Install Cypress with npm

Source: https://nextjs.org/docs/15/pages/guides/testing/cypress

Install Cypress as a development dependency using npm.

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

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

### Manual Installation with pnpm

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

Manually install Next.js, React, and ReactDOM using pnpm. Ensure you have the latest versions for optimal performance and features.

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

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

### Install Cypress with pnpm

Source: https://nextjs.org/docs/15/pages/guides/testing/cypress

Install Cypress as a development dependency using pnpm.

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

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

### Example <head> output for preload

Source: https://nextjs.org/docs/15/app/api-reference/functions/generate-metadata

This shows the resulting HTML `<link>` tag generated by the `ReactDOM.preload` method for a resource.

```html
<link rel="preload" href="..." as="..." />
```

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

### Create Next.js App with Public GitHub Example (yarn)

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

Create a Next.js app using a public GitHub example with yarn. Provide the GitHub repository URL for `[your-project-name]` and your project's name.

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