[Next.js] Pages Router 방식으로 라우팅 설정하기

✅ Pages Router는?

 

 pages 폴더의 구조를 기반으로 페이지 라우팅을 제공한다.

이미지 출처 : 한 입 크기로 잘라먹는 Next.js 강의

 

 

 

폴더명을 기반으로도 가능하다. 이 때 폴더 아래 index.js 파일을 만들면 해당 경로로 라우팅이 설정된다.

폴더 하위에 폴더나 파일을 계속 중첩해서 중첩경로를 생성해줄 수 있다.

이미지 출처 : 한 입 크기로 잘라먹는 Next.js 강의

 

 

동적 경로에 대응하는 페이지는 파일명에 대괄호[]를 묶어서 만들면 된다.

이미지 출처 : 한 입 크기로 잘라먹는 Next.js 강의

 

 

 

 

 

 

✅ 동적 페이지 설정하기 

 

1) Dynamic Routes

이미지 출처 : 한 입 크기로 잘라먹는 Next.js 강의

 

book 폴더 내에 [id].tsx 파일 생성

import { useRouter } from "next/router";

export default function Page() {
  const router = useRouter();
  const { id } = router.query;

  return <h1>Book {id}</h1>;
}

 

 

 

2) Catch-all Segments

 

위 방법으로는 "/book/12/345/678" 와 같이 여러개의 id가 연달아 전달되는 경우는 대응하지 못한다.

이런 경우까지 대응하게 하려면,

이미지 출처 : 한 입 크기로 잘라먹는 Next.js 강의

 

book 폴더 내 [id].tsx의 파일명을 [...id].tsx로 변경

import { useRouter } from "next/router";

export default function Page() {
  const router = useRouter();
  const { id } = router.query;

  console.log(id);

  return <h1>Book {id}</h1>;
}

 

 

 

 

3) Optional Catch-all Segments

 

Catch-all Segments로도 id가 없는 "/book/" 경로는 대응할 수 없는데 이 때 간단한 방법으로는

book폴더 내에 index.tsx파일을 생성하면 되긴 하지만,

Optional Catch-all Segments를 사용하면 조금 더 범용적인 페이지를 만들 수 있다.

이미지 출처 : 한 입 크기로 잘라먹는 Next.js 강의

 

book 폴더 내 [...id].tsx의 파일명을 [[...id]].tsx로 변경

 

 

 

 

 

 

 

 

 

참고자료

🔗 [이정환] 한입 크기로 잘라먹는 Next.js(15+)