Next.js 1: ¿Qué es Next.js?
easy⏱ 5 mincoursenextjs
Un framework, no solo una librería
React es una librería para construir interfaces — no decide cómo se enrutan, renderizan o empaquetan las páginas. Next.js es un meta-framework: envuelve React y añade convenciones para el enrutamiento (la carpeta app/), el renderizado (Server Components, SSR, SSG) y las herramientas de build (bundling, code-splitting, optimización de imágenes/fuentes). Escribes el mismo JSX y los mismos hooks que ya conoces; Next.js decide cuándo y dónde corre ese código.
// Plain React (Vite/CRA) — you wire up everything yourself
// main.tsx
import { createRoot } from 'react-dom/client';
createRoot(document.getElementById('root')).render(<App />);
// Next.js — the framework wires it up for you
// app/page.tsx
export default function HomePage() {
return <h1>Hello, Next.js</h1>;
}
Qué añade Next.js sobre React
Comparado con una SPA de React simple, Next.js te da enrutamiento basado en archivos (un archivo en app/ se convierte en una URL — sin configurar react-router), renderizado en el servidor (las páginas pueden renderizarse en el servidor para un primer pintado más rápido y mejor SEO), y bundling sin configuración (code-splitting, optimización de imágenes/fuentes y un build de producción ocurren automáticamente con next build).
Construye tu página de inicio
Crea un componente HomePage que devuelva un <h1> con el nombre de tu sitio y un <p> con un eslogan. Renderízalo desde App y mantén export default App para que la vista previa pueda mostrarlo.