Next.js의 페이지 기반 라우팅 시스템: 파일 기반 라우팅의 이해와 예제

Next.js는 React 애플리케이션의 서버 사이드 렌더링을 지원하는 프레임워크입니다. 이 프레임워크의 중요한 특징 중 하나는 파일 기반 라우팅 시스템입니다. 파일 기반 라우팅은 디렉토리와 파일 구조만으로 라우팅을 설정하는 방식으로, 이는 개발자가 URL 경로를 쉽게 정의하고 관리하도록 돕습니다. 이 글에서는 파일 기반 라우팅 시스템의 개념과 몇 가지 예제를 통해 이를 이해해보겠습니다.

파일 기반 라우팅 학습하기

Next.js에서 페이지는 pages 디렉토리에 위치한 파일들입니다. 파일의 이름이 곧 URL 경로가 됩니다. 예를 들어 pages/about.js 파일은 /about 경로로 라우팅됩니다. 이러한 방식은 직관적이며 설정 작업을 최소화할 수 있습니다.

루트 페이지 설정

Next.js 프로젝트를 생성하면 기본적으로 루트 디렉토리에 pages 디렉토리가 포함되어 있습니다. pages 디렉토리 내의 index.js 파일은 루트 URL인 /에 해당합니다. 예를 들어 다음과 같은 코드를 작성하면 루트 페이지가 설정됩니다.

jsx
// pages/index.js
export default function HomePage() {
  return (
    <div>
      <h1>Welcome to the Home Page</h1>
    </div>
  );
}

위 예제의 HomePage 컴포넌트는 루트 URL에 접속했을 때 렌더링됩니다.

동적 라우팅

Next.js에서는 파일 이름을 대괄호로 감싸는 방식으로 동적 라우팅을 설정할 수 있습니다. 예를 들어, 블로그 포스트의 개별 ID에 따라 경로를 동적으로 설정하고 싶다면 다음과 같이 파일을 생성할 수 있습니다.

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

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

  return (
    <div>
      <h1>Blog Post: {id}</h1>
    </div>
  );
}

위 코드에서, router.query.id를 통해 URL 경로의 변수를 받아올 수 있습니다. 예를 들어 /posts/123에 접근하면 id는 123이 됩니다.

라우팅 예제

몇 가지 추가 예제를 통해 더욱 복잡한 라우팅 시나리오를 살펴보겠습니다.

다중 경로 라우팅

Next.js에서는 디렉토리와 파일의 구조를 통해 다중 경로를 설정할 수 있습니다. 예를 들어 다음과 같은 파일 구조를 생각해봅시다:

/pages
  /blog
    /[year]
      /[month]
        /[day]
          index.js

위 구조는 년, 월, 일을 기반으로 블로그 포스트를 구성할 수 있는 URL을 나타냅니다. 예제 코드는 아래와 같습니다.

jsx
// pages/blog/[year]/[month]/[day]/index.js
import { useRouter } from 'next/router';

export default function BlogPostByDate() {
  const router = useRouter();
  const { year, month, day } = router.query;

  return (
    <div>
      <h1>Blog Post from {year}-{month}-{day}</h1>
    </div>
  );
}

커스텀 404 페이지

Next.js에서는 기본적으로 커스텀 404 페이지를 제공할 수 있습니다. 이를 위해 pages/404.js 파일을 생성하면 됩니다. 다음은 간단한 예제입니다.

jsx
// pages/404.js
export default function Custom404() {
  return (
    <div>
      <h1>404 - Page Not Found</h1>
    </div>
  );
}

이제 존재하지 않는 경로로 접근할 때 해당 컴포넌트가 렌더링됩니다.

결론

Next.js의 파일 기반 라우팅 시스템은 학습 곡선이 낮고, 매우 직관적인 방식으로 라우팅을 설정할 수 있도록 돕습니다. 파일과 디렉토리 구조를 통해 URL 경로를 정의할 수 있기 때문에 빠르게 애플리케이션을 개발하고 유지보수할 수 있습니다. 이 글에서 다룬 예제들을 통해 Next.js의 강력한 라우팅 기능을 이해하고 활용하는데 도움이 되었기를 바랍니다.