기본

next.js를 설치하면 위와 같은 폴더 구조를 볼 수 있다.

• /app: 애플리케이션에 필요한 모든 경로, 구성 요소, 논리가 포함되어 있다. 주로 이곳에서 작업을 진행한다.

• /app/lib: 재사용 가능한 유틸리티 함수, 데이터 가져오기 함수 등 애플리케이션에서 사용되는 함수가 포함되어 있다.

• /app/ui: 카드, 테이블, 양식 등 애플리케이션의 모든 UI 구성 요소를 포함한다. 즉 웹사이트나 앱에서 사용되는 버튼, 입력 창, 테이블 등 다양한 UI요소들이 모여있는 곳

• /public: 이미지 등 애플리케이션의 모든 정적 파일들을 저장하는 곳
  웹사이트 로고나 배경 이미지들을 넣는 곳

• 구성 파일 next.config.js: 루트 디렉토리에 있는 구성파일이다. 새 프로젝트를 시작할 때 'create-next-app'명령어를 사용하면 자동으로 생성되고, 기본 설정이 미리 되어 있다. 일반적으로는 이 파일을 수정할 필요가 없다. 쉽게 말해, 프로젝트를 처음 시작할 때 필요한 기본 설정들이 이 파일에 담겨있다고 생각하면 된다.

app/lib/placeholder-data.ts.

app/lib/placeholder-data.ts. 파일로 목 데이터를 만들어서 사용할 수 있다.
관례적으로 lib폴더에서 주로 만든다!
(mock-data: 실제 데이터를 사용하기 어려운 상황에서 테스트나 개발을 위해 사용하는 가상의 데이터)

TypeScript

대부분의 파일에 '.ts', '.tsx'로 이루워져 있다.
프로젝트가 TypeScript로 작성되어있기 때문이다.

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';
};

재사용되는 타입은 lib폴더에 따로 지정해서 여러 곳에서 사용할 수 있다.