Curso de Next.js do básico ao avançado com projetos

Bem-vindo ao nosso curso completo de Next.js! Se você quer dominar este framework de desenvolvimento web baseado em React, você está no lugar certo. Este curso foi projetado para guiá-lo desde os conceitos básicos até as funcionalidades avançadas de Next.js, permitindo que você crie aplicações web completas, escaláveis e de alto desempenho. A seguir, veja uma descrição detalhada do que você aprenderá em cada seção do curso.

Seção 1: Introdução ao Next.js

Nesta seção inicial, você será apresentado ao Next.js e suas principais vantagens em relação ao React. Vamos configurar nosso ambiente de desenvolvimento, criar nosso primeiro projeto e explorar a estrutura de diretórios e arquivos. Também discutiremos as diferenças entre renderização do lado do servidor (SSR) e renderização do lado do cliente (CSR), preparando o terreno para um entendimento profundo do framework.

Seção 2: Páginas e Navegação

Aqui, vamos explorar as funcionalidades de roteamento do Next.js. Você aprenderá sobre o roteamento baseado em arquivos, como navegar entre páginas e criar páginas dinâmicas com parâmetros. Veremos também rotas aninhadas e a criação de layouts reutilizáveis, além de entender como usar o hook useRouter para manipular a navegação de maneira eficiente. Também discutiremos a diferença entre componentes de servidor e componentes com use client, além de como utilizar a função redirect.

Seção 3: Estilização

Esta seção é dedicada à estilização de aplicações Next.js. Começaremos com uma introdução aos estilos no Next.js, cobrindo desde CSS global e CSS Modules até integrações com Tailwind CSS e SASS. Também veremos exemplos de CSS-in-JS para que você possa escolher a abordagem de estilização que melhor se adapta às suas necessidades.

Seção 4: Fetch e Server Actions

Aqui, vamos nos concentrar em como buscar dados e utilizar ações de servidor no Next.js. Você aprenderá a configurar projetos com Prisma, criar formulários, inserir e recuperar dados de um banco de dados, e lidar com rotas dinâmicas. Vamos explorar mais ainda a diferença entre componentes do cliente e do servidor e como integrar ambos. Além disso, veremos como lidar com estados de carregamento, páginas 404 e validação tanto no front-end quanto no back-end.

Esta seção é baseada em projeto, ou seja, você criará uma aplicação enquanto aprende os recursos.

Seção 5: Cache no Next.js

Nesta seção, abordaremos como o cache funciona no Next.js e como otimizar suas aplicações para produção. Você aprenderá sobre o full route cache, validação baseada em tempo, remoção de cache e como usar a função revalidatePath para garantir que suas aplicações sejam rápidas e eficientes.

Seção 6: Autenticação com Next Auth

Focaremos na implementação de autenticação em Next.js usando NextAuth.js. Vamos começar com os primeiros passos, integrar o Google Provider, configurar rotas de API de autenticação e criar botões de login e logout. Você aprenderá a proteger páginas tanto no lado do cliente quanto no lado do servidor, usando middleware para garantir a segurança de suas aplicações. Também veremos como integrar com um banco de dados e concluir a configuração com Prisma.

Seção 7: NextGram

Na última seção, colocaremos tudo o que aprendemos em prática, criando um projeto completo chamado NextGram. Este projeto prático consolidará seus conhecimentos e habilidades, permitindo que você veja como todas as peças se encaixam em uma aplicação real.

O NextGram é baseado no Instagram, e tem funcionalidades como: autenticação, like, comentários, gerenciamento de postagens e muito mais!

Ao final deste curso, você terá uma compreensão sólida de Next.js e estará preparado para construir aplicações web modernas, escaláveis e eficientes.

Está pronto para aprender Next de uma vez por todas? Então te vejo no curso!