Babel

Examples

Next.js, React uygulamalarını ve sunucu tarafı kodunu derlemek için gereken her şeyi içeren next/babel ön ayarını uygulamanıza dahil eder. Ancak varsayılan Babel yapılandırmalarını genişletmek istiyorsanız, bu da mümkündür.

Adding Presets and Plugins

Başlamak için, projenizin kök dizininde bir .babelrc dosyası (veya babel.config.js) tanımlamanız yeterlidir. Böyle bir dosya bulunursa, gerçeğin kaynağı olarak kabul edilecektir ve bu nedenle Next.js'nin ihtiyaç duyduğu şeyi de tanımlaması gerekir, bu da next/babel ön ayarıdır.

İşte örnek bir .babelrc dosyası:

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

next/babel tarafından dahil edilen ön ayarlar hakkında bilgi edinmek için bu dosyaya göz atabilirsiniz.

Ön ayarları/eklentileri yapılandırmadan eklemek için bu şekilde yapabilirsiniz:

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

Customizing Presets and Plugins

Özel yapılandırmaya sahip ön ayarlar/eklentiler eklemek için, bunu next/babel ön ayarında şu şekilde yapın:

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

Her yapılandırma için mevcut seçenekler hakkında daha fazla bilgi edinmek için babel'in sitesindeki belgelerini ziyaret edin.

Bildiğim iyi oldu:

  • Next.js, sunucu tarafı derlemeleri için mevcut Node.js sürümünü kullanır.
  • "preset-env" adresindeki modules seçeneği false olarak tutulmalıdır, aksi takdirde webpack kod bölmesi kapatılır.