[TIL] Next.js + TypeScript 초기 세팅 #1

◎ 회사에서 내가 맡은 프로젝트는 CRA로 만들어져서 SEO가 잘되어있지 않는 이슈가 있어서,

이참에 Next.js를 사용하여 ssr 방식으로 프로젝트를 재구성할 기회가 생겼다.

next.js를 언젠간 한번 해보고 싶었는데 좋은 기회이다. 

 

1. Next.js?

◎ Next.js를 사용 이유 중 핵심이 SSR 방식인 점이다.

렌더링 방식은 블로그에 정리돼있으므로 생략하겠다.

React를 사용하여 완전한 웹 애플리케이션을 빌드하려면 고려해야 할 중요한 부분이 많다.

 

 - 코드는 webpack과 같은 번들러를 사용하여 번들로 묶고 Babel과 같은 컴파일러를 사용하여 변환해야 한다.

 - 코드 분할과 같은 프로덕션 최적화를 수행해야 한다.

 - 성능 및 SEO를 위해 일부 페이지를 정적으로 사전 렌더링 할 수 있다. 서버 측 렌더링 또는 클라이언트 측 렌더링을 사용할 수도 있다.

 

Next.js는 위의 모든 문제에 대한 솔루션을 제공한다.

 

 - 직관적인 페이지 기반 라우팅 시스템 (pages 폴더가 곧 Router)

 - 사전 렌더링, 정적 생성 및 서버 사이드 렌더링 (SSR) 모두 페이지별로 지원된다.

 - 더 빠른 페이지 로드를 위한 자동 코드 분할

 - 내장 CSS 및 Sass 지원 및 모든 CSS-in-JS 라이브러리 지원

 

2. 설정

◎ 먼저 개발 환경을 준비해야 한다.

 - Node.js 10.13 이상의 버전이 필요하다.

2-1. Next.js 설치

npx create-next-app 프로젝트명

2-1. 개발 서버 실행

cd 해당 프로젝트명
npm run dev

- 개발 서버를 실행하면 http://localhost:3000을 열면 시작된다.

2-2. 실행 화면

 

◎ 아직 설정이 끝이 아니다.. 우선 Next.js에서 Typescript를 적용하는 방법을 익힌 후, 자세한 설정을 해보자.

 

3. Typescript 적용

◎ Typescript를 시작하려면 빈 root에다 tsconfig.json 파일을 만들어야 한다.

그리고 개발서버를 시작해보면 다음과 같은 경고가 표시된다.

 

TypeScript를 사용하는데 필요한 패키지가 설치되어 있지 않는 것이다.

위의 방식에 따라 Typescript를 설치하자

npm install --save-dev typescript @types/react @types/node 

설치하고 다시 실행하면 잘 실행된다.

원래 빈 파일이었던 tsconfig.json은 다음과 같이 설정이 된다.

 

하지만 위의 설정은 기본으로 되어있는 것이고, 사용자가 직접 정의할 수 있다.

 

※ 참조

nextjs.org/learn/basics/create-nextjs-app?utm_source=next-site&utm_medium=homepage-cta&utm_campaign=next-website

Learn | Next.js