router.query returning an empty object in next js

Question

my folder structure:

also my code:

const router = useRouter();
const { id } = router.query;

so the problem is the id is returning {} and is not returning the id in the URL. it works fine when I put it in jsx but not when I put it in js

Answer 1

you should name folder is "duc" or "product" or ... and in folder name js should [id].js for dynamic route , not index.js

Dynamic Routes