Vamos falar sobre roteamento no Nextjs. Hoje falaremos sobre um dos middlewares mais poderosos. Middleware em Nextjs oferece uma maneira poderosa e flexível de interceptar solicitações do servidor e controlar o fluxo de solicitações (redirecionamentos, reescrita de URL) e aprimorar globalmente recursos como autenticação, cabeçalhos e persistência de cookies.

Criando Middleware

Vamos criar o aplicativo Middleware Next.js. Primeiramente, criaremos um novo arquivo para middleware como middleware.js ou middleware.ts, na pasta src. O middleware em Next.js precisa permitir um controle preciso sobre onde ele estará ativo (ou seja, configuração de correspondência personalizada ou uso de funções isXXX)

Redirecionando

Usando o redirecionamento como exemplo, vamos imaginar um cenário em que navegar para /profile deve redirecionar o usuário para a página inicial. Com a abordagem de configuração personalizada do matcher, podemos conseguir isso importando os tipos necessários, definindo uma função de middleware e especificando a configuração do matcher:

importar { NextResponse } de 'próximo/servidor'; importar tipo { NextRequest } de 'next/server'; exportar função middleware(solicitação: NextRequest) { retornar NextResponse.redirect(request.url.replace('/profile', '/')); } exportar configuração const = { correspondente: '/perfil', };

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  return NextResponse.redirect(request.url.replace('/profile', '/'));
}

export const config = {
  matcher: '/profile',
};

Neste exemplo, a função de middleware verifica se o caminho da URL da solicitação é /profile e redireciona o usuário para a página inicial.

Para a abordagem de declaração condicional, podemos modificar o código da seguinte forma:

importar { NextResponse } de 'próximo/servidor'; importar tipo { NextRequest } de 'next/server'; exportar função middleware(solicitação: NextRequest) { if (request.nextUrl.pathname === '/perfil') { return NextResponse.redirect('/olá'); } return NextResponse.next(); }

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  return NextResponse.redirect(request.url.replace('/profile', '/'));
}

export const config = {
  matcher: '/profile',
};

Nesse caso, o middleware verifica o caminho da URL da solicitação e redireciona o usuário para a rota /hello se o caminho for /profile.

Middleware em Next.js vai além de apenas lidar com redirecionamentos. Ele também permite reescrita de URL, o que pode ser útil para suporte de URL herdado ou otimização de SEO. Ao alterar o redirecionamento para reescrever nos exemplos anteriores, a URL no navegador permanecerá a mesma (/profile), mas o conteúdo da resposta mudará para o conteúdo da rota /hello.

Usando Cookies

Por último, vamos explorar o uso de cookies e cabeçalhos em middleware. Podemos modificar nosso middleware para lidar com as preferências do usuário para temas e adicionar um cabeçalho personalizado para todas as respostas:

importar { NextResponse } de 'próximo/servidor'; importar tipo { NextRequest } de 'next/server'; exportar função middleware(solicitação: NextRequest) { resposta const = NextResponse.next(); // Manipula a preferência de tema do usuário const temaPreferência = request.cookies.get('tema'); if (!themePreference) { response.cookies.set('tema', 'escuro'); } //Adiciona um cabeçalho personalizado response.headers.set('Cabeçalho Personalizado', 'Valor Personalizado'); resposta de retorno; }

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  return NextResponse.redirect(request.url.replace('/profile', '/'));
}

export const config = {
  matcher: '/profile',
};

Neste exemplo, primeiro verificamos se o usuário possui uma preferência de tema armazenada em um cookie. Caso contrário, definimos o tema como ‘escuro’ adicionando um cookie. Em seguida, adicionamos um cabeçalho personalizado à resposta, que pode ser útil para passar informações adicionais ou para fins de depuração.

Como você pode ver, o middleware em Next.js é uma ferramenta poderosa que permite controlar e interceptar efetivamente o ciclo de solicitação-resposta, permitindo redirecionamentos, reescritas de URL e a manipulação de cabeçalhos e cookies. Ao dominar o middleware, você pode aprimorar a experiência de roteamento em seus aplicativos Next.js e criar experiências de usuário mais robustas e personalizáveis.

"Middleware em Next.js é um recurso poderoso que oferece uma maneira robusta de interceptar e controlar o fluxo de solicitações e respostas em seus aplicativos." - Documentação Next.js

Conclusão

Em resumo, aprendemos como definir middleware em Next.js, explorar as duas abordagens principais (configuração de correspondência personalizada e instruções condicionais) e aplicar middleware para lidar com redirecionamentos, reescritas de URL e gerenciamento de cookies e cabeçalhos . Esse conhecimento o ajudará a levar seus aplicativos Next.js para o próximo nível, aproveitando a flexibilidade e o controle que o middleware oferece.