Como criar um projeto Next.js usando create-next-app?

Use o comando npx create-next-app nome-do-projeto para iniciar rapidamente uma aplicação.

Como criar rotas dinâmicas no Next.js para páginas de produtos ou Pokémon?

Crie um arquivo com colchetes, como pages/pokemon/[id].js, para capturar parâmetros da URL.

Como fazer deploy de um projeto Next.js na Vercel?

Envie o projeto para o GitHub, confirme que o build não tem erros e importe o repositório na Vercel.

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

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

Name: Aprenda Next.js do básico ao projeto final
Availability: InStock

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

Novo

Crie apps com Next.js do zero e publique na Vercel. Curso online gratuito com projeto prático, rotas dinâmicas, SEO, fetch de dados e build de produção.

Neste curso gratuito, aprenda sobre

Benefícios do Next.js vs SPA: pré-renderização, SEO e performance
Criar projetos Next.js com create-next-app (sem instalar gerador global)
Estrutura do projeto e papel da pasta pages no roteamento automático
Criar rotas e páginas via arquivos dentro de pages (inclui rotas aninhadas)
Navegação client-side com o componente Link
Organização e reutilização de componentes como Navbar e Footer
Layout compartilhado usando o padrão children para renderizar conteúdo da página
Estilização com CSS global e CSS Modules mantendo escopo por componente
Uso do componente Head para title e meta tags por página
Uso da pasta public e do componente Image (props e otimizações)
Data fetching e SSG: getStaticProps para gerar páginas com props
Rotas dinâmicas: arquivos [id].js, getStaticPaths + getStaticProps
Página 404 customizada e boas práticas de build e deploy (Vercel)
Fallback true e loading em rotas dinâmicas usando useRouter().isFallback

Sobre o curso online gratuito

Aprenda a desenvolver aplicações modernas com Next.js, unindo a produtividade do React com recursos que facilitam performance, SEO e organização do projeto. Neste curso online gratuito, você começa pelo básico, entendendo como um projeto Next nasce, como funciona a estrutura de pastas e por que o framework se destaca em relação a uma SPA tradicional. A partir daí, você evolui para criar páginas, rotas automáticas, rotas aninhadas e navegação eficiente, construindo uma base sólida para aplicações reais.

Ao longo das aulas, você trabalha com componentes reutilizáveis, cria uma estrutura consistente com layout compartilhado e aprende a manter a interface organizada sem perder flexibilidade. Também explora formas práticas de estilização no Next.js, aplicando CSS de maneira limpa e previsível, com isolamento por componente e ajuste visual de áreas comuns como cabeçalho e rodapé. Outro ponto importante é a camada de metadados: você entende como configurar title e meta tags corretamente, um diferencial para projetos que precisam ser encontrados e bem apresentados em buscadores e redes sociais.

Na parte de dados, o curso mostra como consumir APIs e pré-renderizar páginas, reforçando o raciocínio por trás de páginas estáticas geradas com dados e o uso de rotas dinâmicas para criar experiências ricas e escaláveis. Você aprende a lidar com páginas de detalhe (como id na URL), a preparar caminhos e propriedades para gerar conteúdo de forma eficiente, e a tratar cenários em que os dados ainda não estão prontos, exibindo carregamento de forma controlada. Tudo isso com boas práticas de uso de assets e imagens, incluindo ajustes necessários para imagens externas.

Para consolidar, você desenvolve um projeto completo inspirado em uma Pokédex, aplicando os conceitos do início ao fim: páginas, cards, detalhes, consumo de API, UI organizada e foco em uma entrega publicável. Por fim, você aprende a gerar build de produção, analisar o resultado localmente, versionar no GitHub e fazer deploy na Vercel com segurança, garantindo que o projeto esteja pronto para o mundo real. Se você quer sair do básico e terminar com um projeto no ar, este curso é um caminho direto e prático para construir portfólio com Next.js.

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?

Cursos online Gratuitos sobre JavaScript

Aprenda sobreJavaScript

Aprenda JavaScript com cursos online gratuitos e com certificado para impulsionar sua carreira em desenvolvimento web. Encontre aulas para iniciantes e profissionais sobre lógica de programação, funções, objetos, DOM, eventos, APIs e frameworks. Estude no seu ritmo, desenvolva projetos práticos e conquiste novas oportunidades no mercado de tecnologia.

Aprenda sobreNext.js

Aprenda Next.js do zero ao avançado com nossa seleção de cursos online gratuitos e com certificado. Estude criação de aplicações React modernas, renderização no servidor, rotas, APIs, otimização de desempenho e deploy. Encontre o curso grátis de Next.js ideal para desenvolver habilidades valorizadas e impulsionar sua carreira em tecnologia.