Next.js에서의 페이지와 라우팅

Next.js는 React 프레임워크로 강력한 파일 기반 라우팅 시스템을 제공합니다. 이 시스템은 디렉터리와 파일 구조를 통해 페이지와 경로를 자동으로 생성합니다. 이 글에서는 Next.js의 다양한 라우팅 방식, 동적 라우팅, 그리고 API 라우팅에 대해서 살펴보겠습니다.

파일 기반 라우팅

Next.js의 파일 기반 라우팅은 프로젝트의 pages 디렉터리 내의 파일과 디렉터리 구조를 그대로 URL 경로로 매핑합니다. 예를 들어 pages/about.js 파일은 /about 경로로 접근할 수 있는 페이지를 생성합니다.

javascript
// pages/about.js
export default function About() {
  return <div>About Page</div>;
}

위의 코드에서는 간단한 About 페이지가 정의되어 있으며, 브라우저에서 /about 경로로 접근하면 해당 페이지가 렌더링됩니다. 디렉터리 구조도 마찬가지로 동작합니다. 예를 들어 pages/blog/index.js는 /blog 경로와 매핑됩니다.

중첩된 라우트

Next.js에서는 하위 디렉터리를 통해 중첩된 경로를 생성할 수 있습니다. 예를 들어 pages/blog/post.js 파일은 /blog/post 경로로 접근할 수 있습니다. 이렇게 디렉터리를 중첩시켜 복잡한 URL 구조를 쉽게 관리할 수 있습니다.

javascript
// pages/blog/post.js
export default function Post() {
  return <div>Blog Post Page</div>;
}

동적 라우팅

Next.js에서는 대괄호 ([])를 사용하여 동적 라우팅을 구현할 수 있습니다. 예를 들어 pages/blog/[id].js는 블로그 글의 ID를 동적으로 받아들이는 경로로 설정됩니다.

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

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

  return <div>Blog Post ID: {id}</div>;
}

위의 코드에서는 useRouter 훅을 사용하여 URL 경로에서 id 값을 받아와서 사용할 수 있습니다. 예를 들어 /blog/123 경로로 접근하면 id 값이 123으로 설정됩니다.

동적 경로와 getStaticPaths

Next.js에서 getStaticPaths 함수를 사용하여 빌드 시 동적 경로를 미리 생성할 수 있습니다. 예를 들어 다수의 블로그 글이 있을 경우 각각의 글에 대해 정적 페이지를 생성하려면 다음과 같이 할 수 있습니다.

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

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

export async function getStaticProps({ params }) {
  return { props: { id: params.id } };
}

export default function BlogPost({ id }) {
  const router = useRouter();

  return <div>Blog Post ID: {id}</div>;
}

getStaticPaths 함수는 빌드 시각에 경로를 미리 생성해 두며, getStaticProps 함수는 특정 경로에 대한 데이터를 동적으로 제공합니다.

API 라우팅

Next.js는 API 라우팅 기능도 제공합니다. pages/api 디렉터리 내에 파일을 생성하면 API 엔드포인트로 자동으로 설정됩니다. 예를 들어 pages/api/hello.js 파일은 /api/hello 경로로 접근할 수 있습니다.

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

위의 코드는 간단한 API 엔드포인트를 정의합니다. handler 함수는 요청(req)과 응답(res) 객체를 받아서 200 상태 코드와 JSON 형식의 응답을 반환합니다.

동적 API 라우팅

API 경로에서도 동적 라우팅을 사용할 수 있습니다. 예를 들어 pages/api/users/[id].js 파일은 동적 사용자 ID를 받아들일 수 있는 API 엔드포인트를 정의합니다.

javascript
// pages/api/users/[id].js
export default function handler(req, res) {
  const { id } = req.query;
  res.status(200).json({ userId: id });
}

위의 코드는 사용자 ID를 동적으로 받아서 JSON 형식으로 반환하는 API 엔드포인트를 정의합니다. 예를 들어 /api/users/123 경로로 GET 요청을 보내면 `{