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:
import Link from 'next/link';
Let's remake our menu using this component:
export default function Menu() {
return <>
<Link href="/">home</Link>
<Link href="/about">about</Link>
<Link href="/price">price</Link>
<Link href="/contacts">contacts</Link>
</>;
}
Remake your menu using
the Link component.
Make sure that following the menu links no longer leads to a page reload.
