[TIL] Next.js - Route Handler & Server Action

JongYeon·2025년 3월 10일

TIL

목록 보기
43/69
post-thumbnail

Route Handler

you to create custom request handlers for a given route using the Web Request and Response APIs.
웹 요청 및 응답 API를 사용하여 지정된 경로에 대한 사용자 정의 요청 핸들러를 만들 수 있다.

즉, REST API를 사용해서 지정된 경로에 대한 요청을 보내고 응답을 받는 것이다. supabase와 통신하는 것과 같이 백엔드 서버를 만드는 것이다.

api폴더 하위에 route.ts파일을 만들어 작성한다.

export async function GET(request: Request) {
  console.log("GET /api/test");
}

export async function POST(request: Request) {
  console.log("POST /api/test");
}

export async function PUT(request: Request) {
  console.log("PUT /api/test");
}

export async function DELETE(request: Request) {
  console.log("DELETE /api/test");
}

export async function PATCH(request: Request) {
  console.log("PATCH /api/test");
}

Server Action

서버에서 실행되는 비동기 함수

사용시 최상단에 "use server"지시어만 넣어주면된다.
서버 컴포넌트와 클라이언트 컴포넌트 모두에서 사용가능하다. 주로 CRUD기능을 개발할때 사용한다.

"use server";
import { Product } from "@/type/product";
import { BASE_URL } from "@/constants/api";

export async function getProducts() {
  const res = await fetch(`${BASE_URL}/products`, {
    cache: "no-store",
  });
  const data: Product[] = await res.json();

  return { data };
}
profile
프론트엔드 공부중

0개의 댓글