Next.js Page vs App Router 비교

Next.js 13.4

Next.js는 라우팅을 위해 디렉토리 구조와 파일 규칙 강제한다.
Next.js 13.4버전부터 App Router가 등장하며 라우팅 방식이 변경되었다.

주요 변경점을 살펴 보자.

1) 라우팅 디렉토리 및 파일 규칙

Pages Router

• 정적인 공통 마크업은 _document에 작성하고,
  모든 페이지가 공유하는 로직은 _app에 작성함

App Router

• _document, _app 파일이 사라짐
• 디렉토리 단위로 적용되는 layout 개념이 생김
• 파일 경로와 이름에 따라 사이트 주소과 설정되는 규칙,
• 디렉토리 구조로 경로를 구분하고 파일은 index.js->page.js로 변경됨

2) 메타 데이터 적용 방법

• SEO에 필수적인 메타태그 적용 방법 달라짐

Pages Router 방식

• 일반 HTML과 유사하게 태그에 메타 태그 작성
• key 속성으로 중복을 피해서 설정

App Router방식

• layout이나 page 파일에서 별도로 Metadata를 export하도록
• 가장 가까운 metadata로 적용됨
• next/head의 Head 태그도 사용할 수 없음

3) 서버 사이드 렌더링
Pages Router

• getServerSideProps라는 이름으로 호출
• 페이지 컴포넌트의 props로 전달됨
• 이외에도 getStaticProps, getStaticPaths 존재

App Router

• 일반적인 api 호출 함수 사용
• 페이지 컴포넌트에 async 필요
• getStaticPath 대신 generateStaticParams 존재