Next.js Compiler

SWC kullanılarak Rust dilinde yazılan Next.js Derleyicisi, Next.js'nin JavaScript kodunuzu üretim için dönüştürmesine ve küçültmesine olanak tanır. Bu, tek tek dosyalar için Babel'in ve çıktı paketlerini küçültmek için Terser'in yerini alır.

Next.js Derleyicisini kullanarak derleme Babel'den 17 kat daha hızlıdır ve Next.js sürüm 12'den beri varsayılan olarak etkinleştirilmiştir. Mevcut bir Babel yapılandırmanız varsa veya desteklenmeyen özellikler kullanıyorsanız, uygulamanız Next.js Derleyicisini devre dışı bırakacak ve Babel'i kullanmaya devam edecektir.

Why SWC?

SWC yeni nesil hızlı geliştirici araçları için genişletilebilir Rust tabanlı bir platformdur.

SWC derleme, küçültme, paket haline getirme ve daha fazlası için kullanılabilir ve genişletilmek üzere tasarlanmıştır. Kod dönüşümlerini (yerleşik veya özel) gerçekleştirmek için çağırabileceğiniz bir şeydir. Bu dönüşümleri çalıştırmak Next.js gibi daha üst düzey araçlar aracılığıyla gerçekleşir.

Birkaç nedenden dolayı SWC üzerine inşa etmeyi seçtik:

• Genişletilebilirlik: SWC, kütüphaneyi çatallamak veya tasarım kısıtlamalarını aşmak zorunda kalmadan Next.js içinde bir Crate olarak kullanılabilir.
• Performans: SWC'ye geçerek Next.js'de ~3 kat daha hızlı Hızlı Yenileme ve ~5 kat daha hızlı derleme elde etmeyi başardık, optimizasyon için daha fazla alan hala devam ediyor.
• WebAssembly: Rust'ın WASM desteği, olası tüm platformları desteklemek ve Next.js geliştirmeyi her yere taşımak için çok önemlidir.
• Topluluk: Rust topluluğu ve ekosistemi harika ve hala büyümeye devam ediyor.

Supported Features

Styled Components

babel-plugin-styled-components adresini Next.js Derleyicisine taşımak için çalışıyoruz.

Öncelikle Next.js'nin en son sürümüne güncelleyin: npm install next@latest. Ardından, next.config.js dosyanızı güncelleyin:

module.exports = {
  compiler: {
    styledComponents: true,
    },
  },
}

Gelişmiş kullanım durumları için, stil sahibi bileşenler derlemesi için ayrı özellikler yapılandırabilirsiniz.

Not: minify, transpileTemplateLiterals ve pure henüz uygulanmamıştır. İlerlemeyi buradan takip edebilirsiniz . ssr ve displayName dönüşümleri Next.js'de styled-components kullanmak için temel gereksinimdir.

module.exports = {
  compiler: {
    // see https://styled-components.com/docs/tooling#babel-plugin for more info on the options.
    styledComponents: {
      // Enabled by default in development, disabled in production to reduce file size,
      // setting this will override the default for all environments.
      displayName?: boolean,
      // Enabled by default.
      ssr?: boolean,
      // Enabled by default.
      fileName?: boolean,
      // Empty by default.
      topLevelImportPaths?: string[],
      // Defaults to ["index"].
      meaninglessFileNames?: string[],
      // Enabled by default.
      cssProp?: boolean,
      // Empty by default.
      namespace?: string,
      // Not supported yet.
      minify?: boolean,
      // Not supported yet.
      transpileTemplateLiterals?: boolean,
      // Not supported yet.
      pure?: boolean,
    },
  },
}

Jest

Next.js Derleyici testlerinizi aktarır ve Jest'i Next.js ile birlikte yapılandırmayı basitleştirir:

• .css, .module.css (ve bunların .scss varyantları) ve görüntü içe aktarımlarının otomatik olarak taklit edilmesi
• SWC kullanarak transform adresini otomatik olarak kurar
• .env (ve tüm varyantları) içine yükleme process.env
• Test çözümleme ve dönüşümlerden node_modules adresini yok sayar
• Test çözümlemeden .next adresini yok sayma
• Deneysel SWC dönüşümlerini etkinleştiren bayraklar için next.config.js adresini yükler

Öncelikle Next.js'nin en son sürümüne güncelleyin: npm install next@latest. Ardından, jest.config.js dosyanızı güncelleyin:

const nextJest = require('next/jest')
 
// Providing the path to your Next.js app which will enable loading next.config.js and .env files
const createJestConfig = nextJest({ dir: './' })
 
// Any custom config you want to pass to Jest
const customJestConfig = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
}
 
// createJestConfig is exported in this way to ensure that next/jest can load the Next.js configuration, which is async
module.exports = createJestConfig(customJestConfig)

Relay

Relay desteğini etkinleştirmek için:

module.exports = {
  compiler: {
    relay: {
      // This should match relay.config.js
      src: './',
      artifactDirectory: './__generated__',
      language: 'typescript',
      eagerEsModules: false,
    },
  },
}

Bilmekte fayda var: Next.js'de, pages dizinindeki tüm JavaScript dosyaları rota olarak kabul edilir. Bu nedenle, relay-compiler için artifactDirectory yapılandırma ayarlarını pages dışında belirtmeniz gerekir, aksi takdirde relay-compiler, __generated__ dizinindeki kaynak dosyanın yanında dosyalar oluşturacak ve bu dosya bir rota olarak kabul edilecek ve bu da üretim derlemelerini bozacaktır.

Remove React Properties

JSX özelliklerinin kaldırılmasına izin verir. Bu genellikle test için kullanılır. babel-plugin-react-remove-properties ile benzerdir.

Varsayılan regex ile eşleşen özellikleri kaldırmak için ^data-test:

module.exports = {
  compiler: {
    reactRemoveProperties: true,
  },
}

Özel özellikleri kaldırmak için:

module.exports = {
  compiler: {
    // The regexes defined here are processed in Rust so the syntax is different from
    // JavaScript `RegExp`s. See https://docs.rs/regex.
    reactRemoveProperties: { properties: ['^data-custom$'] },
  },
}

Remove Console

Bu dönüşüm, uygulama kodundaki tüm console.* çağrılarının kaldırılmasını sağlar ( node_modules değil). babel-plugin-transform-remove-console ile benzerdir.

Tüm console.* çağrılarını kaldırın:

module.exports = {
  compiler: {
    removeConsole: true,
  },
}

console.error dışında console.* çıktısını kaldırın:

module.exports = {
  compiler: {
    removeConsole: {
      exclude: ['error'],
    },
  },
}

Legacy Decorators

Next.js, jsconfig.json veya tsconfig.json içindeki experimentalDecorators adresini otomatik olarak algılayacaktır. Eski dekoratörler genellikle mobx gibi kütüphanelerin eski sürümleriyle kullanılır.

Bu bayrak yalnızca mevcut uygulamalarla uyumluluk için desteklenmektedir. Yeni uygulamalarda eski dekoratörlerin kullanılmasını önermiyoruz.

Öncelikle Next.js'nin en son sürümüne güncelleyin: npm install next@latest. Ardından, jsconfig.json veya tsconfig.json dosyanızı güncelleyin:

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

importSource

Next.js, jsconfig.json veya tsconfig.json içindeki jsxImportSource adresini otomatik olarak algılar ve bunu uygular. Bu genellikle Theme UI gibi kütüphanelerle kullanılır.

Öncelikle Next.js'nin en son sürümüne güncelleyin: npm install next@latest. Ardından, jsconfig.json veya tsconfig.json dosyanızı güncelleyin:

{
  "compilerOptions": {
    "jsxImportSource": "theme-ui"
  }
}

Emotion

@emotion/babel-plugin adresini Next.js Derleyicisine taşımak için çalışıyoruz.

Öncelikle Next.js'nin en son sürümüne güncelleyin: npm install next@latest. Ardından, next.config.js dosyanızı güncelleyin:

 
module.exports = {
  compiler: {
    emotion: boolean | {
      // default is true. It will be disabled when build type is production.
      sourceMap?: boolean,
      // default is 'dev-only'.
      autoLabel?: 'never' | 'dev-only' | 'always',
      // default is '[local]'.
      // Allowed values: `[local]` `[filename]` and `[dirname]`
      // This option only works when autoLabel is set to 'dev-only' or 'always'.
      // It allows you to define the format of the resulting label.
      // The format is defined via string where variable parts are enclosed in square brackets [].
      // For example labelFormat: "my-classname--[local]", where [local] will be replaced with the name of the variable the result is assigned to.
      labelFormat?: string,
      // default is undefined.
      // This option allows you to tell the compiler what imports it should
      // look at to determine what it should transform so if you re-export
      // Emotion's exports, you can still use transforms.
      importMap?: {
        [packageName: string]: {
          [exportName: string]: {
            canonicalImport?: [string, string],
            styledBaseImport?: [string, string],
          }
        }
      },
    },
  },
}

Minification

Next.js'nin swc derleyicisi v13'ten beri varsayılan olarak minifikasyon için kullanılmaktadır. Bu, Terser'den 7 kat daha hızlıdır.

Herhangi bir nedenle Terser'e hala ihtiyaç duyuluyorsa bu yapılandırılabilir.

module.exports = {
  swcMinify: false,
}

Module Transpilation

Next.js, yerel paketlerden (monorepos gibi) veya harici bağımlılıklardan (node_modules) bağımlılıkları otomatik olarak aktarabilir ve paketleyebilir. Bu, next-transpile-modules paketinin yerini alır.

module.exports = {
  transpilePackages: ['@acme/ui', 'lodash-es'],
}

Modularize Imports

Bu seçeneğin yerini optimizePackageImports Next.js 13.5'te. İçe aktarma yollarının manuel olarak yapılandırılmasını gerektirmeyen yeni seçeneği kullanmak için yükseltme yapmanızı öneririz.

Experimental Features

SWC Trace profiling

SWC'nin dahili dönüşüm izlerini chromium'un iz olay formatı olarak oluşturabilirsiniz.

module.exports = {
  experimental: {
    swcTraceProfiling: true,
  },
}

Etkinleştirildikten sonra swc, .next/ altında swc-trace-profile-${timestamp}.json olarak adlandırılan izler oluşturacaktır. Chromium'un iz görüntüleyicisi (chrome://tracing/, https://ui.perfetto.dev/) veya uyumlu flamegraph görüntüleyicisi(https://www.speedscope.app/) oluşturulan izleri yükleyebilir ve görselleştirebilir.

SWC Plugins (Experimental)

Dönüşüm davranışını özelleştirmek için swc'nin dönüşümünü SWC'nin wasm'de yazılmış deneysel eklenti desteğini kullanacak şekilde yapılandırabilirsiniz.

module.exports = {
  experimental: {
    swcPlugins: [
      [
        'plugin',
        {
          ...pluginOptions,
        },
      ],
    ],
  },
}

swcPlugins eklentileri yapılandırmak için bir dizi tuple kabul eder. Eklenti için bir tuple, eklentinin yolunu ve eklenti yapılandırması için bir nesne içerir. Eklentinin yolu bir npm modül paket adı veya .wasm ikilisinin mutlak yolu olabilir.

Unsupported Features

Uygulamanızda bir .babelrc dosyası olduğunda, Next.js tek tek dosyaları dönüştürmek için otomatik olarak Babel kullanmaya geri dönecektir. Bu, özel Babel eklentilerinden yararlanan mevcut uygulamalarla geriye dönük uyumluluk sağlar.

Özel bir Babel kurulumu kullanıyorsanız, lütfen yapılandırmanızı paylaşın. Mümkün olduğunca çok sayıda yaygın olarak kullanılan Babel dönüşümünü taşımak ve gelecekte eklentileri desteklemek için çalışıyoruz.

Version History