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
ouyarn 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)