Menu Avançado no NextJS

Na lição anterior, discutimos o problema do menu com links comuns. O NextJS pode resolver esse problema e fazer com que a navegação por um link não recarregue toda a página. Para otimização de desempenho, apenas a parte alterada será carregada via Ajax.

Para isso, em vez de links, usaremos um componente especial Link. Vamos importá-lo:

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

Vamos refazer nosso menu usando este componente:

/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>
  </>;
}