Skip to content

Commit

Permalink
Chore/stable swc compiler options (#34074)
Browse files Browse the repository at this point in the history
Mark some previously experimental swc compiler options as stable under a new `compiler` option

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`
  • Loading branch information
padmaia committed Feb 10, 2022
1 parent 6c869cf commit 01ee7e0
Show file tree
Hide file tree
Showing 16 changed files with 354 additions and 100 deletions.
85 changes: 44 additions & 41 deletions docs/advanced-features/compiler.md
Expand Up @@ -7,9 +7,10 @@ description: Learn about the Next.js Compiler, written in Rust, which transforms
<details open>
<summary><b>Version History</b></summary>

| Version | Changes |
| --------- | --------------------------------------------------------------- |
| `v12.0.0` | Next.js Compiler [introduced](https://nextjs.org/blog/next-12). |
| Version | Changes |
| --------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| `v12.1.0` | Added support for Styled Components, Jest, Relay, Remove React Properties, Legacy Decorators, Remove Console, and jsxImportSource. |
| `v12.0.0` | Next.js Compiler [introduced](https://nextjs.org/blog/next-12). |

</details>

Expand All @@ -30,21 +31,7 @@ We chose to build on SWC for a few reasons:
- **WebAssembly:** Rust's support for WASM is essential for supporting all possible platforms and taking Next.js development everywhere.
- **Community:** The Rust community and ecosystem are amazing and still growing.

## Experimental Features

### Minification

You can opt-in to using the Next.js compiler for minification. This is 7x faster than Terser.

```js
// next.config.js

module.exports = {
swcMinify: true,
}
```

If you have feedback about `swcMinify`, please share it on the [feedback discussion](https://github.com/vercel/next.js/discussions/30237).
## Supported Features

### Styled Components

Expand All @@ -56,7 +43,7 @@ First, update to the latest version of Next.js: `npm install next@latest`. Then,
// next.config.js

module.exports = {
experimental: {
compiler: {
// ssr and displayName are configured by default
styledComponents: true,
},
Expand Down Expand Up @@ -101,7 +88,7 @@ To enable [Relay](https://relay.dev/) support:
```js
// next.config.js
module.exports = {
experimental: {
compiler: {
relay: {
// This should match relay.config.js
src: './',
Expand All @@ -123,7 +110,7 @@ To remove properties matching the default regex `^data-test`:
```js
// next.config.js
module.exports = {
experimental: {
compiler: {
reactRemoveProperties: true,
},
}
Expand All @@ -134,30 +121,14 @@ To remove custom properties:
```js
// next.config.js
module.exports = {
experimental: {
compiler: {
// The regexes defined here are processed in Rust so the syntax is different from
// JavaScript `RegExp`s. See https://docs.rs/regex.
reactRemoveProperties: { properties: ['^data-custom$'] },
},
}
```

### Legacy Decorators

Next.js will automatically detect `experimentalDecorators` in `jsconfig.json` or `tsconfig.json` and apply that. This is commonly used with older versions of libraries like `mobx`.

This flag is only supported for compatibility with existing applications. We do not recommend using legacy decorators in new applications.

First, update to the latest version of Next.js: `npm install next@latest`. Then, update your `jsconfig.json` or `tsconfig.json` file:

```js
{
"compilerOptions": {
"experimentalDecorators": true
}
}
```

### Remove Console

This transform allows for removing all `console.*` calls in application code (not `node_modules`). Similar to `babel-plugin-transform-remove-console`.
Expand All @@ -167,7 +138,7 @@ Remove all `console.*` calls:
```js
// next.config.js
module.exports = {
experimental: {
compiler: {
removeConsole: true,
},
}
Expand All @@ -178,14 +149,30 @@ Remove `console.*` output except `console.error`:
```js
// next.config.js
module.exports = {
experimental: {
compiler: {
removeConsole: {
exclude: ['error'],
},
},
}
```

### Legacy Decorators

Next.js will automatically detect `experimentalDecorators` in `jsconfig.json` or `tsconfig.json`. Legacy decorators are commonly used with older versions of libraries like `mobx`.

This flag is only supported for compatibility with existing applications. We do not recommend using legacy decorators in new applications.

First, update to the latest version of Next.js: `npm install next@latest`. Then, update your `jsconfig.json` or `tsconfig.json` file:

```js
{
"compilerOptions": {
"experimentalDecorators": true
}
}
```

### importSource

Next.js will automatically detect `jsxImportSource` in `jsconfig.json` or `tsconfig.json` and apply that. This is commonly used with libraries like Theme UI.
Expand All @@ -195,11 +182,27 @@ First, update to the latest version of Next.js: `npm install next@latest`. Then,
```js
{
"compilerOptions": {
"jsxImportSource": true
"jsxImportSource": 'preact'
}
}
```

## Experimental Features

### Minification

You can opt-in to using the Next.js compiler for minification. This is 7x faster than Terser.

```js
// next.config.js

module.exports = {
swcMinify: true,
}
```

If you have feedback about `swcMinify`, please share it on the [feedback discussion](https://github.com/vercel/next.js/discussions/30237).

## Unsupported Features

When your application has a `.babelrc` file, Next.js will automatically fall back to using Babel for transforming individual files. This ensures backwards compatibility with existing applications that leverage custom Babel plugins.
Expand Down
9 changes: 9 additions & 0 deletions errors/ignored-compiler-options.md
@@ -0,0 +1,9 @@
# ignored-compiler-options

#### Why This Error Occurred

Options under the `compiler` key in `next.config.js` only apply to the new Rust based compiler and will be ignored if Babel is used instead. This message will appear if Next.js detects a Babel configuration file while `compiler` options are configured in `next.config.js`

### Useful Links

- [Next.js Compiler](https://nextjs.org/docs/advanced-features/compiler)

0 comments on commit 01ee7e0

Please sign in to comment.