Estás viendo una lección de muestra.
Regístrate para ver el curso completo.
leson1
Next.js es una herramienta para construir sitios web completos con JavaScript. Con ella puedes hacer desde una página de presentación hasta una tienda o una plataforma de cursos como esta en la que estás ahora mismo: AulaCursos está hecha con Next.js.
No te preocupes si nunca la has usado. Vamos a ir despacio, una pieza a la vez. Solo necesitas saber lo básico de JavaScript, que ya viste en el curso anterior.
:::aprender
- Qué es Next.js y por qué existe
- Qué papel tiene junto a JavaScript, HTML y React
- Qué problemas te resuelve ya hechos
- Cómo se ven y se usan los laboratorios de este curso
:::
## Una casa que construyes tú
Imagina que quieres tener una casa.
- Construirla con tus manos desde cero es lo que haces cuando escribes un sitio solo con HTML, CSS y JavaScript. Tienes toda la libertad, pero tienes que poner tú los cimientos, las tuberías y la instalación eléctrica.
- Una casa prefabricada es lo que te da Next.js. Los cimientos, las tuberías y la electricidad ya están puestos y funcionan. Tú decides las habitaciones, los muebles y los colores.
Eso es un framework: una estructura ya armada sobre la que construyes lo tuyo. No cambia el idioma en que hablas. Sigues escribiendo JavaScript, pero ya no empiezas de un terreno vacío.
## Tres nombres que se mezclan mucho
Al principio se confunden tres cosas. Vamos a separarlas:
- JavaScript es el idioma. Lo conoces.
- React es una caja de piezas de lego para armar pantallas. Cada pieza se llama componente: un botón, una tarjeta, un menú. Con ellas armas la pantalla.
- Next.js es la casa completa construida con esas piezas. Se encarga de lo que React no hace solo: las direcciones del sitio, el servidor, cómo cargan las imágenes y cómo publicarlo.
En otras palabras: Next.js usa React, y React está escrito en JavaScript. Por eso en este curso aprenderás las tres cosas, pero en el orden en que las necesitas y sin perderte.
## Qué te regala Next.js
Cuando creas un proyecto con Next.js ya vienen resueltas cosas que a mano te tomarían semanas:
- Páginas por carpetas. Creas una carpeta y un archivo, y esa carpeta se convierte en una dirección del sitio. No hay que configurar nada.
- Páginas que llegan armadas. Parte del trabajo lo hace el servidor antes de enviarte la página. Por eso cargan rápido y los buscadores, como Google, las entienden mejor.
- Imágenes y letras optimizadas. Pesan menos y cargan mejor sin que tú hagas cálculos.
- Un lugar para tu propio servidor. Puedes guardar datos y recibir formularios dentro del mismo proyecto.
- Publicar sin dolor de cabeza. Un comando prepara todo para ponerlo en internet.
Seguro te preguntas: «¿y todo eso lo voy a entender?». Sí, pero de a poco. Hoy solo quiero que lo veas funcionar.
## Tu primer vistazo
Mira este laboratorio. A la izquierda hay un proyecto pequeño con tres archivos. A la derecha está el resultado, con una barra como la de un navegador. No hace falta que entiendas todavía cómo está escrito. Solo observa.
:::ejemplo Un mini sitio con dos páginas
//@lab next
//@archivo app/layout.js
export default function Layout({ children }) {
return (
<html lang="es">
<body>
<p>AulaCursos de prueba</p>
{children}
</body>
</html>
);
}
//@archivo app/page.js
import Link from "next/link";
export default function Inicio() {
return (
<main>
<h1>Hola, esta es la página de inicio</h1>
<Link href="/contacto">Ir a contacto</Link>
</main>
);
}
//@archivo app/contacto/page.js
export default function Contacto() {
return (
<main>
<h1>Esta es la página de contacto</h1>
</main>
);
}
:::
Pulsa Ejecutar y luego pulsa el enlace Ir a contacto en el resultado. Mira tres cosas:
- La página cambió a «Esta es la página de contacto».
- La dirección de la barra pasó de localhost:3000/ a localhost:3000/contacto.
- La línea «AulaCursos de prueba» no se movió: es la parte que se repite en todas las páginas.
Ahora mira los archivos con mis palabras (usa las pestañas de arriba del editor para verlos):
- app/page.js es la página de inicio, la dirección /.
- app/contacto/page.js es la página que está en la dirección /contacto. Fíjate que es una carpeta llamada contacto con un archivo page.js adentro.
- app/layout.js es el marco que rodea a todas las páginas. Lo que pongas ahí aparece en todas.
Tranquilo, es normal no entender el código hoy. Lo irás viendo pieza por pieza en las próximas lecciones. Por ahora basta con notar que crear una carpeta con un archivo page.js crea una página nueva.
:::aviso
Este laboratorio es una maqueta de Next.js que funciona dentro del navegador, para que practiques sin instalar nada. Funciona casi igual que el Next.js de verdad, pero no es el programa real. En las lecciones 2 y 3 instalarás el verdadero en tu computadora.
:::
## Cómo funcionan los laboratorios de este curso
Cada laboratorio tiene tres zonas:
- A la izquierda, el código. Si el proyecto tiene varios archivos, los verás como pestañas. Puedes cambiar lo que quieras, crear archivos nuevos escribiendo su nombre y borrar el que estás viendo.
- A la derecha, el resultado, con su barra de dirección y el título de la pestaña.
- Debajo, la consola: una cajita oscura donde aparecen los mensajes y los errores.
Pulsa Ejecutar (o Ctrl + Enter) para ver los cambios. Pulsa Limpiar para dejar todo como estaba al principio.
:::tip
No tengas miedo de cambiar el código. Cambia una palabra, ejecuta y mira qué pasa. Así se aprende más rápido que solo leyendo.
:::
## Errores y confusiones comunes
- Pensar que Next.js es un lenguaje nuevo. No lo es: escribes JavaScript de siempre, con piezas de React.
- Creer que hace falta saber mucho de servidores. Al principio no: Next.js se ocupa de lo difícil.
- Creer que Next.js es solo para sitios enormes. Sirve igual para una página pequeña.
:::practica Tu turno 1: cambia el mensaje de inicio
//@lab next
//@archivo app/layout.js
export default function Layout({ children }) {
return (
<html lang="es">
<body>{children}</body>
</html>
);
}
//@archivo app/page.js
export default function Inicio() {
return (
<main>
<h1>Hola, mundo</h1>
</main>
);
}
---pista---
Abre la pestaña app/page.js. El texto que se ve en la página está entre las etiquetas <h1> y </h1>.
---pista---
Cambia solo las palabras Hola, mundo. No borres las etiquetas <h1> ni </h1>.
---pista---
Debe quedar algo así: <h1>Bienvenida a mi sitio</h1>, con las palabras que tú quieras.
---prueba---
await esperar(50);
const t = texto("h1");
ok(t !== "Hola, mundo", "el título sigue diciendo «Hola, mundo». Cámbialo por un texto tuyo.");
ok(t.length >= 3, "el título es muy corto. Escribe una frase.");
---solucion---
//@lab next
//@archivo app/layout.js
export default function Layout({ children }) {
return (
<html lang="es">
<body>{children}</body>
</html>
);
}
//@archivo app/page.js
export default function Inicio() {
return (
<main>
<h1>Bienvenida a mi sitio</h1>
</main>
);
}
:::
Abre la pestaña app/page.js, cambia el texto del título por uno tuyo, pulsa Ejecutar y mira la página. Cuando termines, pulsa Comprobar mi código.
:::practica Tu turno 2: crea la página «Sobre mí»
//@lab next
//@archivo app/layout.js
export default function Layout({ children }) {
return (
<html lang="es">
<body>{children}</body>
</html>
);
}
//@archivo app/page.js
export default function Inicio() {
return <h1>Inicio</h1>;
}
---pista---
Para crear la página /sobre-mi necesitas una carpeta llamada sobre-mi dentro de app, con un archivo page.js adentro.
---pista---
En el campo de arriba del editor escribe app/sobre-mi/page.js y pulsa Crear archivo. Se abrirá un archivo vacío.
---pista---
Escribe adentro una función con este molde, cambiando el texto: export default function SobreMi() { return <h1>Sobre mí</h1>; }
---prueba---
await ir("/sobre-mi");
await esperar(100);
ok(ruta() === "/sobre-mi", "no se pudo abrir la dirección /sobre-mi.");
ok(!/404/.test(texto("#root")), "la página /sobre-mi no existe todavía. Crea el archivo app/sobre-mi/page.js.");
ok(existe("h1"), "la página debe tener un título <h1>.");
---solucion---
//@lab next
//@archivo app/layout.js
export default function Layout({ children }) {
return (
<html lang="es">
<body>{children}</body>
</html>
);
}
//@archivo app/page.js
export default function Inicio() {
return <h1>Inicio</h1>;
}
//@archivo app/sobre-mi/page.js
export default function SobreMi() {
return <h1>Sobre mí</h1>;
}
:::
Crea el archivo app/sobre-mi/page.js, escribe en él el título de tu página y comprueba. Después puedes escribir /sobre-mi en la barra de dirección del resultado y pulsar Enter.
En la próxima lección prepararás tu computadora para crear tu primer proyecto de Next.js de verdad.