[Next.js]절대경로 설정하는 방법

본 포스팅은 Next.js에서 절대경로를 설정하는 방법을 소개합니다.

개요

하기 유튜브 동영상을 참고하면서 클론 코딩을 진행하는 도중 13:54의 “@/scss/index.scss” 파일을 import하지 못하는 문제가 발생했다.

다음과 같이 index.scss 파일을 찾을 수 없다는 컴파일 메세지가 출력된다.

위 문제를 해결하기 위해 Next.js 공식 문서와 다른 사람들이 작성한 포스팅을 참고하였다. 이제, Next.js에서 별칭(alias)를 사용하여 파일을 쉽게 import하는 방법을 알아보자.

상대경로와 절대경로

Next.js 공식문서에서도 설명하고 있지만, 폴더가 많이 중첩된 경우 import 문이 복잡하므로 폴더 구조를 분석하는데 많은 어려움을 겪을 수 있다.

상대경로

예를 들어, 절대 경로를 설정하지 않은 경우 다음과 같이 ../을 사용하여 모듈을 import할 수 있다.

import { Button } from '../../../components/button

절대경로

상대경로의 문제점은 중첩된 폴더가 많은 경우 ../도 많아진다는 것이다. ../을 생략하기 위해 JS 기반인 경우 jsconfig.json 파일, TS 기반인 경우 tsconfig.json 파일의 baseUrl 옵션을 “.”로 설정한다.

다음은 tsconfig.json 파일의 baseUrl 옵션을 “.”로 설정하였다.

{
  "compilerOptions": {
    "baseUrl": "."
    // ...
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

이제 ../을 생략하고 더 짧은 코드를 작성할 수 있다.

import { Button } from 'components/button

절대경로 별칭 설정하기

폴더별로 경로를 관리한다고 가정하자.

Next.js 13에서 다음과 같은 프로젝트 구조가 있다고 가정하자.

root
  ├─app
  │  ├─components
  │  ├─scss
  │  ├─hook
  │  ├─layout.tsx
  │  ├─page.tsx
  └─public

components, scss, hook 폴더에 별칭(alias)를 설정하고 layout.tsx 파일에서 다음과 같이 import한다고 가정해보자.

import CustomButton from "@/components/CustomButton";
import useCustomHook from "@/hook/useCustomHook";
import "@/scss/index.scss"

JS 기반인 경우 jsconfig.json 파일, TS 기반인 경우 tsconfig.json 파일의 baseUrl 옵션을 “.”로 설정하고 paths 옵션을 아래와 같이 설정한다.

{
  "compilerOptions": {
    "baseUrl": ".",
    // 모듈 별칭 설정
    "paths": {
      "@/components/*": ["components/*"],
      "@/scss/*": ["scss/*"],
      "@/hook/*": ["hook/*"]
    }
    // ...
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}