Next.jsで呼び出されたURLパスを取得する方法（Functionコンポーネント編）

Next.jsで呼び出されたURLを取得する方法はいくつかあります。

この記事では Function ベースでの呼び出されたURLパスを取得する方法を解説します。

呼び出されたURLパスを取得する方法

Next.jsで呼び出されたURLパスを取得するには useRouter オブジェクトを使います。

import React  from "react" ;
import { useRouter } from 'next/router';

export default function TestPathName() {
    const router = useRouter() ;
    return <div>パス名は[{router.pathname}]です。</div>;
}

上記のファイルを pages/my_path_name.js に保存します。

保存したらブラウザーから http://localhost:300/my_path_name で呼び出します。

実行した結果は

パス名は[/my_path_name]です。

と /my_path_name が取得されブラウザーに表示されます。

useRouter() は React Hook のためクラスベースのコンポーネントでは使えません。