Como funciona o diretório de aplicativos em Next.js 13
O novo recurso de diretório de aplicativos aumentou o desempenho de roteamento em Next.js mais do que nunca.
Next.js 13 introduziu um novo sistema de roteamento usando o diretório app. Next.js 12 já forneceu uma maneira fácil de lidar com rotas por meio de rotas baseadas em arquivos. 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 aninhados, uma interface 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.
Primeiros passos com 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 do aplicativo.
Compreendendo o novo diretório de aplicativos
Next.js 12 usou o diretório pages para roteamento, mas foi substituído pelo diretório app/ em Next.js 13. O pages/ diretório ainda funciona no Next 13 para permitir a adoção incremental. Você só precisa garantir que não criará arquivos nos dois diretórios para a mesma rota, pois ocorrerá 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 UI. Existem também arquivos especiais como:
- page.tsx< - O arquivo usado para criar a UI para uma rota específica.
- layout.tsx - Contém a definição de 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 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 corporais compartilhadas por todo o aplicativo.
- template.tsx - Os modelos são como layouts, porém não preservam o estado e são renderizados novamente sempre 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 é montado, por exemplo, entrar e sair de animações.
- error.tsx - Este arquivo é usado para tratar 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 UI de carregamento é carregada instantaneamente do servidor conforme a UI da rota é carregada em segundo plano. A IU de carregamento pode ser um botão giratório ou uma tela de esqueleto. Depois que o conteúdo da rota for carregado, ele substituirá a IU 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 head 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 daquela 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 umas dentro das outras 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 que o diretório de aplicativos suporta são componentes de servidor e streaming.
Usando componentes de servidor no diretório de aplicativos
O diretório app 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 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 “use client” na parte superior do componente antes de qualquer importação.
Componentes de streaming incremental no diretório de aplicativos
Streaming refere-se ao envio progressivo de partes da UI ao cliente 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 botão giratório até que o servidor conclua a renderização do conteúdo. Você faz isso de duas maneiras:
- Criação de um arquivo loading.tsx que será renderizado para todo o segmento da rota.
export default function Loading() {
return <p>Loading...</p>
}
- Envolvendo componentes individuais com o limite React Suspense e especificando uma UI substituta.
import { Suspense } from "react";
import { Products } from "./Components";
export default function Sale() {
return (
<section>
<Suspense fallback={<p>Products...</p>}>
<Products />
</Suspense>
</section>
);
}
Antes do componente Produtos ser 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 anteriores. 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 configuração manual.
Além disso, o diretório de aplicativos também oferece suporte a streaming e componentes de servidor, levando a um desempenho aprimorado. Embora esses recursos sejam ótimos para usuários e desenvolvedores, a maioria deles está atualmente em versão beta.
No entanto, você ainda pode atualizar para Next.js 13, pois o diretório de páginas ainda funciona e começar a usar o diretório de aplicativos em seu próprio ritmo.