reactjs - URL オブジェクトで Next.js ルーター プッシュを使用すると予期しない動作が発生する

Question

Next.js のドキュメントによると、次の例のように、URL オブジェクトでルーター プッシュ機能を使用して動的パスをルーティングできます。

import { useRouter } from 'next/router'

export default function ReadMore({ post }) {
  const router = useRouter()

  return (
    <span
      onClick={() => {
        router.push({
          pathname: '/post/[pid]',
          query: { pid: post.id },
        })
      }}
    >
      Click here to read more
    </span>
  )
}

しかし、この機能を使用しようとすると、Next.js ルーター/post/[pid]?pid=1はブラウザーに次のように送信します (たとえば、投稿 ID が 1 であるとします)。つまり、ルーターは[pid]をクエリ オブジェクトの値に置き換えません。

誰かが私を助けることができますか？