NextJSでの高度なメニュー

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

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

/src/comps/menu/menu.jsximport Link from 'next/link';

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

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