Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Changes codeblock filename delimiter #56712

Merged
merged 2 commits into from
Oct 12, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ fetch('https://...', { next: { revalidate: 3600 } })

Alternatively, to revalidate all `fetch` requests in a route segment, you can use the [Segment Config Options](/docs/app/api-reference/file-conventions/route-segment-config).

```jsx filename="layout.js / page.js"
```jsx filename="layout.js | page.js"
export const revalidate = 3600 // revalidate at most every hour
```

Expand Down Expand Up @@ -250,7 +250,7 @@ If an error is thrown while attempting to revalidate data, the last successfully

To opt out of caching for individual `fetch` requests, you can set the `cache` option in `fetch` to `'no-store'`. This will fetch data dynamically, on every request.

```js filename="layout.js / page.js"
```js filename="layout.js | page.js"
fetch('https://...', { cache: 'no-store' })
```

Expand All @@ -262,7 +262,7 @@ If you have multiple `fetch` requests in a route segment (e.g. a Layout or Page)

For example, using `const dynamic = 'force-dynamic'` will cause all data to be fetched at request time, and the segment to be rendered dynamically.

```js filename="layout.js / page.js"
```js filename="layout.js | page.js"
// Add
export const dynamic = 'force-dynamic'
```
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ With both these options, Next.js will automatically generate the relevant `<head

To define static metadata, export a [`Metadata` object](/docs/app/api-reference/functions/generate-metadata#metadata-object) from a `layout.js` or static `page.js` file.

```tsx filename="layout.tsx / page.tsx" switcher
```tsx filename="layout.tsx | page.tsx" switcher
import type { Metadata } from 'next'

export const metadata: Metadata = {
Expand All @@ -32,7 +32,7 @@ export const metadata: Metadata = {
export default function Page() {}
```

```jsx filename="layout.js / page.js" switcher
```jsx filename="layout.js | page.js" switcher
export const metadata = {
title: '...',
description: '...',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -220,13 +220,13 @@ You can optionally configure the icon's metadata by exporting `size` and `conten

#### `size`

```tsx filename="icon.tsx / apple-icon.tsx" switcher
```tsx filename="icon.tsx | apple-icon.tsx" switcher
export const size = { width: 32, height: 32 }

export default function Icon() {}
```

```jsx filename="icon.js / apple-icon.js" switcher
```jsx filename="icon.js | apple-icon.js" switcher
export const size = { width: 32, height: 32 }

export default function Icon() {}
Expand All @@ -238,13 +238,13 @@ export default function Icon() {}

#### `contentType`

```tsx filename="icon.tsx / apple-icon.tsx" switcher
```tsx filename="icon.tsx | apple-icon.tsx" switcher
export const contentType = 'image/png'

export default function Icon() {}
```

```jsx filename="icon.js / apple-icon.js" switcher
```jsx filename="icon.js | apple-icon.js" switcher
export const contentType = 'image/png'

export default function Icon() {}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -256,13 +256,13 @@ You can optionally configure the image's metadata by exporting `alt`, `size`, an
#### `alt`
```tsx filename="opengraph-image.tsx / twitter-image.tsx" switcher
```tsx filename="opengraph-image.tsx | twitter-image.tsx" switcher
export const alt = 'My images alt text'

export default function Image() {}
```
```jsx filename="opengraph-image.js / twitter-image.js" switcher
```jsx filename="opengraph-image.js | twitter-image.js" switcher
export const alt = 'My images alt text'

export default function Image() {}
Expand All @@ -274,13 +274,13 @@ export default function Image() {}
#### `size`
```tsx filename="opengraph-image.tsx / twitter-image.tsx" switcher
```tsx filename="opengraph-image.tsx | twitter-image.tsx" switcher
export const size = { width: 1200, height: 630 }

export default function Image() {}
```
```jsx filename="opengraph-image.js / twitter-image.js" switcher
```jsx filename="opengraph-image.js | twitter-image.js" switcher
export const size = { width: 1200, height: 630 }

export default function Image() {}
Expand All @@ -293,13 +293,13 @@ export default function Image() {}
#### `contentType`
```tsx filename="opengraph-image.tsx / twitter-image.tsx" switcher
```tsx filename="opengraph-image.tsx | twitter-image.tsx" switcher
export const contentType = 'image/png'

export default function Image() {}
```
```jsx filename="opengraph-image.js / twitter-image.js" switcher
```jsx filename="opengraph-image.js | twitter-image.js" switcher
export const contentType = 'image/png'

export default function Image() {}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ The Route Segment options allows you configure the behavior of a [Page](/docs/ap
| [`preferredRegion`](#preferredregion) | `'auto' \| 'global' \| 'home' \| string \| string[]` | `'auto'` |
| [`maxDuration`](#maxduration) | `number` | Set by deployment platform |

```tsx filename="layout.tsx / page.tsx / route.ts" switcher
```tsx filename="layout.tsx | page.tsx | route.ts" switcher
export const dynamic = 'auto'
export const dynamicParams = true
export const revalidate = false
Expand All @@ -27,7 +27,7 @@ export const maxDuration = 5
export default function MyComponent() {}
```

```jsx filename="layout.js / page.js / route.js" switcher
```jsx filename="layout.js | page.js | route.js" switcher
export const dynamic = 'auto'
export const dynamicParams = true
export const revalidate = false
Expand All @@ -49,12 +49,12 @@ export default function MyComponent() {}

Change the dynamic behavior of a layout or page to fully static or fully dynamic.

```tsx filename="layout.tsx / page.tsx / route.ts" switcher
```tsx filename="layout.tsx | page.tsx | route.ts" switcher
export const dynamic = 'auto'
// 'auto' | 'force-dynamic' | 'error' | 'force-static'
```

```js filename="layout.js / page.js / route.js" switcher
```js filename="layout.js | page.js | route.js" switcher
export const dynamic = 'auto'
// 'auto' | 'force-dynamic' | 'error' | 'force-static'
```
Expand Down Expand Up @@ -83,11 +83,11 @@ export const dynamic = 'auto'

Control what happens when a dynamic segment is visited that was not generated with [generateStaticParams](/docs/app/api-reference/functions/generate-static-params).

```tsx filename="layout.tsx / page.tsx" switcher
```tsx filename="layout.tsx | page.tsx" switcher
export const dynamicParams = true // true | false,
```

```js filename="layout.js / page.js / route.js" switcher
```js filename="layout.js | page.js | route.js" switcher
export const dynamicParams = true // true | false,
```

Expand All @@ -104,12 +104,12 @@ export const dynamicParams = true // true | false,

Set the default revalidation time for a layout or page. This option does not override the `revalidate` value set by individual `fetch` requests.

```tsx filename="layout.tsx / page.tsx / route.ts" switcher
```tsx filename="layout.tsx | page.tsx | route.ts" switcher
export const revalidate = false
// false | 'force-cache' | 0 | number
```

```js filename="layout.js / page.js / route.js" switcher
```js filename="layout.js | page.js | route.js" switcher
export const revalidate = false
// false | 'force-cache' | 0 | number
```
Expand All @@ -134,13 +134,13 @@ By default, Next.js **will cache** any `fetch()` requests that are reachable **b

`fetchCache` allows you to override the default `cache` option of all `fetch` requests in a layout or page.

```tsx filename="layout.tsx / page.tsx / route.ts" switcher
```tsx filename="layout.tsx | page.tsx | route.ts" switcher
export const fetchCache = 'auto'
// 'auto' | 'default-cache' | 'only-cache'
// 'force-cache' | 'force-no-store' | 'default-no-store' | 'only-no-store'
```

```js filename="layout.js / page.js / route.js" switcher
```js filename="layout.js | page.js | route.js" switcher
export const fetchCache = 'auto'
// 'auto' | 'default-cache' | 'only-cache'
// 'force-cache' | 'force-no-store' | 'default-no-store' | 'only-no-store'
Expand Down Expand Up @@ -168,12 +168,12 @@ export const fetchCache = 'auto'

### `runtime`

```tsx filename="layout.tsx / page.tsx / route.ts" switcher
```tsx filename="layout.tsx | page.tsx | route.ts" switcher
export const runtime = 'nodejs'
// 'edge' | 'nodejs'
```

```js filename="layout.js / page.js / route.js" switcher
```js filename="layout.js | page.js | route.js" switcher
export const runtime = 'nodejs'
// 'edge' | 'nodejs'
```
Expand All @@ -185,12 +185,12 @@ Learn more about the [Edge and Node.js runtimes](/docs/app/building-your-applica

### `preferredRegion`

```tsx filename="layout.tsx / page.tsx / route.ts" switcher
```tsx filename="layout.tsx | page.tsx | route.ts" switcher
export const preferredRegion = 'auto'
// 'auto' | 'global' | 'home' | ['iad1', 'sfo1']
```

```js filename="layout.js / page.js / route.js" switcher
```js filename="layout.js | page.js | route.js" switcher
export const preferredRegion = 'auto'
// 'auto' | 'global' | 'home' | ['iad1', 'sfo1']
```
Expand All @@ -208,11 +208,11 @@ Based on your deployment platform, you may be able to use a higher default execu
This setting allows you to opt into a higher execution time within your plans limit.
**Note**: This settings requires Next.js `13.4.10` or higher.

```tsx filename="layout.tsx / page.tsx / route.ts" switcher
```tsx filename="layout.tsx | page.tsx | route.ts" switcher
export const maxDuration = 5
```

```js filename="layout.js / page.js / route.js" switcher
```js filename="layout.js | page.js | route.js" switcher
export const maxDuration = 5
```

Expand Down
Loading
Loading