5. 동적 라우팅 – 동적 경로를 사용한 페이지 생성

 Next.js는 동적 라우팅을 통해 URL의 일부를 변수로 설정하여, 하나의 페이지에서 다양한 데이터를 표시할 수 있도록 지원합니다. 이를 통해 동일한 페이지를 여러 번 재사용하면서도 다른 콘텐츠를 효율적으로 관리할 수 있습니다. 이번 글에서는 Next.js에서 동적 라우팅을 사용하여 페이지를 생성하는 방법을 초보자도 쉽게 이해할 수 있도록 설명하겠습니다.

1. 동적 라우팅 개념 이해하기

동적 라우팅은 URL 경로에 변수를 포함시켜, 다양한 콘텐츠를 하나의 페이지에서 처리할 수 있게 해줍니다. 예를 들어, 블로그에서 각각 다른 글을 표시하는 페이지를 하나의 파일로 처리할 수 있습니다. 동적 라우팅을 사용하면 코드 중복을 줄이고, 효율적으로 콘텐츠를 관리할 수 있습니다.

Next.js에서는 동적 라우팅을 구현하기 위해 파일 이름에 대괄호([])를 사용합니다. 예를 들어, pages/posts/[id].js 파일을 만들면, /posts/1, /posts/2와 같은 URL을 처리할 수 있게 됩니다.

2. 동적 라우팅 페이지 만들기

Next.js에서 동적 경로를 사용하는 페이지를 만들려면, pages 폴더에 [변수명].js 형식의 파일을 생성합니다. 그 후, 해당 페이지에서 useRouter 훅을 사용하여 동적 경로에서 값을 가져옵니다.

예시 코드:

javascript
// pages/posts/[id].js
import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { id } = router.query; // URL에서 동적 값(id)을 가져옴

  return (
    <div>
      <h1>Post ID: {id}</h1>
      <p>This is the page for post {id}.</p>
    </div>
  );
}

위 코드에서 useRouter 훅을 사용하여, /posts/[id]에서 id 값을 가져오고, 이를 화면에 표시합니다. 예를 들어, /posts/1 경로로 접근하면 Post ID: 1이라는 텍스트가 표시됩니다.

3. 동적 라우팅 활용 예시

동적 라우팅은 다양한 콘텐츠를 처리할 때 유용하게 사용할 수 있습니다. 예를 들어, 블로그 게시글, 상품 상세 페이지 등에서 동적 경로를 활용하여 각기 다른 데이터를 표시할 수 있습니다.

예시 코드:

javascript
// pages/products/[productId].js
import { useRouter } from 'next/router';

export default function Product() {
  const router = useRouter();
  const { productId } = router.query; // URL에서 동적 값(productId)을 가져옴

  return (
    <div>
      <h1>Product ID: {productId}</h1>
      <p>This is the page for product {productId}.</p>
    </div>
  );
}

이 예시에서는 /products/[productId] 경로를 사용하여 다양한 상품 페이지를 동적으로 처리할 수 있습니다. 예를 들어, /products/123과 같이 접근하면 상품 ID가 123인 상품 정보를 표시할 수 있습니다.

4. 동적 라우팅과 getStaticPaths, getStaticProps 사용하기

Next.js에서는 동적 라우팅을 더욱 효율적으로 활용할 수 있도록 getStaticPaths와 getStaticProps를 지원합니다. 이를 사용하면, 동적 경로에 해당하는 페이지들을 빌드 시 미리 생성하여 성능을 최적화할 수 있습니다.

예시 코드:

javascript
// pages/posts/[id].js
import { useRouter } from 'next/router';

export async function getStaticPaths() {
  // 동적 경로에 해당하는 모든 경로를 반환
  const paths = [
    { params: { id: '1' } },
    { params: { id: '2' } },
  ];
  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const { id } = params;
  // 실제 데이터 가져오기 예시 (API 호출 등)
  const postData = { id, title: `Post ${id}` };

  return { props: { postData } };
}

export default function Post({ postData }) {
  return (
    <div>
      <h1>{postData.title}</h1>
      <p>This is the page for post {postData.id}.</p>
    </div>
  );
}

위 코드에서 getStaticPaths는 동적 경로에 해당하는 모든 경로를 반환하고, getStaticProps는 해당 경로에 필요한 데이터를 가져옵니다. 이 방식은 빌드 시에 모든 페이지를 미리 생성하여 성능을 최적화할 수 있습니다.

5. 동적 라우팅의 장점

동적 라우팅을 사용하면 코드 중복을 줄이고, 다양한 콘텐츠를 효율적으로 처리할 수 있습니다. 또한, getStaticPaths와 getStaticProps를 활용하면 SEO 최적화와 성능 최적화를 동시에 할 수 있어, 웹 애플리케이션의 속도와 검색 엔진 최적화(SEO)에도 긍정적인 영향을 미칩니다.

결론

Next.js의 동적 라우팅 기능을 활용하면, 하나의 페이지에서 다양한 데이터를 효율적으로 처리할 수 있습니다. 동적 경로를 사용하여 URL을 변수로 설정하고, useRouter 훅을 사용하여 동적 값을 가져올 수 있습니다. 또한, getStaticPaths와 getStaticProps를 사용하여 성능과 SEO를 최적화할 수 있습니다. Next.js에서 동적 라우팅을 잘 활용하여 더욱 효율적이고 빠른 웹 애플리케이션을 개발해 보세요.