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:
import Link from 'next/link';
Vamos refazer nosso menu usando este componente:
export default function Menu() {
return <>
<Link href="/">home</Link>
<Link href="/about">about</Link>
<Link href="/price">price</Link>
<Link href="/contacts">contacts</Link>
</>;
}
Refaça seu menu usando
o componente Link.
Certifique-se de que a navegação pelos links do menu agora não causa recarregamento da página.