Next.js 13 버전부터 기존의 Page Router를 대체하는 App Router가 추가되었다. 이로 인해 페이지의 라우팅 설정 방식이 기존과는 완전히 달라졌는데, App Router는 단순히 라우팅 설정만을 변화시킨 것이 아니라, 페이지의 레이아웃 구성, 데이터 페칭 방식에 있어서도 다양한 변화를 가져왔으며, React 18에서 새롭게 도입된 React 서버 컴포넌트와 Streaming 등 최신 기능들도 통합하여 사용할 수 있다. 이러한 변화로 인해, App Router는 기존 Page Router와 비교했을 때 거의 새로운 프레임워크처럼 느껴지기도 한다.
✔️ 기존 개념과 App Router의 공존
새로운 App Router로 인해 기존의 Page Router를 모두 폐기하고 새롭게 배워야 하는 것은 아니다. 기존의 Navigating, Pre-fetching, Pre-rendering 등 주요 개념은 App Router에서도 거의 동일하게 유지된다. 그렇기 때문에, 이전 Next.js 개념에 익숙하다면 새로 추가되거나 변경된 요소들만 배우면 쉽게 적응할 수 있다.
✔️ App Router의 프로젝트 구조
Next.js 13의 App Router 버전 프로젝트 구조는 기존 Next.js와 유사하면서도 일부 다른 부분이 있다.
-
Node.js 기반의 프로젝트이기 때문에
node_modules,package.json,package-lock.json파일들은 필수적으로 포함된다. -
Page Router와 유사하게 공용 리소스를 포함하는
public폴더와 소스 코드를 담는src폴더가 존재한다. -
next.config.mjs파일은 Next.js의 옵션을 설정하는 파일로, Next.js 설정을 이 파일에서 할 수 있다. -
tsconfig.json은 타입스크립트를 사용하는 경우 프로젝트의 타입스크립트 옵션을 설정하는 파일이다.
하지만 src 폴더 안에 pages 폴더는 더 이상 존재하지 않으며, 대신 app 폴더가 위치해 있다. App Router에서는 page.tsx 파일이 페이지 역할을 하고, layout.tsx 파일이 페이지 레이아웃을 담당한다.
✔️ App Router의 실행
Next.js 앱을 성공적으로 생성한 후, npm run dev 명령어를 입력하여 개발 모드로 앱을 실행한다. 그런 다음 localhost:3000으로 접속하여 기본적으로 제공되는 Next.js 페이지를 확인할 수 있다. 이 화면이 보인다면 App Router 버전의 Next.js 앱이 성공적으로 생성된 것이다.
Next.js 13 버전에서 도입된 App Router는 라우팅 설정뿐 아니라 데이터 페칭, 레이아웃 구성 방식 등 다양한 측면에서 기존 Page Router와 차별화된 기능을 제공한다. 새로운 기능을 활용하면 SSR, CSR은 물론 최신 React 기능들을 효율적으로 결합하여 웹 애플리케이션의 성능을 한층 더 높일 수 있다. Page Router에서 사용하던 핵심 개념들은 유지되므로 기본 개념을 바탕으로 변화된 부분들만 습득해 나가면 된다.
