turbo (experimental)

Turbopack은 다양한 파일을 변환하고 모듈을 해결하는 방법을 변경하도록 사용자 정의할 수 있습니다.

알아두면 좋은 점:

이러한 기능은 실험적이며 next --turbo에서만 작동합니다.

Next.js의 Turbopack은 기본 기능에 대해 로더나 로더 구성을 필요로 하지 않습니다. Turbopack은 CSS와 최신 JavaScript 컴파일에 대한 내장 지원을 제공하므로, @babel/preset-env를 사용하는 경우 css-loader, postcss-loader 또는 babel-loader가 필요하지 않습니다.

webpack loaders

내장된 것 이상의 로더 지원이 필요한 경우, 많은 webpack 로더가 Turbopack과 함께 작동합니다. 현재 몇 가지 제한 사항이 있습니다:

webpack 로더 API의 핵심 부분만 구현되었습니다. 현재는 인기 있는 일부 로더에 대한 충분한 커버리지가 있으며, 앞으로 API 지원을 확장할 예정입니다.
JavaScript 코드를 반환하는 로더만 지원됩니다. 스타일 시트나 이미지를 변환하는 로더는 현재 지원되지 않습니다.
webpack 로더에 전달되는 옵션은 순수 JavaScript 원시값, 객체 및 배열이어야 합니다. 예를 들어, require()된 플러그인 모듈을 옵션 값으로 전달하는 것은 불가능합니다.

로더를 구성하려면 설치한 로더의 이름과 옵션을 next.config.js에 추가하고, 파일 확장자를 로더 목록에 매핑하세요:

next.config.js

module.exports = {
  experimental: {
    turbo: {
      rules: {
        '*.svg': {
          loaders: ['@svgr/webpack'],
          as: '*.js',
        },
      },
    },
  },
}

알아두면 좋은 점: Next.js 버전 13.4.4 이전에는 experimental.turbo.rules가 experimental.turbo.loaders로 불렸으며, *.mdx 대신 파일 확장자 .mdx만 허용했습니다.

Supported loaders

다음 로더들은 Turbopack의 webpack 로더 구현과 함께 작동하는 것으로 테스트되었습니다:

Resolve aliases

next.config.js를 통해 Turbopack을 구성하여 webpack의 resolve.alias (opens in a new tab) 구성과 유사하게 모듈 해석을 별칭으로 수정할 수 있습니다.

Resolve alias를 구성하려면 next.config.js에서 가져온 패턴을 새로운 대상으로 매핑하세요:

next.config.js

module.exports = {
  experimental: {
    turbo: {
      resolveAlias: {
        underscore: 'lodash',
        mocha: { browser: 'mocha/browser-entry.js' },
      },
    },
  },
}

이렇게 하면 underscore 패키지의 가져오기가 lodash 패키지로 대체됩니다. 즉, import underscore from 'underscore'는 underscore 대신 lodash 모듈을 로드합니다.

Turbopack은 Node.js의 조건부 내보내기 (opens in a new tab)와 유사하게 이 필드를 통해 조건부 별칭을 지원합니다. 현재는 browser 조건만 지원됩니다. 위의 예에서, Turbopack이 브라우저 환경을 대상으로 할 때 mocha 모듈의 가져오기는 mocha/browser-entry.js로 별칭 처리됩니다.

Resolve extensions

next.config.js를 통해 Turbopack을 구성하여 webpack의 resolve.extensions (opens in a new tab) 구성과 유사하게 모듈을 사용자 정의 확장자로 해석할 수 있습니다.

Resolve extensions을 구성하려면 next.config.js의 resolveExtensions 필드를 사용하세요:

next.config.js

module.exports = {
  experimental: {
    turbo: {
      resolveExtensions: [
        '.mdx',
        '.tsx',
        '.ts',
        '.jsx',
        '.js',
        '.mjs',
        '.json',
      ],
    },
  },
}

이는 제공된 목록으로 원래의 resolve extensions을 덮어씁니다. 기본 확장을 포함하도록 해야 합니다.

Turbopack으로 webpack에서 앱을 마이그레이션하는 방법에 대한 자세한 정보와 가이드는 Turbopack의 webpack 호환성 문서 (opens in a new tab)를 참조하세요.

transpilePackages typescript