[Next.js] 동적 라우팅 사용하기

Next.js에서는 동적 라우팅을 지원하고 있는 데

그 종류와 사용 방법에 대해서 알게 된 내용을 까먹지 않게 정리하면서 다른 블로그도 참고하여 채울 예정이다.

 

동적 라우팅은 영어로 Dynamic Routing이라고 한다.

크게 3가지 종류가 있는 데

🥕 일반적인 사용([@])

🥕 Multiple Segment 사용([@]/[@])

🥕 Catch All Routes로 Optional 하게 사용([[...@]])

---

일반적인 사용 (​[@])

 

1️⃣ 예시 1

- pages/[test].js 파일을 생성 시 url에서는 /orange, /strawberry로 접근 가능할 수 있다.

import { useEffect, useState } from "react";
import { useRouter } from "next/router";

const Test = () => {
  const [routes, setRoutes] = useState("");

  const router = useRouter();
  const account = router.query[0];
  useEffect(() => {
    if (account && typeof account === "object" && account.length > 0) {
      setRoutes(account);
    }
  }, [account]);
  
  return <div>{routes}</div>;
};

export default Test;

router를 console로 찍을 시 위와 같이 출력된다. 경로를 이동 할 때는 query의 0번째 요소를 사용한다.

 

2️⃣ 예시 2

경로 외에도 ?를 사용하여 여러 가지 정보를 넘길 경우 query에 함께 출력된다.

pages/[id]. js에 대해서 /orange? price=1000으로 접근했을 때  query object는 아래와 같이 출력됩니다.

 

3️⃣ 주의 할 점

- pages/orange.js => /orange에 매칭 된다.

- pages/[test]. js => /strawberry, /apple 등에 매칭 됨

하지만 /test/orange.js가 이미 존재하기 때문에 /orange에는 매칭 되지 않는다. 

---

Multiple segment ([@]/[@])

 

1️⃣ 예시

- pages/[fruite]/[price]. js 파일을 생성하고 pages/orange/1000으로 접근 시

query object는 아래와 같이 출력된다.

 

2️⃣ 더 알아보기

url로 접근하는 방식 외에도 next/link를 import 받아도 동일하게 접근할 수 있다.

import Link from "next/link";

function Home() {
  return (
    <ul>
      <li>
        <Link href="/post/abc">
          <a>Go to pages/post/[pid].js</a>
        </Link>
      </li>
      <li>
        <Link href="/post/abc?foo=bar">
          <a>Also goes to pages/post/[pid].js</a>
        </Link>
      </li>
      <li>
        <Link href="/post/abc/a-comment">
          <a>Go to pages/post/[pid]/[comment].js</a>
        </Link>
      </li>
    </ul>
  );
}
export default Home;

---

Catch All Routes ([...])

일일이 []/[] 형태로 감싸주지 않아도... 을 사용하면 모든 Routing(path)를 잡을 수 있다.

 

1️⃣ 예시

pages/[... fruit].js 파일을 생성하고 url에 /orange/1000/fruit로 접근하면 아래와 같이 출력된다.

 

2️⃣ Optional 하게 사용하기

 

✔️ 1중 bracket => [...fruit]

: fruit 없이는 라우팅 되지 않습니다.

예를 들어 pages/fruit/[... fruit]은 /fruit/orange에는 매칭 되지만 /fruit에는 매칭 되지 않습니다.

 

✔️ 2중 bracket => [[... fruit]]
: /fruit, /fruit/orange, /fruit/orange/1000 등등 모두 매칭 할 수 있습니다.

{ } // GET `/post` (empty object) 
{ "slug": ["a"] } // `GET /post/a` (single-element array) 
{ "slug": ["a", "b"] } // `GET /post/a/b` (multi-element array)

---

[React] Next JS 동적 라우팅 / Dynamic Routing