Page Router?
Page Router는 Next 초창기부터 제공되어 오던 구 버전의 라우터로 현재 많은 기업에서 사용되고 있는
안정적인 라우터. React Router 처럼 페이지 라우팅 기능을 제공함.
pages 폴더를 기반으로 페이지를 라우팅하여 pages폴더 아래 자바스크립트 파일을 저장하면
자동으로 이 파일들의 이름과 경로를 따라서 페이지 라우팅이 제공됨.
Slug 사용으로 동적 경로(Dynamic Rotues)에 대응하는 페이지를 만들 수 있다.
[...id].tsx와 같이 Catch All Segment를 사용하면
book/100/2345/233/5232처럼 경로가 여러개의 경로도 처리할 수 있다.
그러나, localhost:3000/book처럼 세그먼트가 없을 땐 대응할 수 없는데
[[...id]].tsx 처럼 대괄호로 한 번 더 감싸 Optional Catch All Segment로 처리하면 유동적으로 대응할 수 있다.
_app.tsx와 _document.tsx
Page Router기반으로 만들어진 프로젝트의 pages폴더 아래에는 두 가지 특별한 파일이 있다.
// _app.tsx
import type { AppProps } from 'next/app';
import '@/styles/globals.css';
export default function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
}_app.tsx파일은 리액트 앱에서 app파일이 모든 컴포넌트의 부모 컴포넌트 역할, 즉 루트 컴포넌트로서 존재했던 것처럼 Next의 _app파일도 동일하게 모든 페이지 역할을 하는 컴포넌트들의 부모 컴포넌트의 역할을 한다.
// _document.tsx
import { Html, Head, Main, NextScript } from "next/document";
export default function Document() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}_document.tsx파일은 모든 페이지에 공통적으로 적용이 되어야하는 Next.js앱의 HTML 코드들을 설정하는 컴포넌트다. 기존 리액트앱의 index.html과 거의 비슷한 역할을 함.
메타 태그를 설정한다거나 구글 애널리틱스 같은 서드파티 스크립트 삽입, 폰트 불러오기 처럼 HTML 태그를 관리하기 위해 사용됨.
