프리온보딩 코스의 3주차 첫번째 과제를 진행하면서 처음으로 Next.js를 사용했다. Next.js와 타입스크립트를 사용해 프로젝트를 하기 위해 초기 세팅한 방법을 단계별로 정리해보았다.
어떤 프로젝트였는지 궁금하다면
👉 프로젝트 회고 포스팅 보러가기
Next.js + Typescript 세팅
1️⃣ Next.js 설치
npm init next-app 명령어로 설치 후 프로젝트 이름을 설정한다.
2️⃣ Next.js에 Typescript 설정하기
파일 생성
next가 추천하는 tsconfig 세팅을 사용하려면: 프로젝트 루트 디렉토리에 env.d.ts파일을 생성한다.
추천 세팅을 사용하지 않으려면:tsconfig.json을 생성해준다.
typescript 관련 패키지 설치
npm install --save-dev typescript @types/react @types/node
tsconfig.json 자동 setting
npm run dev명령어로 프로젝트를 실행하면 tsconfig.json이 자동으로 생성되어 setting이 완료된다.
3️⃣ styled-components 설치
npm install styled-components @types/styled-components styled-normalize
npm i styled-reset
4️⃣ .babelrc 설정
프로젝트를 시작하려다 보니 화면에 css로 적용한 스타일이 모두 사라지면서 이런 에러를 만났다.
Warning : Props 'className' did not match
왜 이럴까?
첫 페이지는 SSR로 작동하고 이후 CSR로 화면을 렌더링하게 되는데, 서버에서 받은 해시+클래스명과 이후 클라이언트에서 작동하는 해시+클래스 명이 달라지기 때문이다.
바벨 플러그인은 코드가 포함된 파일명과 스타일 정보를 담아 클래스명을 생성하기 때문에 서버와 클라이언트의 클래스명을 일치시켜주기 때문에 이 문제를 해결할 수 있다.
바벨 플러그인 설치하기
스타일 컴포넌트를 사용했기 때문에 아래와 같은 바벨 플러그인을 추가한다.
npm i babel-plugin-styled-components
그리고 .babelrc 파일을 생성해 바벨 설정을 추가한다.
{
"presets": ["next/babel"],
"plugins": [
[
"babel-plugin-styled-components",
{ "fileName": true, "displayName": true, "pure": true }
]
]
}Reference
