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
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -101,7 +101,7 @@ Then, add the following scripts to your `package.json` file:
101
101
```json filename="package.json"
102
102
{
103
103
"scripts": {
104
-
"dev": "next dev --turbopack",
104
+
"dev": "next dev",
105
105
"build": "next build",
106
106
"start": "next start",
107
107
"lint": "eslint",
@@ -112,12 +112,12 @@ Then, add the following scripts to your `package.json` file:
112
112
113
113
These scripts refer to the different stages of developing an application:
114
114
115
-
-`next dev --turbopack`: Starts the development server using Turbopack.
115
+
-`next dev`: Starts the development server using Turbopack (default bundler).
116
116
-`next build`: Builds the application for production.
117
117
-`next start`: Starts the production server.
118
118
-`eslint`: Runs ESLint.
119
119
120
-
Turbopack is stable for `dev`. For production builds, Turbopack is in beta. To try it, run `next build --turbopack`. See the [Turbopack docs](/docs/app/api-reference/turbopack) for status and caveats.
120
+
Turbopack is now the default bundler. To use Webpack run `next dev --webpack` or `next build --webpack`. See the [Turbopack docs](/docs/app/api-reference/turbopack) for configuration details.
Copy file name to clipboardExpand all lines: docs/01-app/02-guides/local-development.mdx
+10-4Lines changed: 10 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -48,15 +48,21 @@ On macOS, you can disable [Gatekeeper](https://support.apple.com/guide/security/
48
48
49
49
If you or your employer have configured any other Antivirus solutions on your system, you should inspect the relevant settings for those products.
50
50
51
-
### 2. Update Next.js and enable Turbopack
51
+
### 2. Update Next.js and use Turbopack
52
52
53
53
Make sure you're using the latest version of Next.js. Each new version often includes performance improvements.
54
54
55
-
Turbopack is a new bundler integrated into Next.js that can improve local performance.
55
+
Turbopack is now the default bundler for Next.js development and provides significant performance improvements over webpack.
56
56
57
57
```bash
58
58
npm install next@latest
59
-
npm run dev --turbopack
59
+
npm run dev # Turbopack is used by default
60
+
```
61
+
62
+
If you need to use Webpack instead of Turbopack, you can opt-in:
63
+
64
+
```bash
65
+
npm run dev --webpack
60
66
```
61
67
62
68
[Learn more about Turbopack](/blog/turbopack-for-development-stable). See our [upgrade guides](/docs/app/guides/upgrading) and codemods for more information.
@@ -146,7 +152,7 @@ Tailwind CSS version 3.4.8 or newer will warn you about settings that might slow
146
152
147
153
If you've added custom webpack settings, they might be slowing down compilation.
148
154
149
-
Consider if you really need them for local development. You can optionally only include certain tools for production builds, or explore moving to Turbopack and using[loaders](/docs/app/api-reference/config/next-config-js/turbopack#supported-loaders).
155
+
Consider if you really need them for local development. You can optionally only include certain tools for production builds, or explore using the default Turbopack bundler and configuring[loaders](/docs/app/api-reference/config/next-config-js/turbopack#configuring-webpack-loaders) instead.
> **Note**: This will require disabling Turbopack by removing`--turbopack` from your `dev` script.
546
+
> **Note**: This will require using Webpack by adding`--webpack` to your `dev` script.
547
547
548
548
### TypeScript Setup
549
549
@@ -557,10 +557,16 @@ Next.js automatically sets up TypeScript if you have a `tsconfig.json`. Make sur
557
557
558
558
## Bundler Compatibility
559
559
560
-
Both Create React App and Next.js default to webpack for bundling. Next.js also offers [Turbopack](/docs/app/api-reference/config/next-config-js/turbopack) for faster local development with:
560
+
Create React App uses webpack for bundling. Next.js now defaults to [Turbopack](/docs/app/api-reference/config/next-config-js/turbopack) for faster local development:
561
561
562
562
```bash
563
-
next dev --turbopack
563
+
next dev # Uses Turbopack by default
564
+
```
565
+
566
+
To use Webpack instead (similar to CRA):
567
+
568
+
```bash
569
+
next dev --webpack
564
570
```
565
571
566
572
You can still provide a [custom webpack configuration](/docs/app/api-reference/config/next-config-js/webpack) if you need to migrate advanced webpack settings from CRA.
Copy file name to clipboardExpand all lines: docs/01-app/03-api-reference/05-config/01-next-config-js/turbopack.mdx
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -186,8 +186,8 @@ In addition, a number of built-in conditions are supported:
186
186
187
187
-`browser`: Matches code that will execute on the client. Server code can be matched using `{not: 'browser'}`.
188
188
-`foreign`: Matches code in `node_modules`, as well as some Next.js internals. Usually you'll want to restrict loaders to `{not: 'foreign'}`. This can improve performance by reducing the number of files the loader is invoked on.
189
-
-`development`: Matches when using `next dev --turbopack`.
190
-
-`production`: Matches when using `next build --turbopack`.
189
+
-`development`: Matches when using `next dev`.
190
+
-`production`: Matches when using `next build`.
191
191
-`node`: Matches code that will run on the default Node.js runtime.
192
192
-`edge-light`: Matches code that will run on the [Edge runtime](/docs/app/api-reference/edge).
|`[directory]`| A directory in which to build the application. If not provided, current directory is used. |
49
-
|`--turbopack`| Starts development mode using [Turbopack](/docs/app/api-reference/turbopack). Also available as `--turbo`. |
49
+
|`--turbopack`| Force enable [Turbopack](/docs/app/api-reference/turbopack) (enabled by default). Also available as `--turbo`. |
50
+
|`--webpack`| Use Webpack instead of the default [Turbopack](/docs/app/api-reference/turbopack) bundler for development. |
50
51
|`-p` or `--port <port>`| Specify a port number on which to start the application. Default: 3000, env: PORT |
51
52
|`-H`or `--hostname <hostname>`| Specify a hostname on which to start the application. Useful for making the application available for other devices on the network. Default: 0.0.0.0 |
52
53
|`--experimental-https`| Starts the server with HTTPS and generates a self-signed certificate. |
@@ -74,7 +75,8 @@ The following options are available for the `next build` command:
|`[directory]`| A directory on which to build the application. If not provided, the current directory will be used. |
77
-
|`--turbopack`| Build using [Turbopack](/docs/app/api-reference/turbopack) (beta). Also available as `--turbo`. |
78
+
|`--turbopack`| Force enable [Turbopack](/docs/app/api-reference/turbopack) (enabled by default). Also available as `--turbo`. |
79
+
|`--webpack`| Build using Webpack. |
78
80
|`-d` or `--debug`| Enables a more verbose build output. With this flag enabled additional build output like rewrites, redirects, and headers will be shown. |
79
81
||
80
82
|`--profile`| Enables production [profiling for React](https://react.dev/reference/react/Profiler). |
Copy file name to clipboardExpand all lines: docs/01-app/03-api-reference/08-turbopack.mdx
+23-13Lines changed: 23 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -18,19 +18,31 @@ We built Turbopack to push the performance of Next.js, including:
18
18
19
19
## Getting started
20
20
21
-
To enable Turbopack in your Next.js project, add the `--turbopack` flag to the `dev` and `build` scripts in your `package.json` file:
21
+
Turbopack is now the **default bundler** in Next.js. No configuration is needed to use Turbopack:
22
22
23
23
```json filename="package.json" highlight={3}
24
24
{
25
25
"scripts": {
26
-
"dev": "next dev --turbopack",
27
-
"build": "next build --turbopack",
26
+
"dev": "next dev",
27
+
"build": "next build",
28
28
"start": "next start"
29
29
}
30
30
}
31
31
```
32
32
33
-
Currently, Turbopack for `dev` is stable, while `build` is in beta. We are actively working on production support as Turbopack moves closer to stability.
33
+
### Using Webpack instead
34
+
35
+
If you need to use Webpack instead of Turbopack, you can opt-in with the `--webpack` flag:
36
+
37
+
```json filename="package.json"
38
+
{
39
+
"scripts": {
40
+
"dev": "next dev --webpack",
41
+
"build": "next build --webpack",
42
+
"start": "next start"
43
+
}
44
+
}
45
+
```
34
46
35
47
## Supported features
36
48
@@ -204,7 +216,7 @@ For more in-depth configuration examples, see the [Turbopack config documentatio
204
216
If you encounter performance or memory issues and want to help the Next.js team diagnose them, you can generate a trace file by appending `NEXT_TURBOPACK_TRACING=1` to your dev command:
205
217
206
218
```bash
207
-
NEXT_TURBOPACK_TRACING=1 next dev --turbopack
219
+
NEXT_TURBOPACK_TRACING=1 next dev
208
220
```
209
221
210
222
This will produce a `.next/trace-turbopack` file. Include that file when creating a GitHub issue on the [Next.js repo](https://github.com/vercel/next.js) to help us investigate.
@@ -213,13 +225,11 @@ This will produce a `.next/trace-turbopack` file. Include that file when creatin
213
225
214
226
Turbopack is a **Rust-based**, **incremental** bundler designed to make local development and builds fast—especially for large applications. It is integrated into Next.js, offering zero-config CSS, React, and TypeScript support.
215
227
216
-
Stay tuned for more updates as we continue to improve Turbopack and add production build support. In the meantime, give it a try with `next dev --turbopack` and let us know your feedback.
0 commit comments