Usando Middlewares: antes do Next 12 era muito difícil usar os middlewares em nossas aplicações.
A partir do Next 12 nós já conseguimos usar middlewares nativamente, e temos melhor controle em nossas rotas, mas o Next 13 trouxe algumas melhorias que facilitam um pouco nossa vida.
Desse modo, nós veremos neste artigo como usar os middlewares em sua versão mais recente, então se você está usando uma versão anterior ao Next 13, algumas coisas podem não funcionar.
Usando Middlewares
Em primeiro lugar, preciso informá-lo que eu já criei um projeto usando Next 13 e que você pode baixar esse projeto agora e acompanhar a evolução do código mais de perto.
Estrutura do projeto
A estrutura do projeto é a padrão do Next, nós só criamos uma pasta scr e adicionamos dois outros arquivos. Um chamado dashboard-2.tsx e outro chamado middleware.ts.
O arquivo dashboard-2.tsx nada mais é do que um componente bem simples, nós vamos usar ele para iniciar nossos testes.
Contudo, o arquivo middlewares.js é onde de fato acontecerá toda a diversão, daremos uma olhada mais de perto nele!
Como pode ver, esse é um arquivo bem simples, mas que pode ter um papel muito importante na sua aplicação. Falaremos mais sobre isso adiante!
Note que foi houve um destaque em um trecho de código, e nós iremos agora entender o que esse trecho faz.
Matching Paths (caminhos correspondentes)
O atributo matcher define em quais rotas o chamaremos o middleware. Nesse caso ele será chamado em qualquer rota que tenha como prefixo dashboard.
Em outras palavras, se acessarmos localhost:3000/dashboard, ou localhost/dashboard/conf, /dashboard/info, o middleware será executado.
Como resultado, independente da rota que a gente insira, sempre seremos redirecionados para a página dashboard-2. Isso pode ser muito útil em uma autenticação, por exemplo.
Atualização na API de middlewares — next 13
Atualmente, com o Next 13 nós podemos dar uma resposta diretamente a partir do middleware, usando o NextResponse:
A verificação dentro do if determina se o usuário vai ser barrado ou se vai conseguir visualizar a página desejada.
Logicamente, essa é uma simulação de uma autenticação. Em outras palavras, para que isso seja seguro, essa variável isAuthenticated precisa vir de um fluxo de autenticação.
Conclusão
A princípio, quero que você saiba, que você consegue fazer uma infinidade de coisas com os middlewares, eles são muito poderosos e não se limitam a esses exemplos que você viu neste artigo.
Ou seja, esse conteúdo é apenas um ponto de partida para você começar a implementar suas aplicações com mais e segurança.
Dessa forma, eu me despeço por aqui, um abraço e até a próxima!
