You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/01-app/01-getting-started/01-installation.mdx
+39-1Lines changed: 39 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,14 +5,52 @@ description: Learn how to create a new Next.js application with the `create-next
5
5
6
6
{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
7
7
8
+
<AppOnly>
9
+
10
+
Create a new Next.js app and run it locally.
11
+
12
+
## Quick start
13
+
14
+
1. Create a new Next.js app named `my-app`
15
+
2.`cd my-app` and start the dev server.
16
+
3. Visit `http://localhost:3000`.
17
+
18
+
```bash package="pnpm"
19
+
pnpm create next-app@latest my-app --yes
20
+
cd my-app
21
+
pnpm dev
22
+
```
23
+
24
+
```bash package="npm"
25
+
npx create-next-app@latest my-app --yes
26
+
cd my-app
27
+
npm run dev
28
+
```
29
+
30
+
```bash package="yarn"
31
+
yarn create next-app@latest my-app --yes
32
+
cd my-app
33
+
yarn dev
34
+
```
35
+
36
+
```bash package="bun"
37
+
bun create next-app@latest my-app --yes
38
+
cd my-app
39
+
bun dev
40
+
```
41
+
42
+
-`--yes` skips prompts using saved preferences or defaults. The default setup enables TypeScript, Tailwind, App Router, and Turbopack, with import alias `@/*`.
43
+
44
+
</AppOnly>
45
+
8
46
## System requirements
9
47
10
48
Before you begin, make sure your system meets the following requirements:
11
49
12
50
-[Node.js 18.18](https://nodejs.org/) or later.
13
51
- macOS, Windows (including WSL), or Linux.
14
52
15
-
## Automatic installation
53
+
## Create with the CLI
16
54
17
55
The quickest way to create a new Next.js app is using [`create-next-app`](/docs/app/api-reference/cli/create-next-app), which sets up everything automatically for you. To create a project, run:
Copy file name to clipboardExpand all lines: docs/01-app/01-getting-started/02-project-structure.mdx
+37-20Lines changed: 37 additions & 20 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -52,6 +52,8 @@ Top-level files are used to configure your application, manage dependencies, run
52
52
53
53
### Routing Files
54
54
55
+
Add `page` to expose a route, `layout` for shared UI such as header, nav, or footer, `loading` for skeletons, `error` for error boundaries and `route` for APIs.
@@ -66,35 +68,50 @@ Top-level files are used to configure your application, manage dependencies, run
66
68
67
69
### Nested routes
68
70
69
-
|||
70
-
| --------------- | -------------------- |
71
-
|`folder`| Route segment |
72
-
|`folder/folder`| Nested route segment |
71
+
Folders define URL segments. Nesting folders nests segments. Layouts at any level wrap their child segments. A route becomes public when a `page` or `route` file exists.
Parameterize segments with square brackets. Use `[segment]` for a single param, `[...segment]` for catch‑all, and `[[...segment]]` for optional catch‑all. Access values via the [`params`](/docs/app/api-reference/file-conventions/page#params-optional) prop.
|[`(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 |
93
+
Organize code without changing URLs with route groups [`(group)`](/docs/app/api-reference/file-conventions/route-groups#convention), and colocate non-routable files with private folders [`_folder`](#private-folders).
|[`@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 |
104
+
These features fit specific UI patterns, such as slot-based layouts or modal routing.
105
+
106
+
Use `@slot` for named slots rendered by a parent layout. Use intercept patterns to render another route inside the current layout without changing the URL, for example, to show a details view as a modal over a list.
|[`@folder`](/docs/app/api-reference/file-conventions/parallel-routes#slots)| Named slot | Sidebar + main content |
111
+
|[`(.)folder`](/docs/app/api-reference/file-conventions/intercepting-routes#convention)| Intercept same level | Preview sibling route in a modal |
112
+
|[`(..)folder`](/docs/app/api-reference/file-conventions/intercepting-routes#convention)| Intercept parent | Open parent child as overlay |
113
+
|[`(..)(..)folder`](/docs/app/api-reference/file-conventions/intercepting-routes#convention)| Intercept two levels | Deeply nested overlay |
114
+
|[`(...)folder`](/docs/app/api-reference/file-conventions/intercepting-routes#convention)| Intercept from root | Show arbitrary route in current view |
For dynamically rendered pages, if resolving `generateMetadata` might block rendering, Next.js streams the resolved metadata separately and injects it into the HTML as soon as it's ready.
121
+
For dynamically rendered pages, Next.js streams metadata separately, injecting it into the HTML once `generateMetadata` resolves, without blocking UI rendering.
121
122
122
-
Statically rendered pages don’t use this behavior since metadata is resolved at build time.
123
+
Streaming metadata improves perceived performance by allowing visual content to stream first.
124
+
125
+
Streaming metadata is **disabled for bots and crawlers** that expect metadata to be in the `<head>` tag (e.g. `Twitterbot`, `Slackbot`, `Bingbot`). These are detected by using the User Agent header from the incoming request.
126
+
127
+
You can customize or **disable** streaming metadata completely, with the [`htmlLimitedBots`](/docs/app/api-reference/config/next-config-js/htmlLimitedBots#disabling) option in your Next.js config file.
128
+
129
+
Statically rendered pages don’t use streaming since metadata is resolved at build time.
123
130
124
131
Learn more about [streaming metadata](/docs/app/api-reference/functions/generate-metadata#streaming-metadata).
Copy file name to clipboardExpand all lines: docs/01-app/02-guides/forms.mdx
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -50,7 +50,7 @@ export default function Page() {
50
50
}
51
51
```
52
52
53
-
> **Good to know:** When working with forms that have multiple fields, you can use the [`entries()`](https://developer.mozilla.org/en-US/docs/Web/API/FormData/entries) method with JavaScript's [`Object.fromEntries()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries). For example: `const rawFormData = Object.fromEntries(formData)`.
53
+
> **Good to know:** When working with forms that have multiple fields, use JavaScript's [`Object.fromEntries()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries). For example: `const rawFormData = Object.fromEntries(formData)`. Note that this object will contain extra properties prefixed with `$ACTION_`.
Copy file name to clipboardExpand all lines: docs/01-app/02-guides/json-ld.mdx
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,7 @@ nav_title: JSON-LD
4
4
description: Learn how to add JSON-LD to your Next.js application to describe your content to search engines and AI.
5
5
---
6
6
7
-
[JSON-LD](https://json-ld.org/) is a format for structured data that can be used by search engines and AI to to help them understand the structure of the page beyond pure content. For example, you can use it to describe a person, an event, an organization, a movie, a book, a recipe, and many other types of entities.
7
+
[JSON-LD](https://json-ld.org/) is a format for structured data that can be used by search engines and AI to help them understand the structure of the page beyond pure content. For example, you can use it to describe a person, an event, an organization, a movie, a book, a recipe, and many other types of entities.
8
8
9
9
Our current recommendation for JSON-LD is to render structured data as a `<script>` tag in your `layout.js` or `page.js` components.
0 commit comments