Artigos > Front-end

Configurando rotas com Next.js e Link

Matheus Alberto
Matheus Alberto

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:

página inicial home blog e sobre nós

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:

caminho de todas as páginas

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):

página inicial

Blog (blog.js):

página inicial

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

página inicial

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.

caminhos das pastas

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:

blog do post um

blog 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.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software

Artigos > Front-end

Cursos profissionais de Front-end é na Alura, comece agora!

  • 1266 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1266 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1266 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1266 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso por 1 ano

Estude 24h/dia onde e quando quiser

Novos cursos todas as semanas