NextJS - Navegando entre as páginas usando componente Link - Parte 3

Navegando entre as páginas usando componente Link

Essa é uma série de artigos que nos ajudará a criar a página de e-commerce da Hcode utilizando NextJS, React e JavaScript.

A primeira parte dessa série é o setup, se você ainda não viu, recomendamos ver primeiro:

1. https://hcode.com.br/#/blog/1-nextjs-introducao
2. https://hcode.com.br/#/blog/2-nextjs-criando-a-primeira-pagina-com-nextjs-react-e-javascript

Agora vamos abrir o VSCode, e abrir o arquivo index.js e o arquivo produtos.js dentro do diretório pages do projeto. Em seguida vamos importar o componente next/link

No exemplo colocamos a tag <a> dentro de um componente Link, assim conseguimos navegar nas páginas sem dar um refresh, se além disso, é possível navegar no histórico voltando para a página anterior. Isso é incrível por que podemos navegar como uma aplicação de página única, porém com histórico ativo.

Algumas limitações devem ser levada em conta, a única propriedade que colocamos no componente Link é o atributo href="/endereco" já a propriedade title, foi corretamente colocada dentro do elemento <a> que está dentro do componente Link.

Agora que já sabemos como navegar entre as páginas vamos conhecer um pouco mais sobre o sistemas de Rotas do NextJS?

No próximo artigo! 

Até lá!

Glaucio Daniel