[Nextjs] Dynamic Route, 동적 라우팅

• 📒 Dynamic Route, 동적 라우팅
  • 📌 기본 규칙
  • 📌 단일 세그먼트
    • 🔎 규칙
    • 🔎 폴더 구조
    • 🔎 예제
    • 🔎 결과
  • 📌 포괄적인 세그먼트
    • 🔎 규칙
    • 🔎 폴더 구조
    • 🔎 예제
    • 🔎 결과
  • 📌 선택적인 포괄적 세그먼트
    • 🔎 규칙
    • 🔎 폴더 구조
    • 🔎 예제
    • 🔎 결과

📒 Dynamic Route, 동적 라우팅

---

URL 경로의 특정 부분을 변수로 설정해, 다양한 값에 따라 페이지를 동적으로 생성하는 기능인 동적 라우팅에 대한 3가지 방법을 소개합니다.

 

📌 기본 규칙

폴더 구조로 경로를 표현하는 Nextjs는 대괄호를 통해 동적 라우팅이 가능합니다.

예를 들면 다음과 같습니다.

• ex 1
  • 구조 : app/post/[pageNum]/page.tsx
  • URL : /post/1
  • params : { pageNum: 1 }
• ex 2
  • 구조 : app/post/[title]/page.tsx
  • URL : /post/제목1
  • params : { title : 제목1 }

 

📌 단일 세그먼트

단일 세그먼트로 동적 라우팅을 하려면 위의 예시와 동일한 방법을 사용합니다.

🔎 규칙

[params_이름] → params : { params_이름 : 값 }

🔎 폴더 구조

single
└── [id]
           └── page.tsx

🔎 예제

type Props = { params: { id: string } };

export default function Single(props: Props) {
  const { params } = props;
  console.log("PROPS =>", props);
  return (
    <div>
      <h1>{JSON.stringify(params)}</h1>
    </div>
  );
}

🔎 결과

/single/1

 

📌 포괄적인 세그먼트

/post/a/1/hi 와 같이 url에 모든 세그먼트를 포함하도록 확장합니다.

포함된 세그먼트 값은 [a, 1, hi]와 같이 배열 형태로 받을 수 있습니다.

🔎 규칙

[...params_이름] → params : { params_이름 : [값1, 값2, ...] }

🔎 폴더 구조

catchAll
└── […id]
            └── page.tsx

🔎 예제

type Props = { params: { id: string[] } };

export default function CatchAll(props: Props) {
  const { params } = props;
  console.log("PROPS =>", props);
  return (
    <div>
      <h1>{JSON.stringify(params)}</h1>
    </div>
  );
}

🔎 결과

/catchAll/1/2/3/4

 

📌 선택적인 포괄적 세그먼트

이 세그먼트는 변수가 없어도 되고, 있다면 포괄적인 세그먼트로 받는 방법입니다.

🔎 규칙

[[...params_이름]] → params : { params_이름 : [값1, 값2, ...] }

🔎 폴더 구조

optional
└── [[…id]]
           └── page.tsx

🔎 예제

type Props = { params: { id?: string[] } };

export default function Optional(props: Props) {
  const { params } = props;
  console.log("PROPS =>", props);
  return (
    <div>
      <h1>{JSON.stringify(params)}</h1>
    </div>
  );
}

🔎 결과

1. /catchAll
2. /catchAll/1