[TIL043] Next.js 라우트 핸들러 (Route Handler) 기초 개념

20240710 43일차

---

하루 회고

팀 프로젝트를 진행하면서 Next.js에 대한 개념이 너무 부족한 것 같아서 팀 프로젝트를 진행하면서 많이 부족하다고 생각하는 부분을 공부하려고 한다. 앱 라우터 방식의 라우트 핸들러 개념을 정리하려고 한다.

---

라우트 핸들러 (Route Handler)

기존의 리액트에서는 클라이언트 단에서 동적으로 렌더링하는 클라이언트 사이드 렌더링 (CSR)으로 React-Router-Dom과 같은 라이브러리를 사용해 라우팅을 사용하였다. 하지만 Next.js는 서버 단에서 페이지를 미리 렌더링하는 서버 사이드 렌더링 (SSR)을 기본적으로 지원하고 있으며, 더 나아가 파일 기반 라우팅 시스템을 통해 라우트를 쉽게 정의할 수 있다.

Next.js 13에서 도입된 app 디렉토리 방식은 기존의 pages 디렉토리 방식과 달리 더 유연하고 강력한 라우팅 옵션을 제공한다. 페이지 디렉토리 방식도 많이 사용한다고 하니, 나중에 알아봐야겠다. 현재 부트캠프에서 배우고 있는 방식은 앱 디렉토리 방식이기 때문에 앱 디렉토리 방식으로 작성하겠다.

라우트 핸들러 사용

프로젝트 구조

my-next-app/
├─ app/
│  ├─ api/
│  │  ├─ hello/
│  │  │  └─ route.js
│  ├─ page.js
│  ├─ about/
│  │  └─ page.js

1. 기본 페이지 설정

app/page.js

export default function Home() {
  return (
    <div>
      <h1>Home Page</h1>
    </div>
  );
}

app/about/page.js

export default function About() {
  return (
    <div>
      <h1>About Page</h1>
    </div>
  );
}

2. API 라우트 핸들러 설정

app/api/hello/route.js

export async function GET(request) {
  return new Response(JSON.stringify({ message: 'Hello, world!' }), {
    status: 200,
    headers: {
      'Content-Type': 'application/json',
    },
  });
}

이렇게 하면 /api/hello 경로로 GET 요청을 보낼 수 있으며, { message: 'Hello, world!' }라는 JSON 응답을 받을 수 있음.