Q11: How do single dynamic routes work in pages/[id].js?
Square bracket syntax [id].js creates a dynamic route segment. The parameter value is extracted in getServerSideProps / getStaticProps via context.params.id, or on the client using useRouter().query.id.
Accessing Dynamic Route Params
// pages/user/[id].js
import { useRouter } from 'next/router';
export default function User() {
const router = useRouter();
const { id } = router.query;
return <p>User ID: {id}</p>;
}💡 useRouter().query extracts dynamic parameters from the URL.
Key Takeaways
- Folder/file names like
[param].jsmatch dynamic path segments. - Access dynamic values via
context.paramsoruseRouter().query.
Knowledge Check
In pages/products/[category].js, how do you read 'category' inside getServerSideProps?