[Official Learn Next.js] Learn ‘App Router’ - Chapter 1. Gatting Started

App Router: Getting Started

프로젝트 만들기

프로젝트를 만들기 전에 앞서 npm 또는 yarn 패키지 관리자가 없다면 pnpm을 설치합니다.

프로젝트를 보관하려는 폴더로 이동 후 아래 명령어로 예제 프로젝트를 설치합니다.

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

cd nextjs-dashboard

---

폴더 구조

• /app
• 주 작업 공간으로, 애플리케이션에 필요한 모든 경로, 구성 요소, 논리가 포함되어 있습니다.
• /app/lib
• 재사용 가능한 유틸리티 함수, 데이터 가져오기 함수 등 애플리케이션에서 사용되는 함수가 포함되어 있습니다.
• /app/ui
• 카드, 테이블, 양식 등 애플리케이션의 모든 UI 구성 요소를 포함합니다.
• /public
• 이미지 등 애플리케이션의 모든 정적 자산을 포함합니다.
• 구성 파일next.config.tscreate-next-app
• 애플리케이션 루트와 같은 구성 파일도 볼 수 있습니다 . 이러한 파일의 대부분은 .를 사용하여 새 프로젝트를 시작할 때 생성되고 사전 구성됩니다

---

개발 서버 실행

package.json을 참고해 개발 서버 실행에 필요한 패키지를 설치해야 합니다.

npm i

패키지 설치가 완료되었다면 다음 명령어를 사용해 개발 서버를 실행할 수 있습니다.

npm run dev