Cómo configurar Babel en Next.js

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

Agregar presets y plugins

Para comenzar, solo necesita definir un archivo .babelrc (o babel.config.js) en el directorio raíz de su proyecto. Si se encuentra dicho archivo, se considerará como la fuente de verdad, y por lo tanto 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": []
}

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

Para agregar presets/plugins sin configurarlos, puede 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, hágalo en el preset next/babel de la siguiente manera:

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

Para obtener más información sobre las opciones disponibles para cada configuración, visite el sitio de documentación de babel.

Es bueno saber:

• Next.js utiliza 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.