Udemy

Platform

Português

Language

Web Development

Category

Aprenda NextJS, GraphQL e Leaflet na prática!

Crie um mapa totalmente interativo com um CMS integrado em poucas horas!

4.89 (239 reviews)

Students

9 hours

Content

Mar 2021

Last Update
Regular Price

Topics

SKILLSHARE
SkillShare
Unlimited access to 30 000 Premium SkillShare courses
30-DAY FREE TRIAL

What you will learn

Boas práticas com ReactJS

Criação de um Boilerplate do zero

Configurar Eslint

Configurar Prettier

Conceitos do NextJS

Funcionamento do _app

Funcionamento do _document

Rotas simples e dinâmicas

Link e useRouter

Usando dynamic import do NextJS

Novo componente do Next Image

Funcionamento do GraphQL

Criação de Schema

Criar APIs rapidamente

Geração de Types para GraphQL

Como criar mapas com Leaflet

Customizar mapas com MapBox

Server Side Rendering (SSR)

Static Site Generation (SSG)

Incremental Static Generation (ISR)

Deploy automatizado na Vercel


Description

Sobre o curso

Iremos construir um mapa totalmente interativo utilizando a fantástica biblioteca do Leaflet.

Cada ponto no mapa será gerenciado através de um CMS na cloud chamado GraphCMS e iremos utilizar o NextJS para criar a melhor experiência para o usuário e também para você, desenvolvedor!

Para fazer tudo isso, nós iremos ensinar todos os fundamentos das ferramentas da teoria à prática, sem deixar nenhum detalhe para trás.

---

Propósito do curso

Esse é um curso mais rápido e mais focado com o objetivo de que você aprenda as principais características e funcionalidades do NextJS e GraphQL para que já possa criar diversos projetos já ao final do curso.

Todo o curso será lançado em sua totalidade já no primeiro dia, assim você já pode sair aprendendo tudo que precisa. Por ser um curso menor, também terá um custo bem menor, com objetivo de facilitar o acesso a todos.

---

Módulos deste curso

O curso terá 2 módulos com cerca de 8h de conteúdo atualizado e rico!

Introdução e Arquitetura do Projeto

Iremos conhecer a Stack utilizada no curso, tendo explicação de cada uma das escolhas, assim como mostrando os prós e contras de cada uma delas

Iremos construir nosso boilerplate do zero, aprendendo a configurar as ferramentas de qualidade de código, como Eslint, Prettier, Git hooks e TypeScript. Assim como também configurar o Styled Components para funcionar com SSR e PWA.


* Esse é o mesmo módulo disponibilizado no curso React Avançado.


---


NextJS, GraphCMS e Leaflet


Já com nosso boilerplate pronto, iremos aprender a usar soluções third-party como o Leaflet. Criaremos nossos dados no GraphCMS e iremos integrar o GraphQL no projeto do Next. Aprenderemos a criar rotas simples, rotas dinâmicas, utilizar tanto Link quanto useRouter para mudar rotas. Também vamos aprender a gerar estáticos da melhor e mais eficaz maneira no NextJS, além de aprender todos os conceitos mais importantes desse incrível framework.

Ao final, ainda vamos aprender mais sobre o revalidate e também como fazer o deploy para produção utilizando a Vercel.


Screenshots

Aprenda NextJS, GraphQL e Leaflet na prática!
Aprenda NextJS, GraphQL e Leaflet na prática!
Aprenda NextJS, GraphQL e Leaflet na prática!
Aprenda NextJS, GraphQL e Leaflet na prática!

Content

Apresentação teórica

Apresentação do Projeto

Introdução ao NextJS

Introdução ao GraphQL

Introdução ao CSS-in-JS

Introdução a Testes de Software

Criação do boilerplate

Requisitos para o projeto

Criando o boilerplate com create-next-app

Configurando o TypeScript no NextJS

Configurando o .editorconfig

Configurando o Eslint

Configurando o Prettier com o Eslint

Configurando git hooks com Husky

Instalando e configurando o Jest com TypeScript

Instalando e configurando React Testing Library

Usando findRelatedTests para o hook

Instalando o Styled Components e configurando o SSR

Criando estilos globais com createGlobalStyle

Criando estilos no primeiro componente

Melhorando snapshots com Jest-styled-components

Configurando o PWA

Projeto My Trips

Inicializando o projeto através do Boilerplate

Adicionando CSS Variables

Criando componente básico de Mapa com Leaflet

Utilizando dynamic import para scripts que só funcionam no browser

Tornando o Mapa mais dinâmico usando testes com TDD

Criando componente de LinkWrapper com testes

Criando página de About (rota simples e estático)

Apresentando diferentes Headless CMS na Cloud

Criando a estrutura de Pages no CMS e página de about

Configurando GraphQL client

Entendendo métodos de getStatic/getServerSide do NextJS e escrevendo queries

Criando o método de getStaticPaths e fallback para a página gerada em runtime

Criando N páginas genéricas dinâmicamente com getStaticPaths e getStaticProps

Gerando types para o GraphQL utilizando o GraphQL Codegen

Criando a estrutura de dados (Schema) para os Places no GraphCMS

Integrando os Markers no Mapa via GraphQL

Criando rotas dinâmicas para as páginas de Places

Ligando os markers para as páginas com o useRouter

Estilizando o template das páginas de Places

Configurando o componente de Next Image

Brincando com o Photoshop de Mapas - MapBox

Configurando o visual com MapBox e variáveis de ambiente públicas do NextJS

Adicionando um loader entre as páginas - NProgress

Configurando SEO para as páginas com Next-SEO

Teoria e Prática das Gerações de páginas no NextJS e o Fluxo dos usuários

Colocando o projeto em produção na Vercel

Extra: Curso React Avançado


Reviews

L
Luis9 April 2021

O curso e bom, mas é bem simples, não aborda temas corriqueiros como autenticação ou alimentando de outras api's, acredito pra quem iniciante é um bom curso

E
Eder2 April 2021

Excelente curso! Apesar de ser rápido, o Willian realmente domina tudo o que ele ensina, o que deixa até mesmo um curso rápido ser bem completo. Também tenho outros cursos dele e ele é um ótimo professor. Indico fortemente.

M
Marcos20 March 2021

A didática do Willian é incrível e todo o cuidado que ele tem pra montar as aulas é notável a cada video assistido. Super Recomendo!

G
Gabriel14 March 2021

Curso rápido e prático mas que ganha de diversos cursos longos que já vi! Parabéns ao professor pois consegui aprender muita coisa útil, valeu!

G
Gabriel12 March 2021

A didática do Willian é absurdamente acima da média. Os detalhes passados nas aulas, permite desenvolver uma linha de raciocínio próprio, assim logo em seguida, você já consegue aplicar no seu dia a dia.

F
Felipe11 March 2021

Por hora só vi o módulo 1 que é bem teórico e um com cansativo. Mas a explicação é incrível e uma ótima visão do projeto como um todo. Continuou fazendo o curso estou no projeto e conteúdo só melhora.

N
Nathanael9 March 2021

Curso excelente e vale cada minuto que se assisti, extremamente completo e aborda de forma prática e direta o conteúdo.

C
Carolina7 March 2021

Didática incrível como sempre, o curso é um ótimo pontapé para atiçar a criatividade de quem está querendo se introduzir ao mundo do Next =)

R
Renato7 March 2021

Já sou fã do Willian tem tempo e como é de se esperar, mais um curso sensacional e impecável da parte dele!

A
Arlei7 March 2021

Só a sessão de criação do boilerplate já vale o curso. Até hoje eu tinha uma briga com eslint+prettier, mas agora com essa explicação, nunca mais. Nota 10!

P
Pablo6 March 2021

Ainda não fiz o curso, mas já conhecendo a competência do Willian Justen a algum tempo. Tenho certeza absoluta que o conteúdo será excelente, assim como todos outros cursos e artigos ou vídeos dele.

A
Anderson5 March 2021

Simplesmente fantástico! Curso curtinho mas robusto em informação, e com uma didática excelente, prato cheio e indispensável para todos que querem evoluir nesse mundo dev. Mestre William tu és um monstro!

P
Paulo4 March 2021

Este curso apesar de pequeno é excelente conforme a proposta, aprendi muita coisa, tudo muito bem explicado, com toda certeza irei para outros curso com esse instrutor. Obrigado Willian, e parabéns pela dedicação!

M
Matheus3 March 2021

Fenomenal, pois além da prática, o instrutor nos da à base conceitual do porquê estamos fazendo as coisas.

R
Rafael2 March 2021

Willian é sempre perfeito nos conteudos! muito bem explicado, conteudo muito atualizado, só tenho a agradecer este conteudo!


3878246

Udemy ID

2/27/2021

Course created date

3/2/2021

Course Indexed date
Bot
Course Submitted by