Next.js 페이지 라우팅 /app vs. /pages

Next.js의 app 디렉토리와 pages 디렉토리의 차이점, 그리고 프로젝트 구조

app 디렉토리의 도입 이유

Next.js 13 버전부터 app 디렉토리가 도입되었습니다. 이는 단순히 pages를 대체하는 것이 아니라, 더 강력하고 유연한 라우팅 시스템을 제공하기 위함이에요.

1. 서버와 클라이언트 컴포넌트 구분
   app 디렉터리에서는 컴포넌트마다 서버 전용(Server Components)과 클라이언트 전용(Client Components)을 구분해 사용할 수 있습니다. 클라이언트 전용 코드나 데이터 페칭 로직이 있는 경우에는 use client 디렉티브를 추가해 클라이언트 컴포넌트로 지정합니다.
2. 파일 기반의 레이아웃 관리
   app 디렉터리 구조에서는 페이지마다 layout.js 파일을 사용하여 페이지 레이아웃을 정의할 수 있습니다. 이를 통해 기존 pages 디렉터리 구조에서 사용했던 _app.js나 _document.js 없이도, 각 페이지별로 고유한 레이아웃을 설정할 수 있습니다.
3. React Suspense 지원 및 최적화
   app 디렉터리 구조는 React의 Suspense를 기본적으로 활용하여 각 페이지의 로딩 속도와 사용자 경험을 개선할 수 있습니다.

layout.js 파일의 위치

layout.js 파일을 app 디렉토리에 넣는 이유는 다음과 같습니다:

1. 라우팅과의 통합: app 디렉토리 내의 layout.js는 해당 경로와 그 하위 경로에 자동으로 적용됩니다. 이는 Next.js의 새로운 라우팅 시스템과 긴밀하게 통합되어 있습니다.
2. 성능 최적화: app 디렉토리의 layout.js는 서버 컴포넌트로 동작하여, 클라이언트 측 JavaScript를 줄이고 성능을 향상시킵니다.
3. 중첩 레이아웃: app 디렉토리 구조를 통해 중첩된 레이아웃을 쉽게 만들 수 있습니다.

components 폴더에 넣는 것보다 app 디렉토리에 넣는 것이 더 좋은 이유는, Next.js의 라우팅 시스템과 더 잘 통합되고, 성능 최적화의 이점을 더 잘 활용할 수 있기 때문입니다.