Babel

Next.js incluye el preset next/babel en tu aplicación, que contiene todo lo necesario para compilar aplicaciones React y código del lado del servidor. Pero si deseas extender las configuraciones predeterminadas de Babel, también es posible.

Agregar presets y plugins

Para comenzar, solo necesitas definir un archivo .babelrc (o babel.config.js) en el directorio raíz de tu proyecto. Si se encuentra dicho archivo, se considerará como la fuente de verdad, por lo que debe definir lo que Next.js necesita también, que es el preset next/babel.

Aquí un ejemplo de archivo .babelrc:

{
  "presets": ["next/babel"],
  "plugins": []
}

Puedes consultar este archivo para aprender sobre los presets incluidos en next/babel.

Para agregar presets/plugins sin configurarlos, puedes hacerlo de esta manera:

{
  "presets": ["next/babel"],
  "plugins": ["@babel/plugin-proposal-do-expressions"]
}

Personalización de presets y plugins

Para agregar presets/plugins con configuración personalizada, hazlo en el preset next/babel de la siguiente manera:

{
  "presets": [
    [
      "next/babel",
      {
        "preset-env": {},
        "transform-runtime": {},
        "styled-jsx": {},
        "class-properties": {}
      }
    ]
  ],
  "plugins": []
}

Para aprender más sobre las opciones disponibles para cada configuración, visita el sitio de documentación de Babel.

Es bueno saber:

• Next.js usa la versión actual de Node.js para compilaciones del lado del servidor.
• La opción modules en "preset-env" debe mantenerse en false, de lo contrario se desactiva la división de código (code splitting) de webpack.