Skip to content

Commit fd2724a

Browse files
manovotnymanovotny
authored
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.
1 parent f306108 commit fd2724a

File tree

6 files changed

+58
-58
lines changed

6 files changed

+58
-58
lines changed

‎docs/02-app/01-building-your-application/02-data-fetching/01-fetching-caching-and-revalidating.mdx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ fetch('https://...', { next: { revalidate: 3600 } })
107107

108108
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).
109109

110-
```jsx filename="layout.js / page.js"
110+
```jsx filename="layout.js | page.js"
111111
export const revalidate = 3600 // revalidate at most every hour
112112
```
113113

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

251251
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.
252252

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

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

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

265-
```js filename="layout.js / page.js"
265+
```js filename="layout.js | page.js"
266266
// Add
267267
export const dynamic = 'force-dynamic'
268268
```

‎docs/02-app/01-building-your-application/06-optimizing/04-metadata.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ With both these options, Next.js will automatically generate the relevant `<head
2121

2222
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.
2323

24-
```tsx filename="layout.tsx / page.tsx" switcher
24+
```tsx filename="layout.tsx | page.tsx" switcher
2525
import type { Metadata } from 'next'
2626

2727
export const metadata: Metadata = {
@@ -32,7 +32,7 @@ export const metadata: Metadata = {
3232
export default function Page() {}
3333
```
3434

35-
```jsx filename="layout.js / page.js" switcher
35+
```jsx filename="layout.js | page.js" switcher
3636
export const metadata = {
3737
title: '...',
3838
description: '...',

‎docs/02-app/02-api-reference/02-file-conventions/01-metadata/app-icons.mdx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -220,13 +220,13 @@ You can optionally configure the icon's metadata by exporting `size` and `conten
220220

221221
#### `size`
222222

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

226226
export default function Icon() {}
227227
```
228228

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

232232
export default function Icon() {}
@@ -238,13 +238,13 @@ export default function Icon() {}
238238

239239
#### `contentType`
240240

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

244244
export default function Icon() {}
245245
```
246246

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

250250
export default function Icon() {}

‎docs/02-app/02-api-reference/02-file-conventions/01-metadata/opengraph-image.mdx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -256,13 +256,13 @@ You can optionally configure the image's metadata by exporting `alt`, `size`, an
256256
257257
#### `alt`
258258
259-
```tsx filename="opengraph-image.tsx / twitter-image.tsx" switcher
259+
```tsx filename="opengraph-image.tsx | twitter-image.tsx" switcher
260260
export const alt = 'My images alt text'
261261

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

268268
export default function Image() {}
@@ -274,13 +274,13 @@ export default function Image() {}
274274
275275
#### `size`
276276
277-
```tsx filename="opengraph-image.tsx / twitter-image.tsx" switcher
277+
```tsx filename="opengraph-image.tsx | twitter-image.tsx" switcher
278278
export const size = { width: 1200, height: 630 }
279279

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

286286
export default function Image() {}
@@ -293,13 +293,13 @@ export default function Image() {}
293293
294294
#### `contentType`
295295
296-
```tsx filename="opengraph-image.tsx / twitter-image.tsx" switcher
296+
```tsx filename="opengraph-image.tsx | twitter-image.tsx" switcher
297297
export const contentType = 'image/png'
298298

299299
export default function Image() {}
300300
```
301301
302-
```jsx filename="opengraph-image.js / twitter-image.js" switcher
302+
```jsx filename="opengraph-image.js | twitter-image.js" switcher
303303
export const contentType = 'image/png'
304304

305305
export default function Image() {}

‎docs/02-app/02-api-reference/02-file-conventions/route-segment-config.mdx

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ The Route Segment options allows you configure the behavior of a [Page](/docs/ap
1515
| [`preferredRegion`](#preferredregion) | `'auto' \| 'global' \| 'home' \| string \| string[]` | `'auto'` |
1616
| [`maxDuration`](#maxduration) | `number` | Set by deployment platform |
1717

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

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

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

52-
```tsx filename="layout.tsx / page.tsx / route.ts" switcher
52+
```tsx filename="layout.tsx | page.tsx | route.ts" switcher
5353
export const dynamic = 'auto'
5454
// 'auto' | 'force-dynamic' | 'error' | 'force-static'
5555
```
5656

57-
```js filename="layout.js / page.js / route.js" switcher
57+
```js filename="layout.js | page.js | route.js" switcher
5858
export const dynamic = 'auto'
5959
// 'auto' | 'force-dynamic' | 'error' | 'force-static'
6060
```
@@ -83,11 +83,11 @@ export const dynamic = 'auto'
8383

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

86-
```tsx filename="layout.tsx / page.tsx" switcher
86+
```tsx filename="layout.tsx | page.tsx" switcher
8787
export const dynamicParams = true // true | false,
8888
```
8989

90-
```js filename="layout.js / page.js / route.js" switcher
90+
```js filename="layout.js | page.js | route.js" switcher
9191
export const dynamicParams = true // true | false,
9292
```
9393

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

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

107-
```tsx filename="layout.tsx / page.tsx / route.ts" switcher
107+
```tsx filename="layout.tsx | page.tsx | route.ts" switcher
108108
export const revalidate = false
109109
// false | 'force-cache' | 0 | number
110110
```
111111

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

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

137-
```tsx filename="layout.tsx / page.tsx / route.ts" switcher
137+
```tsx filename="layout.tsx | page.tsx | route.ts" switcher
138138
export const fetchCache = 'auto'
139139
// 'auto' | 'default-cache' | 'only-cache'
140140
// 'force-cache' | 'force-no-store' | 'default-no-store' | 'only-no-store'
141141
```
142142

143-
```js filename="layout.js / page.js / route.js" switcher
143+
```js filename="layout.js | page.js | route.js" switcher
144144
export const fetchCache = 'auto'
145145
// 'auto' | 'default-cache' | 'only-cache'
146146
// 'force-cache' | 'force-no-store' | 'default-no-store' | 'only-no-store'
@@ -168,12 +168,12 @@ export const fetchCache = 'auto'
168168

169169
### `runtime`
170170

171-
```tsx filename="layout.tsx / page.tsx / route.ts" switcher
171+
```tsx filename="layout.tsx | page.tsx | route.ts" switcher
172172
export const runtime = 'nodejs'
173173
// 'edge' | 'nodejs'
174174
```
175175

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

186186
### `preferredRegion`
187187

188-
```tsx filename="layout.tsx / page.tsx / route.ts" switcher
188+
```tsx filename="layout.tsx | page.tsx | route.ts" switcher
189189
export const preferredRegion = 'auto'
190190
// 'auto' | 'global' | 'home' | ['iad1', 'sfo1']
191191
```
192192

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

211-
```tsx filename="layout.tsx / page.tsx / route.ts" switcher
211+
```tsx filename="layout.tsx | page.tsx | route.ts" switcher
212212
export const maxDuration = 5
213213
```
214214

215-
```js filename="layout.js / page.js / route.js" switcher
215+
```js filename="layout.js | page.js | route.js" switcher
216216
export const maxDuration = 5
217217
```
218218

0 commit comments

Comments
 (0)