React Next.js Route 설정 완벽 가이드: 파일 시스템 라우팅부터 동적 라우팅까지!

React Next.js Route 설정 완벽 가이드: 파일 시스템 라우팅부터 동적 라우팅까지!

Next.js는 React 기반의 풀스택 프레임워크로, 뛰어난 성능과 개발 편의성을 제공합니다. 특히 파일 시스템 기반의 라우팅은 Next.js의 핵심 기능 중 하나이며, 개발자가 직관적으로 애플리케이션의 경로를 관리할 수 있도록 도와줍니다. 이번 포스팅에서는 Next.js의 라우팅 설정 방법을 자세히 알아보고, 실제 예제를 통해 이해도를 높여보겠습니다.

1. 파일 시스템 라우팅 (File System Routing)

Next.js의 가장 기본적인 라우팅 방식은 파일 시스템 라우팅입니다. pages 디렉토리 안에 파일을 생성하면, Next.js는 파일 경로를 기반으로 자동으로 라우트를 생성합니다.

예시

pages 디렉토리 안에 다음과 같은 파일이 있다고 가정해 봅시다.

• pages/index.js: 메인 페이지 (/)
• pages/about.js: 소개 페이지 (/about)
• pages/products.js: 제품 목록 페이지 (/products)

각 파일은 React 컴포넌트를 export 해야 합니다. 예를 들어, pages/about.js는 다음과 같을 수 있습니다.

// pages/about.js

function About() {
  return (
    <div>
      <h1>소개 페이지</h1>
      <p>저희는 최고의 서비스를 제공합니다.</p>
    </div>
  );
}

export default About;
        

2. 동적 라우팅 (Dynamic Routes)

때로는 URL의 일부가 동적으로 변하는 라우트가 필요할 수 있습니다. 예를 들어, 제품 상세 페이지 (/products/1, /products/2 등)가 이에 해당합니다. Next.js에서는 대괄호 []를 사용하여 동적 라우트 세그먼트를 정의할 수 있습니다.

예시

pages/products/[id].js 파일을 생성하면, /products/123, /products/abc와 같은 모든 URL이 해당 파일로 라우팅됩니다. id는 URL 파라미터로 사용할 수 있습니다.

// pages/products/[id].js

import { useRouter } from 'next/router';

function ProductDetail() {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>제품 상세 페이지</h1>
      <p>제품 ID: {id}</p>
    </div>
  );
}

export default ProductDetail;
        

위 코드에서 useRouter 훅을 사용하여 router 객체를 얻고, router.query를 통해 id 파라미터에 접근할 수 있습니다.

3. Link 컴포넌트

페이지 간의 이동은 Next.js에서 제공하는 Link 컴포넌트를 사용하는 것이 좋습니다. Link 컴포넌트는 클라이언트 사이드 라우팅을 통해 페이지를 빠르게 전환할 수 있도록 도와줍니다.

import Link from 'next/link';

function HomePage() {
  return (
    <div>
      <h1>메인 페이지</h1>
      <Link href="/about">
        <a>소개 페이지로 이동</a>
      </Link>
    </div>
  );
}

export default HomePage;
        

위 코드에서 <Link href="/about">는 /about 페이지로 이동하는 링크를 생성합니다. <a> 태그는 Link 컴포넌트의 자식으로 사용되어야 하며, 실제 링크를 표시하는 역할 을 합니다.

4. API Routes

Next.js는 API 엔드포인트를 쉽게 만들 수 있도록 pages/api 디렉토리를 제공합니다. 이 디렉토리 안에 파일을 생성하면, Next.js는 해당 파일을 API 엔드포인트로 자동 설정합니다.

// pages/api/hello.js

export default function handler(req, res) {
  res.status(200).json({ name: 'Hello, world!' });
}
        

위 코드에서 pages/api/hello.js는 /api/hello 엔드포인트를 생성합니다. 이 엔드포인트는 { name: 'Hello, world!' }라는 JSON 응답을 반환합니다.

결론

Next.js의 라우팅 시스템은 매우 강력하고 유연합니다. 파일 시스템 라우팅, 동적 라우팅, Link 컴포넌트, API Routes 등 다양한 기능을 통해 개발자는 복잡한 애플리케이션의 라우팅을 효율적으로 관리할 수 있습니다. 이번 가이드에서 배운 내용을 바탕으로 Next.js 프로젝트에서 라우팅을 자유자재로 활용해 보세요!