Next.js Doc 번역 [next.config.js Options : turbo]

원본 링크: https://nextjs.org/docs/app/api-reference/next-config-js/turbo

 

next.config.js Options: turbo | Next.js

위 문서에 대한 번역을 진행합니다.
번역시점은 05-23으로 공식문서의 추가적인 업데이트가 있을 수 있습니다.
DeepL translator와 ChatGPT에 의존해서 번역하고 있습니다.
번역체를 자연스러운 어투로 옮기는 과정에서 오역이 발생할 수 있는 점 미리 알립니다.
이에 대한 피드백은 댓글로 알려주시면 감사하겠습니다.
한글로 번역하는 것이 더 어색한 경우 원문을 먼저 표기하겠습니다.

---

turbo (Experimental)

경고: 이 기능은 실험 단계이며 next --turbo에서만 작동합니다.

---

webpack loaders

현재 Turbopack은 웹팩 로더 API의 하위 집합을 지원하므로 일부 웹팩 로더를 사용하여 Turbopack에서 코드를 변환할 수 있습니다.

로더를 구성하려면 설치한 로더의 이름과 옵션을 next.config.js에 추가하여 파일 확장명을 로더 목록에 매핑합니다:

// next.config.js

module.exports = {
  experimental: {
    turbo: {
      loaders: {
        // Option format
        '.md': [
          {
            loader: '@mdx-js/loader',
            options: {
              format: 'md',
            },
          },
        ],
        // Option-less format
        '.mdx': ['@mdx-js/loader'],
      },
    },
  },
};

그런 다음 위의 구성이 주어지면 앱에서 변환된 코드를 사용할 수 있습니다:

import MyDoc from './my-doc.mdx';

 export default function Home() {
  return <MyDoc />;
}

---

Resolve Alias

next.config.js 를 통해 터보팩은 웹팩의 [resolve.alias](<https://webpack.js.org/configuration/resolve/#resolvealias>) 구성과 유사하게 별칭을 통해 모듈 해상도를 수정하도록 구성할 수 있습니다.

별칭 확인을 구성하려면 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 모듈이 로드됩니다.

터보팩은 또한 이 필드를 통해 Node.js의 conditional exports와 유사한 조건부 앨리어싱을 지원합니다.

현재는 browser 조건만 지원됩니다. 위의 경우, 터보팩이 브라우저 환경을 대상으로 할 때 mocha 모듈을 가져오는 별칭은 mocha/browser-entry.js 로 지정됩니다.

웹팩에서 터보팩으로 앱을 마이그레이션하는 방법에 대한 자세한 정보 및 지침은 Turbopack's documentation on webpack compatibility 문서를 참조하세요.