Next.js) 폴더명에 []대괄호 사용- 동적라우팅

 

 

Next.js에서 폴더명에 [](대괄호)를 쓰는 건 **동적 라우팅(Dynamic Routing)**을 의미.

즉, 주소의 특정 부분을 변수처럼 처리하고 싶을 때 사용하는 방식이다.

 

---

✅ 예: [id] 폴더의 의미

src/app/items/[id]/page.tsx

이 구조는 /items/무언가 형태의 URL을 모두 이 페이지로 연결하겠다는 뜻이다.

예를 들어:

주소 처리되는 값 (id)

/items/check1	"check1"
/items/some-product	"some-product"
/items/123	"123"

이때 이 id 값은 useParams() 또는 PageProps를 통해 접근할 수 있다.

---

✅ 어떻게 동작하나요?

1. URL 접속

브라우저에서 /items/check1에 접속

2. [id]/page.tsx 실행

Next.js는 check1을 id 값으로 인식

3. 코드에서 사용

export default function Page({ params }: { params: { id: string } }) {
  return <div>상품 ID: {params.id}</div>;
}

혹은 클라이언트 컴포넌트라면:

"use client";
import { useParams } from "next/navigation";

const ItemDetail = () => {
  const params = useParams(); // { id: "check1" }
  return <div>상품 ID: {params.id}</div>;
};

---

✅ 왜 유용한가요?

• 상품 상세 페이지, 게시글 상세 페이지, 사용자 프로필 등 id 기반으로 조회되는 페이지를 만들 때 유용하다.
• URL에 따라 하나의 컴포넌트로 다양한 데이터를 렌더링할 수 있다.

---

📦 관련 기능

기능 설명

[id]	경로의 동적 세그먼트를 의미함
generateStaticParams()	빌드 시 가능한 id 목록을 미리 생성해줌 (정적 사이트용)
useParams()	클라이언트에서 URL param 접근
params: { id }	서버 컴포넌트에서 param 접근 방식

---

 

Next.js에서는 동적 라우팅을 좀 더 유연하게 처리하기 위해 **선택적(optional)**이거나 여러 개를 한번에 잡는(catch-all) 경로를 만들 수 있다. 

---

✅ 1. 기본 동적 라우팅

/pages/items/[id].tsx

• /items/123 → id = "123"
• id가 무조건 있어야 함

---

✅ 2. 선택적 경로 (Optional Catch-All)

/pages/items/[[...slug]].tsx

• slug는 배열로 들어옴
• 있어도 되고, 없어도 됨

예시

URL slug 값

/items	undefined
/items/a	["a"]
/items/a/b	["a", "b"]

코드 예

import { useParams } from "next/navigation";

export default function Page() {
  const params = useParams();
  const slug = params?.slug ?? []; // [] or ['a', 'b']

  return <div>경로: {slug.join(" / ")}</div>;
}

---

✅ 3. 캐치올 라우트 (Catch-All)

/pages/items/[...slug].tsx

• slug는 배열로 들어옴
• 최소 하나 이상 있어야 함

예시

URL slug 값

/items/a	["a"]
/items/a/b	["a", "b"]
/items	❌ 404 (없음!)

---

✨ 요약 비교

폴더명 or 파일명 필수 여부 값 형태 설명

[id]	✅ 필수	string	/items/1
[...slug]	✅ 필수	string[]	/items/a/b (없으면 404)
[[...slug]]	❌ 선택	string[]	/items, /items/a 등 모두 가능

---

필요한 상황에 맞게 유동적으로 사용할 수 있다.
예를 들어:

• [id] → 단일 상품 조회
• [...slug] → 카테고리 + 필터 조건 등 다단계 경로
• [[...slug]] → 메인 페이지에서도 필터가 있을 수 있을 때

 

 

 

 

 

 

참고 쳇지피티