Curso rápido de middleware no Next.js
Aprenda a usar o middleware do Next.js para melhorar a performance e a segurança das suas aplicações.
O middleware do Next.js permite executar código antes que uma solicitação seja finalizada e atualizar a resposta, oferecendo funcionalidades e performance aprimoradas.
Introduzido no Next.js v12, o middleware melhorou em versões subsequentes. A partir do Next.js v13, ele pode responder diretamente a solicitações, aprimorando a performance e segurança, e pode ser usado com as Edge Functions da Vercel.
O que é middleware no Next.js?
O middleware no Next.js é um código que permite executar ações antes que uma solicitação seja concluída, modificando a resposta conforme necessário. Ele oferece flexibilidade e controle sobre o fluxo de solicitações/respostas.
Escrevendo um middleware básico no Next.js
Para usar middleware, crie um arquivo chamado middleware.js ou middleware.ts no mesmo nível que o diretório app. Esse arquivo conterá o código a ser executado antes que uma solicitação seja completada, como mostrado abaixo:
// middleware.ts
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
export function middleware(req: NextRequest) {
const { pathname } = req.nextUrl;
// Restringe o endpoint /api/hello apenas para POST
if (pathname === "/api/hello") {
if (req.method !== "POST") {
return new NextResponse(
`Cannot access this endpoint with ${req.method}`,
{ status: 400 }
);
}
}
return NextResponse.next();
}
Vantagens e desvantagens do middleware
O middleware adiciona funcionalidades sem modificar o código da aplicação, mas pode aumentar a complexidade e os custos. Ele causa latência, pois o código precisa ser executado antes que a aplicação processe a solicitação.
Quando usar middleware?
O middleware pode ser usado para geolocalização, segurança (autenticação e autorização), testes A/B e limitadores de taxa. Ele oferece controle sobre o fluxo de dados e segurança aumentando a proteção e performance da aplicação.
O que são Edge Functions?
Edge Functions são funções serverless que rodam próximas ao usuário, tornando o processamento de solicitações muito rápido. Ao implantar uma aplicação Next.js na Vercel, o middleware é implantado como Edge Functions em todas as regiões globais, garantindo rapidez e personalização.
Agora que você entende o middleware, é importante conhecer as Edge Functions, que são fundamentais para a criação de experiências de usuário rápidas e personalizadas.
