6장: 동적 라우팅과 API 개발

들어가며

Next.js의 강력함은 유연한 라우팅 시스템과 효율적인 API를 제공하는 점에서 더욱 두드러집니다. 이 장에서는 동적 라우팅을 활용하여 페이지를 생성하고, Next.js의 API 라우트를 사용하여 서버사이드 로직을 구현하는 방법에 대해 알아보겠습니다.

동적 라우팅 (Dynamic Routing)

Next.js에서 동적 라우팅은 URL의 특정 부분을 변수처럼 다룰 수 있게 해줍니다. 이를 통해 더 복잡하고 다양한 페이지를 쉽게 생성할 수 있습니다.

동적 라우팅 설정

동적 라우트는 pages 디렉토리에서 대괄호([])를 사용하여 특별한 폴더 또는 파일을 만들어 설정할 수 있습니다.

// pages/blog/[slug].js
import { useRouter } from 'next/router';

export default function BlogPost() {
  const router = useRouter();
  const { slug } = router.query;

  return <h1>Blog Post: {slug}</h1>;
}

위 예는 blog 아래의 모든 slug 이름의 페이지를 핸들링 합니다. URL /blog/my-first-post를 입력하면 slug가 "my-first-post"로 설정되어 해당 값을 보여줍니다.

데이터 페칭과 조합

동적 라우트는 getStaticProps와 getStaticPaths와 조합하여 사용됩니다.

export async function getStaticPaths() {
  const paths = [
    { params: { slug: 'post-1' } },
    { params: { slug: 'post-2' } },
  ];
  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const { slug } = params;
  const data = getPostData(slug);
  return { props: { data } };
}

export default function BlogPost({ data }) {
  return <div>{data.title}</div>;
}

API 개발

Next.js는 API 라우트를 사용하여 서버사이드 로직을 작성하고, React와 연동하여 효율적인 웹 애플리케이션을 만듭니다.

API 라우트 만들기

다음은 API를 생성하는 예입니다:

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello, World!' });
}

이 파일은 /api/hello로 접근할 수 있습니다.

여러 HTTP 메소드를 핸들링하기

API 라우트에서 다양한 HTTP 메소드를 쉽게 처리할 수 있습니다.

export default function handler(req, res) {
  if (req.method === 'POST') {
    const data = req.body;
    // Handle POST logic
    res.status(200).json({ message: 'Post received', data });
  } else if (req.method === 'GET') {
    // Handle GET logic
    res.status(200).json({ message: 'Hello with GET' });
  }
}

마무리하며

Next.js에서 동적 라우팅과 API 라우트는 매우 강력한 도구들입니다. 이 기능들을 활용하여 더욱 효과적이고 인터랙티브하며 빠른 웹 애플리케이션을 만들 수 있습니다. 연습을 통해 Next.js의 잠재력을 충분히 경험하시길 바랍니다.

참고 자료

• Dynamic Routes

• API Routes in Next.js

• Building APIs with Next.js