Next.js Router - Getting 404 page not found

Question

I am new to Next.js, and I am playing around with the router. Some of the pages work, but the dynamic pages don't. Does anyone know what I'm doing wrong?

Here is my files structure:

The Products main page works, but when I am looping through the products and within these products, I have a link like this:

<Link href={`/products/${props.product._id}`}>

But when I click on any product, I get a 404. Does anyone know what I am doing wrong? Thanks.

Answer 1

To have a /products/${props.product._id} URL, you need to create a [id] directory in the products folder, in which you add a page.tsx (leading to app/[id]/page.tsx).

That's because while with the initial pages router, a file creates a route, since Next.js v13, and when using the app router, a route is created by a folder and a page.js is used to render that route, as the doc shows it:

Here is (see the last question) where the CLI asks you which one of the routers you want to use:

Finally, if you are following along a tutorial and want to use the pages router, the easiest way is to create a new project and answer the CLI accordingly:

npx create-next-app@latest