4. Next.js에서의 절대경로 설정 방법

---

---

🛣️ 절대경로 설정 방법

---

비교적 짧은 포스팅이 될 것 같다.
생각보다 해결 방법이 단순했기 때문이다.

1. tsconfig.json파일을 연다

2. 기존 코드를 아래와 같이 수정한다.

   {
     "compilerOptions": {
       "target": "es5",
       "lib": ["dom", "dom.iterable", "esnext"],
       "allowJs": true,
       "skipLibCheck": true,
       "strict": true,
       "forceConsistentCasingInFileNames": true,
       "noEmit": true,
       "esModuleInterop": true,
       "module": "esnext",
       "moduleResolution": "node",
       "resolveJsonModule": true,
       "isolatedModules": true,
       "jsx": "preserve",
       "incremental": true,
     },
     "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
     "exclude": ["node_modules"]
   }

   // 수정본
   
   {
     "compilerOptions": {
       "target": "es5",
       "lib": ["dom", "dom.iterable", "esnext"],
       "allowJs": true,
       "skipLibCheck": true,
       "strict": true,
       "forceConsistentCasingInFileNames": true,
       "noEmit": true,
       "esModuleInterop": true,
       "module": "esnext",
       "moduleResolution": "node",
       "resolveJsonModule": true,
       "isolatedModules": true,
       "jsx": "preserve",
       "incremental": true,
   		// 이 baseUrl과 paths를 추가해주면 된다.
       "baseUrl": ".",
       "paths": {
         "@": ["src/*"]
       }
     },
     "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
     "exclude": ["node_modules"]
   }

---

수정 결과

아래와 같이 절대경로가 잘 적용되는 것을 확인할 수 있다!

---