### Manual Next.js Installation using npm

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

Manually installs Next.js, React, and ReactDOM using npm. This method requires manually adding scripts to the `package.json` file for development, building, starting, and linting.

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

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

### Create Next.js App with Playwright Example

Source: https://nextjs.org/docs/13/pages/building-your-application/optimizing/testing

Initializes a new Next.js project with Playwright pre-configured. This command uses `create-next-app` with a specific example to streamline the setup process for end-to-end testing.

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

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

### Automatic Next.js Installation with create-next-app

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

Installs a new Next.js project using the `create-next-app` command-line tool. This method automatically configures TypeScript, ESLint, Tailwind CSS, and the App Router based on user prompts. It requires Node.js 16.14 or later.

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

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

### Create Next.js App with Cypress Example

Source: https://nextjs.org/docs/13/pages/building-your-application/optimizing/testing

Command to create a new Next.js application pre-configured with Cypress using the official `create-next-app` tool. This provides a quick starting point for E2E testing.

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

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

### Install OpenTelemetry Packages for Manual Setup

Source: https://nextjs.org/docs/13/app/building-your-application/optimizing/open-telemetry

Installs the necessary OpenTelemetry packages for manual configuration in a Node.js environment. These packages provide the core SDK and exporters for tracing.

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

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

### Start Production Server

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

Starts the application in production mode. Includes configuration for custom ports and keep-alive timeouts for proxy compatibility.

```bash
npx next start -p 4000
PORT=4000 npx next start
npx next start --keepAliveTimeout 70000
```

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

### GET /api/post/[pid]

Source: https://nextjs.org/docs/13/pages/building-your-application/routing/api-routes

Example of handling dynamic API routes using path parameters.

```APIDOC
## GET /api/post/[pid]

### Description
Retrieves data based on a dynamic path parameter `pid`.

### Method
GET

### Endpoint
/api/post/:pid

### Parameters
#### Path Parameters
- **pid** (string) - Required - The dynamic identifier for the post.

### Response
#### Success Response (200)
- **body** (string) - Returns the post ID string.

### Response Example
"Post: abc"
```

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

### Start Development Server

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

Starts the application in development mode with hot-reloading. Supports custom port and hostname configuration via CLI flags or environment variables.

```bash
npx next dev -p 4000
PORT=4000 npx next dev
npx next dev -H 192.168.1.2
```

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

### Create Functional Code Examples

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

Examples of standard code blocks in Next.js documentation, including TypeScript components and terminal commands with filenames.

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

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

```bash
npx create-next-app
```

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

### Create Next.js App with Jest Example

Source: https://nextjs.org/docs/13/pages/building-your-application/optimizing/testing

Initializes a new Next.js project with Jest and React Testing Library pre-configured. This command uses `create-next-app` with a specific example to quickly set up a project for unit testing.

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

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

### Configure Next.js build and start scripts

Source: https://nextjs.org/docs/13/app/building-your-application/deploying

Defines the necessary scripts in package.json to enable building and starting a Next.js production server.

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

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

### Define Documentation File Structure

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

Examples of file-system routing used in the documentation. It demonstrates how to use numeric prefixes to control the sorting order of navigation items.

```text
03-functions
├── cookies.mdx
├── draft-mode.mdx
├── fetch.mdx
└── ...

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

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

### Install Sharp for Image Optimization

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

Installs the sharp library, which is a required dependency for Next.js Image Optimization when using the default loader.

```bash
npm i sharp
```

```bash
yarn add sharp
```

```bash
pnpm add sharp
```

```bash
bun add sharp
```

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

### Install Cypress for Next.js

Source: https://nextjs.org/docs/13/pages/building-your-application/optimizing/testing

Installs the Cypress testing framework as a development dependency for a Next.js project. This is the first step for setting up E2E or Component Testing with Cypress.

```bash
npm install --save-dev cypress
```

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

### Create Documentation Notes

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

Formats important information using blockquotes to create distinct note sections for users.

```mdx
> **Good to know**: This is a single line note.
 
> **Good to know**:
>
> - We also use this format for multi-line notes.
> - There are sometimes multiple items worth knowing or keeping in mind.
```

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

### Install server-only package

Source: https://nextjs.org/docs/13/app/building-your-application/rendering/composition-patterns

Command to install the 'server-only' package, which is used to prevent accidental usage of server-side modules in client-side code.

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

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

### Root Layout Example

Source: https://nextjs.org/docs/13/app/api-reference/file-conventions/layout

Example of the root layout component, defining the base HTML structure.

```APIDOC
## Root Layout

### Description
The top-most layout in the `app` directory, responsible for defining the `<html>` and `<body>` tags and other global UI.

### Method
N/A (Component Definition)

### Endpoint
N/A (Component Definition)

### Parameters
#### Props
- **children** (React.ReactNode) - Required - The content to be rendered within the layout, typically including the rest of the application.

### Request Example
```typescript
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}
```

### Response
#### Success Response (Rendered HTML Structure)
- **children** (React.ReactNode) - The rendered content of the entire application.

#### Response Example
```html
<html lang="en">
  <body>
    <!-- Rendered application content -->
  </body>
</html>
```
```

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

### Install Jest dependencies

Source: https://nextjs.org/docs/13/pages/building-your-application/optimizing/testing

Installs the necessary packages for Jest testing, including the JSDOM environment and React testing library utilities.

```bash
npm install --save-dev jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom
```

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

### Set Application Port with `PORT` Environment Variable

Source: https://nextjs.org/docs/13/pages/building-your-application/upgrading/version-11

Example of how to set the application port for `next dev` or `next start` using the `PORT` environment variable. This is an alternative to the `-p` or `--port` flags.

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

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

### Example: Advanced Module Aliases with baseUrl and paths

Source: https://nextjs.org/docs/13/pages/building-your-application/configuring/absolute-imports-and-module-aliases

This example showcases advanced configuration using both `baseUrl` and `paths` to alias multiple directories, such as `@/styles/*` and `@/components/*`. It also shows importing a helper utility from a non-aliased path (`utils/helper`).

```javascript
import Button from '@/components/button'
import '@/styles/styles.css'
import Helper from 'utils/helper'

export default function HomePage() {
  return (
    <Helper>
      <h1>Hello World</h1>
      <Button />
    </Helper>
  )
}
```

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

### Configuring Link Component Props

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

Examples of using replace, scroll, and prefetch props to control navigation behavior and performance.

```javascript
import Link from 'next/link'
 
export default function Page() {
  return (
    <>
      <Link href="/dashboard" replace>Dashboard</Link>
      <Link href="/dashboard" scroll={false}>Dashboard</Link>
      <Link href="/dashboard" prefetch={false}>Dashboard</Link>
    </>
  )
}
```

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

### Next.js Scripts in package.json

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

Defines essential scripts for managing a Next.js application lifecycle: development (`dev`), production build (`build`), starting the server (`start`), and linting (`lint`). These scripts are added to the `package.json` file.

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

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

### Configure npm Scripts for Custom Server (package.json)

Source: https://nextjs.org/docs/13/pages/building-your-application/configuring/custom-server

This JSON snippet shows how to update the `scripts` section in your `package.json` file to run the custom server. It defines commands for development (`dev`), building (`build`), and production startup (`start`) using the custom server file.

```json
{
  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
  }
}

```

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

### Implement Next.js Middleware with Conditional Rewrites

Source: https://nextjs.org/docs/13/app/building-your-application/routing/middleware

Shows how to use conditional statements within Next.js middleware to perform rewrites based on the request URL's pathname. This example rewrites requests starting with '/about' to '/about-2' and those starting with '/dashboard' to '/dashboard/user'.

```typescript
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
 
export function middleware(request: NextRequest) {
  if (request.nextUrl.pathname.startsWith('/about')) {
    return NextResponse.rewrite(new URL('/about-2', request.url))
  }
 
  if (request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.rewrite(new URL('/dashboard/user', request.url))
  }
}
```

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

### Example Custom Cache Handler Implementation (cache-handler.js)

Source: https://nextjs.org/docs/13/app/api-reference/next-config-js/incrementalCacheHandlerPath

This JavaScript code provides an example implementation of a custom cache handler for Next.js. It uses a Map for caching and implements the 'get' and 'set' methods. The handler can be extended to include other methods like 'revalidateTag'.

```javascript
const cache = new Map()

module.exports = class CacheHandler {
  constructor(options) {
    this.options = options
    this.cache = {}
  }

  async get(key) {
    return cache.get(key)
  }

  async set(key, data) {
    cache.set(key, {
      value: data,
      lastModified: Date.now(),
    })
  }
}
```

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

### Demonstrate useMemo dependency behavior during Fast Refresh

Source: https://nextjs.org/docs/13/architecture/fast-refresh

This example shows a useMemo hook that re-runs during Fast Refresh to ensure code edits are reflected on the screen, even if the dependency array remains unchanged.

```javascript
// Before edit
useMemo(() => x * 2, [x]);

// After edit
useMemo(() => x * 10, [x]);
```

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

### Configure TS/JS Language Switcher

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

Configuring code blocks to support the language switcher, allowing users to toggle between TypeScript and JavaScript versions of the same example.

```tsx
```tsx filename="app/page.tsx" switcher

```

```jsx filename="app/page.js" switcher

```
```

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

### Configure Babel with .babelrc

Source: https://nextjs.org/docs/13/pages/building-your-application/configuring/babel

Examples of defining a .babelrc file to extend Next.js compilation. Includes basic setup, adding plugins, and customizing preset options.

```json
{
  "presets": ["next/babel"],
  "plugins": []
}
```

```json
{
  "presets": ["next/babel"],
  "plugins": ["@babel/plugin-proposal-do-expressions"]
}
```

```json
{
  "presets": [
    [
      "next/babel",
      {
        "preset-env": {},
        "transform-runtime": {},
        "styled-jsx": {},
        "class-properties": {}
      }
    ]
  ],
  "plugins": []
}
```

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

### Implement Static Site Generation

Source: https://nextjs.org/docs/13/app/building-your-application/upgrading/app-router-migration

Shows how to pre-render pages at build time. The 'pages' directory uses getStaticProps, while the 'app' directory leverages default fetch caching behavior.

```javascript
// `pages` directory
export async function getStaticProps() {
  const res = await fetch(`https://...`)
  const projects = await res.json()
  return { props: { projects } }
}

export default function Index({ projects }) {
  return projects.map((project) => <div>{project.name}</div>)
}
```

```javascript
// `app` directory
async function getProjects() {
  const res = await fetch(`https://...`)
  const projects = await res.json()
  return projects
}

export default async function Index() {
  const projects = await getProjects()
  return projects.map((project) => <div>{project.name}</div>)
}
```

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

### Manage Cookies in Server Actions

Source: https://nextjs.org/docs/13/app/building-your-application/data-fetching/server-actions-and-mutations

Provides examples for getting, setting, and deleting cookies using the Next.js cookies API within a Server Action.

```TypeScript
'use server'
 
import { cookies } from 'next/headers'
 
export async function exampleAction() {
  const value = cookies().get('name')?.value
  cookies().set('name', 'Delba')
  cookies().delete('name')
}
```

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

### Migrate next/head to Next.js App Directory Metadata

Source: https://nextjs.org/docs/13/app/building-your-application/upgrading/app-router-migration

This snippet shows the migration of managing head elements using next/head in the pages directory to the new metadata API in the app directory. The 'Before' example uses next/head to set the page title, while the 'After' example utilizes the exported 'metadata' object for the same purpose.

```typescript
import Head from 'next/head'

export default function Page() {
  return (
    <>
      <Head>
        <title>My page title</title>
      </Head>
    </>
  )
}
```

```typescript
import { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'My Page Title',
}

export default function Page() {
  return '...'
}
```

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

### Access Next.js CLI Help

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

Displays the list of available CLI commands and options. Use this to explore built-in functionality and command-line arguments.

```bash
npx next -h
```

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

### Migrate getLayout() to Next.js App Directory Layouts

Source: https://nextjs.org/docs/13/app/building-your-application/upgrading/app-router-migration

This snippet demonstrates migrating the getLayout() pattern used in the pages directory to the new nested layout system in the app directory. The 'Before' example shows the old pattern using a getLayout function, while the 'After' examples illustrate how to achieve the same with separate layout and page components in the app directory.

```javascript
import DashboardLayout from '../components/DashboardLayout'

export default function Page() {
  return <p>My Page</p>
}

Page.getLayout = function getLayout(page) {
  return <DashboardLayout>{page}</DashboardLayout>
}
```

```javascript
'use client'

export default function DashboardLayout({ children }) {
  return (
    <div>
      <h2>My Dashboard</h2>
      {children}
    </div>
  )
}
```

```javascript
import DashboardLayout from './DashboardLayout'

export default function Layout({ children }) {
  return <DashboardLayout>{children}</DashboardLayout>
}
```

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

### Pre-render dynamic blog posts with getStaticPaths

Source: https://nextjs.org/docs/13/pages/api-reference/functions/get-static-paths

A complete example of fetching a list of posts from an API to define paths at build time, combined with getStaticProps to fetch individual post data.

```javascript
function Post({ post }) {
  // Render post...
}
 
export async function getStaticPaths() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()
 
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))
 
  return { paths, fallback: false }
}
 
export async function getStaticProps({ params }) {
  const res = await fetch(`https://.../posts/${params.id}`)
  const post = await res.json()
 
  return { props: { post } }
}
 
export default Post
```

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

### Configure VSCode for MDX Previewing

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

This configuration snippet enables markdown preview support for MDX files within VSCode, allowing contributors to visualize documentation changes locally.

```json
{
  "files.associations": {
    "*.mdx": "markdown"
  }
}
```

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

### Home Page Component for App Router (TypeScript)

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

Creates the home page component for a Next.js application using the App Router. This simple component renders a heading 'Hello, Next.js!'. This file should be named `page.tsx` and placed in the `app/` directory.

```typescript
export default function Page() {
  return <h1>Hello, Next.js!</h1>
}
```

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

### Configure Node.js Runtime Arguments

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

Demonstrates how to pass Node.js-specific flags to the Next.js process using the NODE_OPTIONS environment variable.

```bash
NODE_OPTIONS='--throw-deprecation' next
NODE_OPTIONS='-r esm' next
NODE_OPTIONS='--inspect' next
```

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

### Global Layout Component for Pages Router (TypeScript)

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

Sets up the global layout and component rendering for a Next.js application using the Pages Router. It imports `AppProps` from `next/app` and renders the main `Component` with its `pageProps`. This file should be named `_app.tsx` and placed in the `pages/` directory.

```typescript
import type { AppProps } from 'next/app'
 
export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}
```

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

### Configure Image Loader and Path

Source: https://nextjs.org/docs/13/pages/api-reference/components/image-legacy

Sets a cloud provider for image optimization instead of the built-in API. Requires specifying the loader type and the base path for image URLs.

```javascript
module.exports = {
  images: {
    loader: 'imgix',
    path: 'https://example.com/myaccount/',
  },
}
```

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

### Document Component for Pages Router (TypeScript)

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

Controls the initial server response for a Next.js application using the Pages Router. It defines the fundamental HTML structure, including `<html>`, `<Head>`, `<body>`, `<Main>`, and `<NextScript>`, allowing for customization of the document. This file should be named `_document.tsx` and placed in the `pages/` directory.

```typescript
import { Html, Head, Main, NextScript } from 'next/document'
 
export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}
```

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

### Dashboard Layout Example

Source: https://nextjs.org/docs/13/app/api-reference/file-conventions/layout

Example of a dashboard-specific layout component that wraps its children.

```APIDOC
## Dashboard Layout

### Description
A layout component for the dashboard section, sharing UI across dashboard routes.

### Method
N/A (Component Definition)

### Endpoint
N/A (Component Definition)

### Parameters
#### Props
- **children** (React.ReactNode) - Required - The content to be rendered within the layout.

### Request Example
```typescript
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <section>{children}</section>
}
```

### Response
#### Success Response (Rendered UI)
- **children** (React.ReactNode) - The rendered content of the matched route segment.

#### Response Example
```html
<section>
  <!-- Rendered page or child layout content -->
</section>
```
```

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

### Configure Middleware Path Matching with Matcher

Source: https://nextjs.org/docs/13/app/building-your-application/routing/middleware

Demonstrates how to configure the paths that Next.js middleware will run on using the `matcher` configuration. This example shows matching a single path, multiple paths, and using a regular expression for more complex matching rules.

```javascript
export const config = {
  matcher: '/about/:path*',
}
```

```javascript
export const config = {
  matcher: ['/about/:path*', '/dashboard/:path*'],
}
```

```javascript
export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - api (API routes)
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
     */
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
}
```

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

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

Source: https://nextjs.org/docs/13/app/building-your-application/configuring/eslint

Installs the official Next.js ESLint plugin to provide framework-specific linting rules.

```bash
npm install --save-dev @next/eslint-plugin-next
yarn add --dev @next/eslint-plugin-next
pnpm add --save-dev @next/eslint-plugin-next
bun add --dev @next/eslint-plugin-next
```

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

### Install eslint-config-prettier

Source: https://nextjs.org/docs/13/app/building-your-application/configuring/eslint

Installs the dependency required to prevent ESLint rules from conflicting with Prettier formatting.

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

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

### Build Next.js Application

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

Commands to create an optimized production build. Includes optional flags for profiling React components and enabling verbose debug output.

```bash
next build --profile
next build --debug
```

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

### Install MDX dependencies

Source: https://nextjs.org/docs/13/app/building-your-application/configuring/mdx

Command to install the required packages for processing MDX files in a Next.js project.

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

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

### Integrating Link with Middleware

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

Demonstrates how to use the 'as' prop in Link to ensure correct prefetching when using Middleware for URL rewrites.

```javascript
export function middleware(req) {
  const nextUrl = req.nextUrl
  if (nextUrl.pathname === '/dashboard') {
    if (req.cookies.authToken) {
      return NextResponse.rewrite(new URL('/auth/dashboard', req.url))
    } else {
      return NextResponse.rewrite(new URL('/public/dashboard', req.url))
    }
  }
}
```

```javascript
import Link from 'next/link'
import useIsAuthed from './hooks/useIsAuthed'

export default function Page() {
  const isAuthed = useIsAuthed()
  const path = isAuthed ? '/auth/dashboard' : '/dashboard'
  return (
    <Link as="/dashboard" href={path}>
      Dashboard
    </Link>
  )
}
```

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

### Fetch Blog Posts with getStaticProps (JavaScript)

Source: https://nextjs.org/docs/13/pages/building-your-application/data-fetching/get-static-props

Illustrates fetching a list of blog posts from an external API using `getStaticProps`. This example shows a common use case for populating a page with dynamic data at build time, suitable for content that doesn't change frequently. The data is passed as props to the `Blog` component.

```javascript
// posts will be populated at build time by getStaticProps()
export default function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}
 
// This function gets called at build time on server-side.
// It won't be called on client-side, so you can even do
// direct database queries.
export async function getStaticProps() {
  // Call an external API endpoint to get posts.
  // You can use any data fetching library
  const res = await fetch('https://.../posts')
  const posts = await res.json()
 
  // By returning { props: { posts } }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      posts,
    },
  }
}
```

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

### Build and run Docker container

Source: https://nextjs.org/docs/13/app/building-your-application/deploying

Commands to build a Docker image from a Dockerfile and run the resulting container for a Next.js application.

```bash
docker build -t nextjs-docker .
docker run -p 3000:3000 nextjs-docker
```

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

### Install OpenTelemetry API dependency

Source: https://nextjs.org/docs/13/app/building-your-application/optimizing/open-telemetry

Command to install the OpenTelemetry API package required for manual instrumentation in a Next.js project.

```shell
npm install @opentelemetry/api
```

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

### Create Responsive Images with Next.js

Source: https://nextjs.org/docs/13/app/building-your-application/optimizing/images

Shows how to implement a responsive image layout using static imports and CSS styles to ensure the image scales correctly while maintaining aspect ratio.

```javascript
import Image from 'next/image'
import mountains from '../public/mountains.jpg'
 
export default function Responsive() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column' }}>
      <Image
        alt="Mountains"
        src={mountains}
        sizes="100vw"
        style={{
          width: '100%',
          height: 'auto',
        }}
      />
    </div>
  )
}
```

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

### Manual Node.js OpenTelemetry SDK Initialization

Source: https://nextjs.org/docs/13/app/building-your-application/optimizing/open-telemetry

Initializes the OpenTelemetry Node.js SDK manually, configuring it with a service name and an OTLP HTTP trace exporter. This provides a foundation for custom observability setups.

```typescript
import { NodeSDK } from '@opentelemetry/sdk-node'
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'
import { Resource } from '@opentelemetry/resources'
import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'
import { SimpleSpanProcessor } from '@opentelemetry/sdk-trace-node'

const sdk = new NodeSDK({
  resource: new Resource({
    [SemanticResourceAttributes.SERVICE_NAME]: 'next-app',
  }),
  spanProcessor: new SimpleSpanProcessor(new OTLPTraceExporter()),
})
sdk.start()
```

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

### Define Related Links in Metadata

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

Configures related links in the frontmatter of an MDX file to guide users to logical next steps in the documentation.

```yaml
---
related:
  description: Learn how to quickly get started with your first application.
  links:
    - app/building-your-application/routing/defining-routes
    - app/building-your-application/data-fetching
    - app/api-reference/file-conventions/page
---
```

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

### Install Next.js Dependency (npm)

Source: https://nextjs.org/docs/13/app/building-your-application/upgrading/from-vite

Installs the latest version of Next.js as a project dependency using npm. This is the first step in migrating a Vite application to Next.js.

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

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

### Configure Responsive Image Sizes in Next.js

Source: https://nextjs.org/docs/13/pages/api-reference/components/image-legacy

Shows how to use the sizes prop to inform the browser about image dimensions at different breakpoints. This helps optimize performance by ensuring the browser downloads appropriately sized images.

```javascript
import Image from 'next/legacy/image'
const Example = () => (
  <div className="grid-element">
    <Image
      src="/example.png"
      layout="fill"
      sizes="(max-width: 768px) 100vw,
              (max-width: 1200px) 50vw,
              33vw"
    />
  </div>
)
```

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

### Configure Unoptimized Image Loading in Next.js

Source: https://nextjs.org/docs/13/pages/api-reference/components/image-legacy

When true, the source image will be served as-is instead of changing quality, size, or format. Defaults to false. This can be configured globally in next.config.js.

```javascript
import Image from 'next/image'

const UnoptimizedImage = (props) => {
  return <Image {...props} unoptimized />
}
```

```javascript
module.exports = {
  images: {
    unoptimized: true,
  },
}
```