### Quickstart Next.js App with Vitest

Source: https://context7_llms

Command to create a new Next.js application pre-configured with Vitest using the official example. This is the fastest way to get started with Vitest.

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

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

### Install and Run Serwist Next.js Example

Source: https://github.com/serwist/serwist/tree/main/examples/next-basic

Commands to build and start the Serwist Next.js example. Assumes a monorepo setup with pnpm.

```bash
cd examples/next-basic
pnpm build
pnpm start
```

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

### Quickstart Cypress with Next.js Example

Source: https://context7_llms

Demonstrates how to quickly set up a Next.js project with Cypress integrated using `create-next-app`. This command scaffolds a new Next.js application with Cypress pre-configured for testing.

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

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

### Install Auth.js for bun

Source: https://authjs.dev/getting-started/installation

Installs the Auth.js beta package using bun. This command is for projects utilizing the bun runtime and package manager.

```bash
bun add next-auth@beta
```

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

### Install Auth.js for yarn

Source: https://authjs.dev/getting-started/installation

Installs the Auth.js beta package using yarn. This command is applicable for projects using the yarn package manager.

```bash
yarn add next-auth@beta
```

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

### Basic Adapter Structure Example

Source: https://context7_llms

A minimal example demonstrating the structure of a custom adapter module.

```APIDOC
## Basic Adapter Structure Example

### Description
A minimal example demonstrating the structure of a custom adapter module.

### Method
N/A (Example Implementation)

### Endpoint
N/A (Example Implementation)

### Parameters
N/A (Example Implementation)

### Request Example
```js filename="my-adapter.js"
/** @type {import('next').NextAdapter} */
const adapter = {
  name: 'my-custom-adapter',

  async modifyConfig(config, { phase }) {
    // Modify the Next.js config based on the build phase
    if (phase === 'phase-production-build') {
      return {
        ...config,
        // Add your modifications
      }
    }
    return config
  },

  async onBuildComplete({
    routes,
    outputs,
    projectDir,
    repoRoot,
    distDir,
    config,
    nextVersion,
  }) {
    // Process the build output
    console.log('Build completed with', outputs.pages.length, 'pages')

    // Access different output types
    for (const page of outputs.pages) {
      console.log('Page:', page.pathname, 'at', page.filePath)
    }

    for (const apiRoute of outputs.pagesApi) {
      console.log('API Route:', apiRoute.pathname, 'at', apiRoute.filePath)
    }

    for (const appPage of outputs.appPages) {
      console.log('App Page:', appPage.pathname, 'at', appPage.filePath)
    }

    for (const prerender of outputs.prerenders) {
      console.log('Prerendered:', prerender.pathname)
    }
  },
}

module.exports = adapter
```

### Response
N/A (Example Implementation)
```

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

### Install Auth.js for pnpm

Source: https://authjs.dev/getting-started/installation

Installs the Auth.js beta package using pnpm. This command is used for projects managed with the pnpm package manager.

```bash
pnpm add next-auth@beta
```

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

### Install Auth.js for SvelteKit

Source: https://authjs.dev/getting-started/installation

Installs the Auth.js integration package for SvelteKit. This command is used to add Auth.js capabilities to a SvelteKit project.

```bash
npm install @auth/sveltekit
```

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

### Cypress GitHub Action Basic Setup

Source: https://on.cypress.io/github-actions

This example demonstrates a basic CI setup using the official Cypress GitHub Action to run tests in the Electron browser. It includes checking out the code, installing dependencies, building the project, starting the application, and running Cypress tests. The action handles dependency installation, caching, and test execution.

```yaml
name: Cypress Tests

on:
  push:

jobs:
  cypress-run:
    runs-on: ubuntu-24.04
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      # Install npm dependencies, cache them correctly
      # and run all Cypress tests
      - name: Cypress run
        uses: cypress-io/github-action@v6
        with:
          build: npm run build
          start: npm start
```

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

### Install Playwright using npm, yarn, or pnpm

Source: https://context7_llms

These commands initiate the Playwright installation process, guiding the user through setup and configuration, including the creation of a `playwright.config.ts` file.

```bash
npm init playwright
```

```bash
yarn create playwright
```

```bash
pnpm create playwright
```

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

### Create Next App with Example

Source: https://context7_llms

Demonstrates how to create a new Next.js application using a specified official or public GitHub example. This command requires `npx` and specifies the example type and name/URL, followed by the project name.

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

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

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

### Install Auth.js for Next.js

Source: https://authjs.dev/getting-started/installation

Installs the Auth.js beta package for Next.js using npm. This is the initial step for integrating Auth.js into a Next.js application.

```bash
npm install next-auth@beta
```

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

### Clone and Install Vite Project Locally

Source: https://vitejs.dev/guide

This command sequence clones a Vite project from a GitHub repository, navigates into the project directory, installs dependencies, and starts the development server.

```bash
npx degit user/project#main my-project
cd my-project
npm install
npm run dev
```

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

### Create Next.js App with Jest Example

Source: https://context7_llms

Scaffolds a new Next.js application pre-configured with Jest for testing. This is a quick way to start a project with a robust testing setup already in place.

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

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

### Qwik Auth Setup

Source: https://authjs.dev/getting-started/installation

Initializes QwikAuth$ for Qwik applications. Requires a providers configuration. Exports onRequest, useSession, useSignIn, and useSignOut hooks.

```typescript
import { QwikAuth$ } from "@auth/qwik"

export const { onRequest, useSession, useSignIn, useSignOut } = QwikAuth$(
  () => ({
    providers: [...],
  })
)
```

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

### Initialize Playwright in Project

Source: https://context7_llms

This command initiates the Playwright setup process within an existing project, guiding the user through configuration and dependency installation for E2E testing.

```bash
npm init playwright
# or
yarn create playwright
# or
pnpm create playwright
```

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

### Set Up Collector Environment

Source: https://opentelemetry.io/docs/collector/getting-started

This section details the initial setup for the OpenTelemetry Collector quick start. It involves pulling the necessary Docker image for the Collector and installing a utility to generate telemetry data.

```bash
export GOBIN=${GOBIN:-$(go env GOPATH)/bin}

docker pull otel/opentelemetry-collector-contrib:0.138.0

go install github.com/open-telemetry/opentelemetry-collector-contrib/cmd/telemetrygen@latest
```

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

### Create Next.js App with Playwright Example

Source: https://context7_llms

This command uses `create-next-app` to quickly set up a new Next.js project with Playwright pre-configured, providing a head start for E2E testing.

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

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

### Client-Side Instrumentation Setup (TypeScript)

Source: https://context7_llms

Provides an example of client-side instrumentation in Next.js using TypeScript. It shows how to set up performance monitoring, initialize analytics, and add error tracking.

```typescript
// Set up performance monitoring
performance.mark('app-init')

// Initialize analytics
console.log('Analytics initialized')

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

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

### Install and Run Next.js Development Server

Source: https://github.com/vercel/next.js/tree/canary/examples/cms-contentful

This snippet shows the commands to install project dependencies and start the Next.js development server. It is essential for running the application locally and observing changes in real-time.

```bash
npm install
npm run dev
# or
yarn install
yarn dev
```

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

### Install Latest React/ReactDOM (npm)

Source: https://context7_llms

Installs the latest versions of React and ReactDOM using npm. This is often a prerequisite for upgrading Next.js or other frameworks.

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

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

### Install Jest using npm, Yarn, or pnpm

Source: https://jestjs.io/docs/getting-started

Installs Jest as a development dependency for your project using your preferred package manager. Jest is a popular JavaScript testing framework for Node.js.

```bash
npm install --save-dev jest
```

```bash
yarn add --dev jest
```

```bash
pnpm add --save-dev jest
```

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

### Install Edge Config SDK with pnpm, npm, or bun

Source: https://vercel.com/docs/edge-config/get-started

This snippet shows how to install the Edge Config SDK using different package managers. Ensure you have the latest version of Vercel CLI installed.

```bash
pnpm i @vercel/edge-config

```

```bash
npm i @vercel/edge-config

```

```bash
bun i @vercel/edge-config

```

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

### Install Auth.js for Express

Source: https://authjs.dev/getting-started/installation

Installs the Auth.js integration package for Express. This command is used to add Auth.js capabilities to an Express.js application.

```bash
npm install @auth/express
```

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

### Scaffold Vite Project with Yarn

Source: https://vitejs.dev/guide

This command scaffolds a new Vite project using Yarn. It starts the project setup and guides the user through the necessary configurations. A compatible Node.js version is required.

```bash
yarn create vite
```

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

### Basic Route Handler Setup (JavaScript)

Source: https://context7_llms

A minimal JavaScript route handler example for Next.js (`app/api/draft/route.js`). This snippet illustrates the basic structure of a GET request handler, which can be extended for various API functionalities.

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

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

### Install Jest and Testing Dependencies for Next.js

Source: https://context7_llms

Installs Jest and related testing libraries as development dependencies for Next.js projects. This setup is crucial for enabling unit and snapshot testing capabilities.

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

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

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

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

### Install @next/third-parties Package

Source: https://context7_llms

This command installs the `@next/third-parties` library along with the latest version of `next` to enable optimization of third-party integrations in a Next.js application.

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

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

### Install Latest Next.js Version

Source: https://context7_llms

Update your project to the latest Next.js version, which is a prerequisite for using the `app` directory. This command installs the newest stable release of Next.js.

```bash
npm install next@latest

```

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

### Manual Next.js Installation with Package Managers

Source: https://context7_llms

Provides commands for manually installing Next.js, React, and ReactDOM using various package managers (pnpm, npm, yarn, bun). This method allows for more control over initial dependencies.

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

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

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

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

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

### Basic Route Handler Setup (TypeScript)

Source: https://context7_llms

A minimal TypeScript route handler example for Next.js (`app/api/draft/route.ts`). This serves as a base for implementing functionalities like draft mode. It defines an asynchronous GET function that returns a basic response.

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

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

### Setup Jest Global Type Definitions with @types/jest

Source: https://jestjs.io/docs/getting-started

Installs the @types/jest package, which provides types for Jest globals without requiring explicit imports in test files. It's recommended to match the versions of Jest and @types/jest for compatibility.

```bash
npm install --save-dev @types/jest
yarn add --dev @types/jest
pnpm add --save-dev @types/jest
```

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

### Start Server on Windows with Cypress GitHub Action

Source: https://github.com/cypress-io/github-action

This example illustrates how to start a local server on Windows before running Cypress tests. It utilizes the `start-windows` parameter, which takes precedence over the `start` parameter on Windows systems, allowing for OS-specific server start commands.

```yaml
name: With server
on: push
jobs:
  cypress-run:
    runs-on: ubuntu-24.04
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Cypress run
        uses: cypress-io/github-action@v6
        with:
          # Linux and macOS
          start: npm start
          # Takes precedences on Windows
          start-windows: npm run start:windows:server
```

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

### Start Redis Stack Server with Docker Compose

Source: https://github.com/vercel/next.js/tree/canary/examples/cache-handler-redis

Command to start the Redis Stack server for the Next.js cache example using Docker Compose. This assumes Docker and Docker Compose are installed and configured.

```bash
docker compose up -d
```

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

### Install ESLint and Next.js Config

Source: https://context7_llms

Installs ESLint and the `eslint-config-next` package as development dependencies. This setup is crucial for enabling linting with Next.js specific rules. Supported package managers include pnpm, npm, yarn, and bun.

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

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

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

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

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

### Express Auth Setup

Source: https://authjs.dev/getting-started/installation

Integrates Auth.js with Express applications. Sets up the ExpressAuth handler for authentication routes. Includes an option to trust proxy headers if the app is served behind one.

```typescript
import { ExpressAuth } from "@auth/express"
import express from "express"

const app = express()

// If your app is served through a proxy
// trust the proxy to allow us to read the `X-Forwarded-*` headers
app.set("trust proxy", true)

app.use("/auth/*", ExpressAuth({
  providers: []
}))
```

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

### Run Cypress Open Command

Source: https://context7_llms

Executes the 'cypress:open' script defined in package.json to start the Cypress test runner. This command initiates the setup process for E2E and Component Testing.

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

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

### Configure Jest with next/jest (JavaScript)

Source: https://context7_llms

Sets up Jest configuration using `next/jest` for JavaScript projects. This approach leverages `next/jest` to streamline Jest setup for Next.js applications, handling transformations and environment configurations automatically. It requires `next/jest` to be installed.

```javascript
const nextJest = require('next/jest')

/** @type {import('jest').Config} */
const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: './',
})

// Add any custom config to be passed to Jest
const config = {
  coverageProvider: 'v8',
  testEnvironment: 'jsdom',
  // Add more setup options before each test is run
  // setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
}

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(config)
```

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

### Supported HTTP Methods

Source: https://context7_llms

Lists all supported HTTP methods for Route Handlers and provides examples for each.

```APIDOC
## Route Handler HTTP Methods

### Description
Route files support standard HTTP methods for creating custom request handlers. The following methods are supported: GET, POST, PUT, PATCH, DELETE, HEAD, and OPTIONS.

### Method
GET, HEAD, POST, PUT, DELETE, PATCH, OPTIONS

### Endpoint
/*

### Parameters
- **request** (Request) - Optional. The incoming request object.

### Request Example
```typescript
// Example for GET
export async function GET(request: Request) {}

// Example for POST
export async function POST(request: Request) {}
```

### Response
(Varies based on the HTTP method implemented)

#### Response Example
(Varies based on the HTTP method implemented)
```

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

### Install @next/bundle-analyzer

Source: https://context7_llms

Installs the @next/bundle-analyzer plugin for Next.js to help manage application bundle sizes. This is a prerequisite for generating bundle analysis reports.

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

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

### Next.js Latest Version Installation (bun)

Source: https://context7_llms

Installs the latest versions of Next.js, React, and React DOM using bun. It also updates the ESLint configuration for Next.js.

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

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

### GitHub Action: Handling Subfolders with Separate Dependencies

Source: https://github.com/cypress-io/github-action

Manage test execution in subfolders with distinct dependencies using the Cypress GitHub Action. This setup involves installing root dependencies, starting the application server, and then installing Cypress-specific dependencies within its designated subfolder.

```yaml
name: E2E

on: push

jobs:
  test:
    runs-on: ubuntu-24.04
    steps:
      - uses: actions/checkout@v4
      - name: Install root dependencies
        run: npm ci
      - name: Start server in the background
        run: npm start & # Cypress has its own package.json in folder "e2e"
      - name: Install Cypress and run tests
        uses: cypress-io/github-action@v6
        with:
          working-directory: e2e
```

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

### Launch Prisma Studio (Shell)

Source: https://github.com/muxinc/video-course-starter-kit

Command to start Prisma Studio, a GUI tool for inspecting and managing your database contents.

```shell
npx prisma studio
```

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

### Bootstrap Next.js App with Builder.io Example

Source: https://github.com/vercel/next.js/tree/canary/examples/cms-builder-io

Use npm, Yarn, or pnpm to bootstrap a new Next.js application with the Builder.io example. This command downloads the necessary files to get started.

```bash
npx create-next-app --example cms-builder-io cms-builder-io-app
```

```bash
yarn create next-app --example cms-builder-io cms-builder-io-app
```

```bash
pnpm create next-app --example cms-builder-io cms-builder-io-app
```

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

### Next.js Blog Starter

Source: https://github.com/vercel/next.js/tree/canary/examples/with-opentelemetry

This example provides a starter template for building a blog with Next.js. It likely includes pre-configured components and pages for displaying posts, handling routing, and basic styling. This is a good starting point for developers wanting to create a content-focused website.

```javascript
import Head from 'next/head';

export default function HomePage() {
  return (
    <div>
      <Head>
        <title>My Next.js Blog</title>
        <meta name="description" content="A starter blog powered by Next.js" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <h1>Welcome to My Blog</h1>
        {/* Blog posts will be listed here */}
      </main>
    </div>
  );
}

```

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

### Install Latest React/ReactDOM (yarn)

Source: https://context7_llms

Installs the latest versions of React and ReactDOM using yarn. This command is an alternative to npm for package management.

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

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

### Install Vitest Dependencies (JavaScript)

Source: https://context7_llms

Installs Vitest and related testing libraries as development dependencies for a JavaScript Next.js project. Includes necessary plugins for React.

```bash
npm install -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom
```

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

### Install Next.js SDK with npm

Source: https://docs.descope.com/getting-started/nextjs

This command installs the Descope Next.js SDK using npm. Ensure you have Node.js and npm installed on your system.

```bash
npm i --save @descope/nextjs-sdk
```

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

### Install MDX Dependencies for Next.js

Source: https://context7_llms

Installs the necessary packages to enable Next.js to process markdown and MDX files. These packages source data from local files.

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

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

### GET /api

Source: https://context7_llms

Handles GET requests sent to the /api endpoint. This is a basic example of a public route handler.

```APIDOC
## GET /api

### Description
Handles GET requests sent to the /api endpoint.

### Method
GET

### Endpoint
/api

### Parameters

#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (200)
An empty response.

#### Response Example
None
```

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

### Clone and Install Dependencies (Shell)

Source: https://github.com/muxinc/video-course-starter-kit

Commands to clone the starter kit repository and install its dependencies using Yarn.

```shell
git clone https://github.com/muxinc/video-course-starter-kit.git
cd video-course-starter-kit
yarn
```

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

### Manual Instrumentation Setup

Source: https://opentelemetry.io/docs/instrumentation/js/instrumentation

Instructions and code examples for setting up manual instrumentation using OpenTelemetry for tracing and metrics.

```APIDOC
## Manual Instrumentation Setup

### Dependencies
Install OpenTelemetry API packages:
```bash
npm install @opentelemetry/api @opentelemetry/resources @opentelemetry/semantic-conventions
```

### Initialize the SDK
Install the OpenTelemetry SDK for Node.js:
```bash
npm install @opentelemetry/sdk-node
```

Initialize the SDK before any other module in your application is loaded.

**TypeScript Example (`instrumentation.ts`)**
```typescript
import { NodeSDK } from '@opentelemetry/sdk-node';
import { ConsoleSpanExporter } from '@opentelemetry/sdk-trace-node';
import { PeriodicExportingMetricReader, ConsoleMetricExporter } from '@opentelemetry/sdk-metrics';
import { resourceFromAttributes } from '@opentelemetry/resources';
import { ATTR_SERVICE_NAME, ATTR_SERVICE_VERSION } from '@opentelemetry/semantic-conventions';

const sdk = new NodeSDK({
  resource: resourceFromAttributes({
    [ATTR_SERVICE_NAME]: 'yourServiceName',
    [ATTR_SERVICE_VERSION]: '1.0',
  }),
  traceExporter: new ConsoleSpanExporter(),
  metricReader: new PeriodicExportingMetricReader({
    exporter: new ConsoleMetricExporter(),
  }),
});

sdk.start();
```

**JavaScript Example (`instrumentation.mjs`)**
```javascript
import { NodeSDK } from '@opentelemetry/sdk-node';
import { ConsoleSpanExporter } from '@opentelemetry/sdk-trace-node';
import { PeriodicExportingMetricReader, ConsoleMetricExporter } from '@opentelemetry/sdk-metrics';
import { resourceFromAttributes } from '@opentelemetry/resources';
import { ATTR_SERVICE_NAME, ATTR_SERVICE_VERSION } from '@opentelemetry/semantic-conventions';

const sdk = new NodeSDK({
  resource: resourceFromAttributes({
    [ATTR_SERVICE_NAME]: 'dice-server',
    [ATTR_SERVICE_VERSION]: '0.1.0',
  }),
  traceExporter: new ConsoleSpanExporter(),
  metricReader: new PeriodicExportingMetricReader({
    exporter: new ConsoleMetricExporter(),
  }),
});

sdk.start();
```

For local development, telemetry can be exported to the console. Ensure the `service.name` and `service.version` attributes are set.

**Running with Instrumentation (TypeScript)**
Requires Node.js v20 or later.
```bash
npx tsx --import ./instrumentation.ts app.ts
```

**Running with Instrumentation (JavaScript)**
Requires Node.js v18 or later.
```bash
node --import ./instrumentation.mjs app.js
```

This setup exports telemetry to the console for debugging. For production, configure appropriate exporters to send data to telemetry backends.
```

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

### Add Auth.js to Qwik

Source: https://authjs.dev/getting-started/installation

Adds the Auth.js integration to a Qwik project using the Qwik CLI. This command simplifies the setup process for Qwik applications.

```bash
npm run qwik add auth
```

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

### Bootstrap Example with Create-Next-App

Source: https://github.com/vercel/next.js/tree/canary/examples/cms-buttercms

This section provides commands to bootstrap the Next.js example project using Create-Next-App with different package managers (npm, Yarn, pnpm). This is an alternative installation method for quicker setup.

```bash
npx create-next-app --example cms-buttercms cms-buttercms-app
```

```bash
yarn create next-app --example cms-buttercms cms-buttercms-app
```

```bash
pnpm create next-app --example cms-buttercms cms-buttercms-app
```

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

### Install PlanetScale CLI (macOS Shell)

Source: https://github.com/muxinc/video-course-starter-kit

Instructions for installing the Planetscale CLI on macOS using Homebrew, a prerequisite for managing Planetscale databases.

```shell
brew install planetscale/tap/pscale
```

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

### Set Up Sanity Environment Variables

Source: https://github.com/vercel/next.js/tree/canary/examples/cms-sanity

Instructions for configuring the local environment for Sanity CMS. This involves copying example environment variables and running a setup script for project and dataset configuration.

```bash
cp -i .env.local.example .env.local
```

```bash
npm run setup
```

```bash
yarn setup
```

```bash
pnpm run setup
```

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

### Basic API Route Example

Source: https://context7_llms

Demonstrates a simple API route that returns a JSON response.

```APIDOC
## GET /api/hello

### Description
This endpoint returns a simple JSON message.

### Method
GET

### Endpoint
/api/hello

### Parameters
#### Query Parameters
None

#### Request Body
None

### Request Example
None

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

#### Response Example
```json
{
  "message": "Hello from Next.js!"
}
```
```

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

### Create PlanetScale Database (Shell)

Source: https://github.com/muxinc/video-course-starter-kit

Command to create a new database named 'video-course-starter-kit' in your Planetscale account.

```shell
pscale database create video-course-starter-kit
```

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

### Example with Mocha Tests

Source: https://www.npmjs.com/package/start-server-and-test

An example demonstrating the use of 'start-server-and-test' to run Mocha tests after starting a server. It shows how to integrate a specific test command.

```json
{
  "scripts": {
    "ci": "start-server-and-test 'http-server -c-1 --silent' 8080 'mocha e2e-spec.js'"
  }
}
```

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

### Next.js Latest Version Installation (pnpm)

Source: https://context7_llms

Installs the latest versions of Next.js, React, and React DOM using pnpm. It also updates the ESLint configuration for Next.js.

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

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

### Next.js Latest Version Installation (yarn)

Source: https://context7_llms

Installs the latest versions of Next.js, React, and React DOM using yarn. It also updates the ESLint configuration for Next.js.

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

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

### Next.js Canary Version Installation

Source: https://context7_llms

Installs the latest canary version of Next.js. This is useful for testing upcoming features. Ensure you are on the latest stable version before upgrading to canary.

```bash
npm i next@canary
```

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

### Install Ory Elements and Next.js Packages

Source: https://www.ory.sh/docs/getting-started/integrate-auth/nextjs

Commands to install the necessary Ory Elements and Next.js packages using various package managers.

```bash
npm install @ory/elements-react @ory/nextjs
```

```bash
pnpm install @ory/elements-react @ory/nextjs
```

```bash
yarn install @ory/elements-react @ory/nextjs
```

```bash
bun install @ory/elements-react @ory/nextjs
```

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

### Run Playwright Tests in Next.js

Source: https://context7_llms

Instructions to build and start a Next.js application, then run Playwright tests in a separate terminal. Assumes Playwright is installed.

```bash
npm run build
npm run start
npx playwright test
```

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

### Install Latest Next.js Version

Source: https://context7_llms

Updates the Next.js project to the latest version, which is required for using the App Router features. This is a prerequisite for the migration.

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

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

### Install Cypress for Next.js Testing

Source: https://context7_llms

Installs Cypress as a development dependency for Next.js applications. This is a prerequisite for setting up either End-to-End (E2E) or Component Testing.

```bash
npm install -D cypress
# or
yarn add -D cypress
# or
pnpm install -D cypress
```

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

### Install OpenTelemetry Packages for Next.js

Source: https://context7_llms

These commands install the necessary OpenTelemetry packages, including `@vercel/otel`, `@opentelemetry/sdk-logs`, `@opentelemetry/api-logs`, and `@opentelemetry/instrumentation`, to enable observability in a Next.js application.

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

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

### Install Tailwind CSS v3 with bun

Source: https://context7_llms

Installs Tailwind CSS v3 and its peer dependencies (postcss, autoprefixer) using bun. It then runs the Tailwind CSS initialization command to generate configuration files.

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

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

### Install Playwright Dependencies for CI

Source: https://context7_llms

Command to install Playwright dependencies required for running tests in a Continuous Integration environment. This ensures all necessary components are available.

```bash
npx playwright install-deps
```

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

### Install Next.js with Makeswift Example

Source: https://github.com/vercel/next.js/tree/canary/examples/cms-makeswift

Installs the Next.js Makeswift example project using npm, Yarn, or pnpm. This command bootstraps a new Next.js application with the Makeswift integration pre-configured.

```bash
npx create-next-app --example cms-makeswift cms-makeswift-app

yarn create next-app --example cms-makeswift cms-makeswift-app

pnpm create next-app --example cms-makeswift cms-makeswift-app
```

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

### Install ngrok (macOS Shell)

Source: https://github.com/muxinc/video-course-starter-kit

Instructions for installing ngrok on macOS using Homebrew, used for exposing local servers to the internet to handle webhooks.

```shell
brew install ngrok/ngrok/ngrok
```

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

### Install Vite from Unreleased Commits (npm, yarn, pnpm, bun)

Source: https://vitejs.dev/guide

Instructions for installing a specific unreleased commit of Vite using a provided URL format. This is useful for testing the latest features before official release.

```bash
$ npm install -D https://pkg.pr.new/vite@SHA
```

```bash
$ yarn add -D https://pkg.pr.new/vite@SHA
```

```bash
$ pnpm add -D https://pkg.pr.new/vite@SHA
```

```bash
$ bun add -D https://pkg.pr.new/vite@SHA
```

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

### Create Next.js App with Linaria Example

Source: https://github.com/vercel/next.js/tree/canary/examples/with-linaria

Bootsraps a new Next.js project utilizing the linaria styling solution. This command-line interface (CLI) command automates the setup process for the example.

```bash
npx create-next-app --example with-linaria with-linaria-app
```

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

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

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

### Running the Next.js Application

Source: https://www.ory.sh/docs/getting-started/integrate-auth/nextjs

These commands demonstrate how to start the Next.js application using different package managers (npm, pnpm, yarn, bun). After starting, users can access registration, login, and other self-service flows via specific URLs.

```bash
npm run dev
```

```bash
pnpm dev
```

```bash
yarn dev
```

```bash
bun dev
```

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

### Install ESLint Recommended and All Rules Package (bun)

Source: https://eslint.org/docs/latest/use/configure/migration-guide

Command to install the official ESLint JavaScript rules package using bun. This enables the use of predefined configurations like 'eslint:recommended' and 'eslint:all' in flat ESLint setup.

```bash
bun add --dev @eslint/js
```

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

### Hello World Example (HTML/JavaScript)

Source: https://github.com/vercel/next.js/tree/canary/examples/with-linaria

A minimal 'Hello, World!' example for Next.js. This is typically the starting point for learning the framework and understanding basic component rendering.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Hello Next.js</title>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

```

```javascript
export default function Home() {
  return <h1>Hello, World!</h1>
}

```

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

### Install and Configure Next.js Bundle Analyzer

Source: https://context7_llms

Installs the `@next/bundle-analyzer` plugin and configures `next.config.js` to enable it when the ANALYZE environment variable is set to 'true'. This helps in analyzing JavaScript bundle sizes.

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

```javascript
/** @type {import('next').NextConfig} */
const nextConfig = {}

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

module.exports = withBundleAnalyzer(nextConfig)
```

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

### Install Vercel CLI

Source: https://vercel.com/docs/speed-insights/quickstart

Installs the Vercel Command Line Interface globally using npm, pnpm, or yarn. This tool is required for interacting with Vercel services and deployments.

```bash
pnpm i -g vercel
```

```bash
npm i -g vercel
```

```bash
yarn global add vercel
```

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

### Install Tailwind CSS with yarn

Source: https://context7_llms

Installs Tailwind CSS and its PostCSS plugin using the yarn package manager. This is a common method for managing project dependencies.

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

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

### Install/Update Vercel CLI

Source: https://vercel.com/docs/edge-config/get-started

This snippet demonstrates how to install or update the Vercel CLI to the latest version, which is a prerequisite for using Edge Config.

```bash
pnpm i -g vercel@latest

```

```bash
npm i -g vercel@latest

```

```bash
bun i -g vercel@latest

```

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

### Create Next.js Blog Starter App

Source: https://github.com/vercel/next.js/tree/canary/examples/blog-starter

Bootstrap the blog starter example using `create-next-app` with npm, Yarn, or pnpm. This command initializes a new Next.js project configured with the blog starter template.

```bash
npx create-next-app --example blog-starter blog-starter-app
```

```bash
yarn create next-app --example blog-starter blog-starter-app
```

```bash
pnpm create next-app --example blog-starter blog-starter-app
```

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

### Install and Run Next.js Blog Locally

Source: https://github.com/vercel/next.js/tree/canary/examples/cms-umbraco

Instructions for installing project dependencies and running the Next.js development server. Assumes Node.js and npm/yarn are installed. The blog will be accessible at http://localhost:3000.

```bash
npm install
npm run dev

# or
yarn install
yarn dev
```

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

### Next.js Start Command Options

Source: https://context7_llms

Details the command-line options available for `next start`, which is used to run the production-ready application. These options allow configuration of the server's port, hostname, and keep-alive timeout.

```bash
next start [directory] -p <port> -H <hostname> --keepAliveTimeout <keepAliveTimeout>
```

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

### Install and Run Next.js Commerce Locally

Source: https://vercel.com/templates/next.js/nextjs-commerce

Instructions for setting up the Next.js Commerce project locally. This involves installing the Vercel CLI, linking your local instance, pulling environment variables, and starting the development server.

```bash
npm i -g vercel
vercel link
vercel env pull
pnpm install
pnpm dev
```

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

### Install Tailwind CSS with bun

Source: https://context7_llms

Installs Tailwind CSS and its PostCSS plugin using the bun package manager. This is an alternative to npm or yarn for dependency management.

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

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

### Install Next.js ESLint Plugin with NPM

Source: https://context7_llms

Installs the `@next/eslint-plugin-next` dependency using NPM. This is a standard way to add Next.js-specific linting rules to your project, improving development practices.

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

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

### Install Tailwind CSS v3 with npm

Source: https://context7_llms

Installs Tailwind CSS v3 and its peer dependencies (postcss, autoprefixer) using npm. It then runs the Tailwind CSS initialization command to generate configuration files.

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

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

### Basic CSS Starter Example (CSS)

Source: https://github.com/vercel/next.js/tree/canary/examples/with-linaria

A straightforward example focusing on basic CSS setup for a Next.js blog starter. It demonstrates how to structure and apply styles for a simple blog layout.

```css
body {
  font-family: sans-serif;
  margin: 20px;
}

h1 {
  color: #333;
}

```

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

### Install Vitest Dependencies (TypeScript)

Source: https://context7_llms

Installs Vitest and related testing libraries as development dependencies for a TypeScript Next.js project. Includes necessary plugins for React and path resolution.

```bash
npm install -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom vite-tsconfig-paths
```

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

### Example Setup File Logic (Vitest)

Source: https://vitest.dev/config

Illustrates a practical example of a setup file in Vitest, where configuration is applied and a global flag is set to prevent re-computation. It demonstrates conditional logic and global state management within a test environment.

```typescript
import { config } from '@some-testing-lib'

if (!globalThis.defined) {
  config.plugins = [myCoolPlugin]
  computeHeavyThing()
  globalThis.defined = true
}

// hooks are reset before each suite
afterEach(() => {
  cleanup()
})

globalThis.resetBeforeEachTest = true
```

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

### Run Vite Development Server (npm, yarn, pnpm, bun, deno)

Source: https://vitejs.dev/guide

Commands to start the Vite development server using different package managers. The server serves the index.html file and enables hot module replacement.

```bash
$ npx vite
```

```bash
$ yarn vite
```

```bash
$ pnpm vite
```

```bash
$ bunx vite
```

```bash
$ deno run -A npm:vite
```

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

### Install Tailwind CSS with npm

Source: https://context7_llms

Installs Tailwind CSS and its PostCSS plugin using the npm package manager. This command is used to set up Tailwind CSS for styling.

```bash
npm install -D tailwindcss @tailwindcss/postcss
```

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

### Initialize Prismic Repository and Content Models

Source: https://github.com/vercel/next.js/tree/canary/examples/cms-prismic

Command to initialize a Prismic repository, log in or create a Prismic account, and set up premade Author and Post content models. It also connects the repository to your Next.js application. Optionally, starts the Slice Machine.

```bash
npx @slicemachine/init
```

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

### Next.js Production Build Output Example (Bash)

Source: https://context7_llms

Example output from the `next build` command, illustrating route types such as static (prerendered) and dynamic (server-rendered). This helps in understanding the build process and how different routes are handled.

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

○  (Static)   prerendered as static content
ƒ  (Dynamic)  server-rendered on demand
```

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

### Setup Jest Global Type Definitions with @jest/globals

Source: https://jestjs.io/docs/getting-started

Installs the @jest/globals package to provide type definitions for Jest's global APIs in TypeScript test files. This allows for type checking of Jest functions like describe, expect, and test. Imported APIs are typed.

```bash
npm install --save-dev @jest/globals
yarn add --dev @jest/globals
pnpm add --save-dev @jest/globals
```

```typescript
import {describe, expect, test} from '@jest/globals';
import {sum} from './sum';

describe('sum module', () => {
  test('adds 1 + 2 to equal 3', () => {
    expect(sum(1, 2)).toBe(3);
  });
});
```

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

### Start Local Server for Cypress Tests in GitHub Actions

Source: https://github.com/cypress-io/github-action

This configuration shows how to start a local server before running Cypress tests. The `start` parameter is used to specify the command to launch the server, which will run in the background. It's important to note that the `start` parameter should only be used to start a server, not to run Cypress itself.

```yaml
name: With server
on: push
jobs:
  cypress-run:
    runs-on: ubuntu-24.04
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Cypress run
        uses: cypress-io/github-action@v6
        with:
          start: npm start
```

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

### Bootstrap Next.js with Playwright Example (Yarn)

Source: https://github.com/vercel/next.js/tree/canary/examples/with-playwright

This command utilizes Yarn to create a new Next.js application pre-configured with the Playwright example. It handles dependency installation and project setup.

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

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

### Managing Next.js Development Server and Builds

Source: https://context7_llms

Demonstrates commands for running the Next.js development server with Turbopack (default) and optionally with Webpack. Turbopack offers significant performance improvements for local development.

```bash
npm install next@latest
npm run dev  # Turbopack is used by default

npm run dev --webpack
```

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

### Copy and Configure .env.local Example

Source: https://github.com/vercel/next.js/tree/canary/examples/cms-datocms

Guides users to copy the `.env.local.example` file to `.env.local` and set essential environment variables. These include the DatoCMS API token and a preview secret, crucial for connecting to DatoCMS and enabling preview mode.

```bash
cp .env.local.example .env.local
```

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

### Install Babel dependencies for Jest

Source: https://jestjs.io/docs/getting-started

Installs the necessary Babel packages (`babel-jest`, `@babel/core`, `@babel/preset-env`) as development dependencies. These packages enable Jest to transpile modern JavaScript code using Babel.

```bash
npm install --save-dev babel-jest @babel/core @babel/preset-env
```

```bash
yarn add --dev babel-jest @babel/core @babel/preset-env
```

```bash
pnpm add --save-dev babel-jest @babel/core @babel/preset-env
```

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

### Clone Repository and Install Dependencies (Bash)

Source: https://vercel.com/templates/next.js/platforms-starter-kit

This snippet demonstrates how to clone the project repository and install its dependencies using pnpm. Ensure you have Node.js 18.17.0 or later and pnpm installed.

```bash
git clone https://github.com/vercel/platforms.git
cd platforms
pnpm install
```

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

### Enable Caching for GET Route Handler (TypeScript)

Source: https://context7_llms

Shows how to opt into static caching for a GET request handler in TypeScript by exporting a dynamic configuration. This example also demonstrates fetching data and returning a JSON response.

```typescript
export const dynamic = 'force-static'

export async function GET() {
  const res = await fetch('https://data.mongodb-api.com/...', {
    headers: {
      'Content-Type': 'application/json',
      'API-Key': process.env.DATA_API_KEY,
    },
  })
  const data = await res.json()

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

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

### Install Next.js ESLint Plugin with Yarn

Source: https://context7_llms

Installs the `@next/eslint-plugin-next` dependency using Yarn. This action integrates Next.js-specific ESLint rules into your project, promoting better code standards.

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

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

### Run Next.js Development Server

Source: https://clerk.com/docs/quickstarts/nextjs

Starts the Next.js development server to run the application locally. This command is executed after setting up the project and Clerk integration.

```bash
npm run dev
```

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

### Install Tailwind CSS v3 with pnpm

Source: https://context7_llms

Installs Tailwind CSS v3 and its peer dependencies (postcss, autoprefixer) using pnpm. It then runs the Tailwind CSS initialization command to generate configuration files.

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

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

### Install OpenTelemetry Packages (Bash)

Source: https://context7_llms

Installs the core OpenTelemetry SDK packages required for Node.js instrumentation. This includes the SDK itself, resource modules, semantic conventions, and an OTLP HTTP trace exporter.

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

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

### Install Tailwind CSS v3 with yarn

Source: https://context7_llms

Installs Tailwind CSS v3 and its peer dependencies (postcss, autoprefixer) using yarn. It then runs the Tailwind CSS initialization command to generate configuration files.

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

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

### Create Next.js App with Clerk

Source: https://clerk.com/docs/quickstarts/nextjs

This command initializes a new Next.js application and installs the necessary Clerk packages. It assumes you have npm, yarn, pnpm, or bun installed.

```bash
npm create next-app@latest my-clerk-app -- --yes
```

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

### SvelteKit Auth Setup and Hooks

Source: https://authjs.dev/getting-started/installation

Sets up SvelteKitAuth in SvelteKit applications. Creates an auth.ts file for configuration and re-exports the handle function in hooks.server.ts. The handle function adds an auth() method to event.locals for accessing session data in server load functions.

```typescript
// ./src/auth.ts
import { SvelteKitAuth } from "@auth/sveltekit"

export const { handle } = SvelteKitAuth({
  providers: [],
})
```

```typescript
// ./src/hooks.server.ts
export { handle } from "./auth"
```

```typescript
// ./src/routes/+layout.server.ts
import type { LayoutServerLoad } from "./$types"

export const load: LayoutServerLoad = async (event) => {
  const session = await event.locals.auth()
  return {
    session,
  }
}
```

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

### Manage Database Schema (Shell)

Source: https://github.com/muxinc/video-course-starter-kit

Workflow for creating a new database branch, connecting to it, modifying the schema in Prisma, generating migrations, pushing changes, and creating a deploy request.

```shell
pscale branch create video-course-starter-kit my-new-branch
pscale connect video-course-starter-kit my-new-branch --port 3309
npx prisma generate
npx prisma db push
pscale deploy-request create video-course-starter-kit my-new-branch
pscale deploy-request deploy video-course-starter-kit 1
```

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

### Install Next.js ESLint Plugin with Bun

Source: https://context7_llms

Installs the `@next/eslint-plugin-next` dependency using Bun. This command adds the Next.js ESLint plugin to your development dependencies, enabling tailored linting rules for your project.

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