Next.jsでトップページと下層で条件分岐する方法

Next.jsでは、特定のページや下層ページで異なる内容や機能を提供したい場合、条件分岐を使用してこれを実現できます。

以下は、Next.jsでトップページと下層ページで条件分岐を行う方法を示します：

useRouterフックを使用する

Next.jsの useRouterフックを使用して現在のページのパスを取得し、それに基づいて条件分岐を行うことができます。

import { useRouter } from 'next/router';

function MyComponent() {
  const router = useRouter();
  const isHomePage = router.pathname === '/';

  return (
    <div>
      {isHomePage ? (
        <h1>トップページのコンテンツ</h1>
      ) : (
        <h1>下層ページのコンテンツ</h1>
      )}
    </div>
  );
}

export default MyComponent;

category cloud