reactjsnext.jsdynamic-routing

Getting several parameters from dynamic routing in Next.js


Assume this folder structure:

- src
    - pages
        - jobs
            - [id].js

And for the following URL:

http://localhost:3000/jobs/123

You can access 123 inside [id].js page as well. Now I need to get one more parameter there named title. Something like this:

http://localhost:3000/jobs/123/jobtitle

How can I do that? I'm looking for something like this [id,title].js, but I don't find the right syntax.


Solution

  • - pages 
       - jobs
          - [id]
             - [jobtitle].js 
    

    Now you can get id and title from http://localhost:3000/jobs/123/jobtitle.

    There is a way about catch all routes

    - pages
       - jobs
          [[...slug]].js
    

    The query objects are as follows:
    http://localhost:3000/jobs -> {}
    http://localhost:3000/jobs/id -> [id]
    http://localhost:3000/jobs/id/jobtitle -> [id, jobtitle]