appDir
참고할 점: Next.js 13.4부터는 이 옵션이 더 이상 필요하지 않습니다. App Router가 이제 안정화되었기 때문이죠.
App Router(즉, app 디렉토리)는 레이아웃, 서버 컴포넌트, 스트리밍, 그리고 데이터 페칭을 컴포넌트와 같은 위치에 두는 ‘colocated data fetching’ 같은 최신 기능들을 지원합니다.
또한, app 디렉토리를 사용하면 React Strict Mode가 자동으로 활성화됩니다. 이 모드는 개발 중에 더 엄격한 검사와 경고를 통해 버그를 미리 찾아내는 데 큰 도움이 되니 참고하세요.
만약 기존 페이지 기반 라우팅에서 app 디렉토리 기반 라우팅으로 천천히 옮겨가고 싶다면, Next.js 공식 문서에 ‘incremental adoption’에 대한 좋은 가이드가 있으니 꼭 한번 확인해 보세요!
추가 팁: app 폴더를 쓰면 좋은 점
- 레이아웃 분리와 재사용이 쉬워져요. 예를 들어, 공통 헤더나 사이드바를 레이아웃 파일에 넣고 원하는 페이지에서 쉽게 가져다 쓸 수 있죠.
- 서버 컴포넌트를 이용해 성능 최적화가 가능해요. 서버에서만 렌더링하도록 지정하면 클라이언트 번들 크기가 줄어들고, 초기 로딩 속도가 빨라집니다.
- 스트리밍 지원 덕분에 유저에게 콘텐츠를 조금씩 빠르게 보여줄 수 있어요. 대기 시간이 줄어든다는 이야기죠.
Next.js가 점점 발전하면서 이런 최신 기능들을 쉽게 쓰게 해주니까, 최신 버전으로 업데이트해두고 꼭 활용해 보시길 추천합니다!