오늘은 next.js로 초기 세팅하는 방법을 알아보려고 합니다. 강의로 따라하기만 해봤고 저 혼자서 초기 세팅은 처음이라 하나씩 알아보면서 세팅해줬습니다.
바로 세팅하러 가봅시다
1. NEXT.JS 초기 세팅
(1) next.js 설치하기
npx create-next-app@latest app-name
app-name에는 자신의 프로젝트 이름을 적어줍니다. 현재 폴더에서 생성할거면 ./을 해주면 됩니다.
(2) 설정하기
이제 위의 사진처럼 차례대로 하나씩 물어봐줄텐데 당황하지 않고 잘 읽어보고 선택해주면 됩니다!
-
Would you like to use TypeScript?
타입스크립트 사용할 건지 물어보는건데 저는 TypeScript로 개발해서 Yes 해줬습니다
-
Would you like to use ESLint?
ESLint를 포함할 것인지 묻는것이다.
ESLint란 코드 퀄리티를 보장하도록 해주는 도구!
ESLint를 사용하면 프로젝트에서 코드를 작성하는 방식을 일관성이 있는 방식으로 구현하도록 도와줍니다.
-
Would you like to use Tailwind CSS?
Tailwind CSS를 사용하는지 물어보는건데 저는 Sass를 사용할거라서 No로 해줬습니다.
-
Would you like your code inside a src/ directory?
src폴더 안에다가 소스코드를 포함할 것인지 물어보는 것입니다. 저는 src 안에 코드들을 작성해줄거라서 Yes로 해줬습니다.
-
Would you like to use App Router?
최신 App Router (/app 디렉토리 기반) 방식 사용할 것인지 묻고 있습니다.
-
Would you like to use Turbopack for 'next dev'?
번들러로 Turbopack을 사용할 것인지 묻고있습니다. 아직 개발중이라 나는 webpack을 쓰기 위해 No 했습니다.
-
Would you like to customize the import alias(@/* by default)?
Next.js에서 import 경로를 커스텀할지 묻는것입니다.
기본적으로 Next.js는 @/를 사용해서 src/ 디렉토리의 파일을 가져올 수 있습니다. 만약 커스텀을 할거라면 Yes를 하면되고 안하고 @/만 사용할거라면 No해주면 됩니다.
다 설정해주면 next.js 설치 완료!
2. Sass 설치
npm i sass명령어로 sass 설치해주면 sass도 사용가능하다!
이렇게 첫 프로젝트 세팅을 완료했다. 이제 개발하러 고고
