Desempenho como padrão com o Next.js

O Next.js cuida de muitas otimizações no app React para que você não precise fazer isso.

Houssein Djirdeh

O Next.js é um framework do React opinativo com várias otimizações de performance integradas. A ideia principal do framework é garantir que os aplicativos sejam iniciados e permaneçam com o melhor desempenho possível, incluindo esses recursos por padrão.

Esta introdução vai abordar brevemente muitos recursos fornecidos pelo framework em alto nível. Os outros guias desta coleção explorarão os recursos com mais detalhes.

O que você aprenderá?

Embora o Next.js ofereça várias otimizações de desempenho por padrão, o objetivo desses guias é explicar essas opções em mais detalhes e mostrar como elas podem ser usadas para criar uma experiência rápida e de alto desempenho.

Existem muitas otimizações que podem ser adicionadas aos sites do React, em geral, que também funcionam para aplicativos criados com Next.js. Isso não será abordado, já que o foco está no que o Next.js fornece especificamente. Para saber mais sobre as otimizações gerais do React, confira nossa coleção do React.

Qual é a diferença entre o Next.js e o React?

O React é uma biblioteca que facilita a criação de interfaces do usuário usando uma abordagem baseada em componentes. Embora seja eficiente, o React é especificamente uma biblioteca de interface. Muitos desenvolvedores incluem outras ferramentas, como um bundler de módulos (webpack, por exemplo) e um transpiler (o Babel, por exemplo) para ter um conjunto de ferramentas de build completo.

Na coleção React, adotamos a abordagem de usar Create React App (CRA) para ativar os aplicativos React rapidamente. O CRA facilita a configuração de um aplicativo React fornecendo um conjunto de ferramentas de compilação completo com um único comando.

Embora existam algumas otimizações padrão integradas ao CRA, o objetivo da ferramenta é fornecer uma configuração simples e direta. A escolha é dada aos desenvolvedores para decidir se querem ejetar e modificar as configurações por conta própria.

O Next.js, que também pode ser usado para criar um novo aplicativo React, tem uma abordagem diferente. Ele fornece imediatamente várias otimizações comuns que muitos desenvolvedores gostariam de ter, mas acham difíceis de configurar, como:

  • Renderização do lado do servidor
  • Divisão automática de código
  • Pré-busca de rotas
  • Roteamento do sistema de arquivos
  • Estilo CSS-in-JS (styled-jsx)

Como configurar

Para criar um novo aplicativo Next.js, execute o seguinte comando:

npx create-next-app new-app

Em seguida, navegue até o diretório e inicie o servidor de desenvolvimento:

cd new-app
npm run dev

A incorporação a seguir mostra a estrutura de diretórios de um novo app Next.js.

  • Clique em Remixar para editar para tornar o projeto editável.
  • Para visualizar o site, pressione View App. Em seguida, pressione Fullscreen modo tela cheia.

Um diretório pages/ é criado com um único arquivo: index.jsx. O Next.js segue uma abordagem de roteamento de sistema de arquivos, em que cada página nesse diretório é exibida como uma rota separada. A criação de um novo arquivo neste diretório, como about.js, gera automaticamente uma nova rota (/about).

Os componentes também podem ser criados e usados como qualquer outro aplicativo React. Um diretório components/ já foi criado com um único componente, nav.js, que já foi importado em index.js. Por padrão, todas as importações usadas no Next.js são buscadas apenas quando a página é carregada, oferecendo os benefícios da divisão de código automatizada.

Além disso, cada carregamento de página inicial no Next.js é renderizado pelo servidor. Se você abrir o painel Network no DevTools, vai notar que a solicitação inicial do documento retorna uma página totalmente renderizada pelo servidor.

A guia "Visualização" do painel "Rede" mostra que o Next.js retorna o HTML visualmente completo quando uma página é solicitada.
A guia "Visualização" do painel "Rede" mostra que o Next.js retorna um HTML visualmente completo quando uma página é solicitada.

Esses são apenas alguns dos muitos recursos fornecidos automaticamente pelo Next.js. Muitos são personalizáveis e podem ser modificados para diferentes casos de uso.

Qual é a próxima etapa?

trocadilho intencional 😝

Todos os outros guias desta coleção explorarão um recurso específico do Next.js em detalhes: