¿Qué es Next.js? Guía sencilla para creadores de apps

Next.js es un framework para construir sitios web y aplicaciones web con React. React te da los bloques de construcción de una interfaz: botones, formularios, listas. Next.js añade el resto del sitio web a su alrededor: páginas y URLs, renderizado de las páginas en el servidor para que lleguen listas para leerse, carga de datos y ejecución de código de backend en el mismo proyecto. Es de código abierto, lo desarrolla la empresa Vercel, y es una de las formas más usadas para construir sitios con React.

Por qué importa Next.js al construir con IA

Cuando describes una app a un creador con IA, este tiene que elegir una base técnica. Esa elección condiciona cosas que te importan más adelante:

• Visibilidad en buscadores. Un sitio público que necesita posicionarse en Google se beneficia de enviar HTML real, algo que Next.js hace bien.
• Dónde vive el backend. Next.js permite que las páginas del frontend y el código del servidor (como «guarda este formulario» o «llama a la API de pagos») vivan en un mismo proyecto.
• Alojamiento. Una app de Next.js con funciones de servidor necesita un servidor donde ejecutarse, mientras que una app Vite simple puede servirse como archivos estáticos.

Mythex crea los proyectos nuevos con Vite + React + TypeScript + Tailwind por defecto, y usa Next.js cuando lo pides: basta con escribir «Usa Next.js» en tu primer prompt (cómo se elige la tecnología). Por eso conviene saber cuándo vale la pena pedirlo.

Una analogía cotidiana

Si React es una caja de bloques Lego de alta calidad, Next.js es un set de Lego que ya incluye las instrucciones, la base y las piezas de puertas y tuberías.

Podrías construir la misma casa con bloques sueltos, solo que tendrías que decidir tú cómo se conectan las habitaciones, dónde va la puerta principal y cómo entra el agua. Next.js toma esas decisiones por ti de forma estándar, así que cada proyecto de Next.js tiene una disposición parecida y un nuevo desarrollador (o una IA) puede orientarse rápido.

Lo que Next.js añade a React

Next.js tiene dos formas de organizar las páginas. El App Router (la carpeta app/) es el más nuevo y soporta Server Components. El Pages Router (la carpeta pages/) es el original y sigue soportado. Los proyectos nuevos suelen usar el App Router. Si el código que genera tu creador con IA o un tutorial te resulta extraño, esta suele ser la razón.

Ejemplo práctico: un directorio público de cafeterías locales

Imagina un sitio que lista cafeterías de tu ciudad, con una página por cada cafetería, y que quieres que aparezca en los resultados de búsqueda.

Una página de Next.js para una cafetería podría verse aproximadamente así:

// app/cafes/[slug]/page.tsx  →  /cafes/blue-door, /cafes/hilltop ...
export default async function CafePage({ params }) {
  const { slug } = await params;
  const cafe = await db.cafe.findUnique({ where: { slug } });
  return (
    <main>
      <h1>{cafe.name}</h1>
      <p>{cafe.address}</p>
    </main>
  );
}

Lo que pasa cuando alguien (o Google) visita /cafes/blue-door:

1. Next.js relaciona la URL con ese archivo. La carpeta [slug] significa «cualquier cafetería».
2. El componente se ejecuta en el servidor, lee la cafetería de la base de datos y construye el HTML.
3. El navegador recibe una página completa con el nombre y la dirección de la cafetería ya incluidos, sin esperar a que JavaScript busque los datos.

Con una app de React solo en el cliente, el navegador primero recibiría una página casi vacía, luego descargaría JavaScript, después pediría la cafetería y por último la mostraría. Los buscadores a menudo pueden manejarlo, pero una página completa es más fiable. Consulta SEO para sitios web creados con IA.

Compáralo con un panel para el personal detrás de un inicio de sesión: los buscadores no pueden verlo de todos modos, así que el renderizado en el servidor aporta menos beneficio, y una app Vite más simple suele ser la mejor opción.

Términos clave

Malentendidos comunes

• «Next.js reemplaza a React». No es así. Usa React. Tus componentes siguen siendo componentes de React.
• «Next.js siempre es la mejor opción». Es más capaz, pero también más difícil de entender. El renderizado en el servidor, la caché y la diferencia entre código de servidor y de cliente son fuentes habituales de errores confusos. Para una app que está sobre todo detrás de un inicio de sesión, una app React simple suele ser más sencilla.
• «Next.js solo funciona en Vercel». Es de código abierto y puede ejecutarse en cualquier servidor Node.js o en un contenedor Docker. Es posible una exportación totalmente estática si no usas funciones de servidor.
• «Usar Next.js garantiza un buen SEO». Hace que las páginas legibles sean más fáciles de leer. Los posicionamientos siguen dependiendo de los títulos, el contenido, la velocidad y los enlaces.
• «El código de servidor en Next.js es privado automáticamente». El código marcado para el cliente acaba en el navegador. Los secretos deben quedarse en código solo de servidor y en variables de entorno.

Qué pedir a tu creador de apps con IA

• «Usa Next.js con el App Router», en tu primer prompt, si lo quieres.
• «¿Qué páginas se renderizan en el servidor, cuáles son estáticas y cuáles se ejecutan en el navegador, y por qué?»
• «Haz que las páginas públicas de marketing y de listados sean renderizadas en el servidor o estáticas, con títulos y descripciones adecuados.»
• «Guarda las claves de API en código solo de servidor y en variables de entorno. Muéstrame dónde se lee cada una.»
• «¿Esta app necesita Next.js, o una app Vite + React sería más sencilla para lo que estamos construyendo?»

Next.js en Mythex

Mythex usa Vite + React + TypeScript + Tailwind por defecto y cambia a Next.js cuando lo pides en tu prompt; mencionarlo desde el principio ahorra créditos frente a cambiarlo después. Ves la app en la Vista previa en vivo, y Publicar la despliega en una URL en vivo sin que tengas que configurar el alojamiento tú mismo. La documentación de Mythex señala que las apps de página única renderizadas en el cliente tienen peor SEO que el HTML renderizado en el servidor o estático; por eso, si para un sitio de marketing el buscador importa, conviene decirlo desde el principio (SEO para tu app).

Preguntas