Next.js 프로젝트 생성
create-next-app으로 첫 Next.js 프로젝트를 만들고 실행합니다
환경 세팅이 완료되었으니, 이제 첫 번째 프로젝트를 만들어 보겠습니다. Next.js는 React 기반의 웹 프레임워크로, 바이브코딩으로 웹사이트를 만들기에 좋은 출발점입니다.
프로젝트 폴더 위치 결정
먼저 프로젝트를 저장할 폴더를 정합니다. PowerShell에서 아래 명령어를 실행합니다:
mkdir C:\Projects
cd C:\Projects폴더 위치는 자유롭게
C:\Projects는 예시입니다. 바탕화면이나 문서 폴더 등 원하는 곳에 만들어도 됩니다. 단, 경로에 한글이나 공백이 없는 것이 좋습니다.
create-next-app 실행
아래 명령어로 Next.js 프로젝트를 생성합니다:
npx create-next-app@latest my-first-app명령어 설명
npx: npm에 포함된 도구. 패키지를 다운로드하고 바로 실행합니다create-next-app@latest: Next.js 프로젝트 생성 도구의 최신 버전my-first-app: 프로젝트 이름 (원하는 이름으로 바꿔도 됩니다)
옵션 선택
명령어를 실행하면 프로젝트 이름을 물어본 뒤 설정 방법을 선택하는 화면이 나옵니다:
Would you like to use the recommended Next.js defaults?
> Yes, use recommended defaults
No, reuse previous settings
No, customize settings처음이라면 'Yes, use recommended defaults' 선택
추천 기본값(TypeScript + ESLint + Tailwind CSS + App Router + Turbopack)이 바이브코딩에 최적의 조합입니다. 그대로 선택하세요.
커스텀 설정을 선택하면 아래 질문들이 나옵니다:
| 질문 | 추천 선택 | 설명 |
|---|---|---|
| Would you like to use TypeScript? | Yes | 타입 안전성 제공, Claude Code와 잘 맞음 |
| Which linter would you like to use? | ESLint | 코드 품질 검사 도구 (Biome도 선택 가능) |
| Would you like to use Tailwind CSS? | Yes | CSS 스타일링 프레임워크 (v4) |
| Would you like to use React Compiler? | No | 아직 실험적 기능이므로 초보자는 No |
Would you like your code inside a src/ directory? | Yes | 코드 구조 정리에 도움 |
| Would you like to use App Router? | Yes | Next.js 최신 라우팅 방식 |
| Would you like to customize the import alias? | No | 기본값(@/*) 사용 |
프로젝트 구조
생성이 완료되면 my-first-app 폴더 안에 아래와 같은 파일들이 만들어집니다:
my-first-app/
├── src/
│ └── app/ ← 페이지 코드가 들어가는 곳
│ ├── layout.tsx ← 전체 레이아웃
│ ├── page.tsx ← 메인 페이지
│ └── globals.css ← 전체 스타일
├── public/ ← 이미지 등 정적 파일
├── package.json ← 프로젝트 설정
├── next.config.ts ← Next.js 설정
└── tsconfig.json ← TypeScript 설정Tailwind CSS v4 변경사항
Next.js 16에서는 Tailwind CSS v4가 기본 적용됩니다. 기존의 tailwind.config.ts 파일 대신 CSS 파일 내에서 @theme 지시어로 설정합니다.
지금은 몰라도 됩니다. Claude Code에게 물어보면 설명해줍니다.
지금은 모든 파일을 이해할 필요가 없습니다. Claude Code에게 물어보면 설명해줍니다.
개발 서버 실행
프로젝트 폴더로 이동하고 개발 서버를 실행합니다:
cd my-first-app
npm run dev아래와 같은 메시지가 나타나면 성공입니다:
▲ Next.js (turbo)
- Local: http://localhost:3000브라우저에서 확인
웹 브라우저를 열고 주소창에 아래 주소를 입력합니다:
http://localhost:3000Next.js 기본 페이지가 표시되면 프로젝트가 정상적으로 동작하는 것입니다.
개발 서버 종료 방법
터미널에서 Ctrl + C를 누르면 개발 서버가 종료됩니다. 서버가 종료되면 브라우저에서 페이지가 더 이상 표시되지 않습니다.