Next.js API 핸들러 커스텀 미들웨어 구성하기

개요

Next.js 에서는 /pages/api 경로 아래에 완전히 백엔드에서만 동작하는 API 를 구성할 수 있도록 Next.js API Routes 를 제공하지만, 이와 함께 사용하며 HTTP Method 를 필터링해주거나 세션 인증 여부에 따른 페이지 반환 등을 해줄 미들웨어의 지원이 부족하다. (아니면 내가 아직 Node.js 서버 라이브러리에 대해서 무지해서 모르는 것일 수도 있다.)

하지만, 높은 자유도가 있어서 직접 만들면 되는 부분이다.

구성 코드

API 응답 형태 및 HTTP Method enum 정의

export interface ApiResponse {
  ok: boolean;
  status: number;
  message?: string;
  [key: string]: any;
}

export type HttpMethod = "GET" | "POST" | "DELETE" | "PUT" | "PATCH";

타입을 정의한다. 이 타입들은 추후에 재활용이 가능해서 따로 빼두었다.

로그인 여부 등에 따른 권한처리 + 메서드 처리 핸들러

import { HttpMethod } from "@libs/types/commonTypes";
import { NextApiRequest, NextApiResponse } from "next";

interface PageAuthorization {
  onlyLoggedInUser?: boolean;
  onlyLoggedOutUser?: boolean;
}

interface WithHandlerConfig {
  methods: HttpMethod[];
  handler: (req: NextApiRequest, res: NextApiResponse) => void;
  authorization: PageAuthorization;
}

export default function withHandler(
  config: WithHandlerConfig = {
    methods: ["GET"],
    handler: () => {},
    authorization: {
      onlyLoggedInUser: false,
      onlyLoggedOutUser: false,
    },
  }
) {
  return async function (
    req: NextApiRequest,
    res: NextApiResponse
  ): Promise<any> {
    const { methods, handler: fn, authorization } = config;
    const { onlyLoggedInUser, onlyLoggedOutUser } = authorization;

    if (req.method && !methods.includes(req.method as any)) {
      return res.status(405).json({ message: "method not allowed" });
    }

    if (onlyLoggedInUser && !req.session.user) {
      return res
        .status(401)
        .json({ message: "You must login to access this page." });
    }

    if (onlyLoggedOutUser && req.session?.user) {
      return res.status(403).json({ message: "You are already logged in." });
    }

    try {
      return await fn(req, res);
    } catch (error) {
      console.error(error);
      return res.status(500).json({ error });
    }
  };
}

위와 같이 구성하면, iron-session 과 같은 라이브러리를 붙였다는 가정 하에 상황에 따라 적절한 status 로 응답해준다. 로그인이 된 회원만 볼 수 있는지, 로그인이 되지 않아야만 볼 수 있는지 등 페이지의 권한을 결정할 수 있다.