[Next.js] Next.js 프로젝트 시작하기 (App Router ver.)

 

 

Next 프로젝트를 App Router 버전에서 시작하는 법을 알아보자!

 

---

 

 

 

 1. VsCode에서 프로젝트 폴더를 연다. 

 

 

 

 

 2. 터미널에 아래와 같은 명령어를 입력한다. 

 

npx라는 도구를 이용해서 새로운 next 앱을 생성하는 명령어이다.

npx create-next-app@latest section03

 

* npx : "Node Package Executor" → npm.js.com에 등록돼있는 최근버전의 Node 패키지를 다운로드 없이 바로 실행시키는 명령어

* create-next-app : Next.js 공식문서에서 안내하고 있는 새로운 Next 앱을 생성하는 Node.js 패키지

* @latest : 현재 설치하려는 Next.js의 최신 버전

* section03 : 패키지의 이름 

 

 

 

 3. 옵션 설정하기 

 

 

* TS, ESLint, Tailwind CSS → 프로젝트에 따라 선택적으로 체크

* `src/` directory → src 디렉토리를 사용해도 되고, 안해도 됨. 선택의 영역임

* App Router → Yes!

* Turbopack→ 2024.10월 기준 아직은 실험적인 단계라 NO!

* import alias → 절대 경로로 모듈을 import 할 수 있도록 도와주는 기능을 커스텀 할 것인가? NO를 선택하면, import alias 기능을 그대로 사용 가능함
ex. import A from "@/components/~" 이런식으로 사용 가능 (@는 /src 경로를 의미함)

 

 

 

 4. 설치 완료하기 

 

정상적으로 설치되면 아래와 같이 터미널에 뜨고 section03 파일이 생성된다.

 

 

 

 5. 폴더 다시 열기 

 

VsCode에서 폴더 열기를 누르고 다시 section03 폴더를 연다.

 

 

 

 

 6.  터미널 창에 아래와 같은 명령어를 입력한다. 

 

npm run dev

* npm run dev :  개발모드로 Next App 실행

 

 

 

 

 7. http://localhost:3000/ 에 들어가면 아래와 같이 페이지가 뜬다. 

 

 

 

Page Router 버전 시작하기는 아래 게시글을 참고하세요!

https://dev-ini.tistory.com/264

[Next.js] Next.js 프로젝트 시작하기 (Page Router ver.)