Neste curso você aprenderá o básico sobre React e muito sobre Next.js.
Ao final do curso você estará apto para criar sites e estupidamente rápidos, usando o que há de mais moderno em tecnologia front end.
Ao reutilizar blocos e componentes, você poderá construir um site inteiro em menos de 3,5 horas e já colocá-lo em produção.
Pré-requisitos
Conhecimento básico/intermediário de JavaScript
Conhecimento básico de CSS e Desenvolvimento Web (HTML)
O que você aprenderá
Básico sobre React
Como consumir APIs externas para montar uma página com Next.JS
Como usar tailwindcss, um dos frameworks mais populares de css
Construir queries GraphQL para extrair informações de produtos, categorias, usuário, no Magento
Como criar páginas estupidamente rápidas com Next.js, cacheando as partes principais, consumindo APIs externas e muito mais
Reutilizar componentes para criar sites inteiros em poucas horas
Como contornar problemas de CORS do Magento
Principais métodos e funcionalidades do Next.js 12 e 13
Como migrar uma aplicação Next.js 12 para 13
Utilização de variáveis de ambiente no Next.js durante desenvolvimento e deploy
Utilizar o fetch nativo do JavaScript e a variação dele no Next.js 13 com todos seus benefícios
Como construir queries GraphQL para extrair informações de produtos, categorias, usuário, e muito mais
Criar endpoints de API usando Next.js
Debugar aplicações Next.js, incluindo componentes server-side
Elementos e conceitos básicos de JavaScript
Fazer deploy automatizado de sites e aplicações Next.js
Bônus
Ao se inscrever neste curso (ou no Clube Magenteiro) você terá acesso ao nosso grupo secreto de alunos.
E também terá acesso ao código-fonte das aulas e do módulo Magenteiro que permite oferecer uma experiência híbrida de compra, tendo o checkout dentro do Magento, desacoplado do restante da sua loja feita em Next.js.
Pra quem é este curso?
Desenvolvedores que querem empreender em projetos digitais de forma rápida e moderna
Desenvolvedores Front End
Desenvolvedores Magento buscando alternativas mais rápidas para construir temas e customizações
Interessados em criar sites de forma mais rápida e moderna
Freelancers e agências em busca de produtividade e performance
Vamos resolver problemas comuns ao usar useEffect, useState e outros recursos que só deveriam ser usados em componentes client-side. Também resolveremos e navegaremos por problemas de hidratação.
16:49
Variáveis de ambiente
Um recurso básico e essencial. Saiba usá-las com segurança.
05:39
Populando as categorias com fetch e graphQL
Vamos usar o fetch para realizar uma query graphQL e popular as categorias do nosso menu a partir daquelas cadastradas no Magento.
14:25
Criando tela de login e adcionando Tailwind no Next.js 13 (com exercício)
Vamos ver como usar componentes de login e tailwindcss/forms para criar a página de login da nossa loja.
13:15
Fazendo a requisição de login e manipulando cookies
Vamos fazer a chamada de login e salvar os dados em cookie usando o componente cookies-next.
09:27
Simplificando o fetch e entendendo os tipos de cache do fetch no Next.js 13
Vamos simplificar nossas chamadas fetch graphql com um helper. Também entenderemos as opções de cache disponíveis no novo fetch do next.js 13.
11:12
Trocando avatar do usuário depois de logar
Vamos usar o useState pra atualizar o avatar do usuário após o login e gerar o hash do e-mail do cliente com md5. Também veremos 2 formas sobre renderização condicional.
Fazendo logout e revogando token (Next APIS intro)
Vamos ver como o Authorization Header e rotas de API para revogar a sessão do usuário.
14:44
Página de categoria e listagem de produtos (Rota dinâmica no Next.js 13)
Vamos começar a criação da rota dinâmica da categoria e entender alguns conceitos básicos dela.
10:53
Populando página de categoria
Vamos consumir as APIs do Magento e listar os produtos. Vamos falar sobre caches do Magento, do novo generateMetatada() e muito mais.
15:00
Página de produto, carrinho e próximos passos
Criamos nossa página de produto em Next.js, corrigimos bugs, e preparamos nosso Magento para exibir o carrinho e checkout com os produtos adicionados no next.js.
15:50
Alternativas a nossa loja
Algumas alternativas mais completas para integrar Magento e Next.js
Desenvolvedor Magento desde 2011 e instrutor Magento desde 2015 com 12+ cursos publicados e 18.000+ alunos de 108+ países.
Adoro criar conteúdo que ajudem a melhorar o ecossistema de desenvolvedores.