Next.js 알아보기 7 (Route Handler & Server Action)

 

Route Handler 📖

webRequest와 Response APIs를 쓸 수 있는 핸들러를 만들 수 있게 끔 허용해 restful 한 api를 만들 수 있게 해 줍니다.

route handler

 

서버, 클라이언트 컴포넌트 개념을 포함하는 React 컴포넌트 개념을 벗어나 `route.ts`파일을 다루게 됩니다.

 

사용 방법

api > apiTest 폴더를 만든 후, 하위에 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");
}

 

그리고 API testing 도구를 활용해 테스트를 해봅니다.

 

너무 간편하게 백엔드 서버를 사용할 수 있습니다.

 

Server Action 📖

Server Actions는 단순히 서버에서 실행되는 비동기 함수입니다. 폼 제출과 같은 데이터르 처리할 수 있게 합니다.

 

사용 방법

사용하려는 파일 상단에 `"use server"`지시어를 넣어주면 사용할 수 있고 서버, 클라이언트 컴포넌트 모두에서 사용할 수 있습니다.

'use server';

import { revalidatePath } from 'next/cache';
import { redirect } from 'next/navigation';

export async function addItemToCart(formData: FormData) {
  const { itemId, quantity } = formData.get('itemId'), formData.get('quantity');
  const cart = await fetch({...});

  revalidatePath('/cart');
  redirect('/cart');
}

 

`Server Actions`는 주로 CRUD 작업을 수행하는 데 사용됩니다.

 

다음 게시물

Next.js 알아보기 8 (Caching - 어려움 주의)