NextJS에 typescript 설치하기 (NextJS React 프로젝트 02)

 

이전 글에서 NextJS 프로젝트를 생성하고 구조를 간단히 살펴보았습니다.

 

이번에는 생성한 NextJS에 typescript를 설치하려고 하는데요,

바로 패키지를 다운로드해도 되지만 NextJS 공식 문서에서는 조금 다른 방식을 소개합니다.

 

 

 

1. tsconfig.json 파일 생성

바로 프로젝트 루트에 tsconfig.json이라는 파일을 만드는 방법입니다.

명령어를 통해서 해도 되고, 직접 파일을 생성해도 됩니다.

명령어를 쓴다면 다음과 같겠죠

touch tsconfig.json

 

NextJS는 자동적으로 디폴트 값으로 해당 파일을 설정해줍니다.

 

 

 

2. next 실행하기

그리고 next를 실행하면 되는데요, 명령어 npm run dev나 yarn dev로 실행하시면 됩니다.

npm run dev

 

그럼 아마 다음과 같이 설치해야하는 문구와 가이드를 안내해줍니다.

(저는 yarn dev로 실행했는데, npm run dev로 실행하셔도 똑같습니다)

 

 

 

 

3. typescript, @types/react 패키지 설치

이후 에러 메시지에 나타난 대로 typescript와 @types/react 패키지를 설치하시면 됩니다.

(yarn 명령어를 사용한다면 yarn add --dev typescript @types/react)

npm install --only=dev typescript @types/react

 

 

 

4. ts, tsx 파일 사용하기

사실 이제 끝입니다!

기존의 js, jsx 파일을 ts, tsx 파일로 바꿔서 사용하면 됩니다.

한 번 pages의 index.js 파일을 index.tsx로 변경해볼까요?

 

 

 

참고. build하고 변경된 파일 확인하기

그리고 build를 하면 타입 체킹을 하게 됩니다 (개발 중간에 확인하는 것을 더 장려하지만요)

npm run build

 

그리고 build를 하면 몇 가지 파일에 변경이 있다는 것을 확인할 수 있습니다.

 

 

(1) tsconfig.json

우선 tsconfig.json 파일에 내용이 추가됩니다.

바로 typescript 설정에 관한 내용이 추가된 것인데요, 직접 커스텀 옵션을 추가하거나 디폴트로 false 값인 strict 모드를 true로 바꾸실 수도 있습니다.

 

(저는 개인적으로 true로 사용하는 것을 선호합니다)

 

 

(2) next-env.d.ts

그리고 next-env.d.ts라는 새로운 파일이 루트에 추가된 것을 확인할 수 있습니다.

NextJS의 내용이 typescript 컴파일러에 추가될 수 있도록 하는 내용인데, 삭제하시면 안됩니다!

(수정해도 된다고는 하는데 굳이 건드릴 일은 없을 것입니다)

 

 

이렇게 typescript를 NextJS 프로젝트에 추가해 보았습니다! 이후에는 typescript를 활용해서 NextJS와 React 프로젝트를 발전시켜나가겠습니다.