Para criar um aplicativo Web completo com o React do zero, há muitos detalhes importantes que você precisa considerar:
-
O código deve ser empacotado usando um empacotador como o webpack e transformado usando um compilador como o Babel.
-
Você precisa fazer otimizações de produção, como divisão de código.
-
Convém pré-renderizar estaticamente algumas páginas para um melhor desempenho e SEO. Você também pode usar a renderização server-side ou client-side.
-
Pode ser necessário escrever um código de server-side para conectar seu aplicativo React ao seu banco de dados.
Uma framework pode resolver esses problemas. Mas essa framework deve ter o nível certo de abstração - caso contrário, não será muito útil. Ela também precisa ter uma excelente "Experiência do desenvolvedor", garantindo que você e sua equipe tenham uma experiência incrível ao escrever o código.
Digite Next.js, o Framework do React. O Next.js fornece uma solução para todos os problemas acima. Mas o mais importante é que você e sua equipe estão chegando no chamado 'pit of success' ao criar aplicativos com React.
O Next.js é o melhor da classe "Experiência do desenvolvedor" e de muitos recursos internos; uma amostra deles são:
-
Um sistema intuitivo de roteamento baseado em página (com suporte para rotas dinâmicas)
-
A pré-renderização, a geração estática (SSG) e a renderização server-side (SSR) são suportadas por página base.
-
Divisão automática de código para carregamento de página mais rápido
-
Client-side com pré-busca otimizada
-
Suporte integrado a CSS e Sass e suporte para qualquer biblioteca CSS-in-JS
-
Ambiente de desenvolvimento que suporta substituição de Hot Modules
-
Rotas de API para criar pontos de extremidade de API com funções Serverless.
-
Totalmente extensível
O Next.js é usado em dezenas de milhares de sites e aplicativos da Web voltados para produção, incluindo muitas das maiores marcas do mundo.
Este curso interativo gratuito orientará você sobre como começar a usar o Next.js.
Neste tutorial, você aprenderá os conceitos básicos do Next.js criando um aplicativo de blog muito simples. Aqui está um exemplo do resultado final:
https://next-learn-starter.now.sh
(source)
Vamos começar!
Este tutorial pressupõe conhecimentos básicos de JavaScript e React. Se você nunca escreveu o código em React, deve primeiro ler o tutorial oficial do React. Se você está procurando a documentação do Next.js, clique aqui.
