버전

Node.js 20.9 이상이 필요하다. 터미널에서 node -v로 확인한다.

폴더

명령은 새 이름을 받아 그 폴더를 만든다. 학습 허브, 이미 파일이 있는 정적 퍼블 폴더, Spring Boot 프로젝트 안에서는 실행하지 않는다. 비어 있지 않은 폴더에 앱 파일을 섞으면 원본과 설정이 한곳에 겹친다.

npx create-next-app@latest 프로젝트이름

고르는 항목

질문	이 변환에서
App Router	쓴다. 페이지는 app 폴더에 둔다.
TypeScript	고르지 않고 JavaScript를 쓴다. 강좌 예제와 같고, 변환 결과를 읽기 쉽다.
Tailwind	고르지 않는다. 이미 만든 CSS를 그대로 가져가기 위해서다. Tailwind를 켜 두면 여백 규칙이 두 벌이 된다.
ESLint	켠다. 변환 중 문법 오류를 잡는 데 쓴다.

생성이 끝나면 그 폴더에서 npm run dev를 실행한다. 브라우저에 기본 안내 페이지가 열리면 환경은 준비된 것이다. 그 안내 페이지는 변환하면서 지운다.

앱을 만드는 일반 절차와 라우팅은 Next.js · 시작·라우팅에 있다. 여기의 차이는, 화면 원본이 이미 HTML로 있다는 점이다.