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 - #0111m
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 - #0210m
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 - #0310m
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 - #0408m
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 - #0507m
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) - #0607m
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 - #0709m
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 - #0809m
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 - #0911m
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 - #1008m
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 - #1107m
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) - #1210m
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 - #1316m
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 - #1412m
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 - #1504m
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 - #1608m
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 - #1706m
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 - #1805m
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 - #1908m
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 - #2009m
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 - #2106m
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 - #2209m
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 - #2307m
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 - #2413m
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 - #2510m
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 - #2616m
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 - #2704m
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 - #2807m
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 - #2906m
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 - #3004m
Exercício: Ao preparar um projeto Next.js para produção, qual sequência de comandos é a mais adequada?