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

Aprenda Next.js

Um curso gratuito e interativo de Next.js que leva você dos componentes React a um app de verdade: rotas por sistema de arquivos, layouts aninhados, componentes de servidor e cliente, busca de dados, estados de carregamento e erro, e server actions - terminando com um projeto completo de Next.js. Faz parte da jornada de React, então os fundamentos de componentes que você precisa estão ali mesmo, com dicas de IA quando você trava e um certificado gratuito ao concluir.

COMEÇAR A APRENDER(é grátis)
Ver programa

1,000+ codders inscritos

47 lições32 desafios99 perguntas de quiz

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

Programa

1 seções1 projetos47 lições32 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ções32 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ções
Ver o programa completo do Journey de React
O que você recebe
Tudo o que você vai usar para aprender a programar

Learn by Doing

Write real code, query databases, build websites, and master AI prompts. Our interactive lessons cover every skill modern developers need.

playground.js
Code Editor
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3    return greeting + " " + name
4}
5
bottombar Collapse icon
Test #1test Case Success icon
Test #2test Case Success icon
Test #3test Case Failure icon
Input
"Alex"
Output
"Hello, Coddy! Alex"

Build Your Coding Streak

Stay consistent and watch your progress grow! Track your daily coding habit, protect your streak with freeze days, and earn rewards for showing up every day.

12 days streak

Return tomorrow to keep your streak!

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

Double or Nothing

Day 5 of 7

fire Freeze icon

Streak Freeze

2 left

Code Anywhere, Anytime

Take your coding journey on the go! No setup, no downloads - just open and start coding. Available on iOS, Android and Web with 4.9 star ratings.

Python
7Streak
250Score
5Energy
Variables
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
CONTINUE
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
Journey
Goals
Leaderboard
Profile
4.9
StarStarStarStarStar
Rating

You're Not Alone in This

Compete on global leaderboards, invite friends to earn rewards, and celebrate each other's wins. Coding is better with friends!

Challenger League
Challenger LeagueTop 7 advance
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 iconPromotion zoneleaderboard Arrow Up icon

Every way to learn

Read, listen, test yourself, ask the AI, or look up anything you've already covered. Every lesson meets you where you are.

Intro to Variables
Audio

A variable is a named container that stores a value you can reference later in your program.

In Python, you create one by writing the name, an equals sign, then the value you want to store.

The value can change over time - reassigning the name simply points it to a new value.

1xSarah

Prove Your Skills

Earn certificates for every course you complete. Add them to your LinkedIn profile and resume to showcase your coding expertise to employers.

CoddyCertificate of Completion
This certifies thatJohn Doehas successfully completed
PythonPython Fundamentals
Verified
DateJan 2026
LinkedInAdd to 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.
Coddy programming languages illustration

Learn Essenciais do Next.js with Coddy

COMEÇAR