Next.js API 만들기 - handler와 withHandler

서론

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 되야 한다는 것이다.

끝.