[NextJS] NextJS 14 프로젝트 생성

NextJS 프로젝트 생성

 

NextJS의 공식 홈페이지에 접속하면 최신 버전의 NextJS를 생성할 수 있는 명령어가 나온다. 터미널에서 프로젝트 생성을 원하는 폴더로 이동 후 'npx create-next-app@latest'를 입력하자. 입력하면 아래의 그림과 같이 Project 이름을 설정하는 화면이 나타난다. 원하는 이름을 설정하자. 

 

NextJS 프로젝트 이름 설정

 

프로젝트 설정을 하면 Yes or No로 몇가지 질문이 나타난다.

1. 다음 타입스크립트 설정을 할 것인가 물어본다. (Yes)
2. ESLint를 설정 할 것인가 물어본다. (Yes)
3. Tailwind CSS를 설정할 것인가 물어본다. (NextJS 자체에 다양한 스타일이 존재하여 Tailwind에 전문가가 아니라면 비추천, Yes)
4. 'src/' directory를 사용할 것인지 물어본다. (src 폴더에 conponents와 hooks 등으 폴더를 사용할 것인가 물어보는 것이다. 폴더 구조는 취향이니 알아서 선택, Yes)
5. App Router를 사용할 것인지 물어본다. (해당 옵션은 NextJS 응용 프로그램을 만드는 다른 두 가지 방법을 나타낸다. No를 선택하면 Pages Router를 Yes를 선택하면 App Router를 사용한다. App Router를 사용하는 것을 추천한다, Yes)
6. 마지막으로 기본 import문을 @이나 *으로 사용할 것인지 물어본다. (Yes) 

아래의 이미지는 실제 질문이다.

 

프로젝트 생성 확인

프로젝트가 생성되었다면 해당 프로젝트로 이동하며 'npm run dev'라는 명령어를 입력해보자. 아래와 같은 화면이 나온다면 정상적으로 실행된 것이다. 추가적으로 ESLint, TailWind 등을 설정하였다면 해당 config 파일도 함께 생성되니 확인해보자.

 

NextJS 14 초기 실행 화면