사용자 정의 Webpack 구성

알아두면 좋은 점: webpack 구성 변경은 버전 관리 체계(Semantic Versioning)에 따라 호환성이 보장되지 않으므로, 변경 시 주의가 필요합니다.

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

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

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

next.config.js

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

webpack 함수는 서버(nodejs / edge 런타임)에 대해 두 번, 클라이언트에 대해 한 번, 총 세 번 실행됩니다. 이를 통해 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`

nextRuntime이 "edge" 또는 "nodejs"일 때 isServer가 true라는 점에 주의하세요. nextRuntime "edge"는 현재 미들웨어와 엣지 런타임의 서버 컴포넌트에만 사용됩니다.

useLightningcss webVitalsAttribution