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

Question

実現したいこと

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のパラメータを取得するものばかりで、値を渡すのに使っていないようなので、別の方法があるのかなと感じています。

該当のソースコード

"use client";

import Link from "next/link";
import { useRouter, usePathname, useSearchParams } from "next/navigation";
import { ChangeEvent, useState } from "react";

const rule = () => {
  const [selectedNumber, setSelectedNumber] = useState(1);
  const [inputValues, setInputValues] = useState<string[]>(
    Array.from({ length: 10 }, () => "")
  );

  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  const query = {
    selectedNumber,
    inputValues,
  };

  const params1 = searchParams.get(query)

  const handleSelectChange = (e: ChangeEvent<HTMLSelectElement>) => {
    setSelectedNumber(parseInt(e.target.value, 10));
  };

  const handleInputChange = (
    e: ChangeEvent<HTMLInputElement>,
    index: number
  ) => {
    const newInputValues = [...inputValues];
    newInputValues[index] = e.target.value;
    setInputValues(newInputValues);
  };

  //   const handleStartClick = () => {
  //     const query = { myParam: "myValue" };
  //     const href = {
  //       pathname: "/my-next-page",
  //       query: { ...searchParams, ...query },
  //     };
  //     router.push(href);
  //   };

  return (
    <div>
      <div className="mt-10 ml-10 text-lg">ルール設定</div>
      <div className="flex flex-col items-center justify-center">
        <div className="flex flex-col mt-8">
          <p>人数</p>
          <select
            name="people"
            className="w-60 h-9 mt-2"
            value={selectedNumber}
            onChange={handleSelectChange}
          >
            {Array.from({ length: 10 }, (_, index) => (
              <option key={index + 1} value={index + 1}>
                {index + 1}
              </option>
            ))}
          </select>
          <p className="mt-8">名前</p>
          {Array.from({ length: selectedNumber }, (_, index) => (
            <input
              key={index}
              type="text"
              className="w-60 h-9 mt-2 border-2 border-black"
              placeholder={`名前 ${index + 1}`}
              value={inputValues[index]}
              onChange={(e) => handleInputChange(e, index)}
            />
          ))}

          {/* <button
            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"
            onClick={handleStartClick}
          >
            はじめる
          </button> */}
          <div>
            <Link href={{ pathname: "/decide", query: query }}>始める</Link>
          </div>
        </div>
      </div>
    </div>
  );
};

export default rule;

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

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"
}
}

Answer 1

Next.js の App Router では、Pages Router と大きく変わって、独自の query を使う機会がぐっと減って多くの場合で JS の標準機能である URLSearchParams を使うことになります。

https://developer.mozilla.org/ja/docs/Web/API/URLSearchParams

移動するとき

URLSearchParams を使って普通に(つまりNext.js も React も関係なく、標準のJSの機能を使って)クエリパラメータをの文字列を生成して、繋げたパスを使って移動します。

     const handleStartClick = () => {
       const params = new URLSearchParams();
       newInputValues.foreach(v => {
         params.append("v", v);
       });
       const href = `/decide?${params}`; // toString() は省略可能
       router.push(href);
     };

読みとるとき

普通に URLSearchParams のメソッド(ここでは getAll) を使って値を取って来ましょう。

useState(initial) に渡した initial の値は、再レンダリングのときには無視されるので、その名の通り初期値を入れられます。

useState の初期値について: https://ja.react.dev/reference/react/useState#parameters

"use client";

import { useSearchParams } from "next/navigation";
import { useState } from "react";

export default function Page() {
  const params = useSearchParams();
  const [inputValues, setInputValues] = useState(params.getAll("v"));

  return (
    <div>
      {inputValues.map((v, index) => (
        <input
          key={index}
          value={v}
          onChange={(e) => {
            setInputValues((prev) => {
              const nextValue = [...prev];
              nextValue[index] = e.target.value;
              return nextValue;
            });
          }}
        />
      ))}
    </div>
  );
}

Comments

[Hinoki]

無事、解決しました！
React,Next.jsのものに囚われずに考えるべきでした…
ありがとうございます！