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

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

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

index.jsとposts/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>タグで、
リンクを張ります。

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

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

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のソースコードを変更します。

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

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

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

完成

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

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

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

次回

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