Next.js Discord

Discord Forum

Intercept routes

Unanswered
Giant panda posted this in #help-forum
Open in Discord
Giant pandaOP
Is there a way for an intercept route to work when I have home page at / and then i want to have a product at /productId123 so it shows up as a modal on the home page? The documentation is not helpful.

13 Replies

Giant pandaOP
It's also just stupid
[username]/page for example will render and my parallel route itself will never render
Giant pandaOP
Nextjs might be the shittiest framework that does exist
Has vulnerabilities, doesnt work and has useless documentation
Fuck this
Pacific herring
lmao.
chill
this is what you're tryna do right?
i apologize for the giant watermark
@Giant panda [username]/page for example will render and my parallel route itself will never render
Pacific herring
make sure you follow this
https://nextjs.org/docs/app/api-reference/file-conventions/parallel-routes

here's a repo to make things easier
https://github.com/vercel/nextgram

nextjs does this weird caching of routes. I don't even know if its a bug. So if its not working, clear your browser's cache. If that doesn't work, delete your .next folder and restart the server
Pacific sand lance
ye that's possible all you have to do is:
1. create actual route (/productId123/page.tsx)
2. create slot/parallel route (e.g. /@dialog)
3. create default (/@dialog/default.tsx) and interceptor (/@dialog/(.)productId123/page.tsx)
4. render @dialog in layout
ur dialog should be rendered within /@dialog/(.)productId123/page.tsx, assuming you are using shadcn you can use defaultOpen / make it controlled to ensure animation works
also it might be necessary to remove .next folder and restart app (atleast used to be in 15.x.x)