App continually throwing 404 with dynamic routing?

[drowsy ibex]

Hi all,
I'm new to Next.js and am trying to try my hand at dynamic routing, specifically rendering details from a list. Despite following the dynamic detailing section to what I thought was a 'T', every time I navigate try to navigate to different list items, I am being given a 404.

My app exists inside of src/app along with 2 others. It is google_forms_viewer. Going to http://localhost:3000/google_forms_viewer will take you to the page.js successfully. However, clicking on any of the test items throws a 404.

Attached is a picture of the central directory and the main landing page.js, the google_forms_viewer app directory, and the code for page.js and [id].js

I've tried restructuring my app, but have continually been given other routing errors by doing so. I have tried nesting and unnesting the slug/[id]. I have tried changing the link names in the <Link href=> multiple times. None of these have produced any useful results.

I'm not sure what I'm doing wrong or if I need to restructure my app in any way. Thank you in advance.

[undone phoenix]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[chilly fossil]

since you are using the new App Router the file conventions are different. all pages in the app router follow the same page.js naming, so for dynamic routes you need to do src/app/google_forms_viewer/[slug]/page.js. https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes

[drowsy ibex]

I think I understand, so I would need to make a new subdirectory named [slug] and then inside page.js for the details page?

[chilly fossil]

yeah, that would be the equivalent to the localhost:3000/google_forms_viewer/foo path

[drowsy ibex]

Thanks so much! Do you happen to know why it may not be passing the object down with the link to the details page? I restructured things and it will console.log the first map but I'm not sure how to get useRouter() on ProductDetails to have it receive the obj.

[undone phoenix]

✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1148344202263019661 message)