Next.js dynamic routing link component not working
I'm trying to make an online marketplace for plants and gardening accessories for a uni course project and i made the page for the products in a dynamic folder where when you click on a product the link sends the id of the product from the database (which is in supabase) to the product's params so that it pulls all the information of the product from the database and shows it (right now i only coded to show the image) but its not working.
18 Replies
This is the home page from where you can click on learn more to be able to see the product's page
This is the code for the product card in the picture above where the Learn More link links to the dynamic folder where the product page is
This is the code for the product page itself
This is the console error that gets shown
If i try to just show the id that gets passed to the params
It shows this id regardless of which product i click on
which isnt the id for any of the products in the database
However, if i manually copy and paste the id of the product from the database to the browser after product/, it shows the picture of the product
can you specify your nextjs version
in nextjs v15+
you have to await
params and searchParams before you can access their values
this is what is causing the error
atleast according to the messageRouting: Dynamic Routes | Next.js
Dynamic Routes can be used to programmatically generate route segments from dynamic data.
THe params is working properly. If i copy/paste the id of one of the products in the url after products/ , it shows me all the data of that product properly.
The problem is that the next link isnt passing the id of the product to the params, just generating a random one
And since that random param id does not exist in the database, the page returns empty information
issue is probably somewhere here
brother
use a template literal
Solution
replace the
" with backticksIt WORKS!
THANK YOU BROTHER
in this case
you're navigating to this exact url, inside the quotes. It then tries to convert the ${id} into a url friendly form by conversion which results in the weird url
gl on your project
you can mark this question as solved by right clicking on the solution > apps > mark solution