Page Router (1) - 페이지 라우터란?

2026.09.09 · 3분 읽기 · 조회 0

Page Router란?

Page Router는 현재 많은 기업에서 사용되고 있는 안정적인 라우터이다.
React Router 처럼 페이지 라우팅 기능을 제공한다.

페이지 라우터는 Pages라는 폴더를 기반으로 페이지를 나눠준다.
다음과 같이 폴더 내에 파일을 구성 하면 각 파일의 이름이 페이지의 경로가 된다.

또는 각 폴더의 이름을 기준으로 페이지 라우팅도 가능하다.

또한 동적 경로(Dynamic Routes) 기능도 간단하게 가능하다.
~/item/1, ~/item/2 와 같은 경로들을 만들고 싶다면 그냥 [id].js 라는 파일로 만들면 된다. 대괄호로 묶으면, 동적 경로로 설정 가능하다.

결국 Pages 폴더의 구조를 기반으로 페이지 라우팅을 제공한다고 보면 된다.

Next App 생성하기

npx create-next-app@14 .

를 입력해 프로젝트 기본 설치를 해준다.

npx 라는 명령어는 Node Package Executer 의 축약어로, npm에 등록되어있는 패키지를 실행하게 해준다. create-react-app 처럼 한 번만 쓸 도구를 설치할 때 사용하며, 프로젝트에서 계속 사용해야 하는 의존성(react, axios 등)은 npm을 통해 설치해준다. 또한 npx는 이미 설치된 CLI도구를 실행할 때(EsLint, Jest 등) 주로 사용한다.

쉽게 말하면 npm은 설치 관리자, npx는 실행기 라고 생각하면 편하다.
다음과 같이 설정하면 된다.

npm run dev

명령어를 통해 개발 서버를 띄울 수 있다. ctrl + c를 통해 종료할 수 있다.

여러 파일들이 추가되었다.

Public

로고파일, svg, 이미지 등과 같은 정적인 파일들이 보관되어 있다. 빌드 후에도 산출물로 남는다.

src

pages 내에는 경로가 될 파일들이 들어있고, styles는 css 파일들이 들어있다.

index.tsx 가 base가 되는 페이지다.

_app.tsx

import "@/styles/globals.css";
import type { AppProps } from "next/app";
 
export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

pages폴더에는 기본적으로 _app.tsx라는 파일이 있다. 이는 리액트의 app과 비슷하게 모든 컴포넌트들의 부모인 루트 컴포넌트의 역할을 한다고 생각하면 된다.

Component와, pageProps 라는 파라미터를 받는다.

• Component : 현재 페이지 역할을 할 컴포넌트
• pageProps : Component에 전달될 페이지의 props들을 객체로 보관한다.

return <Component {...pageProps} />;

때문에 return 내부를 보면 Component를 렌더링 하며 프롭스로 pageProps를 전달해주고 있는 것을 볼 수 있다.

루트 컴포넌트이기 때문에 모든 페이지에 공통적으로 들어가야하는 header같은 것들을 넣어주면 좋다.

_document

import { Html, Head, Main, NextScript } from "next/document";
 
export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

_document.tsx 내부 코드를 살펴보면 알겠지만, 모든 페이지에 공통적으로 적용되어야 하는 html 코드를 설정하는 컴포넌트이다. 리액트의 index.html과 비슷하다고 생각하면 된다. 메타태그, 폰트, 캐릭터 셋, 서드파티 스크립트를 넣는 등으로 사용한다.

next.config.mjs

해당 파일은 next.js의 설정을 관리하는 파일이다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
};
 
export default nextConfig;

현재는 reactStrictMode가 활성화되어 있는 것을 볼 수 있다. 이것이 활성화되어 있으면 로그가 두 번 씩 찍히기 때문에 false로 바꿔주겠다.

댓글

giscus로 동작하며 GitHub Discussions에 저장됩니다.

관련 글