Configurando rotas com Next.js e Link

Neste artigo não vou falar sobre a instalação e nem a configuração do projeto usando Next.js, o foco vai ser na biblioteca link. Então recomendo que você tenha um aplicativo Next já configurado.

O que é a biblioteca link?

É a biblioteca que cuida das rotas da aplicação com Next.js. A ideia dessa biblioteca é permitir a navegação entre páginas seguindo o conceito de uma SPA (Single Page Application) ou aplicação de página única. É como se fosse a biblioteca Router do React, mas ele funciona de uma maneira diferente, sendo a maior diferença a maneira de criar as rotas.

Como usar a biblioteca link?

Para o exemplo, vou gerar uma nova aplicação do Next e vou modificar o arquivo index.js como no código abaixo:

import Head from 'next/head'
import styles from '../styles/Home.module.css'


export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Usando next/link</title>
<link rel="icon" href="/favicon.ico" />
</Head>



  &lt;main className={styles.main}&gt;
    &lt;nav&gt;
      &lt;ul&gt;
        &lt;li&gt;Home&lt;/li&gt;
        &lt;li&gt;Blog&lt;/li&gt;


        &lt;li&gt;Sobre nós&lt;/li&gt;
      &lt;/ul&gt;
    /nav
  /main
/div

Temos então a seguinte página:

Os itens Home, Blog e Sobre nós deverão ser links para outras páginas e para fazer essa navegação vamos importar o componente Link do next/link.

import Head from 'next/head'
import Link from 'next/link'
import styles from '../styles/Home.module.css'


export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Usando next/link</title>
<link rel="icon" href="/favicon.ico" />
</Head>



  &lt;main className={styles.main}&gt;
    &lt;nav
      ul
        liHome/li
        liBlog/li
        liSobre nós/li
      /ul
    /nav
  /main
/div

Agora podemos usar o componente Link nesses três itens:

<ul>
  <li>
    <Link href="/">
      <a>Home</a>
    </Link>
  </li>
  <li>
    <Link href="/">
      <a>Blog</a>
    </Link>
  </li>
  <li>
    <Link href="/">
      <a>Sobre nós</a>
    </Link>
  </li>
</ul>

Note que estamos passando o atributo hrefpara dentro desse componente. Pensando em HTML, o atributo href vai fazer uma requisição para uma outra página, fugindo do conceito de uma SPA. Mas a biblioteca link já cuida para que isso não aconteça, servindo apenas como uma referência para outra página e não uma requisição.

Agora precisamos passar as rotas. Não se preocupe porque ainda não criei as páginas. Primeiro precisamos entender como funciona a configuração das rotas. O caminho de todas as páginas apontam para dentro da pasta pages, ou seja, para ir para a home, podemos passar apenas / que ele vai para o caminho -> /pages/index.js. Então vou criar mais 2 arquivos dentro da pasta pages:

E vou mudar agora os caminhos nas três páginas:

<ul>
  <li>
    <Link href="/">
      <a>Home</a>
    </Link>
  </li>
  <li>
    <Link href="/blog">
      <a>Blog</a>
    </Link>
  </li>
  <li>
    <Link href="/sobre-nos">
      <a>Sobre nós</a>
    </Link>
  </li>
</ul>

Home (index.js):

Blog (blog.js):

Sobre nós (sobre-nos.js):

Vamos colocar mais um nível nas coisas. Vamos criar um card dentro do arquivo blog.js que vai mandar para um post. Esse post é relacionado ao blog, então ele vai ficar dentro de uma pasta chamada blog.

Blog.js:

<nav>
    <ul>
    <li>
        <Link href="/">
        <a>Home</a>
        </Link>
    </li>
    <li>
        <Link href="/blog">
        <a>Blog</a>
        </Link>
    </li>
    <li>
        <Link href="/sobre-nos">
        <a>Sobre nós</a>
        </Link>
    </li>
    
</nav>

Post-um.js:

<h1>Post Um</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio magni possimus fugiat ducimus eligendi sit nisi dolorum doloremque accusamus mollitia voluptas veniam, nostrum saepe! Eaque dolor at nam repellendus! Recusandae.</p>

E agora para transformar o cartão em um link passando a rota desse post:

Agora clicando no cartão seremos redirecionados para a página do post um:

Conclusão

A biblioteca link do Next.js é uma ferramenta que ajuda na hora de montar e configurar rotas para a aplicação. Principalmente porque as rotas já são configuradas automaticamente pela biblioteca, e nossa preocupação é apenas manter a estrutura de arquivos no padrão esperado.