Next.js Básico: Introdução ao Framework React para Produção
- Nível: Junior
- Módulos: 6
- Aulas: 19
- Tempo de leitura: 1h 10min
- Tecnologias: Next.js, React
- Preço: Gratuito
Código do curso: github.com/johnpires/nextjs-junior-projeto-final
Next.js é um framework React de nível de produção que simplifica o desenvolvimento de aplicações web modernas. Criado pela Vercel, o Next.js adiciona funcionalidades essenciais ao React, como roteamento baseado em arquivos, renderização no servidor e geração de sites estáticos, permitindo criar aplicações rápidas e otimizadas para mecanismos de busca.
Este curso é ideal para desenvolvedores que já possuem conhecimentos básicos de React e HTML/CSS e desejam dar o próximo passo na construção de aplicações web profissionais. Você aprenderá como o Next.js resolve problemas comuns do desenvolvimento com React puro, como configuração de rotas, otimização de performance e integração com APIs.
Ao longo do curso, você construirá projetos práticos que consolidam os conceitos aprendidos, incluindo um blog pessoal com múltiplas páginas, navegação entre rotas, consumo de APIs e estilização moderna com Tailwind CSS. Ao final, você terá as habilidades necessárias para criar aplicações Next.js funcionais e prontas para serem publicadas na Vercel.
O que você vai aprender
Ao final deste curso, você será capaz de:
- Configurar e inicializar um projeto Next.js do zero usando o create-next-app
- Criar páginas e implementar roteamento baseado em arquivos com o App Router
- Utilizar os componentes otimizados do Next.js: Image, Link e Font
- Buscar dados de APIs externas utilizando Server Components e Route Handlers
- Criar rotas dinâmicas para páginas com conteúdo variável
- Aplicar estilos com CSS Modules e Tailwind CSS em projetos Next.js
- Publicar uma aplicação Next.js na plataforma Vercel gratuitamente
Pré-requisitos
Para aproveitar ao máximo este curso, é recomendado ter conhecimentos básicos de HTML, CSS e JavaScript. Familiaridade com os conceitos fundamentais do React, como componentes e props, também será útil. Ter o Node.js instalado na máquina é necessário para executar os exemplos práticos ao longo das aulas.
Conteúdo do curso
Módulo 1: Introdução ao Next.js e Configuração do Ambiente
Conheça o Next.js, entenda por que ele foi criado e configure seu ambiente de desenvolvimento para começar a criar aplicações modernas com React.
- O que é Next.js e por que usá-lo (20 min)
- Configurando o ambiente e criando o primeiro projeto (25 min)
- Entendendo o App Router e a estrutura de arquivos (25 min)
Módulo 2: Páginas, Rotas e Navegação
Aprenda a criar páginas, definir rotas dinâmicas, navegar entre telas e organizar layouts no Next.js com o App Router.
- Criando Páginas com o App Router
- Rotas Dinâmicas e Parâmetros de URL
- Navegação com o Componente Link
- Layouts Compartilhados e Layouts Aninhados
Módulo 3: Componentes e Estilização
Entenda a diferença entre Server e Client Components, estilize com Tailwind CSS e aprenda a componentizar sua aplicação.
- Server Components vs Client Components
- Estilização com Tailwind CSS no Next.js
- Componentização e Reutilização
Módulo 4: Consumindo Dados e APIs
Aprenda a buscar dados em Server Components, criar suas próprias API Routes e lidar com estados de carregamento e erro.
- Fetch de Dados em Server Components
- Criando Route Handlers (API Routes)
- Loading States e Error Boundaries
Módulo 5: Imagens, Fontes e SEO
Otimize imagens, configure fontes personalizadas, melhore o SEO e gere páginas estáticas com generateStaticParams.
- Otimização de Imagens com next/image
- Fontes e Metadados para SEO
- Gerando Páginas Estáticas com generateStaticParams
Módulo 6: Deploy e Publicação
Prepare seu projeto para produção, faça deploy na Vercel via GitHub e configure variáveis de ambiente e domínio customizado.
- Build de Produção e Otimizações
- Deploy na Vercel via GitHub
- Variáveis de Ambiente e Domínio Customizado