Next.jsでURL情報を自在に操る：useRouterフック徹底解説

2024-04-27

Next.jsでURLパス名を取得する方法

useRouterフックを使う

これは最も一般的で強力な方法です。useRouterフックを使用すると、現在のURLに関する様々な情報にアクセスできます。パス名を取得するには、以下のコードを使用します。

import { useRouter } from 'next/router';

const MyComponent = () => {
  const router = useRouter();
  const pathname = router.pathname;
  console.log(pathname); // 例: /about
  return <div>パス名: {pathname}</div>;
};

usePathnameフックは、useRouterフックよりもシンプルで、現在のURLのパス名のみを取得するために使用できます。

import { usePathname } from 'next/navigation';

const MyComponent = () => {
  const pathname = usePathname();
  console.log(pathname); // 例: /about
  return <div>パス名: {pathname}</div>;
};

ページコンポーネントのpropsから取得する

getStaticPropsやgetServerSidePropsのようなデータフェッチング関数を用いるページコンポーネントの場合、URLパス名はpropsとして渡されます。

// pages/about.js
export async function getStaticProps() {
  const params = { id: 1 }; // 動的パラメータを含む場合
  return {
    props: { params },
  };
}

const About = ({ params }) => {
  const id = params.id;
  console.log(id); // 例: 1
  return <div>ID: {id}</div>;
};

補足

上記以外にも、useParamsフックやuseLocationフックを使用してURL情報を取得する方法があります。
動的ルートを含むURLの場合、useRouter.queryやparamsプロパティを使用して、クエリパラメータや動的パラメータを取得できます。

これらの方法を組み合わせることで、様々な状況に応じて柔軟にURLパス名を取得することができます。

Next.jsでURLパス名を取得するサンプルコード

useRouterフックを使う

import { useRouter } from 'next/router';

const MyComponent = () => {
  const router = useRouter();
  const pathname = router.pathname;
  console.log(pathname); // 例: /about
  return <div>パス名: {pathname}</div>;
};

export default MyComponent;

usePathnameフックを使う

import { usePathname } from 'next/navigation';

const MyComponent = () => {
  const pathname = usePathname();
  console.log(pathname); // 例: /about
  return <div>パス名: {pathname}</div>;
};

export default MyComponent;

ページコンポーネントのpropsから取得する

// pages/about.js
export async function getStaticProps() {
  const params = { id: 1 }; // 動的パラメータを含む場合
  return {
    props: { params },
  };
}

const About = ({ params }) => {
  const id = params.id;
  console.log(id); // 例: 1
  return <div>ID: {id}</div>;
};

export default About;

説明

上記のコードはすべて、MyComponentというコンポーネントでURLパス名を取得しています。
useRouterフックは、routerオブジェクトを使用して現在のURLに関する様々な情報にアクセスできます。
usePathnameフックは、pathname変数に現在のURLのパス名のみを格納します。
ページコンポーネントのpropsは、getStaticPropsやgetServerSidePropsのようなデータフェッチング関数で設定できます。

これらのサンプルコードは、あくまでも基本的な例です。
実際のユースケースに応じて、コードを適宜変更する必要があります。

Next.jsでURLパス名を取得するその他の方法

window.locationオブジェクトを使う

これは、JavaScriptの標準的な方法で、ブラウザの現在のURLに関する情報にアクセスできます。

const pathname = window.location.pathname;
console.log(pathname); // 例: /about

useRefフックとuseEffectフックを使う

この方法は、コンポーネントのマウント時にのみURLパス名を取得する場合に役立ちます。

import { useRef, useEffect } from 'react';

const MyComponent = () => {
  const pathnameRef = useRef(null);

  useEffect(() => {
    pathnameRef.current = window.location.pathname;
    console.log(pathnameRef.current); // 例: /about
  }, []);

  return <div />;
};

export default MyComponent;

カスタムフックを使う

この方法は、コードをより整理して再利用しやすくするために、useRouterやusePathnameなどのフックをラップするカスタムフックを作成する場合に役立ちます。

import { useRouter } from 'next/router';

const usePathname = () => {
  const router = useRouter();
  return router.pathname;
};

const MyComponent = () => {
  const pathname = usePathname();
  console.log(pathname); // 例: /about
  return <div>パス名: {pathname}</div>;
};

export default MyComponent;

注意事項

window.locationオブジェクトを使用する場合は、コンポーネントのマウント時だけでなく、URLが変更される可能性があるたびにパス名を取得する必要があります。
useRefフックとuseEffectフックを使用する場合は、メモ化を使用してパフォーマンスを向上させることができます。
カスタムフックを使用する場合は、コードが読みやすくなり、再利用しやすくなります。

シンプルで汎用性の高い方法が必要であれば、useRouterフックを使用するのがおすすめです。
現在のURLのパス名のみが必要であれば、usePathnameフックを使用するのがおすすめです。
コンポーネントのマウント時にのみURLパス名が必要であれば、window.locationオブジェクトを使用するか、useRefフックとuseEffectフックを使用することができます。
コードをより整理して再利用しやすくしたい場合は、カスタムフックを使用することができます。

reactjs next.js