[Next.js] 절대 경로로 컴포넌트 추가

개요

이번 블로그 포스트에서는 TypeScript를 기반으로 하는 Next.js 프로젝트에서 절대 경로로 컴포넌트를 추가(import)하는 방법에 대해서 알아보겠습니다.

여기서 소개한 소스코드는 아래에 링크를 통해 확인할 수 있습니다.

GitHub: https://github.com/dev-yakuza/study-nextjs/tree/main/4.absolute_path

블로그 리스트

이 블로그 포스트는 시리즈로 제작되었습니다. 다음은 Next.js의 시리즈 리스트입니다.

TypeScript 기반 Next.js 프로젝트 생성

TypeScript가 적용된 Next.js에서 절대 경로를 사용하여 컴포넌트를 추가하는 방법을 확인하기 위해, 다음 명령어를 실행하여 TypeScript가 적용된 Next.js 프로젝트를 생성합니다.

npx create-next-app --typescript my-app

tsconfig.json 파일 수정

TypeScript가 적용된 Next.js에서 절대 경로를 사용하여 컴포넌트를 추가하기 위해서는 tsconfig.json 파일을 수정할 필요가 있습니다. tsconfig.json 파일을 열고 다음과 같이 baseUrl을 추가합니다.

{
  "compilerOptions": {
    ...
    "baseUrl": "./"
  },
  ...
}

이것으로 절대 경로를 사용하여 컴포넌트를 추가할 수 있는 모든 준비가 끝났습니다.

절대 경로를 사용하여 컴포넌트 추가하기

이제 이렇게 설정한 내용을 확인하기 위해, pages/index.tsx 파일을 열고 다음과 같이 수정합니다.

...
import styles from 'styles/Home.module.css'

const Home: NextPage = () => {
  return (
    ...
  )
}

export default Home

이와 같이 ../을 더이상 사용할 필요없이 루트 폴더를 기준으로 컴포넌트들을 추가할 수 있습니다.

실행

앞에서 추가한 내용이 잘 적용되는지 확인하기 위해 다음 명령어를 실행합니다.

npm run dev

위에 명령어가 정상적으로 실행되면, 브라우저에 http://localhost:3000가 자동으로 열리면서 다음과 같은 화면이 표시됩니다.

완료

이번 블로그 포스트에서는 TypeScript를 기반으로 하는 Next.js 프로젝트에서 절대 경로로 컴포넌트를 추가(import)하는 방법에 대해서 알아보았습니다. 이것으로 컴포넌트를 추가할 때, 어떤 폴더에서 가져오는지 쉽게 이해할 수 있게 되었습니다.

Github Sponsor

Buy me a coffee

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!

앱 홍보

지금 보고 계신 블로그를 작성하는 Deku가 개발한 앱을 한번 사용해보세요.
Deku가 개발한 앱은 Flutter로 개발되었습니다.

관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.

책 홍보

블로그를 운영하면서 좋은 기회가 생겨 책을 출판하게 되었습니다.

아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.

쿠팡: 구매하기
yes24: 구매하기
교보문고: 구매하기
알라딘: 구매하기

쿠팡: 구매하기
yes24: 구매하기
교보문고: 구매하기
알라딘: 구매하기

[심통]현장에서 바로 써먹는 리액트 with 타입스크립트 : 리액트와 스토리북으로 배우는 컴포넌트 주도 개발, 심통

쿠팡: 구매하기
yes24: 구매하기
교보문고: 구매하기
알라딘: 구매하기