Frontend Development with Next.js
Intermediate
0.0
0 reviews
1 Learners
Explore the full path from web fundamentals to modern application development using React and Next.js. Learn how to structure apps, manage data, handl…
182
Chapters
20
Learning hours
192
Assignments
AI Assistant
Shareable Certificate
Resultados
Resultados
Track content
Related courses and projects
Depoimentos
Recursos
Preços
Resultados
Resultados
Track content
Related courses and projects
Depoimentos
Recursos
Preços
O que você vai aprender
Build web pages using HTML and CSS.
Use TypeScript for safer and scalable code.
Work with routing, layouts, and data fetching.
Create interactive logic with JavaScript.
Style modern interfaces with Tailwind CSS.
Handle forms and backend logic with route handlers.
Develop component-based apps with React.
Build full applications with Next.js.
Learning track content
Por Que o HTML É Importante no Desenvolvimento Web
Estrutura Básica de Documento HTML
Compreendendo Tags, Elementos e Atributos
Desafio: Estruturar um Documento HTML
Usando Títulos e Parágrafos
Desafio: Estruturar o Conteúdo de Texto
Trabalhando com Links
Usando Botões
Criando e Utilizando Listas em HTML
Desafio: Estruturar Conteúdo com Listas
Trabalhando com Imagens em HTML
Desafio: Inserir Imagens
Criando e Estruturando Tabelas HTML
Desafio: Trabalhar com Tabelas
Construindo Formulários HTML
Desafio: Construir um Formulário Web
Usando Entradas de Formulário
Rotulando Campos de Formulário
Desafio: Aplicar Campos de Formulário e Rótulos
Atributos de Entrada HTML para Funcionalidade Aprimorada
HTML Semântico e Estrutura da Página
Desafio: Implementar Elementos Semânticos
Construindo um Site Completo com HTML
O Que É CSS e Por Que É Importante
Conectando CSS ao HTML
Seletores CSS Básicos
Estilizando Texto e Cores
Adicionando Efeitos de Hover
Desafio: Estilize Sua Primeira Página Web
Formatação de Texto para Melhor Legibilidade
Trabalhando com Fontes e Propriedades de Fonte
Adicionando Fontes Personalizadas
Desafio: Melhorar o Design de um Artigo de Blog
Compreendendo o Modelo de Caixa de Forma Prática
Propriedade Display: Block, Inline e Inline-Block
Desafio: Corrigir um Layout Quebrado
Por Que o Flexbox Existe
Controlando a Direção
Justificando o Conteúdo Horizontalmente
Alinhando Itens Verticalmente
Trabalhando com Itens Flexíveis
Usando Cores de Fundo
Aplicando Imagens de Fundo
Adicionando Sombras para Profundidade
Desafio: Criar um Componente de Cartão Moderno
O Que É JavaScript?
Executando JavaScript no Navegador
Variáveis e Constantes
Tipos de Dados e Operações Básicas
Trabalhando com Strings e Números
Operadores e Comparações
Lógica Condicional `if` / `else`
Operadores Lógicos
Funções
Parâmetros e Valores de Retorno
Arrays
Trabalhando com Arrays Usando `push`, `pop`
Métodos de Array `map`, `filter`
Laço `For`
Objetos
Combinando Dados e Lógica
Noções Básicas de Depuração
Compreendendo Objetos em JavaScript
Criando Objetos em JavaScript
Trabalhando com Propriedades de Objetos Aninhados
Acessando Propriedades de Objetos em JavaScript
Gerenciamento de Propriedades de Objetos
Definindo Métodos de Objetos
Usando Propriedades Dentro de Métodos
Clonagem e Mesclagem de Objetos com o Operador Spread
Desestruturação de Objetos para Código Mais Limpo
Transformando Arrays com o Método map()
Filtragem de Arrays com o Método filter()
Encontrando Elementos em um Array com o Método find()
Ordenando Arrays com o Método sort()
Introdução ao JavaScript Assíncrono
Compreendendo Callbacks em JavaScript
Manipulação de Operações Assíncronas com Promises
Usando Async/Await para um Código Assíncrono Mais Limpo
Buscando e Trabalhando com APIs em JavaScript
Integração de APIs em Aplicações JavaScript
Ready for React
O Que É React e Por Que Ele É Utilizado
Compreendendo Componentes React
Noções Básicas de JSX no React
Renderização de Elementos no React
Desafio: Renderizar um Elemento no React
Passando Dados com Props
Desafio: Criar Componentes Funcionais
Renderização Condicional em React
Desafio: Implementar Renderização Condicional na Notificação de Chat
Desafio: Implemente Renderização Condicional no Alerta Bancário
Renderizando Listas de Dados no React
Desafio: Exibir Coleções de Dados
Gerenciando Estado com useState
Handling User Events in React
Desafio: Alternar Visibilidade com Estado
Working with Forms in React
Opções de Estilização no React
Usando Estilos Inline no React
Estilizando Componentes com CSS Externo
Desafio: Estilize uma Aplicação React
React Fundamentals Wrap Up
What Is TypeScript?
Why Use TypeScript?
TypeScript in Real-World Projects
Number Type
String Type
Boolean Type
Type Inference and Explicit Typing
Array Types
Tuple Types
Object Types Basics
Defining Object Shapes with Interfaces
Optional and Readonly Properties
Extending and Combining Interfaces
Interfaces vs Type Aliases
Annotating Function Parameters
Typing Function Return Values
Optional Parameters
Default Parameters
Union Types
Literal Types
What Are Type Guards?
Using typeof and Array.isArray
What Are Generics?
Generic Functions in Practice
Typing Component Props
Typing State with useState
Typing Events (Forms and Inputs)
Typing Lists and Keys
Promises and Async Functions
Practical Patterns for Async Typing
Common Pitfalls When Switching
What Next.js Is and Why It Is Used
React vs Next.js
Creating a Next.js Project
Understanding the Project Structure
Running the Development Server
Your First Page in Next.js
File Based Routing in Next.js
Linking Between Pages
Dynamic Routes
Route Groups and Organization Basics
Building a Not Found Page
What Layouts Are in Next.js
Creating a Root Layout
Nested Layouts for Shared UI
Reusing Navigation and Common Page Structure
Adding Metadata to Pages
Server Components and Client Components
When to Use "use client"
Building Interactive Components in Next.js
Passing Data from Server to Client Components
Rendering Data in Server Components
Common Mistakes with Server and Client Components
Fetching and Rendering Data in Next.js
Using Dynamic Routes to Load Data
Handling Loading and Error States
Working with Forms in Next.js
Introduction to Route Handlers
Sending and Receiving Data with Route Handlers
Styling a Next.js App with Tailwind
Static and Dynamic Rendering Basics
SEO and Metadata Basics in Next.js
Preparing a Next.js App for Production
Deploying a Next.js App
Final Project Build a Small Web App with Next.js
Impulsione suas Habilidades Tecnológicas!
com até 55% de desconto
Features:
*Tracks not included in Pro plan
500+ Cursos Bem AvaliadosCopiloto de IA de ponta
Trilhas de estudo personalizadas40+ Projetos práticos do mundo real
Sem cancelamento, antes do término do plano com desconto selecionado, aceito que a Codefinity cobrará automaticamente $104 a cada 3 meses até eu cancelar. Saiba mais sobre a política de cancelamento e reembolso em Termos de Assinatura.
Recommended Courses and Projects
curso
HTML Definitivo
Aprenda os conceitos essenciais de HTML (HyperText Markup Language), a base do desenvolvimento web. Este curso para iniciantes aborda tags, atributos, elementos e a estruturação de páginas web. Adquira habilidades práticas na criação de títulos, parágrafos, listas, imagens, links, formulários e tabelas. Explore boas práticas, otimização e acessibilidade na web. Inicie sua jornada no desenvolvimento web com HTML.
4 horas
42 capítulosIniciante
25 ESTUDANDO AGORA
curso
Introdução ao JavaScript
Mergulhe no universo da linguagem mais popular para desenvolvimento front-end – JavaScript. JavaScript é uma linguagem incorporada em praticamente todos os navegadores e pode ser utilizada para uma ampla variedade de tarefas. Aprenda as funcionalidades básicas e prepare-se para desafios e técnicas de programação mais avançadas.
7 horas 74 capítulosIniciante
23 ESTUDANDO AGORA
curso
Introdução ao React
Explore os fundamentos da construção de interfaces de usuário com React. Foco em componentes, JSX, fluxo de dados, estado e efeitos colaterais utilizados em aplicações React do dia a dia.
3 horas 25 capítulosIntermediário
6 ESTUDANDO AGORA
curso
Fundamentos de CSS
Domine os fundamentos do CSS, a linguagem de estilização que transforma a aparência e a experiência visual das páginas web. Explore conceitos essenciais como estilos de texto, cores, espaçamento, modelo de caixa, Flexbox e efeitos decorativos. Desenvolva habilidades para criar páginas web visualmente atraentes e bem estruturadas.
3 horas 28 capítulosIniciante
23 ESTUDANDO AGORA
curso
Fundamentos de HTML
Domine os fundamentos do HTML para criar conteúdos web bem estruturados e acessíveis. Aprenda a estruturar documentos utilizando tags, elementos e atributos. Trabalhe com confiança com textos, listas, imagens, áudio e vídeo para enriquecer páginas web. Crie tabelas para organizar dados e formulários para entrada e interação do usuário. Descubra o HTML semântico para aprimorar a acessibilidade e construa estruturas completas e funcionais de sites desde o início.
3 horas 35 capítulosIniciante
20 ESTUDANDO AGORA
curso
Estruturas de Dados em JavaScript
Aprenda a trabalhar com dados em JavaScript dominando objetos e arrays. Compreenda como criar, acessar e gerenciar propriedades e métodos de objetos de forma eficaz. Explore técnicas avançadas de manipulação de objetos, incluindo iteração, clonagem e desestruturação para um código mais limpo. Construa uma base sólida no trabalho com arrays e aprenda a gerenciar, iterar e modificar elementos de arrays de maneira eficiente. Domine métodos avançados de arrays como map, filter, find e sort para transformar e manipular dados de forma eficaz em suas aplicações.
6 horas 44 capítulosIntermediário
9 ESTUDANDO AGORA
curso
Introdução ao TypeScript
Este curso é destinado a iniciantes absolutos que desejam dominar os fundamentos da linguagem de programação TypeScript. TypeScript é uma linguagem moderna e poderosa que amplia as capacidades do JavaScript, tornando seu código mais confiável e legível. Começaremos pelos conceitos mais básicos, abordando variáveis, tipos de dados, operadores de comparação e estruturas condicionais. Em seguida, exploraremos o trabalho com arrays e laços de repetição. Ao concluir este curso, você estará apto a criar programas simples em TypeScript e prosseguir sua jornada de aprendizado para tópicos mais avançados.
3 horas 34 capítulosIniciante
3 ESTUDANDO AGORA
curso
Layout CSS, Efeitos e Sass
Aprimore suas habilidades de estilização dominando técnicas avançadas de CSS para design web moderno. Posicione e gerencie elementos com precisão utilizando estratégias avançadas de posicionamento. Crie transições suaves e animações envolventes para aprimorar a experiência do usuário. Transforme e manipule elementos para efeitos visuais dinâmicos. Desenvolva designs responsivos que se adaptam a diferentes dispositivos e aprenda a otimizar seu fluxo de trabalho com pré-processadores CSS como o Sass.
6 horas 48 capítulosIntermediário
3 ESTUDANDO AGORA
curso
Domínio do Next.js 14 para Construção de Aplicações Web Modernas
Aprenda a construir aplicações web modernas e de alto desempenho utilizando Next.js. Configure projetos com layouts estruturados, estilização e roteamento para navegação fluida. Busque e exiba dados de forma eficiente, otimizando a renderização e o desempenho. Implemente recursos avançados como paginação, operações CRUD e busca global para aplicações web dinâmicas. Faça o deploy de seus projetos Next.js, conecte-os a bancos de dados e adicione autenticação para proteger os dados dos usuários.
8 horas 48 capítulosAvançado
4 ESTUDANDO AGORA
curso
Ninja do JavaScript
Bem-vindo ao Curso Ninja de JavaScript! Este curso envolvente e interativo é projetado para introduzi-lo aos fundamentos da programação em JavaScript através de um jogo divertido e educativo. Você guiará um ninja por vários desafios, usando JavaScript para controlar movimentos e interagir com objetos como sushi. Começando com o básico, você aprenderá a navegar pelo mapa, pegar e colocar sushi, e gradualmente progredir para conceitos de programação mais complexos, como funções, loops e declarações condicionais. Cada capítulo oferece prática prática para reforçar seu aprendizado, culminando em desafios emocionantes que testam suas habilidades. Seja você um iniciante completo ou alguém que deseja aprimorar suas habilidades de codificação, este curso oferece uma experiência de aprendizado abrangente e agradável. Junte-se a nós e torne-se um ninja da codificação!
3 horas 28 capítulosIniciante
19 ESTUDANDO AGORA
curso
Lógica e Interação em JavaScript
Domine conceitos essenciais de JavaScript, incluindo classes, manipulação do DOM, tratamento de eventos e programação assíncrona. Aprenda a criar aplicações web dinâmicas e interativas gerenciando interações do usuário, buscando e exibindo dados, e lidando com operações assíncronas de forma eficiente. Por meio de uma combinação de teoria, desafios práticos e exemplos do mundo real, este curso oferece as habilidades práticas necessárias para o desenvolvimento web moderno.
8 horas 45 capítulosAvançado
9 ESTUDANDO AGORA
curso
Gerenciamento de Estado com Redux Toolkit no React
Descubra o poder do Redux Toolkit em conjunto com o React e potencialize suas habilidades de gerenciamento de estado. Este curso apresenta de forma abrangente o Redux Toolkit, uma biblioteca poderosa para gerenciar estados. Aprenda a simplificar a configuração do Redux, facilitar lógicas de estado complexas e criar aplicações React eficientes e escaláveis.
4 horas 24 capítulosAvançado
1 ESTUDANDO AGORA
Discover more Learning Tracks
trilha
Desenvolvimento de Jogos com Unity
4 Cursos
164 TarefasIniciante
4.4
(328)
trilha
Produção de Vídeo com Adobe
4 Cursos123 TarefasIniciante
5.0
(15)
trilha
Ferramentas de Design UI/UX
4 Cursos161 TarefasIniciante
4.8
(28)
trilha
Habilidades Essenciais de Escritório
3 Cursos75 TarefasIniciante
4.5
(940)
trilha
Digital Marketing Essentials
6 Cursos293 TarefasIniciante
4.5
(36)
trilha
Complete Social Media Management
5 Cursos206 TarefasIniciante
4.7
(25)
trilha
Business AI Toolkit
3 Cursos42 TarefasIniciante
4.2
(94)
trilha
Desenvolvimento de Sites sem Código
3 Cursos180 TarefasIniciante
4.3
(12)
trilha
DevOps Specialist
6 Cursos91 TarefasIniciante
4.0
(2)
trilha
Supervised Learning Foundations
6 Cursos74 TarefasIniciante
4.8
(19)
trilha
Python from Zero to Hero
7 Cursos
2 Projetos132 TarefasIniciante
4.7
(236)
trilha
C Programming Fundamentals
7 Cursos70 TarefasIniciante
4.6
(10)
Por que as Pessoas Escolhem Codefinity
Web Developer
Kwizera Mugisha
The teaching methodology at Codefinity is excellent, and I particularly appreciate how it has prepared me to handle real-world coding problems. Currently, I am delving into Node.js and eagerly anticipate building full-stack projects that integrate all the knowledge I have gained.
Senior Business Analyst
Sherry Barnes-Fox
My first course was 4 hours, I did it in a few days, "nugget-style". The instructions are very clear and easy to understand. There is even a hint to help you get the answer. I love the learning style that is used, it engages me.
Accounts Payable Specialist
Bill Wagner
I have really liked the browser-based lessons that allow me to code within the lesson. The RUN button allows me to test the code I write before submitting for a grade.
IT Support Specialist
Daniel Chinea
I have gained a lot of practical and logical thinking skills, along with patience for myself and confidence in myself that I can learn programming. Years ago, I would have never thought that I could learn programming in any way, shape or form, and I was able to obtain these certifications and skills with Codefinity.
Technology Project Manager
Steve Bruening
The learning was progressive and made it easy to follow along and make progress. I could feel my skills increasing and building on each other as the course went along.
Project Manager
Stephanie Chan
As I went through the first course of the Python track, I liked the way the course was lay out (in easy and digestible modules) with little exercises at the end of each concept.
Step-by-Step to Stellar Results
Ambiente de codificação interativo
Mergulhe em nosso ambiente interativo: escreva e execute seu código com feedback em tempo real e métricas de sucesso—aprenda fazendo a cada passo.
Suporte com IA
Aproveite o assistente de IA integrado para explicar erros, sugerir correções ou responder a qualquer pergunta sobre seu código—assim você permanece produtivo e nunca fica preso.
Check your progress
Conclua cada módulo com um questionário rápido que fornece feedback instantâneo, acompanha seu progresso e garante que você dominou os conceitos-chave.
Promote your expertise
Ganhe seu certificado reconhecido pela indústria ao concluir e compartilhe no LinkedIn com um clique—deixe sua rede ver o que você pode fazer.
Confiado por Funcionários de Empresas Líderes
e Estudantes de Universidades de Prestígio
Acesso completo ao catálogo
Uma assinatura abre este curso e todo o nosso catálogo de projetos e habilidades.Features:
500+ Cursos Bem AvaliadosCopiloto de IA de ponta
Trilhas de estudo personalizadas40+ Projetos práticos do mundo real
Sem cancelamento, antes do término do plano com desconto selecionado, aceito que a Codefinity cobrará automaticamente $104 a cada 3 meses até eu cancelar. Saiba mais sobre a política de cancelamento e reembolso em Termos de Assinatura.
Experimente Codefinity com confiança – garantia de devolução do dinheiro em 30 dias incluída
Para dar as boas-vindas ao Codefinity, estamos oferecendo até 64% de desconto em nossos cursos. Além disso, temos uma garantia de devolução do dinheiro em 30 dias, para que você possa nos experimentar sem riscos.Estamos ansiosos para recebê-lo em nossa plataforma e estamos comprometidos em tornar sua experiência de aprendizado fácil, interativa e divertida.
Ready to get started?
Pro
Best intro offer
Ultimate
A complete experience
to kickstart your career
to kickstart your career
500+ Top-Rated courses
Completion certificates
Early access to new courses
40+ hands-on Real-world projects
Personalized study tracks
Unlimited workspaces
Acesse instantaneamente 500+ cursos
Aprendizado Ilimitado, Acesso InstantâneoTenha acesso total a todos os cursos e trilhas, incluindo conteúdo em vídeo, questionários e materiais aprofundados—comece a aprender a qualquer momento.
Certificados Reconhecidos pela IndústriaGanhe certificados que validam sua expertise e impulsionam sua carreira em tecnologia, IA, dados, marketing e além.
Aprendizado assistido por IAReceba dicas personalizadas, feedback em tempo real e explicações com IA para acelerar seu progresso.
Constantemente Expansível: Novos Cursos e Trilhas de CarreiraMantenha-se à frente com cursos constantemente atualizados, roteiros de carreira, desafios e testes práticos.
Desenvolva Habilidades que ImportamDomine habilidades em demanda com cursos em IA, ciência de dados, programação, marketing, automação, desenvolvimento web e mais.
Aprendizado Interativo e Sem CosturaEngaje-se com projetos práticos, exercícios do mundo real e uma experiência de aprendizado intuitiva — sem necessidade de ferramentas extras.
