NextJS - Navigating between pages using Link component - Part 3

Navigating between pages using Link component

This is a series of articles that will help us create Hcode's e-commerce page using NextJS, React, and JavaScript.

The first part of this series is the setup, if you haven't seen it yet, we recommend checking it out first:

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

Now let's open VSCode, and open the index.js file and the produtos.js file inside the pages directory of the project. Then we will import the next/link component.

In the example, we placed the tag inside a Link component, allowing us to navigate between pages without refreshing, and it is also possible to navigate back to the previous page in history. This is amazing because we can navigate like a single-page application, but with active history.

Some limitations should be taken into account, the only property we placed in the Link component is the href attribute="/endereco" while the title property was correctly placed inside the element that is inside the Link component.