Iniciando com Next.JS

Olá dev!

O intuito desse post é explicar um pouquinho o que é Next.js e o que podemos fazer com ele.

O que é Next.js?

É um Framework React para Produção.
Next.js oferece a melhor experiência de desenvolvedor com todos os recursos de que você precisa para produção: renderização híbrida estática e de servidor, suporte a TypeScript, agrupamento inteligente, pré-busca de rota e muito mais. Nenhuma configuração necessária.

Vantagens:

Next.js tem várias ferramentas para te auxiliar, algumas delas:

• Otimização de imagem
  • Com o Next.js podemos trocar a tag <img src="" /> pelo componente <Image src="" />, assim é incluído uma variedade de otimizações como: carregar somente o tamanho utilizado e quando a imagem for utilizada.
• Next.js Analytics
  • Ao publicar a sua aplicação na Vercel você tem acesso a uma ferramenta de analise em tempo real. Podendo assim, medir quantidade de visitantes, tempo de carregamento da página, entre outros.
• Zero Config
  • Utilizando um simples comando no terminal, é criado uma estrutura pronta para iniciar um projeto.
• Suporte a CSS e CSS Modules
  • O CSS Modules nos permitem separar o css em escopos, para evitar colisões.
• Roteamento
  • A navegação entre paginas é bem simplificado, basta criar um novo arquivo com o nome da pagina desejada e o roteador já identifica como uma página.
• Rotas Api
  • Com as Rotas você pode criar endpoints para retornar informações para sua aplicação.

• Híbrido SSG e SSR

  • SSR (Server Side Render) - Renderização do lado do Servidor:

    Ao solicitarmos uma página de perfil de usuário, por exemplo, o servidor efetua as buscas necessárias na aplicação e banco de dados, e retorna ao navegador um HTML pronto para ser apresentado ao usuário.
    
    Fonte: https://woliveiras.com.br/posts/qual-diferenca-server-side-render-ssr-e-static-site-generator-ssg/

  • SSG (Static Site Generator) - Geração de Site Estático:

    São sites que não possuem conteúdos dinâmicos, uma pagina de apresentação de uma empresa, por exemplo.

    
    Fonte: https://woliveiras.com.br/posts/qual-diferenca-server-side-render-ssr-e-static-site-generator-ssg/

Como aprender Next.js

No próprio site do Next.js (https://nextjs.org/learn/basics/create-nextjs-app) há um curso interativo com os fundamentos de Next.js, como monitorar a performance, SEO e outras funcionalidades.

Referências

Nextjs.org
Qual a diferença entre SSR e SSG