create-next-app으로 프로젝트 만들기

Next.js는 create-next-app이라는 공식 CLI 도구를 제공합니다. 터미널을 열고 다음 명령어를 실행합니다.

npx create-next-app@latest my-blog```text명령어를 실행하면 몇 가지 질문이 나타납니다. 이 책에서는 아래와 같이 선택합니다.

Would you like to use TypeScript? › Yes Would you like to use ESLint? › Yes Would you like to use Tailwind CSS? › Yes Would you like your code inside a src/ directory? › No Would you like to use App Router? › Yes Would you like to use Turbopack for next dev? › Yes Would you like to customize the import alias? › No

**App Router**는 반드시 Yes를 선택합니다. Next.js 13 이후의 핵심 기능이며, 이 책 전체가 App Router를 기준으로 설명합니다.## 개발 서버 실행프로젝트 폴더로 이동하여 개발 서버를 시작합니다.```bashcd my-blognpm run dev```text터미널에 다음과 같은 메시지가 나타나면 성공입니다.

▲ Next.js 15.x.x (Turbopack)

• Local: http://localhost:3000
• Network: http://192.168.x.x:3000

✓ Starting... ✓ Ready in 1.2s

브라우저에서 `http://localhost:3000`을 열면 Next.js 기본 페이지가 보입니다.## 첫 페이지 수정하기`app/page.tsx` 파일을 열어서 내용을 바꿔봅니다.```tsx// app/page.tsxexport default function Home() {  return (    <main className="flex min-h-screen items-center justify-center">      <h1 className="text-4xl font-bold">나의 첫 Next.js 앱</h1>    </main>  );}

파일을 저장하면 브라우저가 자동으로 새로 고쳐집니다. 이 기능을 Fast Refresh라고 하며, 코드를 수정할 때마다 페이지 전체를 새로 고칠 필요가 없습니다.

개발 서버 종료

터미널에서 Ctrl+C를 누르면 개발 서버가 종료됩니다.

다음 챕터에서는 프로젝트 폴더 구조를 살펴봅니다.