Menu
Coddy logo textTech
EMPEZAR A APRENDER
flag Es iconEspañoldown icon
react iconParte del Journey de ReactNuevoRecorrido

Aprende Next.js

Un curso de Next.js gratuito e interactivo que te lleva de los componentes de React a una app real: rutas basadas en archivos, layouts anidados, componentes de servidor y cliente, obtención de datos, estados de carga y error, y server actions - terminando con un proyecto completo de Next.js. Forma parte de la ruta de React, así que los fundamentos de componentes que necesitas están ahí mismo, con pistas de IA cuando te atascas y un certificado gratuito al terminar.

EMPEZAR A APRENDER(es gratis)
Ver programa

1,000+ codders inscritos

47 lecciones32 retos99 preguntas de quiz

  • Apto para principiantes
  • sparkles iconAyuda de codificación con IA
  • hint iconLecciones interactivas prácticas
  • volume On iconNarración de audio en cada lección
  • quiz iconCuestionarios para poner a prueba tu conocimiento
  • certificate iconCertificado gratuito de finalización

Programa

1 secciones1 proyectos47 lecciones32 retos99 preguntas de quiz

Esta sección forma parte del Journey de React. El programa completo tiene más secciones - haz clic en cualquier vista previa de abajo para verla en la página del Journey.

  1. Sección 1Fundamentos42 lecciones
  2. Sección 2

    Esenciales de Next.js

    Empezar secciónEmpezarExpandirContraer    Pasa de los componentes de React a una aplicación real: enrutamiento basado en el sistema de archivos, layouts, componentes de servidor y cliente, obtención de datos, server actions y un proyecto completo en Next.js.47 lecciones32 retos99 preguntas1 proyecto

    Por qué Next.js

    4 lecciones39

    Enrutamiento y enlaces

    6 lecciones516

    Diseños y Metadatos

    6 lecciones515

    Servidor y Cliente

    6 lecciones515

    Datos en el servidor

    6 lecciones516

    Server Actions

    5 lecciones413

    Navegación del cliente

    5 lecciones515

    Proyecto: Coddy Eats

    Proyecto9 lecciones
Ver el programa completo del Journey de React
Lo que obtienes
Todo lo que usarás 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 qué aprender Next.js con Coddy

  • Construye apps de Next.js en tu navegador. Sin instalar Node, sin create-next-app, sin configuración: cada lección te entrega un directorio app real con layout, páginas y componentes para editar.
  • El App Router tal como se usa en producción: carpetas como rutas, segmentos dinámicos, layouts anidados, componentes de servidor vs cliente, obtención de datos, estados de carga y error, y formularios con server actions.
  • Pistas de IA que leen tu código real. Cuando una ruta devuelve 404 o un componente de servidor falla, recibes una pista que señala el problema sin regalarte la respuesta.
  • Un certificado gratuito al terminar la sección: Next.js es el framework de React más demandado, y es lo que piden las ofertas de frontend modernas junto al propio React.

Preguntas frecuentes sobre aprender Next.js

¿Qué es Next.js?

Next.js es un framework de React para construir aplicaciones web completas. React te da componentes; Next.js añade todo lo demás: rutas basadas en archivos, layouts anidados, renderizado en el servidor, obtención de datos y server actions para formularios y mutaciones. Lo desarrolla y mantiene Vercel y es el framework de React más usado en producción.

¿Necesito saber React antes de aprender Next.js?

Sí: Next.js está construido sobre React, así que los componentes, props y estado deberían resultarte familiares primero. Esta sección es la segunda parte de la ruta de React: la sección de Fundamentos anterior cubre exactamente esa base, así que puedes avanzar en orden sin saltos.

¿El curso cubre el App Router?

Sí: la sección gira en torno al App Router moderno: el directorio app, carpetas como rutas, segmentos de ruta dinámicos, layouts anidados y el modelo de componentes de servidor/cliente. Es la arquitectura que usan por defecto los proyectos nuevos de Next.js y lo que esperan las ofertas de trabajo actuales.

¿Cuál es la diferencia entre componentes de servidor y de cliente?

Los componentes de servidor se renderizan en el servidor: pueden obtener datos directamente y envían menos JavaScript al navegador. Los componentes de cliente se ejecutan en el navegador y manejan la interactividad: estado, eventos, efectos. Las apps de Next.js mezclan ambos, y saber cuál usar en cada caso es una de las habilidades clave que esta sección entrena.

¿Puedo aprender Next.js online gratis?

Sí. La sección interactiva de Next.js es gratuita: lecciones completas, desafíos de código reales con feedback instantáneo y pistas de IA. Todo funciona en tu navegador, así que no necesitas instalar Node ni crear un proyecto para empezar.

¿Recibo un certificado al terminar el curso de Next.js?

Sí. Al terminar la sección obtienes un certificado de finalización gratuito que puedes compartir en LinkedIn o añadir a tu currículum, junto con el proyecto completo de Next.js que construyes en los capítulos finales.
Coddy programming languages illustration

Learn Esenciales de Next.js with Coddy

COMENZAR