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.