For anyone arriving late to this party, we now have dynamic routing in Next 9.

Which would allow for a url structure to be crafted like this by using the file structure, and without additional packages.

You could create a file pages/user/[id].js

With

import { useRouter } from 'next/router'

const User = () => {
  const router = useRouter()
  const { id } = router.query

  return <p>User: {id}</p>
}

export default User

For older version: < 9.x

You can use next/link's as feature:

<Link prefetch as={`/product/${slug}`} href={`/product?slug=${slug}`}>

Link on the browser will appear as /product/slug which internally maps to /product?slug=slug

You need to have a custom server for server-side mapping:

server.get("/product/:slug", (req, res) => {
  return app.render(req, res, "/product", { slug: req.params.slug })
})

For 9.x and higher

Next 9.x supports file system based dynamic routing. You don't need a custom server anymore.

Next.js supports creating routes with basic named parameters, a pattern popularized by path-to-regexp (the library that powers Express).

Creating a page that matches the route /product/:slug can now be achieved by creating a file in your pages directory named: pages/product/[slug].js.

Multiple dynamic URL segments are also supported!

./pages/blog/[blogId]/comments/[commentId].js
./pages/posts/[pid]/index.js

Problem: query Object Always Empty

TL;DR: During first render, query is empty and Router.isReady is false. In all following render calls, everything is back to normal.

In recent versions, dynamic routing is fully supported. The docs even show a super simple example of how it works. Sadly, for some reason, the docs fail to mention the important issue of hydration. This blog post explains some extra details.

The gist is: in many dynamic rendering scenarios (including the default), during initial render on the client, the page first gets rendered without any parameters (probably due to hydration, based on a static state that cannot take the dynamic path into account).

Solution

Allow your component to "kinda work" even if router.query is empty, e.g.:

function MyComp() {
  const router = useRouter();
  const { id } = router.query;

  console.log(`[MyComp render] router.isReady=${router.isReady}, id=${id}`);

  useEffect(() => {
    if (!router.isReady) {
      return;  // NOTE: router.query might be empty during initial render
    }

    doSomethingWithData(id);
  }, [id, router.isReady]);

  if (!router.isReady) {
    // we are still waiting for dynamic data to be available
    return 'loading...';
  }

  return theActualContent;
}

There even is the crucial Router.isReady field that tells you whether query data is available, but, for some reason, they do not mention it in the Dynamic Routes documentation.

First import Router

import Router from 'next/router'

Then if you want to use it in a Link tag

<Link href={{ pathname: '/about', query: { name: 'Sajad' } }}>

If you want to use it in a function or after a callback

Router.push({
    pathname: '/about',
    query: { name: 'Sajad' },
  })

Updated answer for App router:

// app/users/[id].js;
'use client';
import { useParams } from 'next/navigation';

function UserDetails() {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
}

export default UserDetails;

Docs: Next.js - useParams

To achieve the URL pattern https://url.com/users/123, where 123 is a dynamic parameter, you can use Next.js's built-in routing with parameterized routes.

First, create a file named [id].js inside the pages/users directory:

// pages/users/[id].js;
 import { useRouter } from 'next/router';

function UserDetails() {

const router = useRouter();
const { id } = router.query;

return <div>User ID: {id}</div>;
}
export default UserDetails;