Agencia de desarrollo Next.js: cómo elegir una para tu SaaS

Contratar una agencia de desarrollo Next.js para un producto SaaS no es la misma decisión que contratarla para un sitio de marketing. Un SaaS tiene cuentas, pagos, permisos y datos de clientes. Los errores en esas capas son caros de revertir e invisibles en una demo.

Esta guía es para fundadores, CTOs y directivos que están a punto de comparar propuestas. No hace un ranking de agencias. Somos una de las agencias que podrías elegir, así que te damos criterios y las pruebas que debes pedir, y puedes aplicarnos el mismo test.

La versión corta: un SaaS en Next.js es sobre todo trabajo de back-end detrás de un front-end rápido, las decisiones de arquitectura previas a la cotización fijan la mayor parte del coste, y la mejor señal de una buena agencia es una prueba que puedes inspeccionar, no un portafolio de capturas de pantalla.

Qué incluye un SaaS en Next.js#

Cuando alguien dice "constrúyenos un SaaS", la parte visible es el dashboard. El trabajo está debajo. Next.js para SaaS encaja muy bien porque una sola base de código cubre la interfaz, el renderizado en servidor y la capa de API, pero cada uno de los cuatro bloques siguientes exige decisiones explícitas. Si una propuesta lista pantallas y no estos bloques, está presupuestando lo equivocado.

Autenticación y roles#

La autenticación es más que un formulario de login. Necesitas registro, verificación de email, restablecimiento de contraseña, single sign-on si vendes a empresas grandes y un modelo de roles (propietario, administrador, miembro) aplicado en el servidor, no solo oculto en la interfaz. Decide pronto si usarás un proveedor de identidad gestionado o una librería dentro de la app. Ambas opciones funcionan. Cambiar después implica migrar a todos los usuarios.

Facturación y suscripciones#

La facturación es donde más se encogen las estimaciones de un SaaS. Una página de checkout es la parte fácil. El trabajo real es el ciclo de vida de la suscripción: pruebas, mejoras de plan con prorrateo, pagos fallidos, cancelaciones, facturas e impuestos. La documentación de Stripe Billing describe estos estados, y tu app tiene que reflejarlos mediante webhooks para que el acceso siga el estado del pago. Pregunta cómo mantiene la agencia sincronizadas tu base de datos y el proveedor de pagos cuando un webhook llega dos veces o fuera de orden.

Multi-tenancy y aislamiento de datos#

Multi-tenancy significa que muchas organizaciones cliente comparten una aplicación sin ver los datos de las demás. Los modelos habituales son una base de datos compartida con un identificador de tenant en cada fila, un esquema por tenant o una base de datos por tenant. El primero es el más barato de operar y el más fácil de construir, y falla de forma grave si una sola consulta olvida el filtro de tenant. Una buena agencia aplica el aislamiento en un único punto, como la seguridad a nivel de fila de la base de datos o una sola capa de acceso a datos, en lugar de confiar en que cada desarrollador lo recuerde.

Dashboards y APIs#

Los dashboards necesitan filtros, paginación, exportaciones y estados vacíos, que llevan más tiempo que los propios gráficos. La capa de API importa porque tus clientes acabarán pidiendo integraciones. Planifica endpoints autenticados, límites de uso, versionado y webhooks salientes. Si tienes funciones de IA en tu hoja de ruta, esta es la capa a la que se conectan, como describimos en integración de IA en plataformas SaaS.

Decisiones de arquitectura antes de cotizar#

Una agencia que cotiza antes de tomar estas decisiones está adivinando. Una buena las plantea en la primera llamada, porque cada una cambia el precio. La documentación de Next.js es la referencia del lado del framework. No necesitas leerla, pero sí oír a tu agencia usar sus términos con precisión.

Ruta de la petición

1. 01NavegadorEl usuario abre una página o envía un formulario
2. 02Server componentsRenderizan datos en el servidor
3. 03Route handlersGestionan mutaciones y webhooks
4. 04Control de tenantCada consulta limitada a un tenant
5. 05BD con tenantsDatos aislados por cliente
6. 06Stripe y emailFacturación y mensajes transaccionales

Recorrido de una petición en un SaaS Next.js, del navegador a server components y route handlers, una base de datos por tenant y servicios externos

App Router y server components#

El App Router es el modelo de rutas actual de Next.js. Renderiza los componentes en el servidor por defecto, lo que acerca la obtención de datos a la base de datos y envía menos JavaScript al navegador. Las partes interactivas, como formularios y gráficos, se marcan como client components. Pregunta qué partes de tu producto serán de cada tipo. Una agencia que marca todo como client component está construyendo una single-page app lenta dentro de un framework diseñado para evitarlo.

Route handlers o un backend separado#

Los route handlers y las server actions de Next.js pueden hacer de API. Para muchos SaaS en fase temprana basta con eso: un repositorio, un despliegue, un equipo. Un backend separado tiene sentido cuando hay tareas de larga duración, varios clientes (web, móvil, partners) que comparten una API o un equipo que ya trabaja en otro lenguaje. Ninguna opción es errónea. Lo que importa es que la agencia sepa explicar el trade-off para tu caso y cuánto costaría cambiar más adelante.

Los webhooks muestran la diferencia entre una demo y un producto. Este route handler verifica la firma de Stripe antes de fiarse del evento:

// app/api/stripe/webhook/route.ts
import Stripe from "stripe";

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);

export async function POST(request: Request) {
  const signature = request.headers.get("stripe-signature");
  if (!signature) {
    return new Response("Missing signature", { status: 400 });
  }

  // Leer el body sin procesar: la verificación falla con JSON reserializado
  const body = await request.text();

  let event: Stripe.Event;
  try {
    event = stripe.webhooks.constructEvent(
      body,
      signature,
      process.env.STRIPE_WEBHOOK_SECRET!
    );
  } catch {
    return new Response("Invalid signature", { status: 400 });
  }

  switch (event.type) {
    case "customer.subscription.updated":
    case "customer.subscription.deleted":
      // Actualizar el plan del tenant en la base de datos
      break;
    case "invoice.payment_failed":
      // Marcar la cuenta e iniciar el flujo de cobro
      break;
  }

  return new Response(null, { status: 200 });
}

Importan tres detalles: el body sin procesar se lee como texto, la firma se verifica antes que cualquier otra cosa y el handler responde rápido. Una versión de producción también guarda el id del evento para que una entrega repetida no cambie nada.

Base de datos, hosting y tareas en segundo plano#

La mayoría de los SaaS en Next.js usan PostgreSQL, que maneja bien los datos relacionales, el aislamiento entre tenants y los informes. El hosting es una segunda decisión. Una plataforma gestionada pensada para Next.js es el inicio más rápido, mientras que los contenedores en un proveedor cloud dan más control sobre el coste y la región. El trabajo en segundo plano, como enviar facturas, importar archivos o llamar a modelos de IA, no debe ejecutarse dentro de una petición web. Pregunta dónde viven las colas y las tareas programadas, y cómo se reintentan las tareas fallidas.

Cuándo Next.js es la opción equivocada#

Una buena agencia te disuadirá de usar Next.js cuando no encaje. Un framework es un medio, y algunas partes de un negocio SaaS se resuelven mejor con otras herramientas. Nuestra comparativa de Next.js, Astro y Remix muestra dónde se justifica cada framework.

Sitios de contenido y páginas de marketing#

Si la tarea principal de un sitio es publicar páginas que editan los equipos de marketing, WordPress o Webflow sale antes y cuesta menos de operar. Los editores tienen interfaz visual, vistas previas, formularios y herramientas de SEO sin depender de un desarrollador. En Next.js tendrías que construir o comprar todo eso, y cada cambio de texto se convierte en un pull request o en una integración con un CMS headless. Es una opción legítima para un equipo grande, pero rara vez la más barata.

Next.js también es una mala elección para un prototipo que esperas descartar. Una ronda corta de validación con un prototipo no-code o asistido por IA, como en crear micro-SaaS con agentes de IA, puede ahorrarte meses antes de encargar un desarrollo completo.

Configuración dividida: sitio de marketing y app#

Muchas empresas SaaS acaban con dos sistemas: un sitio de marketing en WordPress o Webflow en el dominio raíz y el producto en Next.js en un subdominio. Marketing mantiene el control total de las páginas, el equipo de ingeniería mantiene el producto y cada uno despliega a su propio ritmo. El coste es un sistema de diseño compartido y una analítica coherente en ambos. Acuérdalo desde el principio y la división funciona bien.

Cómo evaluar una agencia de desarrollo Next.js#

Los portafolios están seleccionados. Las pruebas no. El objetivo de la evaluación es pasar de las afirmaciones a artefactos que puedas inspeccionar. Para las preguntas que valen para cualquier agencia web, consulta preguntas para una agencia de desarrollo web. Los criterios siguientes son específicos de SaaS.

Embudo de evaluación

1. 01Preselección por SaaSAgencias con SaaS ya lanzados
2. 02Revisión técnicaCódigo, propiedad, tests y CI
3. 03Discovery de pagoProbar la relación con alcance real
4. 04Propuesta acotadaAlcance fijo, hitos y traspaso

Embudo de evaluación de cuatro etapas para una agencia Next.js, con revisión de propiedad y tests en la etapa técnica

Trabajo previo en SaaS que puedas inspeccionar#

Pide un producto en vivo al que puedas entrar, no un PDF de caso de estudio. Busca lo que una captura no muestra: cómo se comporta con una cuenta vacía, una suscripción vencida o un usuario sin permisos. Luego pregunta qué partes construyó la agencia, porque algunas listan trabajo hecho por el equipo interno del cliente. Una llamada de referencia con un fundador anterior, centrada en lo que salió mal y cómo se resolvió, te dice más que un testimonio.

Propiedad del código y acceso al repositorio#

El contrato debe decir que el código es tuyo, y la práctica debe coincidir. Pregunta si el trabajo se hace desde el primer día en un repositorio de tu organización, con tus cuentas de cloud y de pagos, no las de la agencia. Revisa también la licencia de cualquier starter kit interno que traiga la agencia: necesitas derecho a ejecutar, modificar y entregar todo lo que contiene.

Testing, CI/CD y prácticas de seguridad#

Pregunta qué se testea y cómo se ejecuta. Un SaaS necesita como mínimo tests automáticos en los flujos de dinero y de permisos: cambios de estado de facturación, comprobaciones de rol y aislamiento entre tenants. Cada pull request debe ejecutar tests y comprobaciones de tipos en un pipeline de CI, y los despliegues deben ser automáticos con un camino de rollback.

En seguridad, pregunta con qué controles trabaja la agencia. El OWASP Application Security Verification Standard es una checklist práctica. Una agencia que lo conoce hablará de autenticación, gestión de sesiones, control de acceso y validación de entradas sin que se lo pidas.

Soporte posterior al lanzamiento y traspaso#

Un SaaS no está terminado en el lanzamiento. Pregunta quién monitoriza los errores, quién responde ante un incidente y en qué plazo, y quién aplica las actualizaciones de dependencias y del framework. Next.js publica versiones mayores con regularidad, y una app sin mantenimiento se queda atrás. Pide documentación, un runbook y una sesión de traspaso, para poder pasar a otro equipo sin reescribir nada.

Usa esta lista como hoja de puntuación durante la evaluación:

• Entra en un SaaS real que haya construido la agencia y prueba sus casos límite
• Revisa un pull request real, anonimizado, con sus comentarios de revisión
• Confirma que el repositorio y las cuentas de cloud y de pagos son tuyos desde el primer día
• Pide la estrategia de tests de facturación, roles y aislamiento entre tenants
• Mira el pipeline de CI/CD, incluidos staging y rollback
• Pregunta cómo gestionan un webhook de Stripe que llega dos veces
• Pregunta qué controles de OWASP ASVS aplican y cómo los verifican
• Pregunta quién gestiona incidentes y actualizaciones tras el lanzamiento, y en qué condiciones

No hace falta que una agencia cumpla los ocho puntos, pero debe responder a cada uno con un artefacto y no con una promesa.

Proyecto cerrado o retainer mensual#

El modelo de contratación debe seguir la velocidad a la que cambiará tu producto. Nuestra página de modalidades de trabajo describe los formatos que ofrecemos: proyectos puntuales, un Retainer mensual y un plan Care mensual. Los trade-offs siguientes valen con cualquier agencia que elijas.

Cuándo funciona un alcance cerrado#

Un proyecto cerrado encaja cuando el alcance está claro, el producto es acotado y puedes escribir criterios de aceptación. Algunos ejemplos son una integración de facturación, una migración o un portal interno con roles definidos. Obtienes un presupuesto predecible y una fecha de fin clara. El precio es la rigidez: cada cambio se renegocia, y el descubrimiento que te saltaste se convierte en disputas.

Cuándo encaja mejor un retainer#

Un SaaS que todavía busca su mercado cambia cada semana. Un retainer mensual compra la capacidad de un equipo y no una lista de funcionalidades, así que puedes repriorizar sin una orden de cambio. Encaja mejor después del lanzamiento, cuando el feedback de los clientes decide la hoja de ruta. Requiere un fundador capaz de priorizar, porque la capacidad sin dirección es solo una factura.

Un híbrido: lanzamiento acotado y luego retainer#

Nuestra forma preferida para un producto nuevo es un híbrido. Empieza con un discovery de pago que produzca decisiones de arquitectura, un backlog y una estimación con sus supuestos. Fija el alcance de la primera versión y pasa después a un retainer para todo lo que venga. Mantienes una primera fecha clara y la libertad de aprender de usuarios reales.

Los factores de alcance explican el precio mejor que las pantallas. Por ejemplo, un SaaS con login por email, un plan y un workspace por cuenta es una obra muy distinta de uno con single sign-on, tres planes con precio por uso y una API pública, aunque ambos tengan diez pantallas. Es una ilustración, no una lista de precios. Si una estimación no menciona estos factores, pregunta por qué.

Señales de alerta en la propuesta de una agencia Next.js#

Una propuesta es el primer entregable. Léela como leerías el producto: por lo que falta, no solo por lo que hay.

Estimaciones sin supuestos#

Una sola cifra sin supuestos es una conjetura presentada como cotización. Una estimación creíble indica qué incluye, qué excluye y qué la cambiaría: número de roles, planes, integraciones y entornos. Desconfía de un precio muy por debajo de los demás. Normalmente significa que faltan la facturación, el multi-tenancy o los tests, y aparecerán más tarde como solicitudes de cambio.

Trabajo no funcional ausente#

Busca partidas para el trabajo que nadie enseña en una demo: casos límite de autenticación, webhooks de facturación, tests de aislamiento entre tenants, monitorización de errores, backups, un entorno de staging, accesibilidad y una revisión de seguridad. Si la propuesta lista solo páginas y funcionalidades, pregunta dónde están esas partidas.

Dependencia del proveedor y propiedad poco clara#

Vigila el código alojado en el repositorio de la agencia, el hosting en cuentas de la agencia, los frameworks internos para los que no puedes contratar y una cláusula de salida que cobra por irte. Comprueba también quién hace el trabajo. Es habitual ver perfiles senior en la llamada comercial y otro equipo en el desarrollo. Pide por escrito los nombres de las personas y sus roles.

Por dónde empezar con una agencia de desarrollo Next.js#

Empieza con un brief de una página: quiénes son los clientes, el único flujo que el producto debe hacer bien, los planes que venderás, las integraciones que necesitas y tus restricciones de presupuesto, fecha y cumplimiento normativo. Preselecciona dos o tres agencias, aplica las comprobaciones anteriores y paga al finalista un discovery corto antes de comprometerte con un desarrollo completo. Un discovery de pago cuesta poco frente a una arquitectura equivocada.

Si quieres nuestra opinión, nuestro servicio de aplicaciones a medida cubre productos Next.js desde el discovery hasta el mantenimiento a largo plazo. Tráenos el brief y te diremos si Next.js encaja, aunque la respuesta honesta sea WordPress o Webflow.

Preguntas frecuentes#