시키는대로 create-next-app 커맨드 사용해서 프로젝트 생성.
npx create-next-app@latest nextjs-dashboard --useem-npm --example "<https://github.com/vercel/next-learn/tree/main/dashboard/starter-example>"
프로젝트는 이런식의 폴더 구조를 갖고 있다.

/app: Contains all the routes, components, and logic for your application, this is where you'll be mostly working from./app/lib: Contains functions used in your application, such as reusable utility functions and data fetching functions./app/ui: Contains all the UI components for your application, such as cards, tables, and forms. To save time, we've pre-styled these components for you./public: Contains all the static assets for your application, such as images./scripts: Contains a seeding script that you'll use to populate your database in a later chapter.next.config.js at the root of your application. Most of these files are created and pre-configured when you start a new project using create-next-app. You will not need to modify them in this course.app/lib/placeholder-data.js 파일에서 placeholder data를 제공하고 있다.
⇒ 개발을 할때 일반적으로 실제 사용할 수 있는 꿀팁이다. mock API 또는 dummy data를 이용해서 UI를 먼저 개발하는 방식.
파일들이 대부분 .ts또는 .tsx 확장자를 가진 것을 알 수 있을텐데, 프로젝트가 TS로 쓰여져 있기 때문에 그렇다. 실제로 현대 웹 개발 환경을 최대한 반영한 강의를 만들고자 했다고 한다. (더좋다. 나도 TS를 사용하고 싶었다)
/app/lib/definitions.ts 파일을 한번 봐보자. 해당 파일은 database에서 가져올 데이터의 타입을 수동적으로 정의하고 있다. 예를들어 invoices table은 다음과 같은 타입을 가진다
export type Invoice = {
id: string;
customer_id: string;
amount: number;
date: string;
// In TypeScript, this is called a string union type.
// It means that the "status" property can only be one of the two strings: 'pending' or 'paid'.
status: 'pending' | 'paid';
};
이처럼 TS를 사용하면 실수로 잘못된 데이터 포맷을 컴포넌트나 데이터베이스에 전달하는 것을 방지할 수 있다. (e.g. invoice amount에 number대신에 string 값을 입력한다거나)
<aside> 💡 If you're a TypeScript developer:
npm i to install the project's packages.npm run dev to start the development server.