Leitores como você ajudam a apoiar o MUO. Quando você faz uma compra usando links em nosso site, podemos ganhar uma comissão de afiliado. Consulte Mais informação.

Next.js 13 introduziu um novo sistema de roteamento usando o diretório de aplicativos. O Next.js 12 já fornecia uma maneira fácil de lidar com rotas por meio de rotas baseadas em arquivo. Adicionar um componente à pasta de páginas o tornaria automaticamente uma rota. Nesta nova versão, o roteador baseado em sistema de arquivos vem com uma configuração integrada para layouts, modelos de roteamento aninhado, uma interface de usuário de carregamento, tratamento de erros e suporte para componentes de servidor e streaming.

Este artigo explica esses novos recursos e por que eles são importantes.

Introdução ao Next.js 13

Crie seu próprio projeto Next.js 13 executando o seguinte comando no terminal.

npx criar-próximo-app@latest next13 --experimental-app

Isso deve criar uma nova pasta chamada next13 com o novo diretório de aplicativos.

Compreendendo o novo diretório de aplicativos

instagram viewer

Next.js 12 usou o Páginas diretório para roteamento, mas é substituído pelo aplicativo/ diretório em Next.js 13. O Páginas/ diretório ainda funciona no Next 13 para permitir a adoção incremental. Você só precisa garantir que não cria arquivos nos dois diretórios para a mesma rota, pois receberá um erro.

Aqui está a estrutura atual do diretório do aplicativo.

No diretório do aplicativo, você usa pastas para definir rotas e os arquivos dentro dessas pastas são usados ​​para definir a IU. Existem também arquivos especiais como:

  • página.tsx - O arquivo usado para criar a IU para uma determinada rota.
  • layout.tsx - Contém a definição do layout da rota e é compartilhável em várias páginas. Eles são perfeitos para menus de navegação e barras laterais. Na navegação, os layouts preservam o estado e não são renderizados novamente. Isso significa que quando você navega entre as páginas que compartilham um layout, o estado permanece o mesmo. Uma coisa a observar é que deve haver um layout superior (o layout raiz) contendo todas as tags HTML e body compartilhadas em todo o aplicativo.
  • modelo.tsx - Os modelos são como layouts, mas não preservam o estado e são renderizados novamente toda vez que são usados ​​para criar uma página. Os modelos são perfeitos para situações em que você precisa que determinado código seja executado toda vez que o componente for montado, por exemplo, animações de entrada e saída.
  • erro.tsx - Este arquivo é usado para lidar com erros no aplicativo. Ele envolve uma rota com a classe de limite de erro React de modo que, quando ocorre um erro nessa rota ou em seus filhos, ele tenta se recuperar renderizando uma página de erro amigável.
  • carregando.tsx - A interface do usuário de carregamento é carregada instantaneamente do servidor enquanto a interface do usuário da rota é carregada em segundo plano. A interface do usuário de carregamento pode ser um botão giratório ou uma tela de esqueleto. Depois que o conteúdo da rota é carregado, ele substitui a interface do usuário de carregamento.
  • não encontrado.tsx - O arquivo não encontrado é renderizado quando Next.js encontra um Erro 404 para essa página. No Next.js 12, você teria que criar e configurar manualmente uma página 404.
  • cabeça.tsx - Este arquivo especifica a tag de cabeçalho para o segmento de rota em que está definido.

Como criar uma rota em Next.js 13

Como mencionado antes, as rotas são criadas usando pastas no aplicativo/ diretório. Dentro desta pasta, você deve criar um arquivo chamado página.tsx que define a IU dessa rota específica.

Por exemplo, para criar uma rota com o caminho /products, você precisará criar um app/products/page.tsx arquivo.

Para rotas aninhadas como /products/sale, aninhe as pastas uma dentro da outra de forma que a estrutura da pasta pareça app/products/sale/page.tsx.

Além de uma nova maneira de rotear, outros recursos interessantes suportados pelo diretório de aplicativos são componentes de servidor e streaming.

Usando componentes de servidor no diretório de aplicativos

O diretório do aplicativo usa componentes do servidor por padrão. Essa abordagem reduz a quantidade de JavaScript enviada ao navegador conforme o componente é renderizado no servidor. Isso melhora o desempenho.

Veja este artigo sobre diferentes métodos de renderização em Next.js para uma explicação mais aprofundada.

Um componente de servidor significa que você pode acessar com segurança os segredos do ambiente sem que eles sejam expostos no lado do cliente. Por exemplo, você pode usar processo.env.

Você também pode interagir diretamente com o back-end. Não há necessidade de usar getServerSideProps ou getStaticProps pois você pode usar async/await no componente do servidor para buscar dados.

Considere esta função assíncrona que busca dados de uma API.

assíncronofunçãoObter dados() {
tentar{
const res = aguardam buscar(' https://api.example.com/...');
retornar res.json();
 } pegar(erro) {
lançarnovoErro('Não foi possível obter dados')
 }
}

Você pode chamá-lo diretamente em uma página da seguinte maneira:

exportarpadrãoassíncronofunçãoPágina() {
const dados = aguardam Obter dados();
retornar<div>div>;
}

Os componentes do servidor são ótimos para renderizar conteúdo não interativo. Se você precisar use ganchos de reação, ouvintes de eventos ou APIs somente de navegador, usam um componente cliente adicionando a diretiva “usar cliente” na parte superior do componente antes de qualquer importação.

Componentes de streaming incremental no diretório de aplicativos

Streaming refere-se ao envio de partes da interface do usuário para o cliente progressivamente até que todos os componentes sejam renderizados. Isso permite que o usuário visualize parte do conteúdo enquanto o restante está sendo renderizado. Para oferecer aos usuários uma experiência melhor, renderize um componente de carregamento como um controle giratório até que o servidor conclua a renderização do conteúdo. Você faz isso usando de duas maneiras:

  • Criando um carregando.tsx arquivo que será renderizado para todo o segmento de rota. 
exportarpadrãofunçãoCarregando() {
retornar<p>Carregando...p>
}
  • Envolvendo componentes individuais com o limite do React Suspense e especificando uma UI de fallback. 
importar { Suspender } de"reagir";
importar { Produtos } de"./Componentes";
exportarpadrãofunçãoOferta() {
retornar (
<seção>
Produtos...
}>
<Produtos />
suspense>
seção>
 );
}

Antes que o componente Produtos seja renderizado, o usuário verá “Produtos…”. Isso é melhor do que uma tela em branco em termos de experiência do usuário.

Atualizando para Next.js 13

O novo diretório de aplicativos é definitivamente uma melhoria em relação ao diretório de páginas anterior. Inclui arquivos especiais como layout, head, template, error, not-found e loading que lidam com diferentes estados ao renderizar uma rota sem a necessidade de uma configuração manual.

Além disso, o diretório de aplicativos também suporta streaming e componentes de servidor que levam a um melhor desempenho. Embora esses recursos sejam ótimos para usuários e desenvolvedores, a maioria deles está atualmente na versão beta.

No entanto, você ainda pode atualizar para o Next.js 13, pois o diretório da página ainda funciona e começar a usar o diretório do aplicativo no seu próprio ritmo.