Next.js로 프로젝트를 TypeScript와 함께 시작하는 방법에 대해서 정리해보려 합니다!
Next.js 프로젝트 생성
리액트 프로젝트를 생성할 때, CRA를 사용했던 것 처럼 Next.js도 CNA를 사용해주면 됩니다.
npx create-next-app@latest터미널에 위의 명령어를 입력하면 아래와 같은 절차로 설정을 진행하게 됩니다.
📌 What is your project named?
프로젝트의 이름을 입력해주면 됩니다.
📌 Would you like to use TypeScript?
TypeScript의 사용여부에 대해서 묻고 있습니다.
만약 Yes를 선택하면, 프로젝트 설치 시 TypeScript를 사용할 수 있는 환경을 자동으로 만들어줍니다. (tsconfig.json, 각종 dependencies 등)
📌 Would you like to use ESLint?
ESLint를 사용할 지 말지에 대해 선택해주시면 됩니다.
📌 Would you like to use Tailwind CSS?
Tailwind CSS를 사용하여 스타일을 구현할 건지, module.css 방식으로 할 건지 선택하면 됩니다.
Yes를 선택하면, Tailwind CSS 사용에 필요한 파일 및 설정이 자동으로 맞춰집니다.
📌 Would you like to use 'src/' directory?
src 디렉토리를 사용할 것인지 물어보고 있습니다.
만약, 프로젝트 규모가 작아서 root 디렉토리에서 모든 작업을 하려면 No를 선택하면되고,
애플리케이션 소스코드를 분리시키고 싶다면 Yes를 선택하면 됩니다.
📌 Would you like to use App Router? (recommended)
기존 Next.js는 Page 라우팅 방식을 사용했었습니다.
하지만, Next.js 13버전 부터는 App routing 방식을 제공하고 있습니다.
Page라우팅과 App라우팅의 차이는 추후 다른 포스팅으로 정리할 예정입니다.
📌 Would you like to customize the default import alias (@/*)?
Yes로 할 경우, import를 할 때, 파일 경로를 @를 사용한 절대경로를 사용할 수 있습니다. (../../../file 같은 과정 간소화)
📌 Createing a new Next.js app in ~...
위의 모든 설정을 완료하면 프로젝트가 생성됩니다.
위 설정을 기반으로하여 디렉토리가 구성이 되고,
npm run dev위 명령어를 통해서 프로젝트를 실행시킬 수 있습니다.
