[Next] TypeScript & Next.js & styled-components 초기 세팅 (CNA)

Next.js와 TypeScript를 사용하기 위한 초기 세팅 방법

_app.tsx, _document.tsx는 다음 블로그에서 다루도록 하겠습니다.

CNA (create-next-app)

CRA처럼 CNA를 사용하여 프로젝트를 생성할 수 있습니다.

npx create-next-app [프로젝트명]

package.json의 script 확인

• "dev": "next dev", // 개발 서버로 실행하여 현재 코드 기반하여 실행
• "build": "next build", // 현재 코드를 기반하여 빌드
• "start": "next start" // 빌드된 내용 기반하여 실행한다.

파일 형식 TypeScript 형식으로 변경

• 각 파일의 형식 js, jsx는 ts, tsx로 변경

각 라이브러리 설치

• 타입스크립트 라이브러리를 설치

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

• 스타일드 컴포넌트 설치

npm i styled-components @types/styled-components

프로젝트 실행 확인

• npm run dev

CNA에서 생성한 index.tsx 파일의 실행을 확인한다.