next/router を使用したデータの受け渡しについて

Question

前提・実現したいこと

next.jsでコンポーネント間のデータの受け渡しで詰まっています。

公式のコード見てもいまいち理解ができないため質問させていただきます！

発生している問題・エラーメッセージ

query: { pid: post.id }

1. このオブジェクトを使用したいとき（pathnameで指定されたコンポーネントで）

　　　　　どのようにして呼び出すことができるのでしょうか？

該当のソースコード

公式から引っ張ってきました。
こちら

// Next.js

import { useRouter } from 'next/router'

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

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

試したこと

console.log(router.query.pid)
console.log(query.pid)
console.log(pid)

など試してみましたが、取得できませんでした、、、、

お門違いな質問でしたらすみません。よろしくおねがします。

補足情報（FW/ツールのバージョンなど）

Comments

[anozon]

router.query.pid を記述しているファイル名は pages/post/[pid].js (または src/pages/post/[pid].js) で
アクセス後(取得しようとしている実行時)のURLは /post/10 などの形になっているということであっていますか？

[Tlexxxxxx]

記述内容に不備がありすみません。
そのような流れになります。

Answer 1

最小限のコードだと↓のように [pid] の部分は router.query.pid で取り出せています。

サンプルコード

動作しないコードと比べてみてどうでしょうか？