Ícone do site Taller

Rotas Paralelas (Parallel Routes) no NextJS

Allan Carlos

Você já teve a necessidade de carregar páginas de forma simultânea ou precisou colocar condicionais para determinar se uma parte da página deve ser carregada ou não?

É para isso que o Parallel Routes serve, nós podemos carregar uma ou mais páginas, em uma página pai.

Imagine um painel de controle onde diferentes seções como vendas, feedback de usuários e estatísticas do trafego, são carregados e atualizados sem interferir uma nas outras. Isso melhora a experiência do usuário, pois eles podem ser carregadas e atualizadas em tempo real sem precisar recarregar toda a página e seus respectivos componentes. Também, o usuário pode interagir com as seções de forma independente, e caso aconteça de algum endpoint falhar, não vai interferir em outras seções daquela página.

Logo abaixo na imagem, você pode ver um exemplo da organização dos diretórios e a representação de páginas diferentes sendo renderizadas em uma única página.

Imagem retirada de: https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#examples

Neste artigo, exploraremos mais profundamente como as rotas paralelas funcionam e como você pode utilizá-las em seus projetos NextJS.

Tutorial

1 – Obtendo uma chave de API da News API

Primeiramente, é necessário obter uma chave de API (API Key) para realizar requisições à NewsAPI. Para isso, siga estes passos:

  1. Visite o site da NewsAPI em https://newsapi.org.
  2. Clique no botão ‘Get API Key’, localizado na página principal.
  3. Você será direcionado para uma página de cadastro. Complete o cadastro com as informações solicitadas.
  4. Após a conclusão do cadastro, você será capaz de acessar sua conta. Visite https://newsapi.org/account para visualizar sua chave de API.
  5. Na seção ‘API Key’, copie a chave fornecida. Esta chave será usada nas requisições para a NewsAPI.

Obs.: É importante manter sua API Key segura e não a compartilhar publicamente, pois ela é o acesso às funcionalidades da API.

2 Criando o projeto

  1. Vamos criar nosso projeto com o comando npx create-next-app@latest
  2. Configure da seguinte forma:

3 – Estruturando o projeto

  1. Criar Slots (páginas separadas):

No diretório /app do seu projeto, crie dois diretórios chamados “@news” e “@sports”.
Estes diretórios representarão diferentes áreas da sua estrutura de página. Observe que o @ antes do nome dos diretórios é uma convenção que está relacionada ao sistema de rotas paralelas.

  1. Criar arquivos de páginas nos diretórios:

No diretório @news, crie um arquivo chamado page.js, faça o mesmo para @sports.

  1. Criando a requisição para a API:

Para não precisarmos criar uma API ou mock do zero, iremos utilizar a API News, que é uma API que nos possibilita consultar notícias recentes conforme o filtro que passaremos. Como já criamos nossa conta e garantimos nossa API Key, então é só copiar e colar na constante apiKey no código adiante.

  1. No arquivo @news/page.js, vamos criar uma função assíncrona que faça requisição GET para o endpoint /top-headlines.

// @news/page.js

async function loadNews() {
  const apiKey = "CHAVE_DA_API";
  const res = await fetch(
    `https://newsapi.org/v2/top-headlines country=br&category=general&apiKey=${apiKey}`
  );
  const data = await res.json();
  return data.articles;
}

Faremos o mesmo processo no arquivo @sports/page.js, o código ficará:

// @sports/page.js
async function loadNews() {
  const apiKey = "a2c5aee3fc384bdbbb6055f1a3f5bd5e";
  // Requisição GET para a API News
  const res = await fetch(
    `https://newsapi.org/v2/top-headlines?country=br&category=sports&apiKey=${apiKey}`
  );
  const data = await res.json();
  return data.articles;
}

export default async function Page() {
  const articles = await loadNews();

  return (
    <>
      <h1>Esportes</h1>
      <div>
        <ul>
          {articles?.map((article, i) => (
            <li key={i}>{article.title}</li>
          ))}
        </ul>
      </div>
    </>
  );
}

Agora a cereja do bolo, a parte principal que é montar nosso layout, fazendo a integração com as páginas recém criadas.
Na raiz do projeto em /app, vamos editar o arquivo layout.js, nesse arquivo de layout nós recebemos os slots por parâmetros, então ficará assim:

export default function RootLayout({ news, sports }) {
  return (
    <html lang="en">
      <body>
        <div>
          <div>{news}</div>
          <div>{sports}</div>
        </div>
      </body>
    </html>
  );
}
  1. Agora é só rodar o projeto com o comando npm run dev e ver o resultado final, que deverá ficar assim:

Conclusão

Usar as rotas paralelas é como dividir sua página em várias mini páginas. Cada uma delas faz seu próprio trabalho. Pense o seguinte: enquanto uma parte da sua página mostra as últimas notícias, outra parte pode estar mostrando atualizações de esportes, tudo ao mesmo tempo e de forma independente.
Experimente manipular o arquivos criados, criar mais rotas paralelas, adicionar Loading UI.

Fontes:
https://nextjs.org/docs/app/building-your-application/routing/parallel-routes
https://hackernoon.com/nextjs-13-parallel-routes-a-comprehensive-guide

Sair da versão mobile