How to appending a query param to a dynamic route in nextjs

In Next.js, a common method to attach query parameters to dynamic routes is by using the Link component or programmatic navigation (using router.push or router.replace).

Using the Link Component

When using the Next.js Link component, you can pass query parameters as an object to the href prop. For example, if you have a dynamic route [id].js, you can create a link like this:

jsx
import Link from 'next/link';

const MyComponent = () => {
  return (
    <Link href={{ pathname: '/post/[id]', query: { foo: 'bar' } }} as="/post/123?foo=bar">
      <a>Go to Post</a>
    </Link>
  );
};

In this example, pathname represents the route pattern, and the query object contains the parameters you want to attach. The as attribute specifies the URL displayed in the browser address bar, which may include query parameters.

Using Programmatic Navigation

If you need to trigger navigation programmatically, use the Next.js useRouter hook to access the router object and call push or replace methods.

jsx
import { useRouter } from 'next/router';

const MyComponent = () => {
  const router = useRouter();

  const goToPost = () => {
    router.push({
      pathname: '/post/[id]',
      query: { foo: 'bar' },
    }, '/post/123?foo=bar');
  };

  return (
    <button onClick={goToPost}>Go to Post</button>
  );
};

Here, the structure of pathname and query objects matches that used with the Link component. The second parameter of router.push defines the URL shown in the browser address bar.

Important Notes

• In the Link component or router.push/router.replace, the query parameter is optional. You can provide only the dynamic route path without query parameters.
• When directly specifying query parameters in the as attribute or the second parameter of router.push/router.replace, ensure the URL is properly encoded, especially when parameter values contain special characters.
• In dynamic route pages, access these query parameters via the query object of the useRouter hook.

Here's an example of retrieving query parameters in a dynamic route page:

jsx
import { useRouter } from 'next/router';

const PostPage = () => {
  const router = useRouter();
  const { id, foo } = router.query;

  return (
    <div>
      <h1>Post: {id}</h1>
      <p>Query Parameter: {foo}</p>
    </div>
  );
};

export default PostPage;

This code demonstrates how to use the query object of useRouter in the PostPage dynamic route to retrieve both route parameters and query parameters.

When you have dynamic routes in Next.js and want to perform shallow navigation to reflect updated query parameters, another approach is to try:

javascript
const router = useRouter()
const url = {
      pathname: router.pathname,
      query: { ...router.query, page: 2 }
    }
router.push(url, undefined, { shallow: true })

This accesses the current path (router.pathname) and query (router.query), then merges them with the new page query parameter. If you forget to merge the existing query parameters, you may encounter the following error:

The provided href value is missing query values required for correct interpolation.

The solution avoids sending the entire previous route; instead, it uses replace to update the necessary parts. Thus, for query parameters:

javascript
const router = useRouter();
router.replace({
   query: { ...router.query, key: value },
});