Next.js API 만들기 - handler와 withHandler

With·2022년 2월 21일
0

Next Backend

목록 보기
3/6

서론

Next.js에서 제공하는 api 기능을 이용해서, api 서버를 만들어 보자. 단순한 mock-data가 아니라, orm을 통해 실제 db와 연결시키고 이것을 통해 온전한 app을 만들 수 있다.

본론

pages 폴더 내에 api 폴더를 생성하고, 임의의 폴더를 생성한다. next.js의 pages 디렉토리 구조가 router가 되듯이 api 폴더 디렉토리 구조가 api url이 된다. 나는 test 폴더를 생성하고, 그 안에 test.tsx 파일을 생성했다.

import { NextApiRequest, NextApiResponse } from "next";
import withHandler from '../../libs/server/withHandler'

async function handler(req: NextApiRequest, res: NextApiResponse) {
  //... 로직
  res.status(200).json({ ok: true })
}

export default withHandler("GET", handler)

test.tsx 파일에서는 반드시 실행하고자 하는 handler를 export default 해야 한다. 그래야만 handler가 실행되기 때문이다. 위 코드에서는 handler를 바로 export default 하지 않고, withHandler 라는 함수를 export default 했다. withHandler 함수의 목적은 handler에서 동일하게 발생하는 보일러 플레이트를 줄이기 위한 함수이다.

handler 함수는 마지막에 res.status(200).json({}) 을 통해서 client로 다시 응답을 해줄 수 있다. 그 외 필요한 비즈니스 로직은 함수내에서 작성한다.

import { useState } from "react";
import { NextApiRequest, NextApiResponse } from "next";

export interface ResponseType {
  [key: string]: any;
  ok: boolean;
}

export default function withHandler(
  method: "POST" | "GET" | "DEL" | "PUT",
  fn: (req: NextApiRequest, res: NextApiResponse) => void
) {
  return async function (req: NextApiRequest, res: NextApiResponse) {
    if (req.method !== method) {
      return res.status(405).end();
    }
    try {
      fn(req, res);
    } catch (e) {
      return res.status(500).json({ e });
    }
  };
}

withHandler 는 method와 handler를 파라미터로 받고, try.. catch 등의 진부한 코드를 실행하고, try 구문에서 파라미터로 받은 handler를 실행시킨다. 중요한 것은 반드시 실행하고자 하는 handler는 export default 되야 한다는 것이다.

끝.

profile
주니어 프론트엔드 개발자 입니다.

0개의 댓글