Next.js do Zero ao Avançado com Projetos

Seja bem-vindo ao nosso curso completo de Next.js!

Se você está pronto para dominar este poderoso framework de desenvolvimento web baseado em React, você está no lugar certo. Este curso foi feito para levá-lo do nível básico ao avançado, capacitando você a criar aplicações web completas, escaláveis e de alto desempenho.

Confira a seguir o que você vai aprender em cada etapa do curso:

Introdução ao Next.js

Nesta primeira seção, você será apresentado às principais vantagens do Next.js em relação ao React. Vamos configurar o ambiente de desenvolvimento, criar nosso primeiro projeto e explorar a estrutura de diretórios e arquivos.

Além disso, abordaremos as diferenças entre renderização do lado do servidor (SSR) e renderização do lado do cliente (CSR), preparando você para um entendimento profundo do framework.

Páginas e Navegação

Aqui, vamos explorar como o roteamento funciona no Next.js. Você aprenderá sobre o roteamento baseado em arquivos, como navegar entre páginas, criar páginas dinâmicas com parâmetros, rotas aninhadas e layouts reutilizáveis.

Também discutiremos o uso do hook useRouter para gerenciar a navegação e a diferença entre componentes de servidor e componentes com use client, além de como utilizar a função redirect.

Estilização

Esta seção aborda a estilização de aplicações em Next.js. Vamos começar com uma introdução aos diferentes tipos de estilos, como CSS global e CSS Modules, e também integrações com Tailwind CSS e SASS.

Você ainda verá exemplos de CSS-in-JS para escolher a abordagem que melhor se adapta ao seu projeto.

Fetch e Server Actions

Focaremos em como buscar dados e usar ações de servidor no Next.js. Você aprenderá a configurar projetos com Prisma, criar formulários, inserir e recuperar dados de bancos de dados e lidar com rotas dinâmicas.

Também veremos a diferença entre componentes do cliente e do servidor e como integrá-los. Além disso, discutiremos estados de carregamento, páginas 404 e validação no front-end e back-end. Esta seção inclui um projeto prático para consolidar seu aprendizado.

Cache no Next.js

Nesta parte, vamos entender como o cache funciona e como otimizar suas aplicações para produção.

Você aprenderá sobre cache de rotas completas, validação de cache baseada em tempo, remoção de cache e o uso da função revalidatePath para manter suas aplicações rápidas e eficientes.

Autenticação com Next Auth

Vamos nos aprofundar na implementação de autenticação em Next.js com NextAuth.js. Começaremos configurando o Google Provider, criando rotas de API de autenticação e adicionando botões de login e logout.

Você verá como proteger páginas tanto no lado do cliente quanto no servidor usando middleware, além de integrar com um banco de dados e concluir a configuração com Prisma.

Projeto NextGram

Na última seção, vamos aplicar tudo o que você aprendeu criando um projeto prático chamado NextGram.

Esse projeto, inspirado no Instagram, inclui funcionalidades como autenticação, likes, comentários e gerenciamento de postagens. Com isso, você verá como conectar todos os pontos para construir uma aplicação real.

Ao final do curso, você terá uma compreensão completa de Next.js e estará preparado para criar aplicações modernas e de alto desempenho.

Pronto para começar sua jornada com Next.js? Te espero no curso!