渋谷ほととぎす通信

新しいこと・枯れたこと問わずオオバが興味を持ったものを調査し実践する効率を求める完全趣味の技術ブログ

【Next.js】ハイパーリンクの追加方法


前回に引き続きNext.jsのチュートリアルを15分の縛りで進めていきます。
なぜ15分なのかはコチラをどうぞ

Linkコンポーネントを利用する

index.jsposts/first-post.js同士に遷移リンクを張ります。

各ファイルに以下のimportをファイルの先頭部分に記述します。

import Link from 'next/link'

ページ同士でリンクを貼る場合は、
Linkコンポーネントを利用します。

【index.js変更前】

<h1 className="title">
  Learn to <a href="https://nextjs.org">Next.js!</a>
</h1>

【index.js変更後】

<h1 className="title">
  Read{' '}
  <Link href='/posts/first-post'>
    <a>this page!</a>
  </Link>
</h1>

このように<Link>でと<a>タグで、
リンクを張ります。

f:id:esakun:20210131035829p:plain:w450

{' '}はスペースの挿入を意味しています。
※スペースを複数入れても効果は無いようです。{' '}は効果なし

子ページに戻るリンク追加

import Link from 'next/link'

export default function FirstPost() {
    return (
    <>
    <h1>First Post</h1>
    <h2>
        <Link href="/">
            <a>Back to Home</a>
        </Link>
    </h2>
    </>
    )
}

first-post.jsのソースコードを変更します。

<></>この記述がよくわかりませんが、
削除するとコンパイルエラーが起きるため、

複数のタグを使用する場合は囲む必要があるんだろうな

という認識で使用することとします。

完成

https://i.gyazo.com/5d3a2b70d0aca0ffebc25d138db42cd8.gif

Linkとaの違いについて補足説明

  • Link href・・・JavaScriptによる遷移
  • a href・・・ブラウザ全体をリフレッシュして遷移

Linkを使った場合は必要なものしかロードされないので高速です。
しかし、外部ページに遷移する場合は<a href>を使う必要があります。

次回

コチラを進めていきます。 metaデータ、アセット、CSSについて。