Next.jsで画面遷移時に値を渡す方法がわからない

実現したいこと

Next.js14で画面遷移をする際に、遷移先のページに値を渡したいと考えています。
具体的には、/rule/page.tsxでユーザー数とユーザーの名前をそれぞれselectedNumber,inputValuesに状態として格納しており、/decide/page.tsxでその値を使いたいと考えています。

発生している問題・分からないこと

Next.js12までの環境でしたら、import useRouter from "next/router"を用いて、router.pushにqueryとして渡すことで可能だったのですが、Next.js13以降から、"next/navigation"からのimportに変更になった影響で、usePathname, useSearchParamsを用いて行わないといけない(?)らしいのですが、具体的な方法がわからないです。調べたところ、URLのパラメータを取得するものばかりで、値を渡すのに使っていないようなので、別の方法があるのかなと感じています。

該当のソースコード

TypeScript

1"use client";2 3import Link from "next/link";4import { useRouter, usePathname, useSearchParams } from "next/navigation";5import { ChangeEvent, useState } from "react";6 7const rule = () => {8 const [selectedNumber, setSelectedNumber] = useState(1);9 const [inputValues, setInputValues] = useState<string[]>(10 Array.from({ length: 10 }, () => "")11 );12 13 const router = useRouter();14 const pathname = usePathname();15 const searchParams = useSearchParams();16 17 const query = {18 selectedNumber,19 inputValues,20 };21 22 const params1 = searchParams.get(query)23 24 const handleSelectChange = (e: ChangeEvent<HTMLSelectElement>) => {25 setSelectedNumber(parseInt(e.target.value, 10));26 };27 28 const handleInputChange = (29 e: ChangeEvent<HTMLInputElement>,30 index: number31 ) => {32 const newInputValues = [...inputValues];33 newInputValues[index] = e.target.value;34 setInputValues(newInputValues);35 };36 37 // const handleStartClick = () => {38 // const query = { myParam: "myValue" };39 // const href = {40 // pathname: "/my-next-page",41 // query: { ...searchParams, ...query },42 // };43 // router.push(href);44 // };45 46 return (47 <div>48 <div className="mt-10 ml-10 text-lg">ルール設定</div>49 <div className="flex flex-col items-center justify-center">50 <div className="flex flex-col mt-8">51 <p>人数</p>52 <select 53 name="people"54 className="w-60 h-9 mt-2"55 value={selectedNumber}56 onChange={handleSelectChange}57 >58 {Array.from({ length: 10 }, (_, index) => (59 <option key={index + 1} value={index + 1}>60 {index + 1}61 </option>62 ))}63 </select>64 <p className="mt-8">名前</p>65 {Array.from({ length: selectedNumber }, (_, index) => (66 <input 67 key={index}68 type="text"69 className="w-60 h-9 mt-2 border-2 border-black"70 placeholder={`名前 ${index + 1}`}71 value={inputValues[index]}72 onChange={(e) => handleInputChange(e, index)}73 />74 ))}75 76 {/* <button 77 className="flex items-center justify-center p-4 mt-10 text-white bg-black rounded hover:text-black hover:bg-gray-300 transition-all duration-300" 78 onClick={handleStartClick} 79 > 80 はじめる 81 </button> */}82 <div>83 <Link href={{ pathname: "/decide", query: query }}>始める</Link>84 </div>85 </div>86 </div>87 </div>88 );89};90 91export default rule;92

試したこと・調べたこと

上記の詳細・結果

LinkやuseRouterを用いたqueryの渡す方法を調べてみたのですが、URLのパラメータを取得するものばかりで、的確な情報を取得できませんでした。

補足

package.json は以下の通りです。

{
"name": "ito",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "14.1.0",
"react": "^18",
"react-dom": "^18"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"autoprefixer": "^10.4.17",
"eslint": "^8",
"eslint-config-next": "14.1.0",
"postcss": "^8.4.33",
"tailwindcss": "^3.4.1",
"typescript": "^5"
}
}