Route Handlers

2025.2.7 금요일의 공부기록

Next.js의 Route Handlers는 웹 요청 및 응답을 처리하는 API 엔드포인트를 생성할 수 있도록 해준다.
이를 활용하면 API 라우트를 만들고, 클라이언트와 서버 간의 데이터 요청을 쉽게 주고받을 수 있다.

---

Route Handlers란?

• Route Handlers는 app 디렉터리 내에서만 사용 가능하다.
• GET, POST, PUT, DELETE 등의 HTTP 요청을 처리하는 서버 API를 정의할 수 있다.
• NextRequest, Response.json() 등의 Next.js 내장 객체를 활용하여 API 응답을 구성한다.
• 서버 컴포넌트와 클라이언트 컴포넌트 간 데이터 통신이 가능하며, 백엔드 없이 풀스택 애플리케이션 개발이 가능하다.

🔗 Next.js 공식 문서: Route Handlers

---

실습 코드(api/users/route.ts)

📌 GET 및 POST API 생성 (api/users/route.ts)

import { NextRequest } from "next/server";

export async function GET(request: NextRequest) {
  console.log(request);
  return Response.json({
    ok: true,
  });
}

export async function POST(request: NextRequest) {
  const data = await request.json();
  return Response.json(data);
}

📌 설명:

• GET 요청 처리: 단순히 { ok: true } JSON 응답을 반환.
• POST 요청 처리:
  • 요청 본문을 await request.json()으로 가져와 데이터 추출.
  • 받은 데이터를 JSON 형식으로 그대로 반환.

---

클라이언트에서 API 요청 보내기 (login.tsx)

login.tsx에서 사용자가 버튼을 클릭하면 POST 요청을 fetch()로 보내 API와 통신한다.

📌 클라이언트 코드 (login.tsx)

"use client";

import FormButton from "@/components/form-btn";
import FormInput from "@/components/form-input";
import SocialLogin from "@/components/social-login";

export default function LogIn() {
  const onClick = async () => {
    const response = await fetch("/api/users", {
      method: "POST",
      body: JSON.stringify({
        username: "test",
        password: "1234",
      }),
    });
    console.log(await response.json());
  };

  return (
    <div className="flex flex-col gap-10 py-8 px-6">
      <div className="flex flex-col gap-2 *:font-medium">
        <h1 className="text-2xl">안녕하세요!</h1>
        <h2 className="text-xl">Log in with email and password.</h2>
      </div>
      <form className="flex flex-col gap-3">
        <FormInput
          type="email"
          placeholder="Email"
          required={true}
          errors={[]}
        />
        <FormInput
          type="password"
          placeholder="Password"
          required={true}
          errors={[]}
        />
      </form>
      <span onClick={onClick}>
        <FormButton loading={false} text="Log In" />
      </span>
      <SocialLogin />
    </div>
  );
}

📌 설명:

• onClick 함수에서 fetch("/api/users")로 POST 요청을 보낸다.
• 요청 본문에 JSON.stringify({ username: "test", password: "1234" }) 데이터를 포함하여 서버에 전달.
• 서버에서 응답받은 데이터를 콘솔에 출력.

---

실습 흐름 정리

1. 사용자가 로그인 버튼을 클릭하면 → fetch("/api/users")로 POST 요청을 보냄.
2. Next.js의 Route Handlers에서 API 요청을 받음 → POST 요청을 처리하고 받은 데이터를 반환.
3. 클라이언트에서 응답을 받음 → 콘솔에 응답된 데이터를 출력.

---

이러한 기존 방식(api/route.ts)은 Next.js 12 및 13의 Pages Router 스타일에서 유래했다.

그러나!

Next.js 13+ (App Router) 이후에는 더 간결한 방식이 추가되었다.

✅ 최신 Next.js 방식: route.ts 대신 server actions 사용

Next.js 13+에서는 Server Actions 기능을 활용하면 Route Handlers 없이도 직접 서버 함수를 호출할 수 있다.
이를 사용하면 더 직관적인 코드로 API 요청을 처리할 수 있다.

이에 대한 자세한 내용은 다음 포스트에서 더 자세히 다룰 예정이다

---

Next.js의 Route Handlers를 활용하면 백엔드 없이도 강력한 풀스택 애플리케이션을 쉽게 개발할 수 있다.
자세한 내용은 공식 문서를 참고하자! 🚀