Page Router란??
현재 많은 기업에서 사용되고 있는 안정적인 라우터 입니다.
React Router 처럼 특정 조건으로 페이지 라우팅 기능을 제공합니다.
Page Router는 Pages 폴더를 기반으로 페이지를 라우팅 해줍니다. 자동으로 Pages 폴더 안에 있는 js 파일의 경로와 이름에 따라서 페이지 라우팅이 제공이 됩니다.
이렇듯이 Next.js의 Page Router는 pages 폴더 아래에 들어있는 파일들의 이름을 기반으로 페이지 라우팅을 자동으로 제공해줍니다.
물론 파일의 이름 뿐만아니라 파일의 이름을 기준으로도 설정할 수 있습니다.
페이지 라우터에서는 동적 경로를 갖는 페이지의 라우팅도 굉장히 간단하게 설정해줄 수 있습니다.
동적 경로란(Dynamic Routes)? 경로상의 어떠한 변할 수 있는 가변적인 값을 포함하고 있는 경로를 말합니다.
ex) 상품별 상세페이지, 블로그 글의 경로
Page Router의 동적 경로를 만들고 싶다면 대괄호 []를 표기하며 파일을 만들어 주면 됩니다. 대괄호로 파일명을 묶어주면 동적 경로를 대응하는 페이지의 역할을 하게 됩니다.
정리하자면 Page Router는 Pages 폴더의 구조를 기반으로 페이지 라우팅을 제공하는 기능으로 이해하면 좋습니다.
Page Router 버전의 Next App 생성하기
새로운 폴더를 만들고 Visual Studio Code로 들어가서
npx create-next-app@14 파일명을 입력해줍니다.
npx란? Node Package Executor로 npmjs.com에 등록되어 있는 최신 버전의 노드 패키지를 다운로드 없이 바로 실행시키는 명령
파일을 만든 후 디렉터리로 들어가
npm run dev를 통해 서버를 실행시켜주면 됩니다.
파일 살펴보기
Next.js 앱 또한 기본적으로는 Node.js 패키지이기 때문에 의존성을 보관하는 node_modules폴더나 패키지를 보관하는 package.json 파일이 존재합니다.
Next.js는 결국 React를 기반으로 만들어진 React의 확장판 개념의 프레임워크이기 때문에 public이나 src폴더와 같이
React 앱과도 매우 유사한 폴더 구조를 가지고 있습니다.
pages 디렉터리 안에 _app.tsx, _document.tsx 파일이 있습니다.
이 파일들의 역할은 페이지의 역할을 하는 파일은 아닙니다.
대신에 Next 앱 모든 페이지에 공통적으로 적용될 로직 또는 공통적으로 레이아웃 또는 데이터를 다루기 위해서 필요한 파일들입니다.
React에서 App컴포넌트는 기본적으로 모든 컴포넌트들의 부모 컴포넌트의 역할을 했습니다. 그런것 처럼 Next.js의 App 컴포넌트도 동일하게 루트 컴포넌트의 역할을 합니다.
구체적으로 모든 컴포넌트들의 부모 컴포넌트가 된다고 생각하면 됩니다.
_app.tsx
export default function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
}App 컴포넌트가 받는 Props에는 Component와 pageProps가 있습니다.
이때 Component라는 Props는 현재 페이지 역할을 할 컴포넌트를 받는 것이라고 생각하면 됩니다.
두번째 Props인 PageProps는 첫번째 Props한테 전달될 페이지의 Props들을 모두 객체로 보관한 것입니다.
_document.tsx
import { Html, Head, Main, NextScript } from "next/document";
export default function Document() {
return (
<Html lang="en">
<Head />
<body className="antialiased">
<Main />
<NextScript />
</body>
</Html>
);
}_document는 모든 페이지에 공통적으로 적용이 되어야 하는 Next앱에 HTML 코드를 설정하는 컴포넌트 입니다.
기존 React 앱의 index.html과 비슷한 역할을 한다고 보시면 됩니다.
_document 컴포넌트에서는 모든 페이지에 다 적용이 되어야 하는 메타 태그를 설정한다거나 또는 폰트, 캐릭터셋을 설정할 때 등등
next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
};
export default nextConfig;이 파일은 Next 앱의 설정을 관리하는 파일입니다.
reactStrict 모드가 true로 설정되어 있는걸 볼 수 있습니다.
