404:This page could not be found error due to dynamic routing

Question

I have used nextjs dynamic routing here.This is a card which onClicking goes to the an individual card by id component. But when I click it it goes to the page, the exact id of the card is also sent to the next page. But it says 404 page not found error. My folder structure is parent/src/single-industry/[id].jsx

the endpoint where I found 404 error is http://localhost:3000/single-industry/9

I have attached the picture of the folder and the code of the handleClick in the below images. What could be the reason for the error

[enter image description here](https://i.stack.imgur.com/4kOvp.png)

I have tried naming convections for nextjs dynamic routing. How could I resolve the error

Answer 1

Move the code from:

src/app/single-industry/[id].tsx

to

src/app/single-industry/[id]/page.tsx