### Quickstart with Jest Example
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/01-building-your-application/08-testing/02-jest.mdx
Use the `with-jest` example from `create-next-app` to quickly set up Jest in your project.
```bash
npx create-next-app@latest --example with-jest with-jest-app
```
--------------------------------
### Show `next start` Help
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/02-api-reference/08-next-cli.mdx
Run this command to see all available options for starting the application in production mode.
```bash
next start -h
```
--------------------------------
### Install @next/third-parties
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/01-building-your-application/06-optimizing/12-third-party-libraries.mdx
Install the `@next/third-parties` library along with `next` to begin optimizing third-party integrations.
```bash
npm install @next/third-parties@latest next@latest
```
--------------------------------
### Install @next/bundle-analyzer
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/01-building-your-application/06-optimizing/06-bundle-analyzer.mdx
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 Next.js Packages
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/01-getting-started/01-installation.mdx
Install the latest versions of Next.js, React, and ReactDOM using npm. This is the initial step for manual installation.
```bash
npm install next@latest react@latest react-dom@latest
```
--------------------------------
### Install @vercel/otel
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/01-building-your-application/06-optimizing/10-open-telemetry.mdx
Install the `@vercel/otel` package using npm. This package simplifies OpenTelemetry setup.
```bash
npm install @vercel/otel
```
--------------------------------
### View `next info` output example
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/02-api-reference/08-next-cli.mdx
This example shows the typical output of `next info`, including OS details, binary versions, and relevant package versions.
```bash
Operating System:
Platform: linux
Arch: x64
Version: #22-Ubuntu SMP Fri Nov 5 13:21:36 UTC 2021
Available memory (MB): 31795
Available CPU cores: 16
Binaries:
Node: 16.13.0
npm: 8.1.0
Yarn: 1.22.17
pnpm: 6.24.2
Relevant Packages:
next: 14.1.1-canary.61 // Latest available version is detected (14.1.1-canary.61).
react: 18.2.0
react-dom: 18.2.0
Next.js Config:
output: N/A
```
--------------------------------
### Create Next.js App Interactively (bunx)
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/02-api-reference/06-create-next-app.mdx
This command uses bunx to start an interactive setup for a new Next.js project.
```bash
bunx create-next-app
```
--------------------------------
### Start Next.js Dev Server
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/03-pages/01-building-your-application/06-configuring/13-debugging.mdx
Run this command to start the Next.js development server. This is the initial step for client-side debugging.
```bash
next dev
npm run dev
yarn dev
```
--------------------------------
### Basic Link Component Example
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/05-community/01-contribution-guide.mdx
Demonstrates how to use the Link component with its import statement. Ensure all examples are runnable.
```tsx
import Link from 'next/link'
export default function Page() {
return About
}
```
--------------------------------
### Create Next App Prompts
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/01-getting-started/01-installation.mdx
These are the interactive prompts shown during `create-next-app` installation. They guide the user through configuring project name, TypeScript, ESLint, Tailwind CSS, src directory, App Router, and import aliases.
```txt
What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*
```
--------------------------------
### Install PostCSS and Autoprefixer
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/01-building-your-application/11-upgrading/05-from-create-react-app.mdx
Install PostCSS and Autoprefixer as development dependencies for Tailwind CSS integration in Next.js.
```bash
npm install postcss autoprefixer
```
--------------------------------
### Install OpenTelemetry API
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/01-building-your-application/06-optimizing/10-open-telemetry.mdx
Install the OpenTelemetry API package to enable custom tracing.
```bash
npm install @opentelemetry/api
```
--------------------------------
### Install Next.js Canary
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/02-api-reference/05-next-config-js/partial-prerendering.mdx
Install the canary version of Next.js to use experimental features like Partial Prerendering.
```bash
npm install next@canary
```
--------------------------------
### Client-side Navigation Example (JavaScript)
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/01-building-your-application/10-deploying/02-static-exports.mdx
Demonstrates client-side navigation between routes using `next/link` within a Client Component. This example uses JavaScript.
```jsx
import Link from 'next/link'
export default function Page() {
return (
<>
Index Page
Other Page
)
}
```
--------------------------------
### Install OpenTelemetry Packages
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/01-building-your-application/06-optimizing/10-open-telemetry.mdx
Install the required OpenTelemetry packages using npm. This is the first step for manual configuration.
```bash
npm install @opentelemetry/sdk-node @opentelemetry/resources @opentelemetry/semantic-conventions @opentelemetry/sdk-trace-node @opentelemetry/exporter-trace-otlp-http
```
--------------------------------
### Example MDX Page Content
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/01-building-your-application/07-configuring/05-mdx.mdx
An example of an MDX file demonstrating markdown syntax and importing/using React components.
```mdx
import { MyComponent } from 'my-components'
# Welcome to my MDX page!
This is some **bold** and _italics_ text.
This is a list in markdown:
- One
- Two
- Three
Checkout my React component:
```
--------------------------------
### Build and Start Production Server
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/03-pages/01-building-your-application/03-data-fetching/04-incremental-static-regeneration.mdx
To test on-demand ISR during development, you must create a production build and start the production server. This allows `getStaticProps` to behave as it would in a deployed environment.
```bash
$ next build
$ next start
```
--------------------------------
### Basic Middleware Example (JavaScript)
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/01-building-your-application/01-routing/13-middleware.mdx
This JavaScript example shows a basic middleware function that redirects all requests to `/about/:path*` to `/home`. It uses `NextResponse.redirect` for redirection and specifies the paths to match with `config.matcher`.
```javascript
import { NextResponse } from 'next/server'
// This function can be marked `async` if using `await` inside
export function middleware(request) {
return NextResponse.redirect(new URL('/home', request.url))
}
// See "Matching Paths" below to learn more
export const config = {
matcher: '/about/:path*',
}
```
--------------------------------
### Install Next.js 12 with Bun
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/03-pages/01-building-your-application/10-upgrading/07-version-12.mdx
Use this command to install Next.js version 12 and its associated React and ESLint dependencies using Bun.
```bash
bun add next@12 react@17 react-dom@17 eslint-config-next@12
```
--------------------------------
### Start `next start` with Environment Variable
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/02-api-reference/08-next-cli.mdx
Alternatively, you can set the `PORT` environment variable to change the default port. This method is useful for configuring the port before the server boots.
```bash
PORT=4000 next start
```
--------------------------------
### Install Next.js Dependency
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/01-building-your-application/11-upgrading/05-from-create-react-app.mdx
Install the latest version of Next.js using npm. This is the first step in migrating your application.
```bash
npm install next@latest
```
--------------------------------
### Install Tailwind CSS Packages
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/01-building-your-application/05-styling/02-tailwind-css.mdx
Install the necessary Tailwind CSS packages and generate configuration files using npm.
```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```
--------------------------------
### Full getStaticPaths and getStaticProps Example
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/03-pages/02-api-reference/02-functions/get-static-paths.mdx
Shows a complete example of `getStaticPaths` fetching data from an external API to define pre-rendered paths, and `getStaticProps` to fetch individual post data for each path. Sets `fallback: false` to ensure only defined paths are accessible.
```jsx
function Post({ post }) {
// Render post...
}
// This function gets called at build time
export async function getStaticPaths() {
// Call an external API endpoint to get posts
const res = await fetch('https://.../posts')
const posts = await res.json()
// Get the paths we want to pre-render based on posts
const paths = posts.map((post) => ({
params: { id: post.id },
}))
// We'll pre-render only these paths at build time.
// { fallback: false } means other routes should 404.
return { paths, fallback: false }
}
// This also gets called at build time
export async function getStaticProps({ params }) {
// params contains the post `id`.
// If the route is like /posts/1, then params.id is 1
const res = await fetch(`https://.../posts/${params.id}`)
const post = await res.json()
// Pass post data to the page via props
return { props: { post } }
}
export default Post
```
--------------------------------
### Preview URL Example
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/03-pages/01-building-your-application/06-configuring/14-preview-mode.mdx
An example of a preview URL format used to access a specific page in preview mode. It includes a secret token for security and a slug to identify the content.
```bash
https:///api/preview?secret=&slug=
```
--------------------------------
### Install Next.js 12 with npm
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/03-pages/01-building-your-application/10-upgrading/07-version-12.mdx
Use this command to install Next.js version 12 and its associated React and ESLint dependencies using npm.
```bash
npm i next@12 react@17 react-dom@17 eslint-config-next@12
```
--------------------------------
### Start `next start` on a Specific Port
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/02-api-reference/08-next-cli.mdx
Specify a custom port for your production application using the `-p` flag. The default port is 3000.
```bash
next start -p 4000
```
--------------------------------
### Basic Middleware Example (TypeScript)
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/01-building-your-application/01-routing/13-middleware.mdx
This TypeScript example demonstrates a basic middleware function that redirects all requests to `/about/:path*` to `/home`. It utilizes `NextResponse.redirect` for redirection and defines the paths to match using `config.matcher`.
```typescript
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
// This function can be marked `async` if using `await` inside
export function middleware(request: NextRequest) {
return NextResponse.redirect(new URL('/home', request.url))
}
// See "Matching Paths" below to learn more
export const config = {
matcher: '/about/:path*',
}
```
--------------------------------
### Install Playwright Manually
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/01-building-your-application/08-testing/03-playwright.mdx
Install Playwright using npm, yarn, or pnpm. This command initiates an interactive setup process.
```bash
npm init playwright
# or
yarn create playwright
# or
pnpm create playwright
```
--------------------------------
### App Router: Route Handler GET method (JavaScript)
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/01-building-your-application/11-upgrading/02-app-router-migration.mdx
Example of a Route Handler in the App Router using JavaScript to handle GET requests.
```js
export async function GET(request) {}
```
--------------------------------
### Create Next.js App with Vitest Example
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/01-building-your-application/08-testing/01-vitest.mdx
Use this command to quickly set up a new Next.js project pre-configured with Vitest.
```bash
npx create-next-app@latest --example with-vitest with-vitest-app
```
--------------------------------
### App Router: Route Handler GET method (TypeScript)
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/01-building-your-application/11-upgrading/02-app-router-migration.mdx
Example of a Route Handler in the App Router using TypeScript to handle GET requests.
```ts
export async function GET(request: Request) {}
```
--------------------------------
### Create Next.js App with Cypress Example
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/01-building-your-application/08-testing/04-cypress.mdx
Use this command to quickly set up a new Next.js project with Cypress pre-configured.
```bash
npx create-next-app@latest --example with-cypress with-cypress-app
```
--------------------------------
### Display `next info` help
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/02-api-reference/08-next-cli.mdx
Run this command to see all available options for `next info` and understand its usage.
```bash
next info -h
```
--------------------------------
### Define a GET Route Handler in TypeScript
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/01-building-your-application/01-routing/12-route-handlers.mdx
This example shows how to define a GET request handler for a route using TypeScript. The `dynamic` export controls the data fetching behavior.
```typescript
export const dynamic = 'force-dynamic' // defaults to auto
export async function GET(request: Request) {}
```
--------------------------------
### View `next info` help output
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/02-api-reference/08-next-cli.mdx
This is an example of the output you can expect when running `next info -h`, detailing usage and options.
```bash
Usage: next info [options]
Prints relevant details about the current system which can be used to report Next.js bugs.
Options:
--verbose Collections additional information for debugging.
-h, --help Displays this message.
```
--------------------------------
### Define a GET Route Handler in JavaScript
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/01-building-your-application/01-routing/12-route-handlers.mdx
This example demonstrates defining a GET request handler using plain JavaScript. Similar to TypeScript, the `dynamic` export influences data fetching.
```javascript
export const dynamic = 'force-dynamic' // defaults to auto
export async function GET(request) {}
```
--------------------------------
### GET Route Handler Opting Out of Caching (JavaScript)
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/01-building-your-application/01-routing/12-route-handlers.mdx
This JavaScript example shows how to opt out of caching for a GET request handler by using the Request object. It fetches product data based on a URL search parameter.
```javascript
export async function GET(request) {
const { searchParams } = new URL(request.url)
const id = searchParams.get('id')
const res = await fetch(`https://data.mongodb-api.com/product/${id}`, {
headers: {
'Content-Type': 'application/json',
'API-Key': process.env.DATA_API_KEY,
},
})
const product = await res.json()
return Response.json({ product })
}
```
--------------------------------
### Create Next.js App with Playwright Example
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/01-building-your-application/08-testing/03-playwright.mdx
Use this command to quickly set up a Next.js project with Playwright pre-configured.
```bash
npx create-next-app@latest --example with-playwright with-playwright-app
```
--------------------------------
### GET Route Handler Opting Out of Caching (TypeScript)
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/01-building-your-application/01-routing/12-route-handlers.mdx
This TypeScript example demonstrates how to opt out of caching for a GET request handler by using the Request object. It fetches product data based on a URL search parameter.
```typescript
export async function GET(request: Request) {
const { searchParams } = new URL(request.url)
const id = searchParams.get('id')
const res = await fetch(`https://data.mongodb-api.com/product/${id}`, {
headers: {
'Content-Type': 'application/json',
'API-Key': process.env.DATA_API_KEY!,
},
})
const product = await res.json()
return Response.json({ product })
}
```
--------------------------------
### Display `next dev` help information
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/02-api-reference/08-next-cli.mdx
Run this command to see all available options for `next dev`.
```bash
next dev -h
```
--------------------------------
### GET Route Handler with Caching (TypeScript)
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/01-building-your-application/01-routing/12-route-handlers.mdx
This example demonstrates a GET request handler that is cached by default. It fetches data from an external API and returns it as a JSON response. Ensure you are using TypeScript 5.2 or higher for Response.json().
```typescript
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 })
}
```
--------------------------------
### Example Directory Structure (Alphabetical Sorting)
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/05-community/01-contribution-guide.mdx
Demonstrates how directories and files are structured for alphabetical sorting in the documentation.
```txt
03-functions
├── cookies.mdx
├── draft-mode.mdx
├── fetch.mdx
└── ...
```
--------------------------------
### Run ESLint in Terminal
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/01-building-your-application/07-configuring/02-eslint.mdx
Execute the ESLint check in your terminal using the `yarn lint` command. If ESLint is not configured, this command will guide you through the setup process.
```bash
yarn lint
```
--------------------------------
### Start `next dev` with custom HTTPS certificates
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/02-api-reference/08-next-cli.mdx
Provide paths to your custom key and certificate files using `--experimental-https-key` and `--experimental-https-cert` flags. You can also specify a custom CA certificate with `--experimental-https-ca`.
```bash
next dev --experimental-https --experimental-https-key ./certificates/localhost-key.pem --experimental-https-cert ./certificates/localhost.pem
```
--------------------------------
### Load Environment Variables for Testing with loadEnvConfig
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/01-building-your-application/07-configuring/03-environment-variables.mdx
Use this function in your Jest global setup file or a similar testing configuration to load environment variables as Next.js does. Ensure `@next/env` is installed.
```javascript
import { loadEnvConfig } from '@next/env'
export default async () => {
const projectDir = process.cwd()
loadEnvConfig(projectDir)
}
```
--------------------------------
### GET Handler for Custom Streaming with Web APIs
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/01-building-your-application/01-routing/12-route-handlers.mdx
Create a custom streaming response using underlying Web APIs. This example demonstrates converting an async iterator to a ReadableStream and returning it directly.
```typescript
// https://developer.mozilla.org/docs/Web/API/ReadableStream#convert_async_iterator_to_stream
function iteratorToStream(iterator: any) {
return new ReadableStream({
async pull(controller) {
const { value, done } = await iterator.next()
if (done) {
controller.close()
} else {
controller.enqueue(value)
}
},
})
}
function sleep(time: number) {
return new Promise((resolve) => {
setTimeout(resolve, time)
})
}
const encoder = new TextEncoder()
async function* makeIterator() {
yield encoder.encode('
One
')
await sleep(200)
yield encoder.encode('
Two
')
await sleep(200)
yield encoder.encode('
Three
')
}
export async function GET() {
const iterator = makeIterator()
const stream = iteratorToStream(iterator)
return new Response(stream)
}
```
```javascript
// https://developer.mozilla.org/docs/Web/API/ReadableStream#convert_async_iterator_to_stream
function iteratorToStream(iterator) {
return new ReadableStream({
async pull(controller) {
const { value, done } = await iterator.next()
if (done) {
controller.close()
} else {
controller.enqueue(value)
}
},
})
}
function sleep(time) {
return new Promise((resolve) => {
setTimeout(resolve, time)
})
}
const encoder = new TextEncoder()
async function* makeIterator() {
yield encoder.encode('
One
')
await sleep(200)
yield encoder.encode('
Two
')
await sleep(200)
yield encoder.encode('
Three
')
}
export async function GET() {
const iterator = makeIterator()
const stream = iteratorToStream(iterator)
return new Response(stream)
}
```
--------------------------------
### Get system and package details with `next info`
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/02-api-reference/08-next-cli.mdx
Execute this command to collect operating system, binary, and package version information for bug reporting.
```bash
next info
```
--------------------------------
### Configure package.json Scripts for Custom Server
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/03-pages/01-building-your-application/06-configuring/10-custom-server.mdx
Update your `package.json` to include scripts for running the custom server in development and production. This allows you to easily start your Next.js application using your custom server setup.
```json
{
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "NODE_ENV=production node server.js"
}
}
```
--------------------------------
### Run Cypress for the First Time
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/01-building-your-application/08-testing/04-cypress.mdx
Execute this command to open the Cypress testing suite for the first time. This will prompt you to configure E2E and/or Component Testing and generate necessary configuration files.
```bash
npm run cypress:open
```
--------------------------------
### Example Directory Structure (Numeric Sorting)
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/05-community/01-contribution-guide.mdx
Illustrates using two-digit prefixes for custom sorting order in documentation directories and files.
```txt
02-routing
├── 01-defining-routes.mdx
├── 02-pages-and-layouts.mdx
├── 03-linking-and-navigating.mdx
└── ...
```
--------------------------------
### Custom Cache Handler Implementation
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/01-building-your-application/10-deploying/index.mdx
An example implementation of a custom cache handler. This handler uses an in-memory Map to store cache data and provides methods for getting, setting, and revalidating cache entries. It can be adapted to use durable storage like Redis or AWS S3.
```javascript
const cache = new Map()
module.exports = class CacheHandler {
constructor(options) {
this.options = options
}
async get(key) {
// This could be stored anywhere, like durable storage
return cache.get(key)
}
async set(key, data, ctx) {
// This could be stored anywhere, like durable storage
cache.set(key, {
value: data,
lastModified: Date.now(),
tags: ctx.tags,
})
}
async revalidateTag(tag) {
// Iterate over all entries in the cache
for (let [key, value] of cache) {
// If the value's tags include the specified tag, delete this entry
if (value.tags.includes(tag)) {
cache.delete(key)
}
}
}
}
```
--------------------------------
### Redirects with Host Matching
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/02-api-reference/05-next-config-js/redirects.mdx
Apply redirects based on the host. This example redirects requests to `example.com`.
```javascript
module.exports = {
async redirects() {
return [
// if the host is `example.com`,
// this redirect will be applied
{
source: '/:path((?!another-page$).*)',
has: [
{
type: 'host',
value: 'example.com',
},
],
permanent: false,
destination: '/another-page',
},
]
},
}
```
--------------------------------
### `get()` Method
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/02-api-reference/05-next-config-js/incrementalCacheHandlerPath.mdx
The `get` method is used to retrieve a cached value.
```APIDOC
## `get()`
### Description
Retrieves a cached value using its key.
### Method Signature
`get(key: string): Promise`
### Parameters
#### `key`
- **Type**: `string`
- **Description**: The key to the cached value.
### Returns
- **Type**: `Promise`
- **Description**: The cached value or `null` if not found.
```
--------------------------------
### Install eslint-config-prettier
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/01-building-your-application/07-configuring/02-eslint.mdx
Install the `eslint-config-prettier` dependency to help ESLint and Prettier work together.
```bash
npm install --save-dev eslint-config-prettier
yarn add --dev eslint-config-prettier
pnpm add --save-dev eslint-config-prettier
bun add --dev eslint-config-prettier
```
--------------------------------
### Start `next dev` with Turbopack enabled
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/02-api-reference/08-next-cli.mdx
Enable Turbopack for faster local development iterations by adding the `--turbo` flag.
```bash
next dev --turbo
```
--------------------------------
### Navigate to Project Directory
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/README.md
Change your current directory to the cloned project folder.
```bash
cd next.js-docs
```
--------------------------------
### Next.js Build Help
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/02-api-reference/08-next-cli.mdx
View available options for the `next build` command by running it with the -h flag.
```bash
next build -h
```
--------------------------------
### Install Next.js 11 with npm
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/03-pages/01-building-your-application/10-upgrading/08-version-11.mdx
Run this command to upgrade Next.js, React, and ReactDOM to version 11 using npm.
```bash
npm i next@11 react@17 react-dom@17
```
--------------------------------
### Preconnect Resource Hint Example
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/02-api-reference/04-functions/generate-metadata.mdx
This HTML output represents a preconnect resource hint, enabling the browser to establish a connection to an origin preemptively.
```html
```
--------------------------------
### Install MDX Packages
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/01-building-your-application/07-configuring/05-mdx.mdx
Install the required packages for MDX rendering in your Next.js project using npm.
```bash
npm install @next/mdx @mdx-js/loader @mdx-js/react @types/mdx
```
--------------------------------
### Install Cypress Dev Dependency
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/01-building-your-application/08-testing/04-cypress.mdx
Install Cypress as a development dependency using npm, yarn, or pnpm.
```bash
npm install -D cypress
```
```bash
yarn add -D cypress
```
```bash
pnpm install -D cypress
```
--------------------------------
### Install Next.js 11 with bun
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/03-pages/01-building-your-application/10-upgrading/08-version-11.mdx
Run this command to upgrade Next.js, React, and ReactDOM to version 11 using bun.
```bash
bun add next@11 react@17 react-dom@17
```
--------------------------------
### Install Sass
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/01-building-your-application/05-styling/04-sass.mdx
Install the Sass package as a development dependency to enable Sass compilation in your Next.js project.
```bash
npm install --save-dev sass
```
--------------------------------
### Preload Resource Hint Example
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/02-api-reference/04-functions/generate-metadata.mdx
This is the resulting HTML for a preload resource hint. It instructs the browser to load a resource early.
```html
```
--------------------------------
### Example Sitemap XML Output
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/02-api-reference/02-file-conventions/01-metadata/sitemap.mdx
This is an example of the XML output for a sitemap that includes language-specific alternate links.
```xml
https://acme.com2023-04-06T15:02:24.021Zhttps://acme.com/about2023-04-06T15:02:24.021Zhttps://acme.com/blog2023-04-06T15:02:24.021Z
```
--------------------------------
### Display Next.js CLI Help
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/02-api-reference/08-next-cli.mdx
Run this command in your project directory to see a list of all available CLI commands and their descriptions.
```bash
next -h
```
--------------------------------
### Advanced Module Aliases Configuration
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/01-building-your-application/07-configuring/04-absolute-imports-and-module-aliases.mdx
Example of configuring `baseUrl` to 'src/' and mapping multiple aliases like `@/styles/*` and `@/components/*`.
```json
// tsconfig.json or jsconfig.json
{
"compilerOptions": {
"baseUrl": "src/",
"paths": {
"@/styles/*": ["styles/*"],
"@/components/*": ["components/*"]
}
}
}
```
--------------------------------
### Install Jest Dependencies
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/01-building-your-application/08-testing/02-jest.mdx
Install Jest and related testing libraries as development dependencies using npm, yarn, or pnpm.
```bash
npm install -D jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom
```
```bash
yarn add -D jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom
```
```bash
pnpm install -D jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom
```
--------------------------------
### Configure External Image Hostnames with Wildcard Subdomains
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/02-api-reference/01-components/image.mdx
This remotePatterns example allows images from any subdomain of 'example.com', such as 'img1.example.com' or 'me.avatar.example.com'.
```javascript
module.exports = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: '**.example.com',
port: '',
},
],
},
}
```
--------------------------------
### Install Next.js ESLint Plugin
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/01-building-your-application/07-configuring/02-eslint.mdx
Install the Next.js ESLint plugin as a development dependency using npm, yarn, pnpm, or bun.
```bash
npm install --save-dev @next/eslint-plugin-next
```
```bash
yarn add --dev @next/eslint-plugin-next
```
```bash
pnpm add --save-dev @next/eslint-plugin-next
```
```bash
bun add --dev @next/eslint-plugin-next
```
--------------------------------
### Install Partytown for Worker Scripts
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/02-app/01-building-your-application/06-optimizing/05-scripts.mdx
After enabling `nextScriptWorkers`, run `npm run dev` and follow the terminal instructions to install Partytown.
```bash
npm run dev
```
--------------------------------
### Install Next.js 12 with pnpm
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/03-pages/01-building-your-application/10-upgrading/07-version-12.mdx
Use this command to install Next.js version 12 and its associated React and ESLint dependencies using pnpm.
```bash
pnpm up next@12 react@17 react-dom@17 eslint-config-next@12
```
--------------------------------
### Create a New Next.js App
Source: https://github.com/nextjsargentina/next.js-docs/blob/main/src/docs/01-getting-started/01-installation.mdx
Use `create-next-app` to automatically set up a new Next.js project. This command initiates the project creation process and prompts for configuration options.
```bash
npx create-next-app@latest
```