Como o diretório de aplicativos funciona no Next.js 13

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 create-next-app@latest next13 --experimental-app


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

Noções básicas sobre o novo diretório de aplicativos

O Next.js 12 usou o diretório pages para roteamento, mas foi substituído pelo diretório app/ no Next.js 13. O diretório pages/ 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:

• page.tsx – O arquivo usado para criar a interface do usuário para uma determinada rota.
• layout.tsx – contém a definição do layout da rota e pode ser compartilhado 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.
• template.tsx – Os templates são como layouts, porém 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.
• error.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.
• loading.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.
• not-found.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.
• head.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 diretório app/ . Dentro desta pasta, você deve criar um arquivo chamado page.tsx que define a UI dessa rota específica.

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

Para rotas aninhadas como /products/sale , aninhe as pastas uma dentro da outra de forma que a estrutura da pasta se pareça com 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.

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

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

async function getData() {
  try{
    const res = await fetch('https://api.example.com/...');
    return res.json();
  } catch(error) {
throw new Error('Could not fetch data')
  }
}


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

export default async function Page() {
  const data = await getData();
  return <div></div>;
}


Os componentes do servidor são ótimos para renderizar conteúdo não interativo. Se você precisar usar ganchos React, ouvintes de eventos ou APIs somente de navegador, use 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 arquivo loading.tsx que será renderizado para todo o segmento de rota.

export default function Loading() {
  return <p>Loading...</p>
}


• Envolvendo componentes individuais com o limite do React Suspense e especificando uma UI de fallback.

import { Suspense } from "react";
import { Products } from "./Components";


export default function Sale() {
  return (
    <section>
      <Suspense fallback={<p>Products...</p>}>
        <Products />
      </Suspense>
    </section>
  );
}


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.