Comment configurer Babel dans Next.js

Next.js inclut le préréglage next/babel à votre application, qui contient tout ce qui est nécessaire pour compiler des applications React et du code côté serveur. Mais si vous souhaitez étendre les configurations Babel par défaut, c'est également possible.

Ajout de préréglages et plugins

Pour commencer, vous devez simplement définir un fichier .babelrc (ou babel.config.js) à la racine de votre projet. Si un tel fichier est trouvé, il sera considéré comme la source de vérité, et doit donc également inclure ce dont Next.js a besoin, à savoir le préréglage next/babel.

Voici un exemple de fichier .babelrc :

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

Vous pouvez consulter ce fichier pour en savoir plus sur les préréglages inclus dans next/babel.

Pour ajouter des préréglages/plugins sans les configurer, vous pouvez procéder ainsi :

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

Personnalisation des préréglages et plugins

Pour ajouter des préréglages/plugins avec une configuration personnalisée, faites-le sur le préréglage next/babel comme suit :

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

Pour en savoir plus sur les options disponibles pour chaque configuration, consultez le site de documentation de Babel.

Bon à savoir :

• Next.js utilise la version actuelle de Node.js pour les compilations côté serveur.
• L'option modules de "preset-env" doit rester à false, sinon le découpage de code (code splitting) de webpack est désactivé.