Roteando as api do NextJS usando verbos HTTP

ATENÇÃO

Esse post foi escrito em maio de 2022, nessa data o NextJS está na versão 12 e, até aqui, não existe um jeito nativo que resolva esse problema. Se estiver lendo isso em uma data futura, lembre-se se procurar no documentação oficial do framework e ver se não existem soluções mais modernas.

Criar um endpoint de API no NextJS é extremamente simples, mas se você já precisou lidar com mais de um verbo HTTP na mesma rota, percebeu que vai precisar se organizar para não deixar as coisa confusas.

O problema é que o NextJS não te fornece uma maneira nativa de rotear suas requisições pelo verbo HTTP, apenas pelo PATH da requisição.

Existem algumas bibliotecas prontas no mercado que adicionam alguns super poderes para essas apis, mas na maioria dos cenários você não precisa de tanto poder, só separar a função que trata o GET da que trata o POST, por exemplo.

Nesse contexto, eu tenho um helper que costumo usar e que resolve isso pra mim de um jeito bem elegante, na minha visão.

//helper/verbs-route.js
export function verbsRouter(router) {
  const sanitizedVerbs = {};
  Object.keys(router).forEach((verb) => {
    sanitizedVerbs[verb.toLowerCase()] = router[verb];
  });

  return (req, res) => {
    const method = req.method.toLowerCase();
    const route = sanitizedVerbs[method];
    if (!route || typeof route !== 'function') {
      return res.status(405).end();
    }

    return route(req, res);
  };
}

E só! =)

O uso fica assim:

//pages/api/my-api.js
import { verbsRouter } from '../../helper/verbs-route.js'

export default verbsRouter({

  async get (req, res) {
  },

  async post (req, res) {
  },

  async put (req, res) {
  },

  async delete (req, res) {
  },

})

É isso. Sem adicionar dependência, com poucas linhas de código, você tem um reteador de verbos HTTP para suas apis.