turbo

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

알아두면 좋은 점:

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

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

webpack 로더

내장된 것 이상의 로더 지원이 필요한 경우, 많은 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와 같은 파일 확장자만 받았습니다.

지원되는 로더

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

경로 별칭

next.config.js를 통해 Turbopack을 구성하여 webpack의 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의 조건부 내보내기와 유사하게 이 필드를 통한 조건부 별칭 지정을 지원합니다. 현재는 browser 조건만 지원됩니다. 위의 경우, Turbopack이 브라우저 환경을 대상으로 할 때 mocha 모듈의 가져오기는 mocha/browser-entry.js로 별칭 지정됩니다.

확장자 설정

next.config.js를 통해 Turbopack을 구성하여 webpack의 resolve.extensions 구성과 유사하게 사용자 정의 확장자로 모듈을 해결할 수 있습니다.

확장자 설정을 구성하려면 next.config.js에서 resolveExtensions 필드를 사용하세요:

next.config.js

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

이는 제공된 목록으로 원래의 확장자 설정을 덮어씁니다. 기본 확장자를 포함해야 합니다.

Turbopack으로 webpack에서 앱을 마이그레이션하는 방법에 대한 자세한 정보와 지침은 Turbopack의 webpack 호환성에 대한 문서를 참조하세요.

transpilePackages typedRoutes