Menu
CoddyTech
COMEÇAR A APRENDER
flag Pt iconPortuguêsdown icon
react iconParte do Journey de ReactNovoJornada

Aprenda Next.js

Um curso de Next.js gratuito e interativo que leva você dos componentes React a um app real: rotas, layouts, componentes de servidor e cliente, busca de dados e server actions. As dicas de IA ajudam quando você travar, e você ganha um certificado gratuito ao terminar.

COMEÇAR A APRENDER(é grátis)
Ver programaPlayground de Essenciais do Next.js

2,333+ codders inscritos

47 lições41 desafios99 perguntas de quiz

  • Ideal para iniciantes
  • sparkles iconAjuda de codificação com IA
  • hint iconLições interativas e práticas
  • quiz iconQuestionários para testar seu conhecimento
  • certificate iconCertificado grátis de conclusão

Programa

1 seções1 projetos47 lições41 desafios99 perguntas de quiz

Esta seção faz parte do Journey de React. O programa completo tem mais seções - clique em qualquer prévia abaixo para vê-la na página do Journey.

  1. Seção 1Fundamentos42 lições
  2. Seção 2

    Essenciais do Next.js

    Começar seçãoIniciarExpandirRecolher    Vá além dos componentes React para uma aplicação real: roteamento baseado em sistema de arquivos, layouts, server e client components, busca de dados, server actions e um projeto completo em Next.js.47 lições41 desafios99 perguntas1 projeto

    Por que usar o Next.js

    4 lições39

    Roteamento e Links

    6 lições516

    Layouts e Metadados

    6 lições515

    Servidor & Cliente

    6 lições515

    Dados no Servidor

    6 lições516

    Server Actions

    5 lições413

    Navegação do Cliente

    5 lições515

    Projeto: Coddy Eats

    Projeto9 lições9
Ver o programa completo do Journey de React
O que você recebe
Tudo o que você vai usar para aprender a programar

Aprenda Fazendo

Escreva código real, consulte bancos de dados, crie sites e domine prompts de IA. Nossas lições interativas cobrem todas as habilidades que desenvolvedores modernos precisam.

playground.js
Editor de Código
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3    return greeting + " " + name
4}
5
bottombar Collapse icon
Teste #1test Case Success icon
Teste #2test Case Success icon
Teste #3test Case Failure icon
Entrada
"Alex"
Saída
"Hello, Coddy! Alex"

Construa Sua Sequência

Mantenha a consistência e veja seu progresso crescer! Acompanhe seu hábito diário de programação, proteja sua sequência com dias de congelamento e ganhe recompensas por aparecer todos os dias.

12 dias de sequência

Volte amanhã para manter sua sequência!

fire Filled icon
left icon

January 2026

right icon

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

21

22

23

24

25

26

27

28

29

30

product Double Or Nothing icon

Tudo ou Nada

Dia 5 de 7

fire Freeze icon

Congelar Sequência

2 left

Onde Quiser

Leve sua jornada de programação com você! Sem configuração, sem downloads - apenas abra e comece a programar. Disponível no iOS, Android e Web com avaliações de 4.9 estrelas.

Python
7Sequência
250Pontuação
5Energia
Variáveis
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Right Done icon
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Left Done icon
journey Hex Active Base iconjourney Hex Active Shadow iconjourney Hex Active Top iconjourney Lesson Theory Challenge icon
CONTINUAR
journey Path Right icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson Theory Challenge icon
journey Path Left icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson All icon
Jornada
Metas
Tabela de Líderes
Perfil
4.9
EstrelaEstrelaEstrelaEstrelaEstrela
Avaliação

Você Não Está Sozinho

Compita em placares globais, convide amigos para ganhar recompensas e celebre as conquistas uns dos outros. Programar é melhor com amigos!

Liga Challenger
Liga ChallengerTop 7 avançam
leaderboard First icon1
avatar 1 icon
fire Filled icon
Alex7+ Days
2840
leaderboard Second icon2
avatar 2 icon
fire Filled icon
Jordan7+ Days
2650
leaderboard Third icon3
avatar 3 icon
fire Filled icon
Sam7+ Days
2420
4
avatar 4 icon
Casey
2180
5
avatar placeholder icon
fire Filled icon
Morgan7+ Days
1950
leaderboard Arrow Up iconZona de promoçãoleaderboard Arrow Up icon

Aprenda de todas as formas

Leia, ouça, teste-se, pergunte à IA ou consulte qualquer coisa que já tenha estudado. Cada lição se adapta a você.

Introdução a variáveis
Áudio

Uma variável é um contêiner nomeado que armazena um valor que você pode referenciar depois.

Em Python, você cria uma escrevendo o nome, um sinal de igual e o valor que quer armazenar.

O valor pode mudar com o tempo - reatribuir o nome simplesmente o aponta para um novo valor.

1xSarah

Seja Certificado

Ganhe certificados para cada curso que você completar. Adicione-os ao seu perfil do LinkedIn e currículo para mostrar sua experiência em programação aos empregadores.

CoddyCertificado de Conclusão
Este certifica queJoão Silvacompletou com sucesso
python iconFundamentos de Python
Verificado
Datajan 2026
LinkedInAdicionar ao LinkedIn

Por que aprender Next.js com a Coddy

  • Construa apps Next.js no navegador. Sem instalar Node, sem create-next-app, sem configuração - cada lição entrega um diretório app real com layout, páginas e componentes para editar.
  • O App Router do jeito que é usado em produção: pastas como rotas, segmentos dinâmicos, layouts aninhados, componentes de servidor vs cliente, busca de dados, estados de carregamento e erro, e formulários com server actions.
  • Dicas de IA que leem o seu código de verdade. Quando uma rota dá 404 ou um componente de servidor quebra, você recebe um empurrão que aponta o problema sem entregar a resposta.
  • Um certificado gratuito ao concluir a seção - Next.js é o framework React mais requisitado e é o que as vagas de frontend modernas pedem junto com o próprio React.

Perguntas frequentes sobre aprender Next.js

O que é Next.js?

Next.js é um framework React para construir aplicações web completas. O React dá os componentes; o Next.js adiciona tudo ao redor deles - rotas por sistema de arquivos, layouts aninhados, renderização no servidor, busca de dados e server actions para formulários e mutações. É desenvolvido e mantido pela Vercel e é o framework React mais usado em produção.

Preciso saber React antes de aprender Next.js?

Sim - o Next.js é construído sobre o React, então componentes, props e estado devem ser familiares antes. Esta seção é a segunda parte da jornada de React: a seção de Fundamentos anterior cobre exatamente essa base, então dá para seguir direto na ordem.

O curso cobre o App Router?

Sim - a seção é construída em torno do App Router moderno: o diretório app, pastas como rotas, segmentos de rota dinâmicos, layouts aninhados e o modelo de componentes servidor/cliente. É a arquitetura padrão dos novos projetos Next.js e o que as vagas atuais esperam.

Qual é a diferença entre componentes de servidor e de cliente?

Componentes de servidor renderizam no servidor - podem buscar dados diretamente e enviam menos JavaScript ao navegador. Componentes de cliente rodam no navegador e cuidam da interatividade: estado, eventos, efeitos. Apps Next.js misturam os dois, e saber qual usar é uma das habilidades centrais que esta seção treina.

Posso aprender Next.js online de graça?

Sim. A seção interativa de Next.js é gratuita - lições completas, desafios de código reais com feedback instantâneo e dicas de IA. Tudo roda no navegador, então você não precisa instalar Node nem criar um projeto para começar.

Ganho um certificado ao terminar o curso de Next.js?

Sim. Ao concluir a seção você ganha um certificado gratuito de conclusão para compartilhar no LinkedIn ou adicionar ao currículo - junto com o projeto completo de Next.js que você constrói nos capítulos finais.

Trilhas de aprendizado que incluem este curso

Este curso é uma etapa de uma trilha mais longa: vários cursos na ordem em que um mentor os ensinaria, cada um com seu próprio certificado grátis.

Ilustração das linguagens de programação do Coddy

Aprenda Essenciais do Next.js com Coddy

COMEÇAR