O Next.js cuida de muitas otimizações no seu app React para que você não precise se preocupar com isso
O Next.js é um framework React opinativo com várias otimizações de desempenho integradas. A ideia principal por trás do framework é garantir que os aplicativos sejam iniciados e permaneçam com o maior desempenho possível com esses recursos incluídos por padrão.
Esta introdução abordará brevemente muitos recursos fornecidos pelo framework em um alto nível. Os outros guias desta coleção vão explorar os recursos com mais detalhes.
O que você aprenderá?
Embora o Next.js forneça várias otimizações de desempenho por padrão, esses guias tentam explicá-las em mais detalhes e mostrar como você pode usá-las para criar uma experiência rápida e de alto desempenho.
Há muitas otimizações que podem ser adicionadas aos sites React em geral e também funcionam para aplicativos criados com o Next.js. Eles não serão abordados, 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 poderoso, o React é especificamente uma biblioteca de interface. Muitos desenvolvedores incluem outras ferramentas, como um bundler de módulo (por exemplo, webpack) e um transpilador (Babel, por exemplo) para ter um conjunto de ferramentas de build completo.
Na coleção do React, adotamos a abordagem de usar Criar app do React (CRA) para ativar os apps do React rapidamente. Com o CRA, a configuração de um aplicativo React é facilitada. Ele fornece um conjunto de ferramentas completo de build com um único comando.
Embora existam algumas otimizações padrão incorporadas a CRA, a ferramenta visa fornecer uma configuração simples e direta. Os desenvolvedores podem optar por 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, usa uma abordagem diferente. Ela fornece imediatamente uma série de 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 em 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 Ver app. Em seguida, pressione
Tela cheia
.
Um diretório pages/ é criado com apenas um arquivo: index.jsx. O Next.js segue uma abordagem de roteamento de sistema de arquivos, em que cada página do diretório é veiculada como uma rota separada. A criação de um novo arquivo nesse diretório, como about.js, vai criar 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, cada importação usada no Next.js só é buscada quando a página é carregada, proporcionando os benefícios da divisão de código automatizada.
Além disso, cada carregamento de página inicial no Next.js é renderizado do lado do servidor. Se você abrir o painel "Network" no DevTools, vai notar que a solicitação inicial para o documento retorna uma página totalmente renderizada pelo servidor.
Esses são apenas alguns dos muitos recursos fornecidos pelo Next.js automaticamente. Muitos são personalizáveis e podem ser modificados para diferentes casos de uso.
A seguir
trocadilho intencional Novidade
Todos os outros guias desta coleção explorarão um recurso específico do Next.js em detalhes:
- Pré-busca de rotas para acelerar a navegação nas páginas
- Veiculação de páginas híbridas e somente AMP para um carregamento mais rápido dos mecanismos de pesquisa
- Componentes de divisão de código com importações dinâmicas para reduzir o consumo de JavaScript