[Next.js] Getting Started - Installation

Next.js 로고

Next.js 문서 읽기

Installation

시스템 요구사항

Node.js 18.17 이상
macOS, Windows(including WSL), Linux

---

자동 설치

create-next-app 을 통해 자동 설치

Good to know

• 기본으로 TypeScript, ESLint, Tailwind CSS 구성과 함께 제공
• 다른 파일들과 코드가 분리되도록 src 디렉토리를 구분하여 설정(option)

---

수동 설치

수동 설치 패키지

• next@latest
• react@latest
• react-dom@latest

 

package.json의 개발 단계별 스크립트

• dev: development 모드 실행
• build: production 모드를 사용한 빌드
• start: production 서버 시작
• lint: 내장 ESLint 설정 셋업

 

디렉토리 생성(Creating directories)

 

app directory

• App Router 추천: 커뮤니티 피드백을 기반으로 Pages Router를 발전시켜 리액트의 최신 기능을 사용 가능
• app 폴더 아래 layout.tsx, page.tsx 파일을 기반으로 routing
• Good to know: layout.tsx 파일은 next dev 명령어 실행 시 자동생성 되기도 함

pages directory(optional)

Pagest Router를 사용하려면 pages 폴더 생성

• pages/index.tsx: root page로 인식
• pages/_app.tsx: 글로벌 layout
• pages/_document.tsx: 최초 응답에 대응하는 페이지

Good to know

• App Router, Pages Router 동시 사용 가능
• App Router가 Pagest Router 보다 우선 적용!
• 혼동을 피하기 위해 하나의 라우터만 사용하는 것을 권장

 

Next.js Docs Getting Started Installation

 

Getting Started: Installation | Next.js