[Next.js App Router] 기초 세팅

Nexj.js 14 버전을 발표하면서 Next.js App Router 무료 강좌도 오픈했다는 소식에 재밌어 보이기도 하고 오랜만에 Next.js도 써보고 싶어서 바로 수강해 봤다.

강좌 소개

Next.js 무료 강좌를 수강하면 이미지와 같은 Finacial Dashboard를 한 단계씩 만들어 나가면서 다음을 배울 수 있다고 한다.

• 로컬 환경을 설정하고 “ACME” Next.js 프로젝트 템플릿을 생성한다.
• 미리 스타일링된 컴포넌트를 이용하여 Next.js에 적용해 본다.
• 실제 애플리케이션 로직과 데이터를 연결하여 데모 웹 사이트를 구현한다.
• 완성된 웹사이트를 스스로 빌드하고 배포하는 경험을 할 수 있다.

교육 과정은 16개의 챕터로 이루어져 있는데 영상이 아닌 텍스트와 이미지로 이루어져 있기 때문에 금방 수강할 수 있다. 영문만 제공되긴 하는데 내용이 길지 않기 때문에 큰 어려움은 없었다.

[Chapter 1] Getting Started

프로젝트 생성

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

• create-next-app으로 프로젝트를 생성한다.
• 이때 강좌에서 미리 만들어놓은 템플릿을 가져오기 때문에 기본적인 폴더 구조는 준비되어 있다.

폴더 구조

• /app: 앱을 위한 모든 routes, components, logic 등이 들어 있다.
• /app/lib: 재사용 가능한 utility 함수나 data fetching을 위한 함수 등이 들어 있다.
• /app/ui: UI 컴포넌트가 들어 있다.
• /public: 이미지와 같은 static assets이 들어 있다.
• /scripts/: 데이터베이스를 수정하기 위한 파일이 들어 있다.

개발 서버 실행하기

• npm run dev로 개발 서버를 실행하면 다음과 같은 화면을 볼 수 있다.

남은 챕터는 다음 글에서 계속됩니다..