Hello, I am trying to make a new page on next, but this page should work as a Dialog, so on main ...
Answered
HOTCONQUEROR posted this in #help-forum
Hello, I am trying to make a new page on next, but this page should work as a Dialog, so on main page, i have bunch of posts, if i click one, I would like to be navigated to a dialog, without really being sent a different route, is this possible?
Answered by B33fb0n3
then you can use [intercepting routes](https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes).
Sounds like exactly what you are looking for 🙂
Intercepting routes allows you to load a route from another part of your application within the current layout. This routing paradigm can be useful when you want to display the content of a route without the user switching to a different context.
Sounds like exactly what you are looking for 🙂
11 Replies
@HOTCONQUEROR Hello, I am trying to make a new page on next, but this page should work as a Dialog, so on main page, i have bunch of posts, if i click one, I would like to be navigated to a dialog, without really being sent a different route, is this possible?
yes, you can create a dialog, that contains the post content. So you click a button, the dialog opens and the user can read the stuff
@B33fb0n3 yes, you can create a dialog, that contains the post content. So you click a button, the dialog opens and the user can read the stuff
but the dialog is basically a different page.
@HOTCONQUEROR but the dialog is basically a different page.
then you can use [intercepting routes](https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes).
Sounds like exactly what you are looking for 🙂
Intercepting routes allows you to load a route from another part of your application within the current layout. This routing paradigm can be useful when you want to display the content of a route without the user switching to a different context.
Sounds like exactly what you are looking for 🙂
Answer
@B33fb0n3 then you can use [intercepting routes](https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes).
> Intercepting routes allows you to load a route from another part of your application within the current layout. This routing paradigm can be useful when you want to display the content of a route without the user switching to a different context.
Sounds like exactly what you are looking for 🙂
this is great, now the next step, how should i navigate between these dialogs, if i have 10 posts being rendered inside a map, i would like to have arrows (up and down) that let me navigate from up to down based on map index
@HOTCONQUEROR this is great, now the next step, how should i navigate between these dialogs, if i have 10 posts being rendered inside a map, i would like to have arrows (up and down) that let me navigate from up to down based on map index
you would listen to your client keyboard events and when the client presses keyboard up, get the current index and check which post is before the current post and then navigate the client to that route.
As you see, this can be very fast very complicated, so I really recommend you to either navigate the client completely or to show a component that renders the post
As you see, this can be very fast very complicated, so I really recommend you to either navigate the client completely or to show a component that renders the post
@B33fb0n3 you would listen to your client keyboard events and when the client presses keyboard up, get the current index and check which post is before the current post and then navigate the client to that route.
As you see, this can be very fast very complicated, so I really recommend you to either navigate the client completely or to show a component that renders the post
fair enough, one more thing regarding intercepting routes, vscode is refusing to rename the folder to
(...)xyzit just stays as
xyz@HOTCONQUEROR fair enough, one more thing regarding intercepting routes, vscode is refusing to rename the folder to `(...)xyz`
that looks more like a local issue from you. As you can see attached: I can create the folder perfectly 🤔
mhm, ok
thanks
happy to help