☰

Next.JS「Link」と「router.push()」と「a」タグの比較 質問する

tag-icon • tag-icon javascript next.js
Next.JS「Link」と「router.push()」と「a」タグの比較 質問する

初心者です。非常に基本的な質問で申し訳ありませんが、さまざまなページ間を移動するためにどのテクニックに従うべきかがわかりません。

今のところ、これを実現できる 3 つの方法を知っています。

  1. リンクコンポーネントはnext/link
  2. router.push()useRouterを使用してエクスポートされたny next/router
  3. シンプルなHTML<a></a>
<Link href="/about"><a>About me</a></Link>
<a href="/about">About me</a>
<button onClick={() => router.push("/about")}>About me</button>

どの方法も機能し、まったく同じ結果を達成します。これらのアプローチの違いがあれば、それを知りたいだけです。よろしくお願いします!

ベストアンサー1

ルータ.プッシュ

router.push('/push')window.location と同様に動作します。タグを作成しないため<a>、SEO を気にしている場合、リンクはクローラーによって検出されません。

<Link>

ただし、タグ<Link>が作成される<a>ため、クローラーがサイトをスクレイピングするときにリンクが検出されます。エンド ユーザーは引き続きページをリロードせずにナビゲートし、シングル ページ アプリの動作を作成します。

<a>

<a>next/link を使用しないタグは、<Link>エンド ユーザーを新しいページとして URL に誘導する標準のハイパーリンクを作成します (標準の動作)。

ウェブサイト全体で使用し<Link>、シングル ページ アプリの動作を維持するためにリダイレクトが必要な場所では router.push を使用する必要があります。

おすすめ記事