【Next.js】Link、buttonの使い分け

'next/link'のLinkコンポーネントと<button>タグを使い分ける

遷移のみの場合→Linkコンポーネント
処理を伴う場合→<button>タグ

遷移だけの場合

<Link href="..." />

import Link from 'next/link';

<Link href="/about">About</Link>

クライアントサイドナビゲーションとプリフェッチ機能により、高速なページ遷移が可能。
<a>タグを使用していることでアクセシビリティやSEOにも配慮されている。

Recommendation: Use the <Link> component to navigate between routes unless you have a specific requirement for using useRouter.

useRouterを使用する理由がない限り、<Link>を推奨

https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating?utm_source=chatgpt.com

クリックで処理をしてから遷移する場合

<button onClick={...} /> + router.push()

import { useRouter } from 'next/navigation';

const MyButton = () => {
  const router = useRouter();

  const handleClick = async () => {
    await fetch('/api/log'); // 処理
    router.push('/complete'); // 遷移
  };

  return <button onClick={handleClick}>送信</button>;
};

何らかの処理を実行してから遷移する場合は、<button> タグと router.push() を組み合わせて使用するのが適しています。

リンクボタン<Link>を非活性表示にする時に気をつけること

※ここでいうリンクボタンとは<Link>を使用してボタン風のデザインにしているもののことを指します。

• href="#"にする
• pointer-events-noneのCSSクラスを付与する（Tailwind）

できれば

• aria-disabled="true" アクセシビリティ属性を付ける

補足

href="#"だけだと、クリックした時に画面上部にスクロールしてしまうためpointer-events-none をつけてクリックできないようにする

aria-disabled="true" を付けると、アクセシビリティ的に「無効な状態」であることを伝える