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

2022-04-01 hit count image

TypeScript 기반의 Next.js에서 절대 경로를 통해 컴포넌트를 추가(import)하는 방법에 대해서 알아봅시다.

개요

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

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

블로그 리스트

이 블로그 포스트는 시리즈로 제작되었습니다. 다음은 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가 자동으로 열리면서 다음과 같은 화면이 표시됩니다.

create-next-app first app

완료

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

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

앱 홍보

책 홍보

스무디 한 잔 마시며 끝내는 React Native 책을 출판한지 벌써 2년이 다되었네요.
이번에도 좋은 기회가 있어서 스무디 한 잔 마시며 끝내는 리액트 + TDD 책을 출판하게 되었습니다.

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

스무디 한 잔 마시며 끝내는 React Native, 비제이퍼블릭
스무디 한 잔 마시며 끝내는 리액트 + TDD, 비제이퍼블릭
Posts