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)