O que você aprenderá?

Confira algumas coisas que você aprenderá durante o curso.

  • NextJs

  • ReactJs

  • Integração com Firebase, Tailwind CSS e Typescript

  • Fazer Deploy na Núvem

  • 6 Projetos na Prática

  • Boas Práticas de Programação e Muito Mais

Conteúdo do Curso

  • 1

    Introdução

  • 2

    Revisão React

    • Introdução do Módulo

    • Código Fonte Final

    • Objetivos do Módulo

    • Criando o Projeto

    • Primeiro Componente

    • Movendo o Primeiro Componente

    • JSX #01

    • JSX #02

    • JSX #03

    • JSX #04

    • Desafio Lista

    • Desafio Lista - Resposta #01

    • Desafio Lista - Resposta #02

    • Desafio Lista - Resposta #03

    • Fragment #01

    • Fragment #02

    • Usando Componente

    • Propriedades de Componente

    • Integração com CSS #01

    • Integração com CSS #02

    • Propriedades são Somente Leitura

    • Aplicando Estilo CSS

    • Projeto Tabuleiro #01

    • Projeto Tabuleiro #02

    • Projeto Tabuleiro #03

    • Projeto Tabuleiro #04

    • Projeto Tabuleiro #05

    • Repetição #01

    • Repetição #02

    • Condicional #01

    • Propriedade Children

    • Condicional #02

    • Comunicação Direta

    • Chamando Função Via Evento

    • Comunicação Indireta

    • Componente com Estado

    • Desafio Contador

    • Desafio Contador - Resposta

    • Componentes Controlados

    • Desafio Mega-Sena

    • Desafio Mega-Sena - Resposta #01

    • Desafio Mega-Sena - Resposta #02

    • Desafio Mega-Sena - Resposta #03

    • Componente Baseado em Classe

    • Sistema Módulo ECMAScript

    • Integrando TypeScript

    • Conclusão do Módulo
  • 3

    Fundamentos de Next JS

    • Introdução do Módulo

    • Código Fonte Final

    • Criando o Projeto

    • Estrutura do Projeto

    • Pasta Page e as Rotas no Next

    • Rotas #01

    • Rotas #02

    • Rotas #03

    • Navegando entre Páginas #01

    • Navegando entre Páginas #02

    • API #01

    • API #02

    • Integrando com API #01

    • Integrando com API #02

    • API com Múltiplos Parâmetros

    • Resolvendo Warnings
  • 4

    Projeto Porta Premiada - Aplicando os Conceitos Fundamentais

    • Introdução do Módulo

    • Código Fonte Final

    • Visão Geral da Aplicação

    • Criando o Projeto

    • Componente Presente

    • Box Sizing

    • Componente Porta #01

    • Componente Porta #02

    • Componente Porta #03

    • Componente Porta #04

    • Componente Porta #05

    • Componente Porta #06

    • Classe Porta

    • Integrando TypeScript

    • Adicionando Eventos a Porta #01

    • Adicionando Eventos a Porta #02

    • Adicionando Eventos a Porta #03

    • Lidando com Array de Portas #01

    • Lidando com Array de Portas #02

    • Integração Porta Presente

    • Componente Jogo #01

    • Componente Jogo #02

    • Usando Router

    • Estruturando o Formulário

    • Finalizando o Formulário

    • Validando o Formulário

    • Atualizando Next 11
  • 5

    Modos de Pré Renderização do Next JS

    • Introdução do Módulo

    • Código Fonte Final

    • Estratégias de Renderização

    • Renderização SPA

    • Renderização SSR

    • Renderização SSG

    • Analisando o Projeto Tabuleiro

    • Criando Projeto

    • Componente Estático #01

    • Componente Estático #02

    • Componente Estático #03

    • Componente Estático #04 - Parte 1

    • Componente Estático #04 - Parte 2

    • Componente Dinâmico #01

    • Componente Dinâmico #02

    • Bug no Build do Projeto

    • Usando getStaticPaths - Parte 1

    • Usando getStaticPaths - Parte 2

    • Usando Fallback True
  • 6

    Projeto Quiz - Full Stack com Next JS

    • Introdução do Módulo

    • Código Fonte Final

    • Visão Geral da Aplicação

    • Nova estrutura de pastas - Next 13

    • Criando o Projeto

    • Classe Questão

    • Classe Resposta

    • Iniciando nossa API

    • Banco de Questões

    • Convertendo Para Objeto

    • Construindo a API #01

    • Construindo a API #02

    • Embaralhar Itens

    • Respondendo Pergunta

    • Iniciando Componente Questão

    • Componente Enunciado

    • Componente Resposta #01

    • Componente Resposta #02

    • Componente Resposta #03

    • Componente Resposta #04

    • Componente Resposta #05

    • Componente Resposta #06

    • Componente Resposta #07

    • Componente Temporizador

    • Externalizando Tempo Resposta

    • Componente Botão

    • Componente Questionário #01

    • Componente Questionário #02

    • Componente Index #01

    • JSON para Modelo

    • Componente Index #02

    • Componente Index #03

    • Solução com Atributo Key

    • Componente Resultado

    • Componente Estatística

    • Animação Resposta

    • Atualizando Next 11
  • 7

    Projeto Tarefas - Integração com TailwindCSS

    • Introdução do Módulo

    • Código Fonte Final

    • Visão Geral da Aplicação

    • Criando o Projeto

    • Classe Tarefa

    • Enum Tipo Filtro

    • Classe ListaTarefas #01

    • Tarefas Iniciais

    • Classe ListaTarefas #02

    • Componente Seleção

    • Componente ListaItem

    • Componente Lista

    • Componente ListaBotão

    • Componente Lista Rodapé #01

    • Componente Lista Rodapé #02

    • Adicionando Imagem ao Background

    • Trabalhando no Layout

    • Posicionamento da Lista

    • Formulário #01

    • Formulário #02

    • Integrando com Fontawesome
  • 8

    Deploy na Nuvem

    • Introdução do Módulo

    • Deploy Vercel - Projeto #01 - Parte 1

    • Deploy Vercel - Projeto #01 - Parte 2

    • Problema Tailwind CSS

    • Deploy Vercel - Projeto #02 - Parte 1

    • Deploy Vercel - Projeto #02 - Parte 2

    • Deploy da aplicação Quiz
  • 9

    Projeto Template Admin - Autenticação e Integração com o Firebase

    • Introdução do Módulo

    • Código Fonte Final

    • Visão Geral do Projeto

    • Configurando o Projeto

    • Estrutura Inicial

    • Configurando Fonte

    • Componente Layout #1

    • Esquema de Cores

    • Componente Menu Lateral #1

    • Componente Menu Lateral #2

    • Componente Título

    • Componente Logo

    • Componente Menu Lateral #3

    • Esquema de Cores #2

    • Comunicação Entre Componentes

    • Context API #1

    • Context API #2

    • Botão Alternar Tema #1

    • Botão Alternar Tema #2

    • Tela Autenticação #1

    • Tela Autenticação #2

    • Tela Autenticação #3

    • Tela Autenticação #4

    • Atualização no Firebase

    • Configuração do Firebase

    • Iniciando com Autenticação do Firebase

    • Autenticação com Google

    • Avatar Usuário

    • Criando Sessão com Cookie

    • Implementando Logout

    • Protegendo Rotas #1

    • Protegendo Rotas #2

    • Salvando Tema Local Storage

    • Protegendo Rotas #3

    • Autenticação com E-mail e Senha
  • 10

    Crud

    • Introdução do Módulo

    • Resultado Final

    • Configuração: NextJS, TailwindCSS e Firebase

    • Componentes Layout e Título

    • Classe Cliente

    • Componente Tabela #01

    • Componente Tabela #02

    • Componente Tabela #03

    • Componente Botão

    • Componente Formulário

    • Alternando entre Tabela e Formulário

    • Integrando Tabela e Formulário

    • Configurando Firebase no Projeto

    • Repositório de Clientes

    • Integrando Cadastro com Firebase

    • Organizando Código com Hooks

    • Excluindo Projeto Firebase
  • 11

    Bônus: Entendendo TypeScript

    • Aviso sobre a seção extra de TypeScript

    • O que é TypeScript

    • Por que TypeScript e como Usá-lo?

    • Instalando TypeScript

    • Executando TypeScript - Manual

    • Executando Typescript - Code Runner

    • Executando TypeScript - HTML

    • O Básico de Tipos

    • Tipos Numéricos e Booleano

    • Atribuindo Tipos Explícitos

    • Arrays e Tipos

    • Tuplas

    • Enums

    • O Tipo "Any"

    • O Básico sobre Interfaces

    • Interfaces e Propriedades

    • Interfaces e Métodos

    • Usando Interfaces com Classes

    • Interfaces e Tipo Função

Benefícios Inclusos no Curso

  • Áudio e Vídeo em Alta Definição

    250 aulas e 31 horas de conteúdo. Didática comprovada. Investimento garantido.

  • Certificado de Conclusão

    Ao final você receberá certificado com a carga horária apropriada para conclusão

  • Suporte Dedicado

    Conte com um time de especialistas e tire todas as suas dúvidas relativas ao curso

  • Sem prazo de expiração

    Assista o curso no seu tempo, sem pressa, sem nenhum prazo para expirar.

  • Recursos para download

    Baixe arquivos e artigos para melhor desenvolvimento do curso

  • Acesso Mobile

    Acesse por qualquer dispositivo: Computador, celular e Ipad

Descrição

Bem-vindos ao tão esperado curso de NextJS da Cod3r!


Neste curso vamos falar do framework que roda em cima da mais famosa biblioteca da atualidade, o React, e que adiciona várias funcionalidades a ele. Várias grandes empresas já estão utilizando o Next, o que será uma grande adição ao seu currículo, aprender essa incrível tecnologia!


Você vai aprender Next na prática em um curso totalmente baseado em projetos do mais simples a projetos mais complexos.


Abordaremos não somente as bases do Next e as suas funcionalidades principais, mas como também vamos te ensinar React, passando por um resumão da biblioteca. Após isso, o curso vai se focar em diversos projetos que vão fazer integração com Tailwind, com Firebase, e vamos também ter projetos com backend já que essa é uma possibilidade que o Next provê. 


Você também irá aprender como fazer o deploy na nuvem dos seus projetos, e no final vamos entregar um Modelo de aplicação com responsividade, com mudança de tema(dark e light), login, autenticação, proteção de rotas, e tudo isso para que você possa usar de base para seus próprios projetos!


O curso está dividido em seções e teremos:

 • Um resumo sobre React, onde criaremos um projeto utilizando os conceitos básicos de componente, jsx, fragment. Faremos integração com css e teremos um projeto que desenharemos um tabuleiro de damas para demonstrar como organizar os componentes. Abordaremos condicionais e laços, funções e faremos a integração com Typescript.

 • Teremos em seguida uma introdução ao NextJS de fato, onde criaremos um projeto base para trabalhar a estrutura do projeto, a organização dos arquivos e pastas. Aprenderemos sobre rotas, navegação entre páginas, falaremos sobre api e integração com ela, e  abordaremos estratégias de renderização, e resolvendo possíveis warnings.

 • Adiante começaremos nosso primeiro projeto, onde criaremos componentes novos. Aprenderemos sobre box sizing, fazer a integração do projeto com typescript, adicionando eventos ao projeto, usaremos router, e faremos validações de formulário. Também aprenderemos mais sobre a questão do SSR, Server Side Rendering. Veremos as estratégias de renderização e como funcionam as estratégias SPA, SSR e SSG. E Vamos criar um novo projeto e nele aprender sobre componentes estáticos e dinâmicos.

 • Depois teremos um projeto com foco no FullStack, ou seja, teremos um projeto também com o backend. Iremos trabalhar com construção de api, mexer com arquivos json e trabalhar no visual do projeto também.

 • Teremos uma seção onde faremos um projeto com integração com o Tailwind e logo após um projeto ensinando a fazer o deploy das aplicações na nuvem.


E na última seção será criada uma aplicação para Criação, Leitura, Edição e Remoção de dados, o famoso CRUD (Create, Read, Update, Delete) com NextJS. Utilizando o Firebase e Firestore como banco de dados, utilizando também o TailwindCSS para criar o visual do projeto e integrando com TypeScript. Tudo isso será mostrado e explicado durante a seção, desde a criação do projeto, a instalação das dependências, configuração e integração com o banco de dados e também a integração e uso tanto do Tailwind quanto do TypeScript.


Estamos entregando neste curso um conteúdo de muito valor, e que pode fazer muita diferença na sua carreira como programador.

 

Vamos aprender juntos, te aguardo no curso.



Instrutor

Leonardo Leitão

Leonardo Leitão é mestre em Informática Aplicada e fundador da Cod3r, já treinou mais de 380.000 alunos. São mais de 15 anos como professor e uma premiação internacional em reconhecimento da qualidade dos cursos produzidos. Há 16 anos atua na área como desenvolvedor de softwares e trabalhou como arquiteto de software em grandes projetos para o Governo Federal.

FAQ

  • Após a compra do curso tenho prazo pra poder assistir?

    Não, o curso pode ser assistido a qualquer tempo sem limite de prazo.

  • O curso oferece certificado?

    Sim, ao final do curso você receberá um certificado baseado na carga horária pra concluir o curso

  • Existe suporte para as minhas dúvidas?

    Sim, temos um time de suporte pronto pra tirar as dúvidas relativas ao conteúdo do curso.

  • Adquirindo o plano de assinatura também terei acesso a este curso?

    Sim