Next.js - Dynamic Routing

Next.js의 Dynamic Routing

Next.js 의 동적 라우팅은 웹 개발에서의 유연성을 크게 높이는 기능이다. 이 기능을 이용하면, 미리 설정된 URL 패턴에 구애받지 않고, 실시간으로 변화하는 사용자의
상황이나 특정 조건에 따라 다양한 URL 경로를 제공할 수 있다.

예를 들어, 블로그 사이트를 운영한다면, 각 블로그 포스트에 고유한 URL을 제공하는 것이 필요하다. 이때 Next.js의 동적 라우팅이 큰 도움이 된다. 블로그의 기본 경로가 '/blog'라면, 동적 라우팅을 이용하면 '/blog/unique-post-id'와 같이 각 블로그 포스트마다 고유한 URL을 제공할 수 있다.

이렇게 대괄호([])로 폴더 이름을 감싸면, 해당 부분은 URL에서 동적으로 변할 수 있는 Dynamic Segment가 된다. 구체적으로 'pages/blog/[id].js' 와 같이 파일을 생성하게 되면, '[id]' 부분이 각각의 블로그 글의 고유 ID에 따라 동적으로 변하게 된다. 이렇게 설정하면, '/blog/first-post' 혹은 '/blog/second-post'와 같은 방식으로 각 블로그 글에 대해 쉽게 접근하게 된다.

blog/post1 이런식의 url을 얻기 위해서는 blog 폴더생성 후 [id].js 파일을 생성한다.

// 예시 코드

import { useRouter } from 'next/router'

const Post = () => {
  const router = useRouter()
  const { id } = router.query

  return <p>Post: {id}</p>
}

export default Post

이런 Dynamic Segment에 접근하기 위해서는 Next.js가 제공하는 'useRouter'라는 Hook을 사용하면 된다. 이 Hook은 현재 활성화된 라우트에 대한 정보를 가져오는 기능을 제공하므로, 동적 라우팅에서 설정한 파라미터를 쉽게 추출하여 활용할 수 있다.

// 예시 코드

import { useRouter } from 'next/router';

export default function Page() {
 const router = useRouter();
 return <p>Post: {router.query.slug}</p>;
}

Catch-all Segments

Catch-all Segments 는 웹사이트의 다양한 서브 경로를 다루는데 아주 유용하다. 이 기능은 Dynamic Segments를 확장해서 사용하며, '...' ellipsis 를 대괄호([]) 안에 추가하는 것으로 생성된다.

예를 들어, 'pages/shop/[...slug].js'라는 파일을 만들면, '/shop/clothes'부터 '/shop/clothes/tops/t-shirts'와 같은 모든 하위 경로에 매칭된다. 이를 활용하면 웹사이트의 계층 구조를 효과적으로 표현할 수 있는 것이다.

// 예시 코드

import { useRouter } from 'next/router'

export default function Page() {
  const router = useRouter()

  const { slug } = router.query

  // slug는 배열 형태로 반환되며, 배열의 각 원소는 서브 경로를 나타낸다
  // '/shop/clothes/tops/t-shirts'라는 URL의 경우 slug는 ['clothes', 'tops', 't-shirts']가 된다.
  console.log(slug)

return ...


}

// 노마드 코더 예제
// [...params].js

import { useRouter } from "next/router";

export default function Detail({params}) {
	const router = useRouter();
    const [title, id] = params || [];
    
    return (
    	<div>
        	<h4>{title}</h4>
        </div>
      );
    }  

// SEO에 최적화되게 만들고 싶다면 getServerSideProps()를 사용한다.

// Next.js에서 SSR을 사용하기 위해서는 페이지에서 getServerSideProps() 를 통해 데이터를 받아와야한다.



export default function getServerSideProps({params: { params }})  {
	return {
    	props: {
        	prarams,
            },
          };
        }
        

Optional Cathch-all

catch-all segements와 함께 next.js에서는 Optional Cathch-all 이라는 또 다른 라우팅이 있다. 이 동적 라우팅은 Dynamic Segments에 세 개의 점(ellipsis, ...)을 추가함으로써 활성화되는데, 이중 대괄호로 [[...slug]] 표현한다.

예를 들어 'pages/posts/[[...slug]].js' 파일을 생성하면, 이 파일은 '/posts', '/posts/first-post', '/posts/first-post/comments' 등의 URL에 모두 매칭된다. 이렇게 Optional Catch-all을 사용하면, URL의 일부 경로가 있을 수도 있고 없을 수도 있으며, 해당 부분이 없는 경우에도 URL이 유효해 사용자의 요구에 더욱 유연하게 대응할 수 있다는 장점이 있다.

// 예시 코드

import { useRouter } from 'next/router'

export default function Post() {
  const router = useRouter()

  const { slug } = router.query

  return (
    <div>
      {slug.length === 0 && <Posts />}
      {slug.length === 1 && <PostDetail />}
      {slug.length === 2 && <PostComments />}
    </div>
  )
}

동적 라우팅의 의미

Next.js의 동적 라우팅은 사용자 경험을 향상시키며, 웹 애플리케이션의 유연성을 크게 높인다. 이 기능을 활용하면, 사용자 프로필 페이지, 특정 블로그 포스트, 상품 페이지 등, 상황에 따라 내용이 변하는 다양한 웹 페이지를 구성할 수 있다.

여기까지 Next.js의 동적 라우팅에 대해 알아보았는데, 아직은 알것 같으면서도 조금 헷갈리는 부분이 있어서 영상 보면서 계속 복습해봐야겠다.

출처 : https://nextjs.org/docs/routing/dynamic-routes