프론트엔드 개발 · 심화
대규모 Next.js 프로젝트를 Turborepo 모노레포로 분리할 때, 공통으로 사용하는 UI 컴포넌트 패키지(예: `@repo/ui`)를 Next.js 앱에서 트랜스파일(Transpile) 하려면 `next.config.js`에 어떤 속성을 추가해야 하나요?
힌트 · `transpilePackages: ['@repo/ui']` 속성을 추가하여 Next.js의 Webpack/Turbopack이 모노레포 내의 외부 패키지 코드까지 번들링하도록 허용해야 합니다.
transpilePackagesnext-transpile-moduleswebpackmodule.exports패키지 스코프
모범답안
네, 좋은 질문입니다. 대규모 Next.js 프로젝트를 Turborepo 모노레포로 분리했을 때, 공통 UI 컴포넌트 패키지를 사용하려면 next.config.js 파일에 transpilePackages 속성을 추가해야 합니다.
transpilePackages는 Next.js에게 특정 패키지들을 트랜스파일하도록 지시합니다. 예를 들어 @repo/ui 패키지를 사용한다면, transpilePackages: ['@repo/ui']와 같이 설정합니다.
이렇게 하면 Next.js의 Webpack 또는 Turbopack이 해당 패키지의 코드를 번들링 과정에 포함시켜, 모노레포 구조 내에서도 UI 컴포넌트가 문제없이 동작하도록 할 수 있습니다. 이 설정을 통해 Next.js 앱이 외부 패키지 내의 최신 JavaScript 기능을 이해하고 실행할 수 있게 됩니다.
읽었다면, 이제 직접 답해볼 차례예요
패스잇 앱에서 이 질문에 말로 답하면 AI가 꼬리질문까지 이어가며 1:1 코칭합니다.
함께 보는 Next.js 면접 질문
- Next.js 14의 Partial Prerendering(PPR)을 사용할 때, 특정 컴포넌트가 동적(Dynamic) 렌더링되도록 트리거하는 가장 보편적인 React API는 무엇인가요?
- Next.js의 Data Cache가 무효화(revalidate)될 때, 즉시 백그라운드에서 새 데이터를 가져오나요, 아니면 다음 요청이 올 때까지 기다렸다가 무효화 처리(On-demand)를 하나요?
- Edge Runtime 환경에서 작동하는 Middleware가 Vercel의 KV(Redis)나 데이터베이스에 접근할 때 지연 시간을 줄이기 위해 설계된 아키텍처적 위치의 특징은 무엇인가요?
- Node.js 기반의 Next.js 앱에서 메모리 누수(Memory Leak)가 의심될 때, 가장 먼저 모니터링해야 하는 V8 엔진의 메모리 영역은 무엇인가요?