[Next] 페이지 라우터(Page Router)

☑️ Next.js 페이지 라우터에 대한 이해

💡 Next.js에서는 페이지 라우팅을 매우 간단하게 처리할 수 있다. Next.js는 페이지 기반 라우팅 시스템을 제공하여, pages 폴더에 파일을 만들면 그에 맞는 URL 경로로 자동으로 연결된다. Next.js의 라우팅 방식은 페이지 라우터(Page Router)와 앱 라우터(App Router)로 나눌 수 있는데, 이 글에서는 페이지 라우터에 대해 설명하고 Next.js의 라우팅 기능을 활용하는 방법에 대해 다룰 것이다.

---

 

☑️ 페이지 라우터 (Page Router)

페이지 라우터는 Next.js의 초기 버전부터 제공된 라우팅 방식이다. 페이지 라우터는 /pages 폴더 내의 파일 구조를 기반으로 URL 경로를 자동으로 설정하는 방식이다. 이 방식은 직관적이고 간단하기 때문에 많은 프로젝트에서 기본적으로 사용된다.

 

✔️ Next.js 앱 설치와 실행

Next.js 앱 설치

npx create-next-app@latest

Next.js 앱 실행

npm run dev

 

✔️ 기본적인 파일 구조와 라우팅

Next.js의 페이지 라우팅은 파일 시스템 기반으로 작동한다. /pages 폴더에 파일을 만들면, 해당 파일의 경로와 이름에 맞는 URL이 자동으로 생성된다.

 

🗂️ 기본적인 파일 구조

/pages
  ├── index.js        // / 경로
  ├── about.js        // /about 경로
  └── item
      └── index.js    // /item 경로

위와 같은 구조에서는

• /pages/index.js 파일은 / 경로로 연결된다.
• /pages/about.js 파일은 /about 경로로 연결된다.
• /pages/item/index.js 파일은 /item 경로로 연결된다.

따라서 브라우저에서 http://localhost:3000/에 접속하면 index.js 파일이 렌더링되고, http://localhost:3000/about에 접속하면 about.js 파일이 렌더링된다.

 

🗂️ 디렉토리 기반 라우팅

/pages
  ├── index.js        // / 경로
  ├── about.js        // /about 경로
  └── item
      ├── index.js    // /item 경로
      └── details.js  // /item/details 경로

위 구조에서는 /pages/item/details.js 파일이 /item/details 경로로 연결된다.

 

Next.js 앱 설치와 프로젝트 구조에 대해서 Next 공식문서를 참고하면 좋을 것 같다.
👉 https://nextjs.org/docs/getting-started/project-structure

---

 

☑️ 페이지 라우터 기능

Next.js의 페이지 라우터는 정적 경로, 동적 경로뿐만 아니라 다양한 고급 기능도 제공한다. 이 기능들은 복잡한 라우팅을 처리할 때 유용하게 사용될 수 있다.

 

✔️ 정적 경로와 쿼리 스트링

Next.js에서는 URL에 쿼리 스트링을 포함할 수 있으며, 이를 useRouter 훅을 사용하여 쉽게 접근할 수 있다. 예를 들어, /search?query=apple와 같은 URL을 다룰 때는 query 파라미터를 useRouter로 쉽게 추출할 수 있다.

// /pages/search.js

import { useRouter } from 'next/router';

export default function SearchPage() {
  const { query } = useRouter();  // query는 { query: 'apple' } 형태로 반환됨
  return <div>Search Query: {query.query}</div>;
}

 

✔️ 동적 경로 (Dynamic Routes)

Next.js는 동적 경로를 매우 간단하게 처리할 수 있다. 동적 경로는 URL의 일부가 변동적인 경우, 예를 들어 /item/1, /item/2와 같이 변하는 부분을 처리해야 할 때 유용하다. 이때는 [ ]를 사용하여 동적 경로를 설정할 수 있다.

/pages
  └── item
      └── [id].js

// /pages/book/[id].js

import { useRouter } from 'next/router';

export default function BookPage() {
  const { query } = useRouter();
  return <div>Book ID: {query.id}</div>;
}

이렇게 하면 /book/1, /book/2와 같은 동적 경로에서 id 값을 추출하여 해당하는 콘텐츠를 렌더링할 수 있다.

 

✔️ 범용적인 경로 (Catch-all Routes)

Next.js에서는 범용적인 경로 (Catch-all routes)도 쉽게 설정할 수 있다. 범용적인 경로는 여러 개의 파라미터를 받을 수 있는 경로를 처리할 때 사용된다. 예를 들어, /book/1/234와 같은 경로를 처리하려면 [...id].js와 같은 파일을 만들면 된다.

/pages
  └── book
      └── [...id].js

// /pages/book/[...id].js

import { useRouter } from 'next/router';

export default function BookPage() {
  const { query } = useRouter();
  return <div>Book ID: {query.id}</div>;
}

 

✔️ 선택적 범용 경로 (Optional Catch-all Routes)

선택적 범용 경로는 경로의 마지막 파라미터가 있을 수도 있고 없을 수도 있는 경우를 처리한다. 예를 들어 /book/1, /book/2, /book처럼 경로가 선택적으로 존재하는 경우, [[...id]].js로 처리할 수 있다.

/pages
  └── book
      └── [[...id]].js

이렇게 하면 /book에 접근할 경우에도 404 오류가 발생하지 않고 정상적으로 페이지가 표시된다.

 

✔️ 404 페이지 처리

Next.js에서는 404 페이지를 커스터마이즈할 수 있다. /pages/404.js 파일을 만들면, 해당 경로가 존재하지 않을 경우 자동으로 404 페이지가 렌더링된다.

/pages
  └── 404.js

---

 

🎓 정리

Next.js의 페이지 라우터는 파일 시스템 기반 라우팅을 제공하여, 직관적이고 간단하게 페이지를 관리할 수 있다. 동적 경로, 쿼리 스트링, 범용적인 경로 등 다양한 라우팅 기능을 제공하며, 복잡한 라우팅 요구사항도 쉽게 처리할 수 있다. Next.js 프로젝트에서 페이지 라우팅을 적절히 활용하면, 효율적이고 관리하기 쉬운 앱을 만들 수 있다.