[Next.js14 강의] 6강 - 동적 라우팅 및 쿼리 파라미터 처리

안녕하세요! 그레이해커 월횽입니다. 이번 강의에서는 Next.js에서 동적 라우팅을 구현하고, 쿼리 파라미터를 처리하는 방법을 학습합니다. 이를 통해 다양한 URL 패턴을 다루고, 사용자 입력이나 데이터에 따라 동적으로 페이지를 생성하는 방법을 익히게 됩니다.

 

 

1. 동적 라우팅이란?

 

동적 라우팅의 개념

동적 라우팅은 특정 경로의 일부가 변동될 수 있는 라우팅을 의미합니다. Next.js에서는 이러한 동적 경로를 파일 이름에 대괄호([])를 사용하여 정의합니다.

728x90

예를 들어, 블로그 포스트의 ID에 따라 다른 페이지를 렌더링하는 경우, 동적 라우팅을 통해 동일한 템플릿을 여러 경로에 적용할 수 있습니다.

 

동적 라우팅 예제

pages/posts/[id].js 파일을 생성하여, /posts/1, /posts/2 등의 경로에 따라 다른 포스트 내용을 렌더링할 수 있습니다.

import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { id } = router.query;

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

이 코드는 URL의 id 부분을 추출하여 해당 ID에 맞는 내용을 화면에 렌더링합니다.

 

 

2. 쿼리 파라미터 처리하기

 

쿼리 파라미터란?

쿼리 파라미터는 URL에 추가적인 데이터를 전달할 때 사용됩니다. 쿼리 파라미터는 ?로 시작하여 key=value 형태로 전달되며, 여러 파라미터는 &로 구분됩니다.

반응형

예를 들어, /search?term=nextjs&sort=desc는 term과 sort라는 두 개의 쿼리 파라미터를 포함합니다.

 

쿼리 파라미터 사용 예제

Next.js에서 쿼리 파라미터는 useRouter 훅을 사용하여 접근할 수 있습니다. router.query를 통해 현재 경로의 쿼리 파라미터를 추출하고 사용할 수 있습니다.

import { useRouter } from 'next/router';

export default function SearchPage() {
  const router = useRouter();
  const { term, sort } = router.query;

  return (
    <div>
      <h1>Search Results</h1>
      <p>Search Term: {term}</p>
      <p>Sort Order: {sort}</p>
    </div>
  );
}

 

위 예제에서는 /search?term=nextjs&sort=desc와 같은 경로로 접속하면 term과 sort 값을 추출하여 화면에 표시합니다.

 

 

3. 동적 라우팅과 쿼리 파라미터 결합하기

 

경로와 쿼리 파라미터의 조합

동적 라우팅과 쿼리 파라미터를 결합하여 더 복잡한 URL 구조를 처리할 수 있습니다. 예를 들어, /posts/[id]?highlight=true와 같은 경로를 처리할 수 있습니다.

SMALL

이를 통해 URL 경로에 따라 페이지를 다르게 렌더링하고, 추가적인 데이터를 쿼리 파라미터로 전달하여 해당 데이터를 활용할 수 있습니다.

 

예제: 동적 경로와 쿼리 파라미터 함께 사용하기

import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { id, highlight } = router.query;

  return (
    <div>
      <h1>Post ID: {id}</h1>
      {highlight === 'true' && <p style={{ backgroundColor: 'yellow' }}>Highlighted Content!</p>}
      <p>This is the post with ID: {id}</p>
    </div>
  );
}

이 코드는 URL에 포함된 highlight 쿼리 파라미터가 true일 때 특정 내용을 강조하여 렌더링합니다. 예를 들어, /posts/1?highlight=true로 접속하면 강조 표시된 콘텐츠를 볼 수 있습니다.

 

 

4. getStaticPaths와 getStaticProps를 통한 정적 페이지 생성

 

정적 페이지 생성 개념

동적 라우팅이 필요한 페이지도 정적으로 미리 생성할 수 있습니다. 이를 위해 Next.js에서는 getStaticPaths와 getStaticProps 함수를 사용합니다.

getStaticPaths는 빌드 시점에 생성해야 할 동적 경로들을 미리 정의하고, getStaticProps는 각 경로에 필요한 데이터를 제공합니다.

 

예제: getStaticPaths와 getStaticProps 사용하기

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 요청을 통해 데이터 가져오기 등 가능
  return {
    props: {
      id,
      highlight: false,  // 기본적으로 하이라이트 해제
    },
  };
}

export default function Post({ id, highlight }) {
  return (
    <div>
      <h1>Post ID: {id}</h1>
      {highlight && <p style={{ backgroundColor: 'yellow' }}>Highlighted Content!</p>}
      <p>This is the post with ID: {id}</p>
    </div>
  );
}

 

 

5. 고급 동적 라우팅: 중첩 라우팅

 

중첩 라우팅이란?

중첩 라우팅은 하나의 동적 경로 내에서 추가적인 동적 경로를 정의하는 것을 의미합니다. 이를 통해 더 복잡한 URL 구조를 다룰 수 있습니다.

예를 들어, /posts/[id]/comments/[commentId]와 같은 경로를 정의할 수 있습니다.

중첩 라우팅 예제

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

export default function Comment() {
  const router = useRouter();
  const { id, commentId } = router.query;

  return (
    <div>
      <h1>Post ID: {id}</h1>
      <h2>Comment ID: {commentId}</h2>
      <p>This is the comment with ID: {commentId} for post {id}.</p>
    </div>
  );
}

 

이 코드는 특정 포스트의 특정 댓글 페이지를 동적으로 처리합니다. 예를 들어, /posts/1/comments/42와 같은 경로에 대해 해당 포스트의 댓글을 보여줍니다.

 

 

- 이전 수업 목록