Skip to content

Commit e4e8cce

Browse files
xiaoyu2erxiaoyu2er
committed
docs: update nextjs documentation
1 parent 004017f commit e4e8cce

File tree

101 files changed

+1851
-3581
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

101 files changed

+1851
-3581
lines changed

‎apps/docs/content/en/docs/01-app/01-getting-started/01-installation.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ These scripts refer to the different stages of developing an application:
7171

7272
Next.js uses file-system routing, which means the routes in your application are determined by how you structure your files.
7373

74-
Create an `app` folder. Then, inside `app`, create a `layout.tsx` file. This file is the [root layout](/docs/app/api-reference/file-conventions/layout#root-layouts). It's required and must contain the `<html>` and `<body>` tags.
74+
Create an `app` folder. Then, inside `app`, create a `layout.tsx` file. This file is the [root layout](/docs/app/api-reference/file-conventions/layout#root-layout). It's required and must contain the `<html>` and `<body>` tags.
7575

7676
```tsx filename="app/layout.tsx" switcher
7777
export default function RootLayout({

‎apps/docs/content/en/docs/01-app/01-getting-started/02-project-structure.mdx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -73,28 +73,28 @@ Top-level files are used to configure your application, manage dependencies, run
7373

7474
### Dynamic routes
7575

76-
| | |
77-
| --------------------------------------------------------------------------------------------------------- | -------------------------------- |
78-
| [`[folder]`](/docs/app/building-your-application/routing/dynamic-routes#convention) | Dynamic route segment |
79-
| [`[...folder]`](/docs/app/building-your-application/routing/dynamic-routes#catch-all-segments) | Catch-all route segment |
80-
| [`[[...folder]]`](/docs/app/building-your-application/routing/dynamic-routes#optional-catch-all-segments) | Optional catch-all route segment |
76+
| | |
77+
| ------------------------------------------------------------------------------------------------------ | -------------------------------- |
78+
| [`[folder]`](/docs/app/api-reference/file-conventions/dynamic-routes#convention) | Dynamic route segment |
79+
| [`[...folder]`](/docs/app/api-reference/file-conventions/dynamic-routes#catch-all-segments) | Catch-all route segment |
80+
| [`[[...folder]]`](/docs/app/api-reference/file-conventions/dynamic-routes#optional-catch-all-segments) | Optional catch-all route segment |
8181

8282
### Route Groups and private folders
8383

84-
| | |
85-
| --------------------------------------------------------------------------------- | ------------------------------------------------ |
86-
| [`(folder)`](/docs/app/building-your-application/routing/route-groups#convention) | Group routes without affecting routing |
87-
| [`_folder`](#private-folders) | Opt folder and all child segments out of routing |
84+
| | |
85+
| ------------------------------------------------------------------------------ | ------------------------------------------------ |
86+
| [`(folder)`](/docs/app/api-reference/file-conventions/route-groups#convention) | Group routes without affecting routing |
87+
| [`_folder`](#private-folders) | Opt folder and all child segments out of routing |
8888

8989
### Parallel and Intercepted Routes
9090

91-
| | |
92-
| ---------------------------------------------------------------------------------------------- | -------------------------- |
93-
| [`@folder`](/docs/app/building-your-application/routing/parallel-routes#slots) | Named slot |
94-
| [`(.)folder`](/docs/app/building-your-application/routing/intercepting-routes#convention) | Intercept same level |
95-
| [`(..)folder`](/docs/app/building-your-application/routing/intercepting-routes#convention) | Intercept one level above |
96-
| [`(..)(..)folder`](/docs/app/building-your-application/routing/intercepting-routes#convention) | Intercept two levels above |
97-
| [`(...)folder`](/docs/app/building-your-application/routing/intercepting-routes#convention) | Intercept from root |
91+
| | |
92+
| ------------------------------------------------------------------------------------------- | -------------------------- |
93+
| [`@folder`](/docs/app/api-reference/file-conventions/parallel-routes#slots) | Named slot |
94+
| [`(.)folder`](/docs/app/api-reference/file-conventions/intercepting-routes#convention) | Intercept same level |
95+
| [`(..)folder`](/docs/app/api-reference/file-conventions/intercepting-routes#convention) | Intercept one level above |
96+
| [`(..)(..)folder`](/docs/app/api-reference/file-conventions/intercepting-routes#convention) | Intercept two levels above |
97+
| [`(...)folder`](/docs/app/api-reference/file-conventions/intercepting-routes#convention) | Intercept from root |
9898

9999
### Metadata file conventions
100100

@@ -389,7 +389,7 @@ Now, the `loading.tsx` file will only apply to your dashboard → overview page
389389

390390
### Creating multiple root layouts
391391

392-
To create multiple [root layouts](/docs/app/api-reference/file-conventions/layout#root-layouts), remove the top-level `layout.js` file, and add a `layout.js` file inside each route group. This is useful for partitioning an application into sections that have a completely different UI or experience. The `<html>` and `<body>` tags need to be added to each root layout.
392+
To create multiple [root layouts](/docs/app/api-reference/file-conventions/layout#root-layout), remove the top-level `layout.js` file, and add a `layout.js` file inside each route group. This is useful for partitioning an application into sections that have a completely different UI or experience. The `<html>` and `<body>` tags need to be added to each root layout.
393393

394394
<Image
395395
alt="Route Groups with Multiple Root Layouts"

‎apps/docs/content/en/docs/01-app/01-getting-started/03-layouts-and-pages.mdx‎

Lines changed: 43 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ related:
99
- app/api-reference/file-conventions/layout
1010
- app/api-reference/file-conventions/page
1111
- app/api-reference/components/link
12+
- app/api-reference/file-conventions/dynamic-routes
1213
---
1314

1415
Next.js uses **file-system based routing**, meaning you can use folders and files to define routes. This page will guide you through how to create layouts and pages, and link between them.
@@ -85,7 +86,7 @@ export default function DashboardLayout({ children }) {
8586
}
8687
```
8788

88-
The layout above is called a [root layout](/docs/app/api-reference/file-conventions/layout#root-layouts) because it's defined at the root of the `app` directory. The root layout is **required** and must contain `html` and `body` tags.
89+
The layout above is called a [root layout](/docs/app/api-reference/file-conventions/layout#root-layout) because it's defined at the root of the `app` directory. The root layout is **required** and must contain `html` and `body` tags.
8990

9091
## Creating a nested route
9192

@@ -172,7 +173,7 @@ export default function Page() {
172173
}
173174
```
174175

175-
Wrapping a folder name in square brackets (e.g. `[slug]`) creates a [dynamic route segment](/docs/app/building-your-application/routing/dynamic-routes) which is used to generate multiple pages from data. e.g. blog posts, product pages, etc.
176+
Wrapping a folder name in square brackets (e.g. `[slug]`) creates a [dynamic route segment](/docs/app/api-reference/file-conventions/dynamic-routes) which is used to generate multiple pages from data. e.g. blog posts, product pages, etc.
176177

177178
## Nesting layouts
178179

@@ -206,6 +207,46 @@ export default function BlogLayout({ children }) {
206207

207208
If you were to combine the two layouts above, the root layout (`app/layout.js`) would wrap the blog layout (`app/blog/layout.js`), which would wrap the blog (`app/blog/page.js`) and blog post page (`app/blog/[slug]/page.js`).
208209

210+
## Creating a dynamic segment
211+
212+
[Dynamic segments](/docs/app/api-reference/file-conventions/dynamic-routes) allow you to create routes that are generated from data. For example, instead of manually creating a route for each individual blog post, you can create a dynamic segment to generate the routes based on blog post data.
213+
214+
To create a dynamic segment, wrap the segment (folder) name in square brackets: `[segmentName]`. For example, in the `app/blog/[slug]/page.tsx` route, the `[slug]` is the dynamic segment.
215+
216+
```tsx filename="app/blog/[slug]/page.tsx" switcher
217+
export default async function BlogPostPage({
218+
params,
219+
}: {
220+
params: Promise<{ slug: string }>
221+
}) {
222+
const { slug } = await params
223+
const post = await getPost(slug)
224+
225+
return (
226+
<div>
227+
<h1>{post.title}</h1>
228+
<p>{post.content}</p>
229+
</div>
230+
)
231+
}
232+
```
233+
234+
```jsx filename="app/blog/[slug]/page.js" switcher
235+
export default async function BlogPostPage({ params }) {
236+
const { slug } = await params
237+
const post = await getPost(slug)
238+
239+
return (
240+
<div>
241+
<h1>{post.title}</h1>
242+
<p>{post.content}</p>
243+
</div>
244+
)
245+
}
246+
```
247+
248+
Learn more about [Dynamic Segments](/docs/app/api-reference/file-conventions/dynamic-routes).
249+
209250
## Linking between pages
210251

211252
You can use the [`<Link>` component](/docs/app/api-reference/components/link) to navigate between routes. `<Link>` is a built-in Next.js component that extends the HTML `<a>` tag to provide [prefetching](/docs/app/building-your-application/routing/linking-and-navigating#2-prefetching) and [client-side navigation](/docs/app/building-your-application/routing/linking-and-navigating#5-soft-navigation).

‎apps/docs/content/en/docs/01-app/01-getting-started/05-fonts.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export default function Layout({ children }) {
4747
}
4848
```
4949

50-
Fonts are scoped to the component they're used in. To apply a font to your entire application, add it to the [Root Layout](/docs/app/api-reference/file-conventions/layout#root-layouts).
50+
Fonts are scoped to the component they're used in. To apply a font to your entire application, add it to the [Root Layout](/docs/app/api-reference/file-conventions/layout#root-layout).
5151

5252
## Google fonts
5353

‎apps/docs/content/en/docs/01-app/01-getting-started/08-fetching-data.mdx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -234,6 +234,37 @@ export default function BlogPage() {
234234
}
235235
```
236236

237+
## Deduplicating requests with `React.cache`
238+
239+
Deduplication is the process of _preventing duplicate requests_ for the same resource during a render pass. It allows you to fetch the same data in different components while preventing multiple network requests to your data source.
240+
241+
If you are using `fetch`, requests can be deduplicated by adding `cache: 'force-cache'`. This means you can safely call the same URL with the same options, and only one request will be made.
242+
243+
If you are _not_ using `fetch`, and instead using an ORM or database directly, you can wrap your data fetch with the [React `cache`](https://react.dev/reference/react/cache) function.
244+
245+
```tsx filename="app/lib/data.ts" switcher
246+
import { cache } from 'react'
247+
import { db, posts, eq } from '@/lib/db'
248+
249+
export const getPost = cache(async (id: string) => {
250+
const post = await db.query.posts.findFirst({
251+
where: eq(posts.id, parseInt(id)),
252+
})
253+
})
254+
```
255+
256+
```jsx filename="app/lib/data.js" switcher
257+
import { cache } from 'react'
258+
import { db, posts, eq } from '@/lib/db'
259+
import { notFound } from 'next/navigation'
260+
261+
export const getPost = cache(async (id) => {
262+
const post = await db.query.posts.findFirst({
263+
where: eq(posts.id, parseInt(id)),
264+
})
265+
})
266+
```
267+
237268
## Streaming
238269

239270
> **Warning:** The content below assumes the [`dynamicIO` config option](/docs/app/api-reference/config/next-config-js/dynamicIO) is enabled in your application. The flag was introduced in Next.js 15 canary.

0 commit comments

Comments
 (0)