A FORMA CORRETA DE CRIAR ROTAS PRIVADAS NO NEXT.JS 13 - Nova pasta pasta app!

[@douglasoliveira2119]

Fala Junior, queria dar uma ideia pra você fazer um vídeo sobre rotas privadas mas utilizando o middleware do Next. Sucesso!

[@lorddrumond3937]

up

[@wallysonmachadodelima4483]

Amo seus padrões de arquitetura, sempre me pergunto porque não havia pensado nisso antes.

[@devjunioralves]

Haha Que massa que tu curtiu, é bem simples mas funciona muito bem.

[@LucasRodrigues-vs5qj]

Cara, que video excelente. Passando para agradecer por ter me ajudado a construir algo tão importante para um projeto. Consegui implementar e ficou show!

[@devjunioralves]

Que massa Lucas! Valeu demais pelo comentário 👊

[@mikeomonstro]

Ótimo video, nos meus últimos projetos estou usando o middleware para fazer a validação pelos cookies porque não tem esse delay de 1 segundo para redirecionar achei que ficou melhor. 😃 Aguardando os próximos videos 🥸

[@devjunioralves]

Verdade, o middleware é uma excelente opção mesmo. Usei pouco, bom você comentar que vou até estudar/testar mais ele. Valeu demais Micael!!!

[@MatheusHenrique-sk2od]

Disponibiliza um exemplo pra gente :)

[@devjunioralves]

@@MatheusHenrique-sk2od Boa!!!

[@romulosales2832]

Excelente conteúdo, vc é top

[@devjunioralves]

Muito obrigado meu querido!!! 👊

[@HerlonCosta]

Explicação sensacional mano!

[@huannalmeida]

Muito bom o conteúdo!

[@devjunioralves]

Muito obrigado!!!

[@tiagoholanda1393]

Muito obrigado cara, vc ta me ajudando muito com meus estudos da faculdade

[@LeonardoRossi-cr6fe]

Cara, teu canal é maravilhoso, tem me ajudado mto no meu dia a dia no trampo

[@ramiromares4281]

estou estudando muito pelo seu canal e tenho evoluído muito com esse framework é simplesmente incrível seu conteúdo... só tenho a agradecer

[@devjunioralves]

Fico feliz demais em saber disso Ramiro!!!

[@raelmartins1363]

Muito bom, como faz com a parte do refresh token, poderia fazer uma video sobre

[@murilorerisondesousapaz5065]

cara, faz um vídeo de internacionalização com rotas privadas pelo arquivo middleware, por gentileza

[@danilloboingdesouza2945]

E no caso de eu ter algum provider no layout, o fica dentro do provider?

[@Junior-bg3yb]

Mestre Junior me ajuda com uma informação, não podemos usar metatags do lado client apenas do servidor, usando esse método que você utilizou, como poderia usar as metatags? Queria mudar o ícone e title da página

[@Junior-bg3yb]

Como poderia integrar com o firebase?

[@henriquemagno9326]

16:05 - Quando vou utilizar o private route automaticamente gera um erro que diz que "Unhandled Runtime Error ReferenceError: describe is not defined", Alguem pode me ajudar?

[@devjunioralves]

Henrique, verifica o nome e a extensão do arquivo layout (layout.tsx) e dos demais arquivos dentro da pasta app estão corretos.

[@henriquemagno9326]

@@devjunioralves consegui resolver alterando a pasta index, era um erro no export da função "checkUserIsAuthenticated" agora está funcionando mas gerando um outro erro chato no console do terminal

[@devjunioralves]

@@henriquemagno9326 Qual o erro está retornando?

[@henriquemagno9326]

@@devjunioralves Error: Cannot find module 'next/dist/compiled/react-dom/test-utils' Require stack: ... Não impede o funcionamento, mas a cada troca de pagina ele aparece no console do terminal. Acredito que foi devido a como eu fiz a instalação do pacote (usando --force), pois o template estava dando erro no primeiro npm install. Obrigado pela atenção, sou iniciante no next

[@devjunioralves]

@@henriquemagno9326 Pode ser isso sim viu Henrique, tenta apagar a node modules e reinstalar

[@hugofortunato3310]

Poderia gravar um video utilizando middlewares?

[@devjunioralves]

Opa, com certeza Hugo, excelente sugestão.

[@marco.braghim]

Muito bom seu vídeo. Tentei fazer exatamente assim, mas mesmo usando o 'use client' toda vez que eu tento usar o (typeof window !== 'undefined') ou o localStorage eu recebo esses erros aqui: 1. Expected server HTML to contain a matching in 2. Error: Hydration failed because the initial UI does not match what was rendered on the server. 3. An error occurred during hydration. The server HTML was replaced with client content in .

[@rogerionj]

Peguei o mesmo erro, o que fizesse pra resolver?

[@misterkingbad8071]

Muito bom, mas fiquei em dúvida de como seria p obter um parâmetro em alguma rota pública, por exemplo um token de redefinição de senha.

[@devjunioralves]

Valeu, que massa que tu curtir! Na rota da página (page.tsx) tu consegue ter acesso, por exemplo, aos cookies. Assim tu consegue criar a lógica de redefinição de senha, refresh token e etc.

[@misterkingbad8071]

Vlw mano obrigado

[@devjunioralves]

@@misterkingbad8071 👊

[@misterkingbad8071]

@@devjunioralves me deparei com uma coisa sobre as rotas publicas, q se colocar uma rota dinamica por exemplo "users/[id].tx" ele nn entra mesmo colocando dessa maneira na rota publica "users/[id].tx". Ele so entra nessa rota se o usuario estiver logado, tem como resolver isso?

[@amesqFF]

Bom dia, esse projeto ai ta no GitHub, fiquei confuso um pouco, quanto o código que estão em outras pastas e que são necessário para utilizar essa forma de roteamento privado.

[@devjunioralves]

Não, ainda não consegui subir alguns projetos pro Github, estou criando um repositório para deixar tudo do canal lá. Mas qual sua dúvida? Eu posso te ajudar por aqui, ou se tu preferir, entrar na nossa comunidade no Discord, ficaria até mais fácil de explicar.

[@amesqFF]

@@devjunioralves eu consegui entender, voltei o vídeo e fui prestando melhor atenção.

[@devjunioralves]

@@amesqFF Que show!!!

[@PedroHB_]

Vídeo muito bom, poderia ensinar a usar estilos globais com styled-components na v13 do nextjs pois a documentação está um pouco complicado pois está em beta e ainda pode mudar, queria saber como você sugere a fazer na pasta app já que provavelmente a pasta page não vai mais existir.

[@devjunioralves]

Interessante a ideia, posso fazer um vídeo criando um template com o Next.js 13, com styled-components, Typescript, jest, storybook e etc...

[@PedroHB_]

@@devjunioralves Excelente.

[@codemilio]

Opa mano tudo certo? Primeiramente parabéns pelo video, só conteudo de qualidade como sempre! Esse browser aberto no vscode é o nativo dele, ou algum plugin?

[@GladsonReis]

Man, top demais aprendi muito aqui, mas vc disponibilizou o codigo no git? 🙃

[@eduardobertozi8506]

Caso alguém também receba um hydratation error, eis a soluçao que funcionou pra mim: 1 - Mova o isUserAuthenticated para dentro do useEffect 2 - Crie 2 estados, isAuth, isCheck, ambos inicializados em false 3 - Antes do if(!isAuthenticated) dentro o useEffect, faça um setIsAuth(isUserAuthenticated) e em seguida setIsCheck(true) 4 - Já fora do useEffect, faça um if(isCheck) return null 5 - Por fim faça o return do jsx assim: return isAuth ? {children} : null Foi a única maneira que encontrei de fazer funcionar como eu gostaria. PS: Estou usando cookies para guardar o token, invés do storage.

[@devjunioralves]

Perfeito Eduardo! Excelente você ter compartilhado sua solução. 👏👏👏

[@sidneiferreira5542]

Olá estou com este mesmo problema de Hydratation, poderia mostrar o seu código após o ajuste como exemplo?

[@tiagolopes-setentrionals7533]

Júnior, aonde esta isso na DOCUMENTAÇÃO do NEXT no "routing" APP??? Eu achei em PAGES , mas não em APP 😥

[@devjunioralves]

Sobre oq especificamente Tiago?

[@tiagolopes-setentrionals7533]

@@devjunioralves SOBRE "ROTAS PRIVADAS" , não achei na DOC do NEXT

[@fdantasr]

O que você guarda nessa variável do ENV? É Para fazer a verificação do Token? Minuto 13:58

[@gabrieldutra8155]

Curtir a sua forma de estruturação de projeto, vou até derir a forma, mas onde você coloca as configs de banco de dados? Exemplo o firebaseConfig, geralmente coloco no services. Agradeço pelo tutorial, incrível!

[@devjunioralves]

Fala Gabriel! Que massa que tu curtiu. Sobre sua dúvida, tu poderia criar uma pasta configs, dentro de src, para deixar as configurações.

[@gabrieldutra8155]

@@devjunioralves imaginei isso, valeu!

Uma dúvida, de acordo com o vídeo, se eu somente criar um falso token no meu localStorage, eu também vou consegue passar para as rotas privadas, certo? Como eu poderia fazer para validar se o jwt setado no meu localStorage é de fato válido para que eu possa acessar tal página?

[@LeandroVictor666]

usa alguma library de JWT no front-end mesmo, se vc conseguir decodificar o jwt e o payload for exatamente como vc esperava (com os campos que voce colocou no JWT), so passar a autenticacao, e voce pode ate mesmo fazer um fetch para sua API para na API autenticar o JWT usando a secret key (recomendado)

[@murilorerisondesousapaz5065]

vc tem o código fonte desse exemplo? eu procurei no git, mas só achei o template

[@devjunioralves]

Não tenho :( Mas vou fazer um novo vídeo sobre esse assunto, utilizando os RSC e esse vou disponibilizar o código, Murilo.

[@FakeLewis]

Ainda tem como fazer aquele redirecionamento que a gente fazia no retorno do getServerSideProps? Pq depois que descobri isso, acho até mais elegante que ter que esperar a montagem da tela, já que redirecionava antes mesmo disso acontecer já que assim que a requisição batia no arquivo da página privada redirecionava

[@devjunioralves]

Sim, tem sim, mas é um pouco diferente. Tu precisa usar o redirect do 'next/navigation' e daí tu consegue redirecionar similar ao do getServerSideProps.

[@michaelreis7416]

@@devjunioralves da um exemplo mano.

[@renandevelop]

Dúvida 1: O Next ainda requer fortemente que o deploy seja feito na Versel para usar todas as suas funcionalidades? Lembro-me de um momento em que era possível fazer o deploy na AWS, mas era necessário verificar quais recursos eram suportados. Por exemplo, naquela época, não era possível usar o server render. Eu estava prestes a iniciar o desenvolvimento de um ERP com o Next, mas o gerente de projeto recusou a ideia. Ele queria ter a flexibilidade de mudar de hospedagem quando necessário, seja para testar o desempenho, reduzir custos ou mesmo garantir a segurança de não depender de uma única empresa para hospedar a aplicação. Desde então, nunca mais estudei o Next, mas gostaria de me atualizar e saber se essa ainda é uma limitação real. Se alguém poder esclarecer, ficarei grato. Dúvida 2: Estou buscando essa informação porque peguei um projeto de migração de um sistema feito em Delphi para se tornar uma aplicação Web, e pelo pouco que pesquisei sobre o assunto, o Next parece ser mais produtivo do que usar apenas o Rect. Se alguém poder esclarecer, ficarei grato.

[@devjunioralves]

Fala Renan, blz? Duvida 1: Não precisa subir na Vercel não, mas lá é mais "fácil", pois tem muita config que são automáticas. Mas nada impede tu de usar outro serviço não. Duvida 2: Com certeza, o Next.js tem mais "ferramentas" do que o React Vanilla, porém, exige um pouco mais de conhecimento, principalmente pelo server side. Tem vídeos aqui no canal sobre isso, tem muito conteúdo de Next.js, vai te ajudar a entender mais as diferenças e etc.

[@giovannitonussi3746]

Ótimo vídeo amigo, ganhou mais um inscrito! Tenho uma aplicação simples e de intranet e acredito que esse seu padrão deve servir perfeitamente. Porém, uma dúvida, acredita que numa aplicação maior seja necessário uso de middleware para fazer essa checagem?

[@eduardobertozi8506]

Muito bom cara, obrigado! Só tive um único problema. Na hora em que o componente PrivateRoute renderiza o children, fica ocorrendo um erro de hidratação. Poderia me dar um help??

[@devjunioralves]

Fala Eduardo, blz? Tem várias formas de resolver esse problema, creio que a mais simples seja tu adicionando um state para checar se está no server ou client, aí tu pode criar um useEffect para atualizar esse state. Feito isso, e componente se será exibido se não estiver no server.

[@eduardobertozi8506]

@@devjunioralves Obrigado! Vou tentar fazer isso. Tens alguma comunidade no discord?

[@devjunioralves]

@@eduardobertozi8506 Tem sim man, na descrição dos vídeos e nos comentários dos shorts tem o link.

[@joelsonrodrigues5113]

opa beleza, não consigo importar a pasta utils no next só existe a opção util

[@devjunioralves]

Que estranho Joelson, todas as outras pastas estão importando normalmente?

[@Franklin-hk7wl]

Se você tiver algum curso, onde podemos aplicar os conhecimentos num sistema profissional , sugiro que um sistema educacional pela baixa complexidade da regra de negócio, eu compro de olhos fechados.

[@devjunioralves]

Excelente ideia Franklin! Em breve vou divulgar algumas novidades aqui no canal e tu vai curtir!

[@tpThiago]

Conteúdo excelente. Só uma dúvida, teria que fazer também public route ? Por que não é legal um usuário logado poder ver a página de login

[@devjunioralves]

Creio que tu pode fazer sim Thiago! Valeu demais 👊

[@philipepics]

Layout como uma alternativa aos middleware

[@devjunioralves]

Exatamente. Existem várias forma de criar rotas privadas no Next.js.

[@TXTechno]

amei

[@MateusGuedes-b7m]

uma dica, não seria melhor usar hooks nessas funções utilitarias?

[@devjunioralves]

É uma alternativa sim, nesse caso, ambas as abordagens são super válidas.

[@juninfortunato]

Boa noite Junior, poderia fazer um vídeo ensinando a como implementar no next 13 a como criar a pagina de erro personalizada caso o usuário tente acessar uma rota que não existe ??

[@devjunioralves]

Opa, boa noite! Já tem um vídeo onde mostro como fazer isso, no Next.js 13 mudou um pouco e tem umas mudanças bem legais, tem vídeo sobre pagina 404 também.

[@ryuga2486]

onde criar esse checkUserAuthenticated?

[@devjunioralves]

Eu criei dentro de src/functions, basicamente verifica se existe o token do usuário no localStorage ou cookies e return true ou false.

[@ryuga2486]

@@devjunioralves tentei fazer algo parecido com o do vídeo mas usando redux estava dando cyberbug consegui fazer usando o middleware

[@devjunioralves]

@@ryuga2486 Perfeito, com o middleware fica show de bola!

[@ribastudio]

Salve! Vim do grupo do Slack! No meu caso, o meu problema - usando a abordagem /pages no NextJS 13 - é que preciso verificar se o usuário tem acesso a página específica de acordo com a regra dele. E se estiver logado, não dar acesso à login. Já faço parte disso com middleware, mas não queria uma solução como next-auth. Alguma dica do que fazer ou onde procurar? Conteudo top!

[@devjunioralves]

Tu pode fazer isso tudo no middleware, tu intercepta a requisição, checa se ele tem permissão para acessar a página, se sim, continua o fluxo, senão, redireciona ele, por exemplo, para uma tela com uma mensagem de não possuir permissão. Valeu demais Riba! 👊

[@ribastudio]

@@devjunioralves beleza! vou te mandar la no Slack uma dúvida sobre context e NextJS

[@philipepics]

@@ribastudio qual link do slack abrades

[@felipekesley]

Como configurar o MSW no next 13 ? dá pra fazer um vídeo ??

[@devjunioralves]

Creio que para configurar, a gente precise utilizar o rootLayout (que substitui o _app.tsx e _document.tsx). Mas dá pra fazer um vídeo sim, valeu pela dica!

[@lucassouzalucassouza-dev7299]

bom dia tenho uma duvida, teria que fazer uma logica pra verificar se esse token e valido neh? pq se nao quem tem conhecimento simplismente criaria um token ?

[@devjunioralves]

Poderia sim Lucas, mas dependendo do tamanho da aplicação, não é feito.

[@JoshuaHawatta]

Junior, se usar o "use client" direto no arquivo layout, não perdemos todo o poder de SSR do Next? Tô querendo usar essa solução mas com medo de perder as capacidades/vantagens de SSR do Next.

[@devjunioralves]

Sim, usando o "use client" usamos os client components. Existem outras maneiras de criar essa lógica de rotas privadas, creio que vou fazer um novo vídeo sobre isso, pois algumas coisas mudaram desde que gravei esse vídeo.

[@leco814]

Parabéns, ótimo vídeo. Mas tenho uma duvida, gostaria de saber se com a vinda do Next13, o arquivo _document.ts não é mais necessário? E qual é o substituto para ele?

[@devjunioralves]

Valeu demais!!! Não, no Next.js 13 tanto o _app, _document, _error, nenhum deles é mais necessário. Na pasta app, o substituto é o rootLayout (layout.tsx).

[@wallysonmachadodelima4483]

Pergunta mano, porque você separa todas as suas funções em uma pasta function? vc mesmo decidiu seguir este padrão ou viu em algum lugar?

[@devjunioralves]

Por questão de separação de conceitos mesmo (separations of concerns). Se uma função pode ser reutilizável, eu coloco ela na pasta functions.

[@cesardamasceno6645]

Pensei que vc ensinaria o fluxo pelo side server também.

[@devjunioralves]

Boa Cesar, tem outros vídeos aqui no canal onde mostra esse fluxo no server side.

[@henriquecaetano7461]

Se puder disponibilizar esse código no github, eu agradeço.

[@devjunioralves]

Boa Henrique! Estou organizando um repo para disponibilizar os códigos aqui do canal!

[@ThiagaoVlogs]

hm, tipo, até entao fazer a verificaçao do usuario pra permitir ou nao ele ver a pagina era de boa no client side, ou seja, se n tivesse o server-sider tava tudo ok, o problema era fazer essa validaçao no serverside, eu custumava fazer um HOC pra sobreescrever o getServerSideProps, desse jeito ae vc ta forçando seu layout a ser client side sempre n ta nao? e isso não é pessimo? imagina load de scripts e etc no seu layout... vai ser tudo feito no client imagino eu

[@devjunioralves]

Um detalhe importante é: no Client ou Server side possuem tradeoffs. Concordo com oq você disse, podemos criar um hook (ou HOC) para fazer essa validação no lado do server. Porém, depende do contexto da sua aplicação, o vídeo é para termos uma forma alternativa. Excelente ponto Thiago!

[@igormota8957]

não seria melhor so criar um hoc e exporta a pagina q e protegida com ele?

[@devjunioralves]

Ambas as abordagens funcionam, Igor.

[@williamcerqueira7236]

No 14 também é assim?

[@juliocesarcst]

Opa Junior, primeiramente ótimo vídeo, me inscrevi a uma semana mais ou menos e seu conteúdo tem sido bem útil pra mim. Segui essa mesma lógica sua porém para criar componentes privados (vão aparecer somente para usuários com determinada role, GERENTE por exemplo), questão é que para verificar qual a role do usuário é necessário fazer uma requisição ao servidor, caso eu tenha vários componentes desse em página, pode acarretar em um número grotesco de requisições? ou o Next tem alguma forma de burlar isso?

[@devjunioralves]

Mas no endpoint de login, já não retorna as permissions e roles do usuário? Por que no login, você já poderia, por exemplo, salvar essas informações no localStorage e daí sempre verificar essas informações. Valeu demais!!!

[@juliocesarcst]

@@devjunioralves Isso não deixaria a aplicação menos segura? algum usuário não poderia editar o conteúdo do localStorage? Mais uma dúvida que me surgiu, pelo que entendi essa parte de checar se a rota é privada ou não acontece do lado do servidor, e para saber se o usuário está ou não autenticado vc precisa checar o localStorage, sendo assim como o servidor tem acesso a esse dado? ou ele somente tem acesso no client?

[@devjunioralves]

@@juliocesarcst Sim, se for salvo de forma "pura" no localStorage, é uma brecha de segurança. Porém, o ideal seria encriptar essa informações no localStorage. Para você checar se o usuário está autenticado, pode sim fazer do lado do server, inclusive com o Next.js é bem simples de fazer com SSR. Outro ponto que indico muito você dar uma olhada são os middlewares do Next.js, acho que hoje pode ser a melhor alternativa.

[@juliocesarcst]

@@devjunioralves Muito obrigado Junior, é meu primeiro projeto com Next, antes trabalhava com django, uma linha totalmente diferente, seus vídeos tem me ajudado bastante. Sucesso!!

[@devjunioralves]

@@juliocesarcst Caramba, que massa! Sério, fico muito feliz em estar ajudando. Qualquer dúvida, to sempre aqui! Feliz ano novo!!!

[@ChristianFerraz]

Tem previsão de qdo vamos usar a pasta app em produção?

[@devjunioralves]

Ainda não, mas pelo o que vejo nas discussões, creio que não deva demorar muito.

[@JGFaria-fb9uw]

esse padrao causa erros de hydratation futuramente, por conta do PrivateRoute.

[@devjunioralves]

Sim, vou trazer um outro vídeo, tratando sobre o assunto, tem muita gente que se depara com erros de Hydration e não sabem do que se trata.

[@lauragiovanna9088]

não entendi direito oque são rotas

[@devjunioralves]

Rotas são as páginas acessadas no browser. Ex: www.meusite.com/usuarios -> /usuarios é uma rota

[@murilodllx]

Voce é junior?

[@devjunioralves]

Sim e não kkkk Meu nome é Junior, mas senioridade não

[@murilodllx]

@@devjunioralves eu to brincando, da para ver claramente que voce não é, kk

[@shift564]

Podia aproveitar o next 14 e refazer esse vídeo, essa forma ai ta muito verbosa e tbm já mudou algumas coisas

[@VoceBR97]

Eu sei quem você é

[@alitonoliveira1700]

Que tal essa maneira: kzbin.info/www/bejne/aqvPonarZ5mqqJY

[@devjunioralves]

Utilizando middlewares também é uma alternativa muito boa!

[@ErickSalessalessales]

n entendi a parto do {getStorageItem} from ultis, como isso funciona ?

[@devjunioralves]

É apenas uma função simples que criei para obter um item do localStore, Erick, e está dentro da pasta 'utils'.

[@romulosales2832]

@@devjunioralves ataa é pq ele n tem nenhum ./ Ai achei estranho chamar só o utils direto

[@gabrielmelo1977]

Este Código não está no GitHub está faltando atualização

[@devjunioralves]

Verdade Gabriel, tenho que atualizar o template lá, estou finalizando alguns detalhes.