Next.js 시작하기 - Chapter 1. Getting Started #02

Next.js 시작하기는 Next.js 공식 홈페이지의 Learn Next.js 강좌를 기반으로 대시보드 프로젝트를 자세히 설명합니다. 이번 강좌는 Chapter 1. Getting Started 두번째로 pnpm으로 프로젝트를 생성하고 생성된 폴더 구조와 설정 파일에 대해서 살펴봅니다.

Next.js 프로젝트를 시작하는 가장 쉬운 방법

Next.js는 React 기반의 강력한 웹 프레임워크로, 정적 페이지 생성(SSG), 서버 사이드 렌더링(SSR), API 라우팅, 서버 컴포넌트 등의 기능을 통합 제공합니다. 특히 최신 버전에서는 App Router 구조와 Server Actions, pnpm 도입이 강조되고 있어 새로운 개발 흐름에 익숙해지는 것이 중요합니다.

이번 글에서는 Next.js 공식 튜토리얼인 nextjs-dashboard 예제를 기반으로 프로젝트를 생성하고, 전체 폴더 구조를 이해하는 과정을 상세히 다룹니다.

---

pnpm 설치와 프로젝트 생성

이번 프로젝트에서는 pnpm을 사용합니다. 아직 설치하지 않았다면 아래의 방법으로 설치합니다.

npm install -g pnpm

Next.js 앱을 생성하기 위해서, 원하는 폴더에서 터미널을 열고 아래의 명령을 실행하세요.       

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

---

폴더 구조

생성된 Dashboard 프로젝트의 폴더 구조

• /app: 애플리케이션의 모든 라우트, 컴포넌트, 로직을 포함합니다. 주로 여기서 작업하게 될 것입니다.
• /app/lib: 재사용 가능한 유틸리티 함수와 데이터 페칭 함수 같은 애플리케이션에서 사용되는 함수들을 포함합니다.
• /app/ui: 카드, 테이블, 폼과 같은 애플리케이션의 모든 UI 컴포넌트를 포함합니다. 시간 절약을 위해 이러한 컴포넌트들을 미리 스타일링해 두었습니다.
• /public: 이미지와 같은 애플리케이션의 모든 정적 자산을 포함합니다.
• Config Files: 애플리케이션 루트에 있는 next.config.ts와 같은 설정 파일들도 볼 수 있습니다. 이러한 파일들 대부분은 create-next-app을 사용하여 새 프로젝트를 시작할 때 생성되고 미리 구성됩니다. 이 과정에서는 이들을 수정할 필요가 없습니다.

---

다음 글에서는

플레이스 홀더 데이터, 타입스크립트, 개발 서버 실행 방법 등에 대해서 살펴볼 예정입니다.