Home > OS >  using req.params vs req.query in Next.js dynamic api routes
using req.params vs req.query in Next.js dynamic api routes

Time:05-09

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

CodePudding user response:

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.

  • Related