61f56f997c
Some checks failed
Test examples / Test Examples (20) (push) Has been cancelled
Test examples / Test Examples (22) (push) Has been cancelled
Lock Threads / action (push) Has been cancelled
Trigger Release / start (push) Has been cancelled
Stale issue handler / stale (push) Has been cancelled
Update Font Data / create-pull-request (push) Has been cancelled
build-and-deploy / deploy-target (push) Has been cancelled
build-and-deploy / build (push) Has been cancelled
build-and-deploy / stable - aarch64-unknown-linux-musl - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-unknown-linux-musl - node@16 (push) Has been cancelled
build-and-deploy / stable - aarch64-unknown-linux-gnu - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-unknown-linux-gnu - node@16 (push) Has been cancelled
build-and-deploy / stable - aarch64-pc-windows-msvc - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-pc-windows-msvc - node@16 (push) Has been cancelled
build-and-deploy / stable - aarch64-apple-darwin - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-apple-darwin - node@16 (push) Has been cancelled
build-and-deploy / build-wasm (nodejs) (push) Has been cancelled
build-and-deploy / build-wasm (web) (push) Has been cancelled
build-and-deploy / Deploy preview tarball (push) Has been cancelled
build-and-deploy / Potentially publish release (push) Has been cancelled
build-and-deploy / publish-turbopack-npm-packages (push) Has been cancelled
build-and-deploy / Deploy examples (push) Has been cancelled
build-and-deploy / thank you, build (push) Has been cancelled
build-and-deploy / Upload Turbopack Bytesize metrics to Datadog (push) Has been cancelled
Rspack Next.js development integration tests / Rspack integration tests (push) Has been cancelled
Rspack Next.js production integration tests / Rspack integration tests (push) Has been cancelled
Turbopack Next.js development integration tests / Next.js integration tests (push) Has been cancelled
Turbopack Next.js production integration tests / Next.js integration tests (push) Has been cancelled
Update Rspack test manifest / Update and upload Rspack development test manifest (push) Has been cancelled
Update Rspack test manifest / Update and upload Rspack production test manifest (push) Has been cancelled
Upload bundler test manifests to areweturboyet.com / Upload test results (push) Has been cancelled
Update React / create-pull-request (push) Has been cancelled
test-e2e-project-reset-cron / reset-test-project (push) Has been cancelled
Notify about the top 15 issues/PRs/feature requests (most reacted) in the last 90 days / run (push) Has been cancelled
67 lines
2.1 KiB
Plaintext
67 lines
2.1 KiB
Plaintext
---
|
|
title: How to configure Babel in Next.js
|
|
nav_title: Babel
|
|
description: Extend the babel preset added by Next.js with your own configs.
|
|
---
|
|
|
|
<details>
|
|
<summary>Examples</summary>
|
|
|
|
- [Customizing babel configuration](https://github.com/vercel/next.js/tree/canary/examples/with-custom-babel-config)
|
|
|
|
</details>
|
|
|
|
Next.js includes the `next/babel` preset to your app, which 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.
|
|
|
|
## Adding Presets and Plugins
|
|
|
|
To start, you only need to define a `.babelrc` file (or `babel.config.js`) in the root directory of your project. If such a file is found, it will be considered as the _source of truth_, and therefore it needs to define what Next.js needs as well, which is the `next/babel` preset.
|
|
|
|
Here's an example `.babelrc` file:
|
|
|
|
```json filename=".babelrc"
|
|
{
|
|
"presets": ["next/babel"],
|
|
"plugins": []
|
|
}
|
|
```
|
|
|
|
You can [take a look at this file](https://github.com/vercel/next.js/blob/canary/packages/next/src/build/babel/preset.ts) to learn about the presets included by `next/babel`.
|
|
|
|
To add presets/plugins **without configuring them**, you can do it this way:
|
|
|
|
```json filename=".babelrc"
|
|
{
|
|
"presets": ["next/babel"],
|
|
"plugins": ["@babel/plugin-proposal-do-expressions"]
|
|
}
|
|
```
|
|
|
|
## Customizing Presets and Plugins
|
|
|
|
To add presets/plugins **with custom configuration**, do it on the `next/babel` preset like so:
|
|
|
|
```json filename=".babelrc"
|
|
{
|
|
"presets": [
|
|
[
|
|
"next/babel",
|
|
{
|
|
"preset-env": {},
|
|
"transform-runtime": {},
|
|
"styled-jsx": {},
|
|
"class-properties": {}
|
|
}
|
|
]
|
|
],
|
|
"plugins": []
|
|
}
|
|
```
|
|
|
|
To learn more about the available options for each config, visit babel's [documentation](https://babeljs.io/docs/) site.
|
|
|
|
> **Good to know**:
|
|
>
|
|
> - Next.js uses the [**current** Node.js version](https://github.com/nodejs/release#release-schedule) for server-side compilations.
|
|
> - The `modules` option on `"preset-env"` should be kept to `false`, otherwise webpack code splitting is turned off.
|