Custom Webpack Config

Bilmenizde fayda var: webpack yapılandırmasında yapılan değişiklikler semver tarafından kapsanmaz, bu nedenle riski size ait olmak üzere devam edin

Uygulamanıza özel webpack yapılandırması eklemeye devam etmeden önce Next.js'nin kullanım durumunuzu zaten desteklemediğinden emin olun:

Sıkça sorulan bazı özellikler eklenti olarak mevcuttur:

webpack kullanımımızı genişletmek için, next.config.js içinde yapılandırmasını genişleten bir işlev tanımlayabilirsiniz:

next.config.js

module.exports = {
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
    // Important: return the modified config
    return config
  },
}

webpack işlevi, iki kez sunucu (nodejs / edge runtime) ve bir kez de istemci için olmak üzere üç kez çalıştırılır. Bu, isServer özelliğini kullanarak istemci ve sunucu yapılandırması arasında ayrım yapmanızı sağlar.

webpack işlevinin ikinci bağımsız değişkeni, aşağıdaki özelliklere sahip bir nesnedir:

buildId: String - Yapılar arasında benzersiz bir tanımlayıcı olarak kullanılan yapı kimliği
dev: Boolean - Derlemenin geliştirme aşamasında yapılıp yapılmayacağını belirtir
isServer: Boolean - Sunucu tarafı derleme için true ve istemci tarafı derleme için false
nextRuntime: String | undefined - Sunucu tarafı derleme için hedef çalışma zamanı; "edge" veya "nodejs", istemci tarafı derleme için undefined.
defaultLoaders: Object - Next.js tarafından dahili olarak kullanılan varsayılan yükleyiciler:
- babel: Object - Varsayılan babel-loader yapılandırması

defaultLoaders.babel adresinin örnek kullanımı:

// Example config for adding a loader that depends on babel-loader
// This source was taken from the @next/mdx plugin source:
// https://github.com/vercel/next.js/tree/canary/packages/next-mdx
module.exports = {
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.mdx/,
      use: [
        options.defaultLoaders.babel,
        {
          loader: '@mdx-js/loader',
          options: pluginOptions.options,
        },
      ],
    })
 
    return config
  },
}

`nextRuntime`

nextRuntime "edge" veya "nodejs" olduğunda isServer 'un true olduğuna dikkat edin, nextRuntime "edge" şu anda yalnızca edge runtime'daki middleware ve Sunucu Bileşenleri içindir.