Next.jsでクエリパラメータを遷移先に渡すにはどうすればいいのか？

Next.jsでクエリパラメータを渡す方法について日本語の記事が少ないので、この記事では「Next.jsでどのようにしてクエリパラメータを渡すのか？」について解説します。

まず、サンプルで作る画面は以下の通りです。

大まかに説明するとホーム画面(index.jsx)で入力した内容を出力画面(output.jsx)で出力しています。

ホーム画面

index.jsx

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

export default function Index() {
  const router = useRouter();           //ルーターの取得
  const [input, setInput] = useState();

  // ボタンをクリックしたときの処理
  const clickButton = () => {
    //未入力の時
    if (!input) {
      return;
    }

    router.push({
        pathname:"/output",   //URL
        query: {input :input} //検索クエリ
      });
  }

  return (
    <div style={{textAlign: "center", marginTop: "50px"}}>
      {/* 入力項目 */}
      <input 
        type="text" 
        value={input}
        onChange={(e) => setInput(e.target.value)} /*変更時inputに値をセット*/
      />

      {/* ボタン */}
      <button 
        onClick={clickButton}
        disabled={!input}>    {/*入力項目が未入力の場合、非活性*/}
        遷移
      </button>
    </div>
  )
}

ホーム画面では、入力内容を出力画面に渡して画面遷移を行っています。大きく分けると2ステップです。

まず最初に、useRouterフックを使うためにインポートが必要です。
import { useRouter } from 'next/router';

次にrouterオブジェクトのpushを使って画面遷移を行っています。このとき、クライアントサイドでの遷移となり、サーバーからリクエストが返されるわけではないので注意が必要です。

そして、オプションに以下の設定を行います。
・pathname：遷移する先のURL
・query：遷移先に渡すパラメータ

これにより**「遷移先」、「遷移先に渡すパラメータ」がセット**されます。注意点としてはqueryはオブジェクト型で渡すことです。そのため文字列をそのまま渡すのではなく、連想配列で渡します。

今回の場合は、inputに入力した値をセットしています。

出力画面

ouput.jsx

import { useRouter } from 'next/router';

export default function Output() {
  const router = useRouter();

  return (
    <div style={{textAlign: "center", marginTop: "50px"}}>
      {/* パラメータの表示 */}
      <h1>input：{router.query.input}</h1>
    </div>
  )
}

出力画面では渡ってきたパラメータを表示するだけです。

routerオブジェクトのqueryにパラメータが入っているので、router.query.inputで取得できます。

ちなみに、遷移元でパラメータが設定されていない場合、{}で渡ってくるので先ほどの値はundefinedとなり、空白で表示されます。

##まとめ

• useRouterフックを使ってrouter.pushにpathname(遷移先)、query(渡すパラメータ)をセットする。
• 遷移先では、router.query.「パラメータ名」で出力できる
• 呼び出し元でパラメータが設定されていなければ、{}で渡される