Aprenda Next.js por Exemplo

Desenvolva Websites Estáticos e Aplicações Web Full-Stack com React, Next.js e Tailwind CSS

Atualização: este curso foi revisado para incluir os novos recursos do App Router, tornados estáveis em maio de 2023 com o Next.js v13.4. A primeira metade do curso aborda o novo App Router, enquanto a segunda metade aborda o Pages Router mais antigo, mas ainda suportado. Apelidado de O Framework React para a Web, o Next.js simplifica o processo de construção de aplicações web altamente otimizadas por meio da renderização de componentes React no lado do servidor. Neste curso abrangente, você aprenderá Next.js desenvolvendo um projeto completo passo a passo.

Parte I: Next.js como um Gerador de Site Estático

Nesta seção, você aprenderá como usar o Next.js como um Gerador de Site Estático, pré-renderizando todas as suas páginas em HTML, CSS e JavaScript estáticos. Você obterá uma compreensão profunda de conceitos fundamentais do Next.js, como Roteamento baseado em arquivos, Pré-renderização, Componentes do Servidor React, as diferenças entre Componentes do Servidor e do Cliente e como buscar dados em Componentes do Servidor. Além disso, você explorará o popular framework Tailwind CSS para estilização, descobrirá como incorporar Fontes Personalizadas em sua aplicação e aprenderá técnicas para tornar suas páginas mais amigáveis para SEO com metadados. A seção de Implantação apresentará várias opções para executar sua aplicação em produção, desde o uso de uma plataforma totalmente gerenciada como a Vercel até a realização de uma Exportação Estática que pode ser enviada para qualquer servidor web.

Parte II: Next.js como um Framework Full-Stack

Nesta seção, você aprenderá como usar o Next.js como um Framework Full-Stack, desbloqueando recursos como Renderização Dinâmica, Revalidação Baseada em Tempo e Revalidação Sob Demanda. Você utilizará um CMS sem cabeçalho chamado Strapi para armazenar dados e explorará como chamar sua API REST a partir do aplicativo Next.js. Além disso, você descobrirá diferentes opções para atualizar as páginas frontend quando os dados no CMS mudarem. O curso também abordará a Otimização de Imagens, demonstrando como o Next.js pode converter e redimensionar suas imagens sob demanda e permitir o carregamento tardio pelo navegador. Por fim, você aprenderá como integrar componentes de interface de usuário de terceiros em seu aplicativo e entenderá quando ainda é benéfico usar a Busca de Dados do Lado do Cliente. Você pode seguir o exemplo usando JavaScript ou TypeScript. O curso fornece o código-fonte completo, facilitando a visualização das alterações feitas em cada aula.

O que você aprenderá:

• Desenvolver aplicações web com Next.js
• Estilizar componentes com Tailwind CSS
• Construir websites totalmente estáticos ou aplicações full-stack
• Buscar dados de uma API remota, como um CMS sem cabeçalho