【Next.js】遷移先に配列内オブジェクトのクエリを渡す

初めに

next.jsで動的ルーティングをさせたいかつ、配列内のオブジェクトをLinkコンポーネントから遷移先に渡したい
（propsとして渡すようなイメージ）

こういった時にどのようにするか記事にしました。
といっても公式に書かれているとおりに実装するだけでしたが😂

ディレクトリ構成

pages配下にusersディレクトリを作成、さらにその中に[name].jsを作成しておきます。

ファイルやディレクトリの構成としてはいったんこれだけです

index.jsを書き換える

ルートディレクトリ（一番上の階層）にあるindex.jsの中では適当な配列を作成し、
userのnameに応じて、遷移先に渡すtextを動的に変化させます

index.js

import React from "react";
import Link from "next/link";
import styles from "../styles/Home.module.css";

const Home = () => {
  // 適当な配列を作成
  const users = [
    { id: 1, name: "tanaka", text: "暖かくなってきたね！" },
    { id: 2, name: "yamada", text: "パンケーキ食べたい" },
    { id: 3, name: "watanabe", text: "お腹減った" },
  ];

  return (
    <div>
      {users.map((user) => {
        // userの情報
        const userInfo = { id: user.id, name: user.name, text: user.text };
        return (
          <li className={styles.link} key={user.id}>
            {/* queryで渡したい情報を遷移先に渡す */}
            <Link
              as={`/users/${user.name}`}
              href={{ pathname: `/users/[name]`, query: userInfo }}
            >
              <a>{user.name}</a>
            </Link>
          </li>
        );
      })}
    </div>
  );
};

export default Home;

Linkコンポーネントのにはasとhrefで色々と書いていますが、

as→ブラウザのURL欄に表示されるパス。
href→pagesディレクトリ内のパスや渡したいクエリなどを書いてく。必須項目！

くらいに覚えてます

画面上ではこんな感じで表示されてます。
styleはご自由に調整してください。

遷移先でqueryを受け取る

usersディレクトリの中の[name].jsではuserRouterを使って
index.jsから渡されたqueryを受け取ります

[name].js

import { useRouter } from "next/router";
import styles from "../../styles/Home.module.css";

const Name = () => {
  const router = useRouter();
  return (
    <div className={styles.link}>
      <h1>{router.query.name}のPageです</h1>
      <p>{router.query.text}</p>
    </div>
  );
};

export default Name;

index.jsから一番上のtanakaに遷移してみましょう

このように表示されています。
urlもhttp://localhost:3000/users/tanaka
のようになっているはずです。

そのほかのページも確認してみてください。
consoleでrouter.queryを出力してみてもきちんと正しい値が返ってきてるはず😛

このようにLinkコンポーネントから遷移先に何かを渡すやり方はある程度覚えておきたいですね！

参考

next/link | Next.jshttps://nextjs-ja-translation-docs.vercel.app