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 |
0 commit comments