project bootstrap

create-next-app 선택은 폴더 구조와 다음 장의 기준 파일을 고정한다

명령을 실행한 뒤 나오는 질문은 취향 설문이 아니라 실습 경로를 결정하는 초기 계약입니다. TypeScript, ESLint, App Router, src 디렉터리 선택이 생성 결과와 실행 명령으로 이어집니다.

command npx create-next-app@latest my-next-app
Yes TypeScript, ESLint, App Router, src directory 상황 선택 Tailwind CSS는 실습 스타일 기준에 맞춰 결정 기본 유지 import alias는 예제 경로와 맞게 단순하게 둠
실행 명령 create-next-app my-next-app 질문 응답 기준 TypeScript 타입 오류 조기 노출 ESLint 저장 코드 품질 경계 App Router src/app 예약 파일 기준 src directory 앱 코드와 설정 분리 Tailwind 스타일 기준과 맞을 때만 생성되는 기준 파일 my-next-app/ src/app/layout.tsx src/app/page.tsx 첫 확인 지점 cd my-next-app npm run dev localhost:3000 실패 신호 App Router가 아니면 다음 장 경로가 달라짐 복구 기준 src/app 존재 여부와 scripts를 먼저 확인 핵심 질문 답변은 이후 파일 경로의 계약이다
1 명령 실행 npx create-next-app@latest my-next-app
2 질문 답변 TypeScript, ESLint, App Router, src directory를 기준값으로 고정한다.
3 생성 결과 src/app/layout.tsx와 page.tsx가 다음 장의 기준이다.
4 서버 확인 npm run dev 후 localhost:3000에서 첫 화면을 본다.

반드시 맞출 선택

TypeScript

props, 라우트 파일, 설정 코드의 오류를 실습 초반에 잡는다.

App Router

교재가 사용하는 src/app 기반 라우팅 구조와 맞춘다.

src directory

앱 코드와 루트 설정 파일을 분리해 다음 장의 파일 위치를 고정한다.

상황에 따라 고를 선택

ESLint

기본 품질 검사를 켜 두면 저장 직후 문제를 발견하기 쉽다.

Tailwind CSS

스타일 실습 조건이 다르면 파일 구성이 달라지므로 필요할 때만 켠다.

import alias

팀 규칙이 없다면 기본값을 유지해 예제 경로와 설명을 단순하게 둔다.

생성 후 바로 보는 증거

폴더

my-next-app 아래에 package.json과 src가 있다.

파일

src/app/page.tsx, layout.tsx가 다음 장의 시작점이다.

명령

npm run dev가 개발 서버 주소를 출력하면 초기화가 끝난 것이다.

1 명령 실행 생성 도구가 프로젝트 질문을 띄운다.
2 선택 고정 라우터와 파일 위치 기준을 맞춘다.
3 의존성 설치 Next.js와 React 패키지가 내려받아진다.
4 폴더 이동 cd my-next-app으로 작업 위치를 바꾼다.
5 서버 확인 localhost:3000에서 첫 화면을 확인한다.
경로 질문

src/app이 없으면 App Router 또는 src directory 선택을 다시 확인한다.

실행 질문

package.json의 scripts에 dev가 있는지 먼저 본다.

학습 질문

예제 설명과 폴더 구조가 다르면 새 프로젝트보다 선택값을 먼저 의심한다.