Next.js 동적 라우팅 설정하기: 복잡한 네비게이션 처리

Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링과 정적 사이트 생성이 매우 간편합니다. Next.js의 가장 큰 장점 중 하나는 파일 기반의 라우팅 시스템입니다. 이 시스템을 사용하면 특정 파일 구조를 만들기만 해도 자동으로 라우팅이 설정됩니다. 그러나 앱이 커지면서 더 복잡한 네비게이션이 필요한 경우, 동적 라우팅이 필수적입니다. 이번 글에서는 Next.js에서 동적 라우팅을 설정하고 복잡한 네비게이션을 처리하는 방법에 대해 알아보겠습니다.

동적 라우팅을 위한 파일 및 폴더 구조

Next.js에서 동적 라우팅을 구현하려면, 우선 파일과 폴더 구조를 잘 이해해야 합니다. 동적 라우팅을 설정하기 위해서는 대괄호([])를 사용합니다.

예를 들어, 특정 사용자의 프로필 페이지를 라우팅하려면 다음과 같은 구조를 가질 수 있습니다:

/pages
  /users
    [id].js

이렇게 하면 /users/1, /users/2 같은 URL들이 자동으로 [id].js 파일로 라우팅됩니다.

getStaticPaths 사용하기

동적 라우팅을 위한 파일 구조를 설정한 뒤에는 데이터를 가져와야 합니다. 이는 getStaticPaths 함수를 사용하여 이루어집니다. getStaticPaths는 반환된 경로들에 대한 정적 페이지를 생성합니다. 다음은 getStaticPaths를 사용하는 예제입니다:

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

export async function getStaticPaths() {
  // API 등을 통해 얻은 사용자 목록 데이터입니다.
  const users = await fetch('https://api.example.com/users').then(res => res.json());
  const paths = users.map(user => ({ params: { id: user.id.toString() }}));

  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const user = await fetch(`https://api.example.com/users/${params.id}`).then(res => res.json());
  return { props: { user } };
}

const UserProfile = ({ user }) => {
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.bio}</p>
    </div>
  );
};

export default UserProfile;

이 예제에서 getStaticPaths 함수는 API에서 사용자 목록을 가져와 각 사용자 별 경로를 반환합니다. getStaticProps 함수는 개별 사용자의 데이터를 가져와 컴포넌트에 props로 전달합니다.

getServerSideProps 사용하기

동적 데이터를 서버 사이드에서 바로 가져오는 또 다른 방법으로 getServerSideProps를 사용할 수도 있습니다. 이 함수는 요청이 들어올 때마다 실행되며, SSR(Server-Side Rendering)을 가능하게 합니다.

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

export async function getServerSideProps({ params }) {
  const user = await fetch(`https://api.example.com/users/${params.id}`).then(res => res.json());
  return { props: { user } };
}

const UserProfile = ({ user }) => {
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.bio}</p>
    </div>
  );
};

export default UserProfile;

위 예제에서는 getServerSideProps 함수를 사용하여 매 요청마다 데이터를 가져옵니다. 이는 데이터를 항상 최신 상태로 유지해야 할 때 유용합니다.

복잡한 네비게이션 처리하기

동적 라우팅을 통해 다양한 경로의 페이지를 생성할 수 있지만, 복잡한 네비게이션을 처리하기 위해서는 추가적인 고려사항이 필요합니다.

중첩된 동적 라우팅

중첩된 동적 라우팅을 설정하려면 더 많은 폴더와 파일 구조가 필요합니다. 예를 들어, 특정 사용자의 특정 게시물에 대한 경로는 다음과 같이 설정할 수 있습니다:

/pages
  /users
    [id]
      /posts
        [postId].js

이를 통해 /users/1/posts/10 같은 URL들이 동적으로 라우팅됩니다.

동적 URL 처리

Next.js에서는 useRouter 훅을 사용하여 현재 라우터의 정보를 가져올 수 있습니다. 이를 통해 동적 URL의 파라미터를 처리할 수 있습니다.

javascript
import { useRouter } from 'next/router';

const PostPage = () => {
  const router = useRouter();
  const { id, postId } = router.query;

  return (
    <div>
      <h1>Post {postId} by User {id}</h1>
    </div>
  );
};

export default PostPage;

위 코드에서는 useRouter를 사용하여 URL에서 동적 파라미터 id와 postId를 추출합니다.

결론

Next.js의 동적 라우팅을 사용하면 파일 기반 라우팅 시스템을 벗어나 더 복잡하고 역동적인 네비게이션을 구현할 수 있습니다. getStaticPaths, getServerSideProps 함수를 통해 데이터를 가져오는 방법과 여러 동적 라우팅 설정을 통해 다양한 요구 사항을 충족할 수 있습니다. 네비게이션이 복잡해질수록 이러한 기술을 잘 활용하여 효율적인 라우팅과 데이터 관리를 할 수 있습니다.