Next.js의 파일 시스템 기반 라우팅은 편리합니다.파일 시스템 기반 라우팅은 프로젝트의 폴더와 파일 구조에 따라 자동으로 라우트를 설정해 주는 기능입니다.예를 들어, app/about/page.js 파일을 생성하면 자동으로 /about 경로가 설정됩니다.어떻게 폴더와 파일만 생성했는데 라우트가 등록된 걸까요?파일 시스템 기반 라우터의 동작 방식을 간단한 express 서버 예시 코드를 통해 알아보겠습니다.예제 프로젝트의 디렉토리 구조는 다음과 같습니다.my-routing-app/├── app/│ ├── about/│ │ └── page.js│ ├── product/│ │ └── [id]/│ │ └── page.js│ └── page.js└── server.jss..

v13 컴포넌트 수준에서 렌더링 환경을 선택 💡 next 13 이전에는 페이지에 필요한 모든 JS 코드를 하이드레이션 했지만 서버 컴포넌트가 도입된 후에는 클라이언트 컴포넌트만 하이드레이션 하면 된다. → JS 번들의 사이즈가 줄어든다. 📌 클라이언트 컴포넌트 클라이언트 컴포넌트를 사용하면 애플리케이션에 클라이언트 측 인터랙션을 추가할 수 있다. 서버에서 미리 렌더링 되고 클라이언트에서 hydrated 된다. 클라이언트 컴포넌트는 기존의 페이지 라우터의 컴포넌트가 항상 작동하던 방식이다. 작동방식 next.js가 빌드 중에 컴포넌트를 하나씩 확인하다가 클라이언트 컴포넌트를 만남 정적으로 만들 수 있는 부분을 확인 → 정적 HTML 프리렌더링 빌드 시에 클라이언트 컴포넌트도 프리렌더링 되기 때문에 내부의 ..