You can access the route parameters through getServerSideProps
‘s context, using the params
field.
params
: If this page uses a dynamic route,params
contains the route parameters. If the page name is[id].js
, thenparams
will look like{ id: ... }
.— Next.js, Data Fetching: getServerSideProps, Context parameter
export async function getServerSideProps(context) {
const id = context.params.id // Get ID from slug `/book/1`
// Rest of `getServerSideProps` code
}
Alternatively, you can also use the query
field to access the route parameters. The difference is that query
will also contain any query parameter passed in the URL.
export async function getServerSideProps(context) {
const id = context.query.id // Get ID from slug `/book/1`
// If routing to `/book/1?name=some-book`
console.log(context.query) // Outputs: `{ id: '1', name: 'some-book' }`
// ...
}