Next.js 커스텀 서버 환경에서 cannot find module 에러 해결 방법 feat. typescript

Next.js 커스텀 서버 환경에서 cannot find module 에러 해결 방법

Next.js의 TypeScript 커스텀 서버 환경에서 모듈 경로 문제는 `tsconfig-paths`를 사용해서 해결할 수 있습니다.

해결방법

1. 프로젝트 루트에 있는 tsconfig.json 파일에 baseUrl 및 paths 속성을 추가합니다.

{
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"],
      "@/pages/*": ["pages/*"],
      "@/utils/*": ["utils/*"]
    }
  },
  ...
}

2. tsconfig-paths 및 ts-node 패키지를 설치합니다.

npm install tsconfig-paths ts-node
// or yarn add tsconfig-paths ts-node

3. 이제 tsconfig-paths를 사용하여 경로 별칭을 해석할 수 있도록 커스텀 서버를 실행합니다. 프로젝트의 package.json 파일에서 다음과 같이 scripts를 수정합니다.

"scripts": {
  "dev": "ts-node -r tsconfig-paths/register server.ts"
}

-r tsconfig-paths/register 옵션을 사용하면 ts-node가 tsconfig.json 파일에 정의된 경로 별칭을 올바르게 해석할 수 있습니다. 

이제 커스텀 서버 환경에서 모듈의 절대 경로를 사용할 수 있습니다. 예를 들어, 다음과 같이 import 할 수 있습니다.

import MyComponent from '@/components/MyComponent';

이렇게 설정하면 Next.js의 TypeScript 커스텀 서버 환경에서 모듈 경로 문제를 해결할 수 있습니다.