'using req.params vs req.query in Next.js dynamic api routes

I am trying to access params in my Next.js API routes. I am just wondering why in order to access a certain dynamic route id I must use req.query when normally in express I would access the id via params. Is req.query the correct way of accessing the id?

I have the following api folder structure.

/pages
  /api
    /posts
      -index.js
      -[postId].js

In my [postId] file I have the following

function handler(req, res) {
  // shows undefined
  console.log(req.params);
  const postId = req.params.postId;

and my api call is as follows:

fetch(`/api/posts/${id}`)


Solution 1:[1]

Referring to nextJs docs, all examples uses req.query to get the id or other parameters:

import { useRouter } from 'next/router'

const Post = () => {
  const router = useRouter()
  const { pid } = router.query

  return <p>Post: {pid}</p>
}

export default Post

So there's nothing wrong with this approach.

Nextjs doesn't explicit says why they use query instead of params, but in the section about dynamic routes you can get some clues:

the route /post/abc?foo=bar will have the following query object:

{ "foo": "bar", "pid": "abc" }

Probably they use query as a way to join both params and query in one object or it's just more convenient to use that way, so as there's no reference about it you don't have to care that much, just use the query and be happy.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Yago Biermann