Next.js Discord

Discord Forum

No standalone page for intercepted route with modal

Answered
Hudsonian Godwit posted this in #help-forum
Open in Discord
Hudsonian GodwitOP
I've followed the guide in the docs to setup a modal with a dedicated url here: https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes#modals.
In the guide, and what's showcased in Nextgram (https://nextgram.vercel.app/) is a double route where the navigating from the client opens the modal, but landing directly on the url (from a link or simply when refreshing the page) shows a dedicated (standalone) page, without the modal, and without the list context.

I'd like to completely avoid the standalone page, and always render within the modal, with the full context of the page, is there a canon way to do this ?
Answered by Hudsonian Godwit
It should look like this
View full answer

6 Replies

Hudsonian GodwitOP
I think I made it, this was pretty tricky to get my head around, but eventually here's the layout that works:

see my screenshot below


The thing that took me time to understand is that both app/resource/resourceId/page.tsx AND app/resource/resourceId/subResource/subResourceId/page.tsx MUST render the same content.


Hope this can help someone 🙂
Holy… this is an insane file structure
Hudsonian GodwitOP
yeah it's not right, I pasted from markdown and the indentation got all messed up
Hudsonian GodwitOP
It should look like this
Answer
Still insane haha 😅 glad you got it working
Hudsonian GodwitOP
It kinda makes sense in the end but damn...