Imagem do Curso gratuito Aprenda Next.js do básico ao projeto final

Curso online gratuitoAprenda Next.js do básico ao projeto final

Duração do curso online: 4 horas e 30 minutos

Novo

Curso gratuito de Next.js do básico ao projeto final: páginas, rotas dinâmicas, consumo de API, componentes, CSS e deploy para publicar sua app.

Neste curso gratuito, aprenda sobre

  • Fundamentos do Next.js e primeiro projeto
  • Páginas, rotas e navegação
  • Componentização e layout da aplicação
  • Estilos, metadados e assets
  • Data fetching e pré-renderização
  • Rotas dinâmicas e geração estática
  • Build e deploy: produção e hospedagem
  • Projeto prático: Pokédex (estrutura e layout)
  • Projeto prático: Pokédex (consumo de API e páginas)
  • Publicação do projeto e recursos finais

Descrição do curso

Aprenda Next.js do básico ao projeto final em um curso online gratuito voltado para quem quer construir aplicações modernas com React e dar os primeiros passos com um framework completo para produção. Você começa entendendo a estrutura do Next, como organizar pastas e arquivos e como criar páginas com roteamento eficiente.

Ao longo do aprendizado, você evolui para recursos essenciais do dia a dia, como navegação entre páginas, criação e reutilização de componentes, uso de layouts para padronizar a interface e aplicação de estilos com CSS. Também vê como trabalhar com meta tags e assets, preparando o projeto para uma apresentação mais profissional e otimizada para a web.

Na parte prática, o curso guia a construção de um projeto do início ao fim, integrando consumo de API para carregar dados, uso de rotas dinâmicas e páginas específicas a partir de parâmetros. Você aprende a lidar com páginas de erro personalizadas e entende melhor como o build funciona, ganhando clareza sobre o processo de publicação.

Para fechar, você coloca o projeto no ar com um fluxo de envio para repositório e deploy, consolidando uma experiência completa que vai além da teoria. É uma ótima escolha para quem deseja praticar front-end com Next.js, criar um projeto real e sair com um resultado publicável.

Conteúdo do curso

  • Aula em vídeo: Curso Next.js: Introdução - #01 11m
  • Exercício: Qual é um dos principais benefícios do Next.js em relação a projetos SPA feitos apenas com React, segundo a explicação do curso?
  • Aula em vídeo: Curso Next.js: Hello World no Next.js - #02 10m
  • Exercício: Qual comando é usado para criar rapidamente um novo projeto Next.js sem precisar instalar o gerador globalmente?
  • Aula em vídeo: Curso Next.js: Estrutura de pastas e arquivos do Next - #03 10m
  • Exercício: No Next.js, qual pasta é responsável por definir as rotas e páginas da aplicação automaticamente?
  • Aula em vídeo: Curso Next.js: Criando páginas e roteamento - #04 08m
  • Exercício: No Next.js, como uma nova rota/página é criada no roteamento básico?
  • Aula em vídeo: Curso Next.js: Nested routes em Next - #05 07m
  • Exercício: Como criar uma rota aninhada como /produtos/camisa no Next.js usando o sistema de páginas?
  • Aula em vídeo: Curso Next.js: Navegação entre páginas (Componente Link) - #06 07m
  • Exercício: Qual componente do Next.js é usado para navegar entre páginas sem recarregar a página (SPA)?
  • Aula em vídeo: Curso Next.js: Componentes no Next - #07 09m
  • Exercício: Qual é a prática recomendada para organizar e reutilizar uma barra de navegação (Navbar) em um projeto Next.js?
  • Aula em vídeo: Curso Next.js: Componente de Layout - #08 09m
  • Exercício: Em Next.js, qual é a forma correta de fazer um componente de layout renderizar o conteúdo específico de cada página dentro dele?
  • Aula em vídeo: Curso Next.js: Adicionando CSS no Next.js - #09 11m
  • Exercício: Quais são as duas formas mais comuns (sem instalar nada extra) de estilizar um projeto em Next.js?
  • Aula em vídeo: Curso Next.js: Meta tags no Next - #10 08m
  • Exercício: Qual é o componente do Next.js utilizado para adicionar e alterar metadados (como title e meta tags) em uma página?
  • Aula em vídeo: Curso Next.js: Assets - #11 07m
  • Exercício: Ao usar o componente de imagem do Next.js para exibir uma imagem estática da pasta public, quais props são obrigatórias?
  • Aula em vídeo: Curso Next.js: Fetch data com Next (requisição em API) - #12 10m
  • Exercício: Qual função do Next.js é usada para buscar dados de forma assíncrona e pré-renderizar a página antes do acesso do usuário?
  • Aula em vídeo: Curso Next.js: Dynamic Routes - #13 16m
  • Exercício: Como o Next.js identifica que uma rota deve ser dinâmica no sistema de arquivos?
  • Aula em vídeo: Curso Next.js: Rotas dinâmicas com dados - #14 12m
  • Exercício: Em rotas dinâmicas com dados reais no Next.js, qual é o papel conjunto de getStaticPaths e getStaticProps?
  • Aula em vídeo: Curso Next.js: Página 404 customizada - #15 04m
  • Exercício: Como criar uma página 404 customizada no Next.js para substituir a página padrão?
  • Aula em vídeo: Curso Next.js: Analisando build - #16 08m
  • Exercício: Qual é a forma correta de gerar e testar localmente o build de produção em um projeto Next.js?
  • Aula em vídeo: Curso Next.js: Apresentação do projeto - #17 06m
  • Exercício: Por que o projeto da Pokédex utiliza uma API pronta em vez de criar um back-end próprio?
  • Aula em vídeo: Curso Next.js: Iniciando projeto - #18 05m
  • Exercício: Ao iniciar um novo projeto em Next.js, qual é a recomendação para organizar o repositório corretamente?
  • Aula em vídeo: Curso Next.js: Criando componente de layout - #19 08m
  • Exercício: Em um componente de Layout no Next.js, qual propriedade deve ser utilizada para renderizar o conteúdo específico de cada página dentro da estrutura (Navbar e Footer)?
  • Aula em vídeo: Curso Next.js: CSS do header e footer - #20 09m
  • Exercício: Ao estilizar componentes no Next.js com CSS Modules, qual prática ajuda a manter estilos isolados por componente?
  • Aula em vídeo: Curso Next.js: Criando página no sistema - #21 06m
  • Exercício: Em Next.js, como criar uma nova rota de página simples como a página de sobre?
  • Aula em vídeo: Curso Next.js: Chamando os pokemons pela API - #22 09m
  • Exercício: Qual é a função do Next.js usada para buscar dados e gerar uma página estática, retornando um objeto com a propriedade props?
  • Aula em vídeo: Curso Next.js: Finalizando CSS da home page - #23 07m
  • Exercício: Qual abordagem foi utilizada para estilizar a Home Page no projeto com Next.js?
  • Aula em vídeo: Curso Next.js: Componentes de Card na home - #24 13m
  • Exercício: Ao usar o componente Image do Next.js com uma imagem vinda de um CDN externo, o que deve ser feito para evitar erro de domínio não permitido?
  • Aula em vídeo: Curso Next.js: Resgatando dado individual de Pokemons - #25 10m
  • Exercício: Em Next.js, qual convenção é usada para criar uma rota dinâmica como /pokemon/1, /pokemon/25, etc.?
  • Aula em vídeo: Curso Next.js: Finalizando página de Pokemon - #26 16m
  • Exercício: Ao exibir os tipos de um Pokémon (podendo haver mais de um), qual abordagem é usada para renderizar todos os tipos na interface?
  • Aula em vídeo: Curso Next.js: Enviando projeto para o GitHub - #27 04m
  • Exercício: Qual comando é usado para enviar o projeto local para o repositório remoto após configurar o remote?
  • Aula em vídeo: Curso Next.js: Deploy na Vercel - #28 07m
  • Exercício: Para publicar um projeto Next.js na Vercel, qual etapa deve ser feita e estar sem erros antes do deploy?
  • Aula em vídeo: Curso Next.js: Carregamento de dados não renderizados - #29 06m
  • Exercício: Ao usar fallback: true no Next.js, qual verificação com useRouter() permite exibir um conteúdo de carregamento até os dados da página dinâmica chegarem?
  • Aula em vídeo: Curso Next.js: Conclusão do curso - #30 04m
  • Exercício: Ao preparar um projeto Next.js para produção, qual sequência de comandos é a mais adequada?

Este curso gratuito inclui:

4 horas e 30 minutos de curso online em vídeo

Certificado digital de conclusão de curso ( Gratuito )

Exercícios para treinar seus conhecimentos

100% gratuito, do conteúdo ao certificado

Pronto para começar?Baixe o app e comece hoje mesmo.

Instale o app agora

para ter acesso ao curso
Ícone representando cursos de tecnologia e negócios

+ de 5.000 cursos gratuitos

Programação, Inglês, Marketing Digital e muito mais! Aprenda o que quiser, gratuitamente.

Ícone de calendário com alvo representando planejamento de estudos

Plano de estudos com IA

A Inteligência Artificial do nosso aplicativo pode criar um cronograma de estudos para o curso que você escolher.

Ícone de profissional representando carreira e negócios

Do zero ao Sucesso profissional

Melhore seu currículo com nosso Certificado gratuito e depois utilize nossa Inteligência Artificial para buscar seu emprego dos sonhos.

Você também pode utilizar o QR Code ou os Links abaixo

QR Code - Baixar Cursa - Cursos Online

Mais cursos gratuitos em Programação Front-End

Ebook + Áudiobooks gratuitos! Aprenda ouvindo ou lendo!

Baixe o Aplicativo agora para ter acesso a + de 5000 cursos gratuitos, exercícios, certificado e muito conteúdo sem pagar nada!

  • Cursos online 100% gratuitos do início ao fim

    Milhares de cursos online em vídeo, ebooks e áudiobooks.

  • Mais de 60 mil exercícios gratuitos

    Para testar seus conhecimentos no decorrer dos cursos online

  • Certificado Digital gratuito válido em todo o Brasil

    Gerado diretamente na galeria de fotos do seu celular e enviado ao seu e-mail

Aplicativo Cursa na tela de ebook, na tela de curso em vídeo e na tela de exercícios do curso, mais o certificado de conclusão de curso