Criando API's com NextJS

Quando criamos o nosso projeto nos deparamos com uma pasta peculiar chamada pages/Api e é nessa pasta que podemos trabalhar com um BFF (Backend For Frontend), aqui podemos criar chamadas usando fetch ou outra lib para criação de serviços.

Uma das coisas mais bacanas nisso é que ela protege nosso backend, pois quando vamos acessar os endpoints criados partiremos do domínio localhost:port/api/nome_do_arquivo e assim não é possível enxergar a URL do backend pelo network do nosso navegador.

export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}

Aqui em cima temos um exemplo criado pelo próprio Nextjs para uma rota de get onde nosso retorno é um status code 200 e um json com o nome

Mas se você não quiser trabalhar com chamadas nessa pasta, você é livre para criar uma camada de serviços e trabalhar tranquilamente com ela

OBS.

  • As Rotas de API não especificam cabeçalhos CORS , o que significa que são da mesma origem apenas por padrão. Você pode personalizar esse comportamento criando um manipulador de solicitação com o middleware cors , onde vamos precisar instalar a lib do cors com npm i cors ou yarn add cors.

Para aplicar o nosso cors em nossas rotas vamos fazer o seguinte:

import Cors from 'cors'

// Iniciando a middleware do cors
const cors = Cors({
  methods: ['GET', 'HEAD'],
})

// Método auxiliar para aguardar a execução de um middleware antes de continuar
// E para lançar um erro quando ocorrer um erro no middleware
function runMiddleware(req, res, fn) {
  return new Promise((resolve, reject) => {
    fn(req, res, (result) => {
      if (result instanceof Error) {
        return reject(result)
      }

      return resolve(result)
    })
  })
}

async function handler(req, res) {
  // Executa o middleware
  await runMiddleware(req, res, cors)

  // Logica da sua API
  res.json({ message: 'Hello Everyone!' })
}

export default handler

Código acima retirado da própria documentação do NextJS

  • Rotas de API não podem ser usadas com next export, ou seja, para cada endpoint será necessário criar uma nova rota (arquivo)

Did you find this article valuable?

Support Diego Telles by becoming a sponsor. Any amount is appreciated!