Roteando as api do NextJS usando verbos HTTP

ATENO
Esse post foi escrito em maio de 2022, nessa data o NextJS est na verso 12 e, at aqui, no existe um jeito nativo que resolva esse problema. Se estiver lendo isso em uma data futura, lembre-se se procurar no documentao oficial do framework e ver se no existem solues 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 no deixar as coisa confusas.

O problema que o NextJS no te fornece uma maneira nativa de rotear suas requisies pelo verbo HTTP, apenas pelo PATH da requisio.

Existem algumas bibliotecas prontas no mercado que adicionam alguns super poderes para essas apis, mas na maioria dos cenrios voc no precisa de tanto poder, s separar a funo 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 viso.

//helper/verbs-route.jsexport 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.jsimport { 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 dependncia, com poucas linhas de cdigo, voc tem um reteador de verbos HTTP para suas apis.