Learn Next.js - Chapter 1. Getting Started

next.js의 공식 tutorial을 공부하며 정리한 내용입니다.
tutorial: https://nextjs.org/learn/dashboard-app

새 프로젝트 생성

nodejs 설치가 되어 있다는 전제하에 아래 커맨드 실행

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

기본 폴더 구조

• /app: application의 모든 route, component, logic 저장
• /app/lib: application에서 사용하는 모든 function 저장. e.g., utility function, data fetch function…
• /app/ui: application에서 사용하는 ui component 저장. e.g., card, table…
• /public: static asset 저장. e.g., image…
• /scripts: seeding script 저장. e.g., run script, database 생성 script…
• config files: nextjs 설정 파일 등

Placeholder data

DB나 api이 되기 전 UI 개발을 용이하게 하기 위해 Placeholder data를 만들어 둔다.

• json이나 js object 형태
• mockAPI 등 3rd party

Typescript

TypeScript는 정적 타이핑을 도입한 JavaScript의 상위 집합으로, 개발자가 명시적으로 타입을 선언하여 코드의 안정성을 높이고 유지보수를 용이하게 하는 언어이다.

Typescript에선 DB 데이터를 읽을 때, 받는 값에 대한 타입을 명시적으로 작성해 주어야 한다.
이걸 쉽게 하려면 Prisma 등을 이용하면 된다.

Prisma

node.js and ts를 위한 ORM. studio를 통해 DB 편집도 쉽게 할 수 있고, DB Schema 기반으로 타입 생성을 자동으로 할 수 있다.