Next.js Modal Intercepting Routes
Next.js is a popular framework for building React applications. It provides a streamlined development experience with features like server-side rendering, automatic code splitting, and route-based code loading. One common use case for Next.js applications is to display modal dialogs based on user interactions. In this article, we’ll explore how to intercept routes in Next.js to display a modal dialog.
Using the useRouter hook
The useRouter hook provided by Next.js can be used to intercept route changes and display a modal dialog. Here’s an example of how to achieve this:
“`javascript
import { useEffect } from ‘react’;
import { useRouter } from ‘next/router’;
function MyComponent() {
const router = useRouter();
useEffect(() => {
const handleRouteChange = (url) => {
// Display your modal here
}
router.events.on(‘routeChangeStart’, handleRouteChange);
return () => {
router.events.off(‘routeChangeStart’, handleRouteChange);
}
}, []);
}
“`
Displaying the modal
Once you’ve intercepted the route change using the useRouter hook, you can display the modal using your preferred modal library. Here’s an example using the React Modal package:
“`javascript
import React, { useState } from ‘react’;
import Modal from ‘react-modal’;
function MyComponent() {
const [modalIsOpen, setModalIsOpen] = useState(false);
const handleRouteChange = (url) => {
setModalIsOpen(true);
}
return (
<>
>
This is my modal content
)
}
“`
Conclusion
Intercepting routes in Next.js to display a modal dialog can enhance the user experience of your application. By using the useRouter hook and a modal library, you can easily achieve this functionality. This can be particularly useful for displaying important information or confirmations to the user before navigating to a new page.
Thank you for reading this article. We hope you found it helpful in implementing modal intercepting routes in your Next.js application.
Masterclass completa
https://youtube.com/playlist?list=PLR8OzKI52ppWoTRvAmB_FQPPlHS0otV7V
Cara! que conteúdo incrÃvel! Valeu msm. Ah… e o teu code fica travando por causa de um S.O que tens instalado aÃ… 🙊
muito bom só tive um problema no botão de voltar mas utilizei o useRouter no lugar do link e resolvi o problema, e ahhh parabéns pelo conteúdo, uma coisa você falou em fazer uma live falando sobre os hooks do react mais a fundo eu apoio essa ideia, só sei como funciona o useState e o useEffect
Pah!! Cresci em 1 dia o equivalente a mais de um mes de estudo. Parabéns!!!!!!
tenho uma duvida, como eu pararia esse "evento" de interceptar a rota, por exemplo eu clico no produto abre o modal, em seguida eu clico no produto e ele abriria a rota real do produto com dados mais completos do produtos
Dentre todas as aulas desta playlist, considero esta a melhor. A razão para essa avaliação é simples: neste vÃdeo, o foco não foi encurtar o tempo, mas sim construir o projeto do zero, o que, do ponto de vista pedagógico, é o abordagem mais apropriada. Em contrapartida, o vÃdeo sobre "rotas paralelas" deixou a desejar, uma vez que o tutorial já se inicia em um ponto avançado, não fornecendo um link para o código correspondente, o que limitou a minha capacidade de replicar o processo demonstrado.
Até o momento, minha impressão geral do curso é satisfatória, embora haja margem para aprimoramentos. É fundamental aperfeiçoar alguns aspectos, mas destaco, com apreço, a qualidade da edição de vÃdeo, que denota atenção aos detalhes. Mesmo sendo um canal de menor porte, você iniciou no caminho certo.
Até+
Maravilhosa aula! Eu gostaria sim de saber mais sobre os hooks que você utilizou nessa aula. useRef e useCallback
Cara eu gostei MUITO dessa aula mas, precisaria rever umas 10x pra entrar tudo na cabeça, haha
Eu acho que eu amo um homem…
Conteúdo sensacional. 🔥
Dúvida: Se eu estivesse na página /produto/[id] e lá tivesse um botão de deixar feedback, onde deve abrir um modal para avaliar. Neste caso como ficaria? criaria outra página /produto/[id]/avaliar com um interceptador?
Excelente
1 hora? Putz… Vou pular para a busca de dados, depois eu volto. Já estou muito tempo estudando roteamento, slc! kkk
caramba, valeu a pena voltar para assistir a masterClass em ordem!!! conteúdo está ótimo e meu conhecimento está ficando mais solido em nextJs, valeu bruno o brabo
Que conteúdo. novamente parabéns! acho um absurdo ter 966 visualizações neste momento que estou comentando e não ter o mesmo de curtida. Por que é fantástico o que você esta mostrando e ainda free, assim como acabei conhecendo seu canal através de recomendação de uma comunidade que era pra uma outra pessoa, conteúdo muito top e bem explanado. Já estou aqui divulgando pra outros.
@DeveloperDeck101
VÃdeo top como sempre, mas estou encontrando problema ao usar essa funcionalidade em minha aplicação.
Meu projeto tem a seguinte estrutura:
app/ => page raÃz + layout raÃz;
dashboard => page + layout;
auth;
loja (onde serão exibidos o produtos) => page + layout;
produto/[id]/page;
@modal/produto/[id];
Segui o exemplo que você deu, fazendo a página de produtos renderizar na página raÃz do projeto funcionou corretamente, porém, ao mudar a página que exibe todos os produtos para dentro de => loja(pois a página raÃz será responsável por exibir as informações da aplicação ), isso me gera um erro, tentei passar o modal como children para o layout da página da loja, mas também não funcionou. Procurei na documenação mas não consegui. Se conseguiu entender e souber a solução agradeço. Sei que posso fazer uma renderização condicional do modal, mas queria usar essa "facilidade" que o next oferece. Desde já agradeço.
Show de mais essa aula, valeu de mais!!
Todos os videos tem sido incrÃveis, mss esse você se superou
É uma boa ideia criar um middleware que faz o fetch do produto e passa para a pagina, ao invés de fazer o fetch na própria pagina? Ou isso é "overengineering"?
Aliás, nem sei se é possÃvel fazer isso.
Até pensando sobre isso. Quando o Link faz o prefetch da pagina seguinte, isso inclui tudo que está na rota, inclusive middleware e layout? Acredito que sim, né?
(Obs: ainda não terminei de ver o video, não sei se você vai falar sobre isso)
Que trabalho fantástico , sensacional, direto ao ponto!!!
Vamos incentivar de todas as maneiras possÃveis, galera.🤗
Percebi que após o modal estar aberto, se clicar no botão de Voltar, a pagina volta para home, mas o modal continua aberto