Adriana LimaPara construir uma aplicação web completa com 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.
- Você pode querer pré-renderizar estaticamente algumas páginas para desempenho e SEO. Você também pode querer usar renderização do lado do servidor ou renderização do lado do cliente.
- Você pode ter que escrever algum código do lado do servidor para conectar seu aplicativo React ao seu armazenamento de dados.
Um framework pode resolver esses problemas. Mas tal estrutura deve ter o nível certo de abstração — caso contrário, não será muito útil. Ele também precisa ter uma ótima "Experiência de Desenvolvedor", garantindo que você e sua equipe tenham uma experiência incrível ao escrever código.
Next.js: o framework React
Insira Next.js, o React Framework. Next.js fornece uma solução para todos os problemas acima. Mas, mais importante, coloca você e sua equipe no poço do sucesso ao criar aplicativos React.
O Next.js visa ter a melhor experiência de desenvolvedor da categoria e muitos recursos integrados, como:
- Um sistema de roteamento intuitivo baseado em página (com suporte para rotas dinâmicas )
- Pré-renderização , geração estática (SSG) e renderização do lado do servidor (SSR) são suportadas por página
- Divisão automática de código para carregamentos de página mais rápidos
- Roteamento do lado do cliente com pré-busca otimizada
- Suporte integrado a CSS e Sass e suporte para qualquer biblioteca CSS-in-JS
- Ambiente de desenvolvimento com suporte para atualização rápida
- Rotas de API para criar endpoints de API com funções sem servidor
- 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.
Para criar um aplicativo Next.js, abra seu terminal cdno diretório em que deseja criar o aplicativo e execute o seguinte comando:
npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"
Nos bastidores, isso usa a ferramenta chamada
create-next-app, que inicializa um aplicativo Next.js para você. Ele usa esse modelo por meio do--examplesinalizador.Se não funcionar, dê uma olhada nesta página .
https://buttercms.com/demo/blog-engine-why-our-blog-engine/
Sobre este tutorial
Este curso interativo gratuito orientará você sobre como começar a usar o Next.js.
Neste tutorial, você aprenderá o básico do Next.js criando um aplicativo de blog muito simples . Veja um exemplo do resultado final:
https://next-learn-starter.vercel.app ( fonte )
Este tutorial pressupõe conhecimento básico de JavaScript e React. Se você nunca escreveu código React, você deve passar primeiro pelo tutorial oficial do React .
Se você estiver procurando por documentação, visite a documentação do Next.js .
Junte-se à conversa
Se você tiver dúvidas sobre qualquer coisa relacionada ao Next.js ou a este curso, fique à vontade para perguntar à nossa comunidade no Discord .
Vamos começar!