[Next.js] 중첩 라우팅(Nested Routes)과 동적 라우팅(Dynamic Routing)

폴더별 라우팅 주소도 있지만 다이나믹 라우팅의 방법도 존재한다.

app/about/page.tsx ==> '/about' 라우팅에 대응
app/profile/page.tsx ==> '/profile' 라우팅에 대응

중첩 라우팅

중첩 라우팅이란 표현은 라우팅 주소 밑에 또 다른 주소가 연이어 나온다는 의미로, 예를들어 'blog' 주소 밑에 'first', 'second'라는 주소가 연이어 나온다.

localhost:3000/blog
localhost:3000/blog/first
localhost:3000/blog/second

1. app 폴더에 blog 폴더를 만들고, blog 폴더에는 page.tsx 파일을 만든다.
2. 그리고 blog폴더 내에 first, second 폴더를 각각 만든 뒤 해당 폴더 각각 page.tsx 파일을 만든다.
   ->이제 'blog' 주소로도 접근할 수 있고, 'blog/first', 'blog/second' 주소로도 접근할 수 있다.

동적 라우팅

동적라우팅이란?
미리 정의된 URL 주소로만 라우팅하는 것이 아니라 사용자가 접근한 경로 혹은 상황에 따라 동적인 라우팅을 제공하고 싶을 때 사용할 수 있는 방식이다.

localhost:3000/products
localhost:3000/products/1
(localhost:3000/products/id)

products라는 주소 밑에 id 부분이 있는데 이 id가 어떤 값이든 다 처리할 수 있는 주소를 만들어야 하는데,

DB에서 product를 불러온다고 할 때 해당 product의 id 값은 특정값으로 고정되지않기에 다이내믹 라우팅이 필요하다.

만드는 방법은 먼저, app 폴더 밑에 products 폴더를 만들고 그 밑에 [productId] 라는 폴더를 만들어 그 안에 page.tsx 파일을 만든다.

😇 스퀘어 브래킷으로 시작하는 폴더명은 Next.js에서 다이내믹 라우팅으로 간주된다!
그리고 스퀘어 브래킷 안에 있는 단어가 바로 동적인 라우팅 주소 즉, 파라미터가 된다.

//[productId] > page.tsx

export default function ProductDetails(props: any) {
  console.log(props);
  return (
    <h1>
      Product {props.params.productId} / {props.searchParams.country} Details
    </h1>
  );
}

다이내믹 라우팅 컴포넌트는 props를 가지고 있는데,
아래와 같이 두 개의 값을 갖는 props가 된다.

{ params: { productId: '1' }, searchParams: {} }

참고

https://mycodings.fly.dev/blog/2024-01-13-nextjs-14-tutorial-1-all-about-routing