How to handle the empty parameter?
Answered
Orinoco Crocodile posted this in #help-forum
Orinoco CrocodileOP
I'm working on a NextJS project and I need some guidance. I have a
/projects page that should also accept a parameter after the path, such as /projects/[slug]. How can I achieve this functionality? Do I need to use middleware or some other technique?Answered by joulev
That seems like a perfect opportunity to use modals with parallel routing and intercept routes
8 Replies
Either you have to make two separate pages /projects and /projects/[slug], or use an optional catch-all /projects/[[…slug]]
Otherwise you can perhaps use middleware to rewrite /projects/:slug to /projects?slug=… then you only need one page
@joulev Either you have to make two separate pages /projects and /projects/[slug], or use an optional catch-all /projects/[[…slug]]
Orinoco CrocodileOP
My preference is to keep the pages together, so that when the user clicks on the project, they do not have to navigate to a different page. Instead, I would like to display the project details in a popup window.
@joulev Otherwise you can perhaps use middleware to rewrite /projects/:slug to /projects?slug=… then you only need one page
Orinoco CrocodileOP
I see, I'm going to use this method
@Orinoco Crocodile My preference is to keep the pages together, so that when the user clicks on the project, they do not have to navigate to a different page. Instead, I would like to display the project details in a popup window.
That seems like a perfect opportunity to use modals with parallel routing and intercept routes
Answer
@joulev https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes#modals
Orinoco CrocodileOP
I didn't know this was the term before, thank you very much!