Skip to content

Commit 0761a92

Browse files
authored
Turbopack: Document new advanced turbopack.rule.*.condition config options (#83246)
~I'm looking for review/feedback, but **DO NOT MERGE UNTIL NEXT 16.0 IS RELEASED.** These APIs are not available on 15.5, and merging it now would be confusing to users. If you want to try it out, use a recent canary release.~ I've been informed that docs are not currently tracking canary, so this is safe to merge. Documented the new configuration syntax added in #82857 that should ship with Next 16.0. ## Rendered <details> <summary>Toggle</summary> <img src="https://app.graphite.dev/user-attachments/assets/b2404001-6e3f-47c9-9704-160fcfb1438d.png" width=1000> </details>
1 parent 823685a commit 0761a92

File tree

2 files changed

+83
-3
lines changed
  • crates/next-core/src/next_shared/webpack_rules
  • docs/01-app/03-api-reference/05-config/01-next-config-js

2 files changed

+83
-3
lines changed

crates/next-core/src/next_shared/webpack_rules/mod.rs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ pub(crate) mod sass;
3030
// Note: If you add a field here, make sure to also add it in:
3131
// - The typescript definition in `packages/next/src/server/config-shared.ts`
3232
// - The zod schema in `packages/next/src/server/config-schema.ts`
33+
// - The documentation in `docs/01-app/03-api-reference/05-config/01-next-config-js/turbopack.mdx`
3334
//
3435
// Note: Sets of conditions could be stored more efficiently as a bitset, but it's probably not used
3536
// in enough places for it to matter.

docs/01-app/03-api-reference/05-config/01-next-config-js/turbopack.mdx

Lines changed: 82 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ module.exports = nextConfig
4242

4343
### Options
4444

45-
The following options are available for the `turbo` configuration:
45+
The following options are available for the `turbopack` configuration:
4646

4747
| Option | Description |
4848
| ------------------- | ----------------------------------------------------------------------- |
@@ -97,7 +97,7 @@ If you need loader support beyond what's built in, many webpack loaders already
9797
- Only loaders that return JavaScript code are supported. Loaders that transform files like stylesheets or images are not currently supported.
9898
- Options passed to webpack loaders must be plain JavaScript primitives, objects, and arrays. For example, it's not possible to pass `require()` plugin modules as option values.
9999

100-
To configure loaders, add the names of the loaders you've installed and any options in `next.config.js`, mapping file extensions to a list of loaders.
100+
To configure loaders, add the names of the loaders you've installed and any options in `next.config.js`, mapping file extensions to a list of loaders. Rules are evaluated in order.
101101

102102
Here is an example below using the [`@svgr/webpack`](https://www.npmjs.com/package/@svgr/webpack) loader, which enables importing `.svg` files and rendering them as React components.
103103

@@ -114,6 +114,10 @@ module.exports = {
114114
}
115115
```
116116

117+
> **Good to know**: Globs used in the `rules` object match based on file name, unless the glob contains a `/` character, which will cause it to match based on the full project-relative file path. Windows file paths are normalized to use unix-style `/` path separators.
118+
>
119+
> Turbopack uses a modified version of the [Rust `globset` library](https://docs.rs/globset/latest/globset/).
120+
117121
For loaders that require configuration options, you can use an object format instead of a string:
118122

119123
```js filename="next.config.js"
@@ -136,7 +140,81 @@ module.exports = {
136140
}
137141
```
138142

139-
> **Good to know**: Prior to Next.js version 13.4.4, `turbo.rules` was named `turbo.loaders` and only accepted file extensions like `.mdx` instead of `*.mdx`.
143+
> **Good to know**: Prior to Next.js version 13.4.4, `turbopack.rules` was named `turbo.loaders` and only accepted file extensions like `.mdx` instead of `*.mdx`.
144+
145+
### Advanced webpack loader conditions
146+
147+
You can further restrict where a loader runs using the advanced `condition` syntax:
148+
149+
```js filename="next.config.js"
150+
module.exports = {
151+
turbopack: {
152+
rules: {
153+
// '*' will match all file paths, but we restrict where our
154+
// rule runs with a condition.
155+
'*': {
156+
condition: {
157+
all: [
158+
// 'foreign' is a built-in condition.
159+
{ not: 'foreign' },
160+
// 'path' can be a RegExp or a glob string. A RegExp matches
161+
// anywhere in the full project-relative file path.
162+
{ path: /^img\/[0-9]{3}\// },
163+
{
164+
any: [
165+
{ path: '*.svg' },
166+
// 'content' is always a RegExp, and can match
167+
// anywhere in the file.
168+
{ content: /\<svg\W/ },
169+
],
170+
},
171+
],
172+
},
173+
loaders: ['@svgr/webpack'],
174+
as: '*.js',
175+
},
176+
},
177+
},
178+
}
179+
```
180+
181+
- Supported boolean operators are `{all: [...]}`, `{any: [...]}` and `{not: ...}`.
182+
- Supported customizable operators are `{path: string | RegExp}` and `{content: RegExp}`. If `path` and `content` are specified in the same object, it acts as an implicit `and`.
183+
184+
In addition, a number of built-in conditions are supported:
185+
186+
- `default`: Always matched. A no-op.
187+
- `browser`: Matches code that will execute on the client. Server code can be matched using `{not: 'browser'}`.
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`.
191+
- `node`: Matches code that will run on the default Node.js runtime.
192+
- `edge-light`: Matches code that will run on the [Edge runtime](/docs/app/api-reference/edge).
193+
194+
Rules can be an object or an array of objects. An array is often useful for modeling disjoint conditions:
195+
196+
```js filename="next.config.js"
197+
module.exports = {
198+
turbopack: {
199+
rules: {
200+
'*.svg': [
201+
{
202+
condition: 'browser',
203+
loaders: ['@svgr/webpack'],
204+
as: '*.js',
205+
},
206+
{
207+
condition: { not: 'browser' },
208+
loaders: [require.resolve('./custom-svg-loader.js')],
209+
as: '*.js',
210+
},
211+
],
212+
},
213+
},
214+
}
215+
```
216+
217+
> **Good to know**: All matching rules are executed in order.
140218
141219
### Resolving aliases
142220

@@ -181,5 +259,6 @@ For more information and guidance for how to migrate your app to Turbopack from
181259

182260
| Version | Changes |
183261
| -------- | ----------------------------------------------- |
262+
| `16.0.0` | `turbopack.rules.*.condition` was added. |
184263
| `15.3.0` | `experimental.turbo` is changed to `turbopack`. |
185264
| `13.0.0` | `experimental.turbo` introduced. |

0 commit comments

Comments
 (0)