How to access route parameter inside getServerSideProps in Next.js?

by

As described in getServerSideProps documentation, you can access the route parameters through the 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, then params will look like { id: ... }.

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' }`

    // ...
}

More Related Contents:

  1. Fetch error when building Next.js static website in production
  2. Window is not defined in Next.js React app
  3. Internal API fetch with getServerSideProps? (Next.js)
  4. “Cannot use import statement outside a module” error when importing react-hook-mousetrap in Next.js
  5. Can’t build React/Next project – found page without a React Component as default export (context api file)
  6. In React and Next.js constructor, I am getting “Reference Error: localstorage is not defined”
  7. How to properly set environment variables in Next.js app deployed to Vercel?
  8. First Load JS shared by all is rather heavy in next.js
  9. Next.js ISR ( Incremental Static Regeneration ), how to rebuild or update a specific page manually or dynamically before the interval/ISR time start?
  10. Error: How to serialize data from getStaticProps : Next.js
  11. Next.js context provider wrapping App component with page specific layout component giving undefined data
  12. I can’t reference an image in Next.js
  13. How to use cookie inside `getServerSideProps` method in Next.js?
  14. unable to deploy next js to azure
  15. How to Set port in next.js
  16. What is the best way to have a fallback image in NextJS?
  17. next.js environment variables are undefined (Next.js 10.0.5)
  18. Next.js: Error: React.Children.only expected to receive a single React element child
  19. Import ES module in Next.js ERR_REQUIRE_ESM
  20. Custom _app and _document get ignored when moving files to src/pages folder in Next.js
  21. how to add domains to next.config.js for “next/image” while using a plugin
  22. How to deal with NextJS exporting files with .html extension but in there is no .html
  23. how can I use top level “await” in typescript next.js
  24. What’s the difference between exposing environment variables in nextjs through the next.config.js vs with the NEXT_PUBLIC prefix?
  25. TypeError [ERR_INVALID_URL]: Invalid URL using Next-auth only in Production
  26. You’re importing a component that needs useState. It only works in a Client Component, but none of its parents are marked with “use client”
  27. TypeError: Cannot read properties of undefined (reading ‘call’) on Next.js
  28. How to prevent Next.js from instantiating a singleton class/object multiple times?
  29. Next.js app folder: is there some “entry point”? A direct replacement for _app.tsx?
  30. How to avoid caching in the app directory of Next.js?

Leave a Comment