Babel

Next.js inclut le préréglage next/babel pour 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 de 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 devra donc 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 la 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 être maintenue à false, sinon le découpage de code (code splitting) de webpack est désactivé.