Changes codeblock filename delimiter (#56712)
Based on feedback from #56603, the `/` can be interpreted as file paths instead of filename separators / delimiters. We'll change them to use pipes `|` instead.
This commit is contained in:
Michael Novotny
GitHub
parent
f306108b37
commit
fd2724ace0
6 changed files with 58 additions and 58 deletions
|
|
@ -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
|
||||
```
|
||||
|
||||
|
|
@ -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' })
|
||||
```
|
||||
|
||||
|
|
@ -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'
|
||||
```
|
||||
|
|
|
|||
|
|
@ -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 = {
|
||||
|
|
@ -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: '...',
|
||||
|
|
|
|||
|
|
@ -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() {}
|
||||
|
|
@ -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() {}
|
||||
|
|
|
|||
|
|
@ -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() {}
|
||||
|
|
@ -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() {}
|
||||
|
|
@ -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() {}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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'
|
||||
```
|
||||
|
|
@ -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,
|
||||
```
|
||||
|
||||
|
|
@ -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
|
||||
```
|
||||
|
|
@ -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'
|
||||
|
|
@ -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'
|
||||
```
|
||||
|
|
@ -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']
|
||||
```
|
||||
|
|
@ -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
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ related:
|
|||
|
||||
This page covers all **Config-based Metadata** options with `generateMetadata` and the static metadata object.
|
||||
|
||||
```tsx filename="layout.tsx / page.tsx" switcher
|
||||
```tsx filename="layout.tsx | page.tsx" switcher
|
||||
import { Metadata } from 'next'
|
||||
|
||||
// either Static metadata
|
||||
|
|
@ -28,7 +28,7 @@ export async function generateMetadata({ params }) {
|
|||
}
|
||||
```
|
||||
|
||||
```jsx filename="layout.js / page.js" switcher
|
||||
```jsx filename="layout.js | page.js" switcher
|
||||
// either Static metadata
|
||||
export const metadata = {
|
||||
title: '...',
|
||||
|
|
@ -51,7 +51,7 @@ export async function generateMetadata({ params }) {
|
|||
|
||||
To define static metadata, export a [`Metadata` object](#metadata-fields) from a `layout.js` or `page.js` file.
|
||||
|
||||
```tsx filename="layout.tsx / page.tsx" switcher
|
||||
```tsx filename="layout.tsx | page.tsx" switcher
|
||||
import { Metadata } from 'next'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
|
|
@ -62,7 +62,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: '...',
|
||||
|
|
@ -174,7 +174,7 @@ The `title` attribute is used to set the title of the document. It can be define
|
|||
|
||||
#### String
|
||||
|
||||
```jsx filename="layout.js / page.js"
|
||||
```jsx filename="layout.js | page.js"
|
||||
export const metadata = {
|
||||
title: 'Next.js',
|
||||
}
|
||||
|
|
@ -342,7 +342,7 @@ export const metadata = {
|
|||
|
||||
### `description`
|
||||
|
||||
```jsx filename="layout.js / page.js"
|
||||
```jsx filename="layout.js | page.js"
|
||||
export const metadata = {
|
||||
description: 'The React Framework for the Web',
|
||||
}
|
||||
|
|
@ -354,7 +354,7 @@ export const metadata = {
|
|||
|
||||
### Basic Fields
|
||||
|
||||
```jsx filename="layout.js / page.js"
|
||||
```jsx filename="layout.js | page.js"
|
||||
export const metadata = {
|
||||
generator: 'Next.js',
|
||||
applicationName: 'Next.js',
|
||||
|
|
@ -394,7 +394,7 @@ export const metadata = {
|
|||
- The field's relative path will be composed with `metadataBase` to form a fully qualified URL.
|
||||
- If not configured, `metadataBase` is **automatically populated** with a [default value](#default-value).
|
||||
|
||||
```jsx filename="layout.js / page.js"
|
||||
```jsx filename="layout.js | page.js"
|
||||
export const metadata = {
|
||||
metadataBase: new URL('https://acme.com'),
|
||||
alternates: {
|
||||
|
|
@ -470,7 +470,7 @@ Any `metadata` fields that inherit the above `metadataBase` and set their own va
|
|||
|
||||
### `openGraph`
|
||||
|
||||
```jsx filename="layout.js / page.js"
|
||||
```jsx filename="layout.js | page.js"
|
||||
export const metadata = {
|
||||
openGraph: {
|
||||
title: 'Next.js',
|
||||
|
|
@ -512,7 +512,7 @@ export const metadata = {
|
|||
<meta property="og:type" content="website" />
|
||||
```
|
||||
|
||||
```jsx filename="layout.js / page.js"
|
||||
```jsx filename="layout.js | page.js"
|
||||
export const metadata = {
|
||||
openGraph: {
|
||||
title: 'Next.js',
|
||||
|
|
@ -571,7 +571,7 @@ export const metadata: Metadata = {
|
|||
|
||||
> **Good to know**: We recommend using the [file-based Metadata API](/docs/app/api-reference/file-conventions/metadata/app-icons#image-files-ico-jpg-png) for icons where possible. Rather than having to sync the config export with actual files, the file-based API will automatically generate the correct metadata for you.
|
||||
|
||||
```jsx filename="layout.js / page.js"
|
||||
```jsx filename="layout.js | page.js"
|
||||
export const metadata = {
|
||||
icons: {
|
||||
icon: '/icon.png',
|
||||
|
|
@ -595,7 +595,7 @@ export const metadata = {
|
|||
/>
|
||||
```
|
||||
|
||||
```jsx filename="layout.js / page.js"
|
||||
```jsx filename="layout.js | page.js"
|
||||
export const metadata = {
|
||||
icons: {
|
||||
icon: [{ url: '/icon.png' }, new URL('/icon.png', 'https://example.com')],
|
||||
|
|
@ -639,7 +639,7 @@ Learn more about [theme-color](https://developer.mozilla.org/docs/Web/HTML/Eleme
|
|||
|
||||
**Simple theme color**
|
||||
|
||||
```jsx filename="layout.js / page.js"
|
||||
```jsx filename="layout.js | page.js"
|
||||
export const metadata = {
|
||||
themeColor: 'black',
|
||||
}
|
||||
|
|
@ -651,7 +651,7 @@ export const metadata = {
|
|||
|
||||
**With media attribute**
|
||||
|
||||
```jsx filename="layout.js / page.js"
|
||||
```jsx filename="layout.js | page.js"
|
||||
export const metadata = {
|
||||
themeColor: [
|
||||
{ media: '(prefers-color-scheme: light)', color: 'cyan' },
|
||||
|
|
@ -669,7 +669,7 @@ export const metadata = {
|
|||
|
||||
A web application manifest, as defined in the [Web Application Manifest specification](https://developer.mozilla.org/docs/Web/Manifest).
|
||||
|
||||
```jsx filename="layout.js / page.js"
|
||||
```jsx filename="layout.js | page.js"
|
||||
export const metadata = {
|
||||
manifest: 'https://nextjs.org/manifest.json',
|
||||
}
|
||||
|
|
@ -683,7 +683,7 @@ export const metadata = {
|
|||
|
||||
Learn more about the [Twitter Card markup reference](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup).
|
||||
|
||||
```jsx filename="layout.js / page.js"
|
||||
```jsx filename="layout.js | page.js"
|
||||
export const metadata = {
|
||||
twitter: {
|
||||
card: 'summary_large_image',
|
||||
|
|
@ -707,7 +707,7 @@ export const metadata = {
|
|||
<meta name="twitter:image" content="https://nextjs.org/og.png" />
|
||||
```
|
||||
|
||||
```jsx filename="layout.js / page.js"
|
||||
```jsx filename="layout.js | page.js"
|
||||
export const metadata = {
|
||||
twitter: {
|
||||
card: 'app',
|
||||
|
|
@ -759,7 +759,7 @@ export const metadata = {
|
|||
|
||||
> **Good to know**: The `viewport` meta tag is automatically set with the following default values. Usually, manual configuration is unnecessary as the default is sufficient. However, the information is provided for completeness.
|
||||
|
||||
```jsx filename="layout.js / page.js"
|
||||
```jsx filename="layout.js | page.js"
|
||||
export const metadata = {
|
||||
viewport: {
|
||||
width: 'device-width',
|
||||
|
|
@ -778,7 +778,7 @@ export const metadata = {
|
|||
|
||||
### `verification`
|
||||
|
||||
```jsx filename="layout.js / page.js"
|
||||
```jsx filename="layout.js | page.js"
|
||||
export const metadata = {
|
||||
verification: {
|
||||
google: 'google',
|
||||
|
|
@ -801,7 +801,7 @@ export const metadata = {
|
|||
|
||||
### `appleWebApp`
|
||||
|
||||
```jsx filename="layout.js / page.js"
|
||||
```jsx filename="layout.js | page.js"
|
||||
export const metadata = {
|
||||
itunes: {
|
||||
appId: 'myAppStoreID',
|
||||
|
|
@ -845,7 +845,7 @@ export const metadata = {
|
|||
|
||||
### `alternates`
|
||||
|
||||
```jsx filename="layout.js / page.js"
|
||||
```jsx filename="layout.js | page.js"
|
||||
export const metadata = {
|
||||
alternates: {
|
||||
canonical: 'https://nextjs.org',
|
||||
|
|
@ -881,7 +881,7 @@ export const metadata = {
|
|||
|
||||
### `appLinks`
|
||||
|
||||
```jsx filename="layout.js / page.js"
|
||||
```jsx filename="layout.js | page.js"
|
||||
export const metadata = {
|
||||
appLinks: {
|
||||
ios: {
|
||||
|
|
@ -913,7 +913,7 @@ export const metadata = {
|
|||
|
||||
Describes a collection of records, documents, or other materials of historical interest ([source](https://www.w3.org/TR/2011/WD-html5-20110113/links.html#rel-archives)).
|
||||
|
||||
```jsx filename="layout.js / page.js"
|
||||
```jsx filename="layout.js | page.js"
|
||||
export const metadata = {
|
||||
archives: ['https://nextjs.org/13'],
|
||||
}
|
||||
|
|
@ -925,7 +925,7 @@ export const metadata = {
|
|||
|
||||
### `assets`
|
||||
|
||||
```jsx filename="layout.js / page.js"
|
||||
```jsx filename="layout.js | page.js"
|
||||
export const metadata = {
|
||||
assets: ['https://nextjs.org/assets'],
|
||||
}
|
||||
|
|
@ -937,7 +937,7 @@ export const metadata = {
|
|||
|
||||
### `bookmarks`
|
||||
|
||||
```jsx filename="layout.js / page.js"
|
||||
```jsx filename="layout.js | page.js"
|
||||
export const metadata = {
|
||||
bookmarks: ['https://nextjs.org/13'],
|
||||
}
|
||||
|
|
@ -949,7 +949,7 @@ export const metadata = {
|
|||
|
||||
### `category`
|
||||
|
||||
```jsx filename="layout.js / page.js"
|
||||
```jsx filename="layout.js | page.js"
|
||||
export const metadata = {
|
||||
category: 'technology',
|
||||
}
|
||||
|
|
@ -963,7 +963,7 @@ export const metadata = {
|
|||
|
||||
All metadata options should be covered using the built-in support. However, there may be custom metadata tags specific to your site, or brand new metadata tags just released. You can use the `other` option to render any custom metadata tag.
|
||||
|
||||
```jsx filename="layout.js / page.js"
|
||||
```jsx filename="layout.js | page.js"
|
||||
export const metadata = {
|
||||
other: {
|
||||
custom: 'meta',
|
||||
|
|
|
|||
Loading…
Reference in a new issue