您需要创建一个动态路由：Next.js Docs
针对您的情况，创建一个文件pages/user/[id].js

1.客户端

使用此代码片断访问ID：

import { useRouter } from 'next/router'

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

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

export default Component

2.服务器端

您可以使用data fetching functions中的任何一个
用于SSR的代码片段：

export async function getServerSideProps({ params }) {

  const { id } = params
  // fetch data from database with id

  return {
    props: {},  // will be passed to the page component as props
  }
}

有关作为上下文传递给数据获取函数的内容的更多信息：上下文参数

将id添加到useEffect()的依赖项数组中。大致是这样的：

import { useState, useEffect } from "react";
import { useRouter } from 'next/router';

function Page() {
  const router = useRouter();
  const [page, changePage] = useState();
  // `query` can only be fully parsed client-side
  // so `isReady` flag is needed 
  const { query, isReady } = router;
  const { id } = query;
  // also need to parse the query value to undefined or string
  const parsedID = id === undefined
    ? undefined
    : Array.isArray(id)
    ? id[0]
    : id;

  useEffect(() => {
    // refuse to run the effect if query is not ready
    // or ID is undefined
    if (!isReady || !parsedID ) {
      return;
    }

    // this looks ugly
    // but pure promise syntax is even uglier
    // and `useEffect()` doesn't accept async functions
    (async () => {
      // errors are assumed to be handled in the `_app` component
      // so no error-handling logic here
      const response = await fetch(`localhost:3000/user/${parsedID}`);
      const newPage = await response.json();
      changePage(newPage);
    })()

  }, [isReady, parsedID]);

  return (
    <>
      {!page
        // show loading placeholder until the page is fetched
        ? <div>Loading...</div>
        // pass the `page` value to whatever component you need
        : ...
      }
    </>
  )
}

export default Page;