c02d86ec52
[ch1981]
Add the “Supported Browsers and Features” page. The content is taken mostly from the blog posts: [9.4](https://nextjs.org/blog/next-9-4), [9.3](https://nextjs.org/blog/next-9-3), and [9.1.7](https://nextjs.org/blog/next-9-1-7).
- This page is added under “Basic Features” on the sidebar.
- It still links to `with-polyfills` example, but [this example was updated recently](04fbe0b756). I simplified the README.
- Removed the FAQ section on supported browsers.
- On ["Customizing Babel Config"](https://nextjs.org/docs/advanced-features/customizing-babel-config), remove the list of presets which were outdated and instead link to [the preset file](https://github.com/vercel/next.js/blob/canary/packages/next/build/babel/preset.ts) so it’s always up to date.
52 lines
1.7 KiB
Markdown
52 lines
1.7 KiB
Markdown
---
|
|
description: Extend the babel preset added by Next.js with your own configs.
|
|
---
|
|
|
|
# Customizing Babel Config
|
|
|
|
<details>
|
|
<summary><b>Examples</b></summary>
|
|
<ul>
|
|
<li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-custom-babel-config">Customizing babel configuration</a></li>
|
|
</ul>
|
|
</details>
|
|
|
|
Next.js includes the `next/babel` preset to your app, it includes everything needed to compile React applications and server-side code. But if you want to extend the default Babel configs, it's also possible.
|
|
|
|
To start, you only need to define a `.babelrc` file at the top of your app, if such file is found, we're going to consider it the _source of truth_, therefore it needs to define what Next.js needs as well, which is the `next/babel` preset.
|
|
|
|
Here's an example `.babelrc` file:
|
|
|
|
```json
|
|
{
|
|
"presets": ["next/babel"],
|
|
"plugins": []
|
|
}
|
|
```
|
|
|
|
You can [take a look at this file](https://github.com/vercel/next.js/blob/canary/packages/next/build/babel/preset.ts) to learn about the presets included by `next/babel`.
|
|
|
|
To configure these presets/plugins, **do not** add them to `presets` or `plugins` in your custom `.babelrc`. Instead, configure them on the `next/babel` preset, like so:
|
|
|
|
```json
|
|
{
|
|
"presets": [
|
|
[
|
|
"next/babel",
|
|
{
|
|
"preset-env": {},
|
|
"transform-runtime": {},
|
|
"styled-jsx": {},
|
|
"class-properties": {}
|
|
}
|
|
]
|
|
],
|
|
"plugins": []
|
|
}
|
|
```
|
|
|
|
To learn more about the available options for each config, visit their documentation site.
|
|
|
|
> Next.js uses the **current** Node.js version for server-side compilations.
|
|
|
|
> The `modules` option on `"preset-env"` should be kept to `false`, otherwise webpack code splitting is turned off.
|