NextJS na Prática

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

O que iremos construir

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.

Tecnologias utilizadas

TypeScript

TypeScript

React

React

NextJS

NextJS

GraphQL

GraphQL

Testing Library

Testing Library

Conceitos que você irá aprender

  • 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

Módulos deste curso

Módulo 1

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.

Módulo 2

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.

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.

De R$54.99 por apenas

R$39.90 *

Comprar o curso

R$54.99R$39.90
* nos 5 primeiros dias

Quem somos nós?

Willian Justen
Willian Justen
Instrutor
Desenvolvedor Front-end há mais de 10 anos, tendo trabalhado em grandes empresas como Toptal, Globo.com e Huge. Tenho um blog com mais de 200 mil views por mês, além de ter diversos cursos na Udemy, alcançando a incrível marca de mais de 200 mil alunos!
Guilherme Louro
Guilherme Louro
Instrutor
Desenvolvedor Fullstack há muitos anos, com conhecimento em diversas linguagens de programação. Já liderou grandes projetos e trabalha atualmente na Personare, um dos maiores portais de autoconhecimento do Brasil. Nas horas vagas é o criador e mantenedor do Netfla, site de notícias do Flamengo com mais de meio milhão de views por mês!

Junte-se a mais de 200 mil alunos

Henrique Albert Schmaiske

Henrique Albert Schmaiske

O Curso foi incrível! Gostei muito das explicações, bem claras e objetivas! Deixo a sugestão para um próximo Curso: NextJS mostrando fazer um Ecommerce. Compraria sem nem olhar o preço.

Daniel P. de Oliveira

Daniel P. de Oliveira

É incrível a forma como foi passado o conteúdo do curso, dá para ver que o Will tem um domínio impressionante sobre as ferramentas e tecnologias passadas, e mesmo eu tendo pouco conhecimento em React consegui acompanhar o curso sem muitas dificuldades. Espero que tenha mais cursos nessa linha, com certeza comprarei! Obrigado Will!

Alexandre Teixeira

Alexandre Teixeira

Esse já é o terceiro curso do Will que faço, e a didática do cara é incrível! Além disso, o cara segue trazendo o que tem de mais moderno no mercado de forma bem explicada e com aplicações práticas.

Mileine Souto

Mileine Souto

Sensacional! A didática do instrutor é excelente para estruturar o curso e dar o ritmo das aulas. Foi uma experiência muito enriquecedora (e divertida) construir um blog seguindo o passo-a-passo dos vídeos. Não sabia nada sobre Gatsby, GraphQL ou Netlify CMS mas consegui acompanhar todo o processo sem grandes dificuldades. Além disso, foi ótimo aprender um pouquinho mais sobre algumas práticas de desenvolvimento, como temas em React, estilização CSS in JS com styled-components e utilização do Algolia como solução de busca. Recomendo! =)

FAQ

O que preciso saber para o curso?

Um conhecimento básico de JavaScript/React é necessário para maior entendimento do curso, mas todo o conteúdo será explicado em detalhes e todas as perguntas/dúvidas serão respondidas.

Onde os vídeos serão publicados?

Os vídeos serão publicados na Udemy, com o mesmo funcionamento que já existe, vídeos offline, autoplay, acelerar em 2x, aplicativo nativo e mais.

Quanto tempo tenho para fazer o curso?

O curso é vitalício, faça quantas vezes quiser e quando quiser, nada de bloqueios ou pressa.

Esse curso tem certificado?

Sim, o curso terá certificado e você poderá baixá-lo diretamente da Udemy ao término do curso.

Quais outros cursos você tem?

Tenho alguns cursos gratuitos e pagos, você pode acessar todos os cursos nesse link.

Posso usar o projeto para o meu Portfólio?

Definitivamente! A ideia é que vocês tenham um projeto de verdade que possam utilizar como bem entenderem.

Eu tenho outra dúvida!

Sem problemas! Você pode acessar qualquer uma das minhas redes sociais ou entrar no slack do nosso curso.