Custom Webpack Config

알아두면 좋은 점: webpack 설정에 대한 변경은 서버에 의해 관리되지 않으므로 위험을 감수하고 진행하십시오.

애플리케이션에 사용자 정의 webpack 구성을 추가하기 전에 Next.js가 이미 귀하의 사용 사례를 지원하는지 확인하세요:

일부 자주 요청되는 기능은 플러그인으로 제공됩니다:

webpack의 사용을 확장하려면 next.config.js 내부에서 구성 요소를 확장하는 함수를 정의할 수 있습니다:

next.config.js

module.exports = {
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack },
  ) => {
    // 중요: 수정된 config를 반환해야 합니다.
    return config
  },
}

webpack 함수는 서버(Node.js / edge runtime)에서 두 번, 클라이언트에서 한 번 총 세 번 실행됩니다. 이를 통해 isServer 속성을 사용하여 클라이언트와 서버 구성을 구별할 수 있습니다.

webpack 함수의 두 번째 인수는 다음 속성을 가진 객체입니다:

buildId: String - 빌드 간의 고유 식별자로 사용되는 빌드 ID
dev: Boolean - 컴파일이 개발 환경에서 이루어질지 여부를 나타냅니다.
isServer: Boolean - 서버 측 컴파일의 경우 true, 클라이언트 측 컴파일의 경우 false
nextRuntime: String | undefined - 서버 측 컴파일을 위한 대상 런타임; "edge" 또는 "nodejs" 중 하나이며, 클라이언트 측 컴파일의 경우 undefined입니다.
defaultLoaders: Object - Next.js에서 내부적으로 사용되는 기본 로더:
- babel: Object - 기본 babel-loader 구성

defaultLoaders.babel의 사용 예시:

// babel-loader에 의존하는 로더를 추가하는 예제 구성
// 이 소스는 @next/mdx 플러그인 소스에서 가져왔습니다:
// 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`

isServer가 nextRuntime이 "edge" 또는 "nodejs"일 때 true인 것을 확인하십시오. nextRuntime "edge"는 현재 edge runtime에서 미들웨어와 서버 컴포넌트에만 해당됩니다.

urlImports webVitalsAttribution