Next.js 13で動的ルーティングのパラメータやURLのパスを取得する方法

この記事では、Next.jsのバージョン13で動的ルーティングのパスやパラメータをURLから取得する方法について解説しています。

動的ルーティングのパスやパラメータを取得する方法

例えば、Next.jsのプロジェクトで/test/[id]?name=taroといったURL([id]は動的なidの値が入る)から動的ルーティングのパラメータやURLのパスを取得するには以下のようなコードで取得することができます。

Test.tsx

"use client";
import { useSearchParams, usePathname, useParams } from "next/navigation";

const Test = () => {
    // URLのパラメーターを取得
    const searchParams = useSearchParams();
    const name = searchParams.get("name");
    console.log(name);

    // URLのパスを取得
    const pathname = usePathname();
    console.log(pathname);

    // 動的ルーティングのパラメータを取得
    const params = useParams();
    console.log(params.id);

    return (
        <div>
            Enter
        </div>
    );
}

export default Test;

ポイントはnext/navigationからuseParamsやusePathnameといった関数をインポートするところですね。

また、これらの関数はクライアントコンポーネントでのみ使えるものなので、use clientの記述も必要になります。

まとめ

useParamsやusePathnameなどを使って、Next.jsの動的ルーティングのパスやパラメータを取得することができます。

今回の記事で実装したコードはこちらのリポジトリにあげています。