Next.js 대시보드 프로젝트 시작하기

🚀 새 프로젝트 생성

터미널을 열고 프로젝트를 보관할 폴더로 이동한 후, 다음 명령어를 실행합니다.

npx create-next-app@latest nextjs-dashboard --use-npm --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example"

💡 왜 스타터 템플릿을 사용할까?

설치가 완료되면 처음부터 코드를 작성하는 튜토리얼과 달리, 대부분의 코드가 이미 작성되어 있는 것을 확인할 수 있습니다.

Next.js 공식 문서에 따르면 이러한 접근 방식을 선택한 이유는 다음과 같습니다:

• 실제 개발 환경 반영: 기존 코드베이스를 활용하여 실무에 가까운 개발 경험 제공
• 핵심 학습에 집중: 모든 코드를 직접 작성하지 않고 Next.js의 주요 기능 학습에 중점

---

📁 프로젝트 설정 및 실행

1단계: 작업 디렉터리로 이동

cd nextjs-dashboard

📋 프로젝트 구조가 궁금하다면?
폴더 구조 상세 설명을 참고하세요.

2단계: 패키지 설치

npm i

3단계: 개발 서버 실행

npm run dev

---

🌐 개발 서버 접속

개발 서버가 성공적으로 실행되면 다음과 같은 화면을 볼 수 있습니다:

접속 방법

방법 1: 직접 링크 클릭
👉 http://localhost:3000

방법 2: 터미널 확인
터미널에 표시된 localhost 주소를 브라우저에 입력

---

✅ 다음 단계

이제 Next.js 대시보드 프로젝트의 기본 설정이 완료되었습니다. 다음 단계에서는 프로젝트의 구조를 살펴보고 주요 기능들을 하나씩 구현해보겠습니다.