¿Qué es Next.js?

Next.js es un framework para crear aplicaciones web con React. Reúne en un solo proyecto lo que normalmente requeriría varias herramientas: rutas, renderización en el servidor, optimización de imágenes y rutas de API. Lo mantiene Vercel.

Cómo funciona

En Next.js, las páginas se organizan en carpetas. Cada carpeta se convierte en una ruta del sitio. Una carpeta llamada sobre se convierte en la dirección /sobre.

El framework permite elegir cómo se genera cada página. Puede montarse en el servidor en cada visita, generarse antes y servirse lista, o montarse en el navegador. Esto ayuda al rendimiento y a la indexación en buscadores.

También se pueden crear endpoints de API en el mismo proyecto, que se ejecutan en el servidor y mantienen las claves secretas lejos del navegador.

Los detalles de estructura cambian entre versiones, así que consulta la documentación oficial de la versión que uses.

Ejemplo práctico

Quieres un sitio con un chat que responde dudas sobre tu tienda. La página con el chat es la interfaz. Una ruta de API en el servidor recibe la pregunta, llama al modelo de IA con tu clave y devuelve la respuesta.

$ npx create-next-app@latest minha-loja
$ cd minha-loja
$ npm run dev

Con esto, el proyecto sube localmente y ya puedes crear páginas y rutas. La clave del modelo queda en variable de entorno, nunca en el código que va al navegador.

Para qué sirve

Next.js sirve para sitios institucionales, blogs, tiendas virtuales, paneles y productos SaaS. Es una opción común cuando se busca buen rendimiento y buena indexación en Google.

Para quien usa asistentes de código, Next.js es uno de los frameworks que los modelos conocen mejor, lo que suele dar buenos resultados al generar código.

Diferencia entre Next.js y React

React es una biblioteca para construir interfaces. Next.js es un framework que usa React y añade rutas, renderización en el servidor y otras piezas. Se puede usar React sin Next.js, pero no al revés.