NextJSでの高度なメニュー

前回のレッスンでは、通常のリンクメニューの問題について議論しました。 NextJSはこの問題を解決し、リンクをクリックしてもページ全体がリロードされないようにすることができます。パフォーマンスを最適化するために、 Ajaxを通じて変更された部分のみがロードされます。

このために、通常のリンクの代わりに特別なコンポーネントLink を使用します。インポートしましょう：

import Link from 'next/link';

このコンポーネントを使ってメニューを書き換えましょう：

export default function Menu() {
	return <>
		<Link href="/">ホーム</Link>
		<Link href="/about">アバウト</Link>
		<Link href="/price">価格</Link>
		<Link href="/contacts">お問い合わせ</Link>
	</>;
}

あなたのメニューをコンポーネントLinkを使って書き換えてください。

メニューのリンクをクリックしてもページがリロードされないことを確認してください。