Next.js & React - Curso Completo - Totalmente Baseado em Projetos
Construa aplicações React profissionais com o Framework NextJS! Além de projetos com TailwindCSS, Firebase e TypeScript.
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
Introdução
TESTE GRÁTISVisão Geral
TESTE GRÁTISPré-requisitos
TESTE GRÁTISO que é NextJS
TESTE GRÁTISRecado sobre TypeScript
Repositório Github do Curso
Aviso importante aos usuários de Windows
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
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
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
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
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
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
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
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
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
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
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.
Leonardo Leitão
Pessoas que adquiriram este curso também se interessaram pelos cursos abaixo
Todos os Cursos
Todos os Cursos
Todos os Cursos
Todos os Cursos
Não, o curso pode ser assistido a qualquer tempo sem limite de prazo.
Sim, ao final do curso você receberá um certificado baseado na carga horária pra concluir o curso
Sim, temos um time de suporte pronto pra tirar as dúvidas relativas ao conteúdo do curso.
Sim
Sim, basta clicar no link boleto e enviar o comprovante de pagamento para o email [email protected]