Advanced Menu in NextJS

In the previous lesson, we discussed the problem of a menu made of regular links. NextJS can solve this problem and make it so that following a link does not lead to a full page reload. For performance optimization, only the changed part will be loaded via Ajax.

To do this, instead of links, we will use a special component Link. Let's import it:

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

Let's remake our menu using this component:

/src/comps/menu/menu.jsxexport default function Menu() {
  return <>
    <Link href="/">home</Link>
    <Link href="/about">about</Link>
    <Link href="/price">price</Link>
    <Link href="/contacts">contacts</Link>
  </>;
}