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>

      <main className={styles.main}>
        <nav>
          <ul>
            <li>Home</li>
            <li>Blog</li>

            <li>Sobre nós</li>
          </ul>
        </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>

      <main className={styles.main}>
        <nav>
          <ul>
            <li>Home</li>
            <li>Blog</li>
            <li>Sobre 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>
    </ul>
</nav>
<h1>Blog</h1>
<article className={styles.card}>
    <h3>Post Um</h3>
    <p>Um pouco do que é o post</p> 
</article>

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:

Post Um

Um pouco do que é o 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.