前回に引き続き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について。