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

Next.js es un framework para crear webs y apps web con React. React te da los bloques de construcción de una interfaz: botones, formularios, listas. Next.js añade el resto de la web alrededor: páginas y URLs, renderizado de las páginas en el servidor para que lleguen listas para leer, 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 de crear webs con React.

Por qué importa Next.js al crear 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 importarán más adelante:

• Visibilidad en buscadores. Una web pública que necesita posicionarse en Google se beneficia de enviar HTML real, y Next.js lo hace bien.
• Dónde vive el backend. Next.js permite que las páginas de la interfaz y el código del servidor (como «guardar este formulario» o «llamar 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 de Vite sencilla se puede servir 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 mensaje (cómo se elige la tecnología). Por eso conviene saber cuándo merece la pena pedirlo.

Una analogía cotidiana

Si React es una caja de piezas de Lego de gran calidad, Next.js es un juego de Lego que además trae las instrucciones, la placa base y las piezas de puertas y fontanería ya incluidas.

Podrías construir la misma casa con piezas sueltas, solo que tendrías que decidir tú cómo se conectan las habitaciones, dónde va la puerta principal y cómo llega el agua. Next.js toma esas decisiones por ti de forma estándar, así que todos los proyectos de Next.js tienen una estructura parecida y un desarrollador nuevo (o una IA) encuentra su camino enseguida.

Qué añade Next.js 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 de tu creador con IA o un tutorial te resulta raro, a menudo es por esto.

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 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 más o menos así:

// app/cafes/[slug]/page.tsx  →  /cafes/puerta-azul, /cafes/mirador ...
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>
  );
}

Qué ocurre cuando alguien (o Google) visita /cafes/puerta-azul:

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 genera el HTML.
3. El navegador recibe una página completa con el nombre y la dirección de la cafetería ya dentro, sin esperar a que JavaScript pida los datos.

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

Compáralo con un panel de uso interno 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 sencilla de Vite suele encajar mejor.

Términos clave

Malentendidos habituales

• «Next.js sustituye 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 potente, y también hay más que 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 de React sencilla suele ser más simple.
• «Next.js solo funciona en Vercel». Es de código abierto y puede ejecutarse en cualquier servidor con 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». Facilita que las páginas sean legibles. El posicionamiento sigue dependiendo de los títulos, el contenido, la velocidad y los enlaces.
• «El código de servidor de 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 mensaje, 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 se rendericen en el servidor o sean estáticas, con títulos y descripciones adecuados.»
• «Guarda las claves de API en código solo de servidor y en variables de entorno. Enséñame dónde se lee cada una.»
• «¿Esta app necesita Next.js, o una app de 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 mensaje; 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 directo sin que tengas que configurar el alojamiento tú. La documentación de Mythex indica que las apps de una sola página renderizadas en el cliente tienen peor SEO que el HTML renderizado en el servidor o estático, así que si para una web de marketing el buscador importa, conviene decirlo desde el principio (SEO para tu app).

Preguntas