Cómo lanzar un sitio web SaaS en inglés y árabe con Next.js

Esta guía te muestra cómo lanzar un sitio web de marketing para tu SaaS en inglés y árabe con Next.js, usando la plantilla SaaS de Aniq UI. Vas a ejecutarla, ponerle tu marca, reescribir las páginas, configurar los precios y un blog, y publicarla en tu propio dominio.

Algo que debes saber antes de empezar: es un sitio web, no una plataforma. No tiene base de datos ni back end, así que los formularios de registro, el formulario de contacto y los botones de los planes no están conectados a nada. Tú conectas tu propio inicio de sesión, el envío de formularios y el pago. Los pasos de abajo marcan cada lugar donde eso ocurre, y cada paso termina con lo que debes comprobar y con lo que suele salir mal.

Antes de empezar: decisiones que tomar

Un sitio de marketing es rápido de construir y lento de lanzar cuando las respuestas a estas preguntas llegan tarde. Resuélvelas primero.

• ¿Cuál es la única acción que debe hacer un visitante? Crear una cuenta gratis, reservar una llamada o comprar un plan. La página de inicio, la página de precios y los botones de los planes deben empujar hacia esa única acción.
• ¿A dónde van los registros? Las páginas de registro e inicio de sesión son formularios sin nada detrás. Decide si llevan al sistema de cuentas de tu propio producto, a un servicio de inicio de sesión alojado o a una lista de espera.
• ¿Cómo paga alguien? La plantilla no tiene pago. Elige entre un enlace de pago alojado de tu proveedor de pagos y una pantalla de facturación dentro de tu producto, y haz que los nombres de los planes del sitio coincidan con lo que vende ese pago.
• ¿Quién recibe los mensajes de contacto y las suscripciones al boletín? Cada formulario necesita un destino: un correo a través de un servicio de formularios, una plataforma de email o tu propia API.
• ¿Quién escribe el blog y con qué frecuencia? Las entradas son archivos en el código, así que las publica un desarrollador salvo que conectes un CMS. Sé honesto sobre si eso le sirve a tu equipo.
• ¿Qué idiomas y quién traduce? Vienen el inglés y el árabe, incluido el texto de ejemplo de la propia plantilla. El texto de tu producto necesita un traductor humano, idealmente un hablante nativo de árabe para las páginas en árabe.
• ¿Cuál es la dirección? El sitio construye sus enlaces canónicos, el sitemap y las tarjetas para compartir a partir de un solo ajuste, así que ten claro tu dominio final, incluido si usa www.

El encargo

Plainview es una pequeña herramienta de analítica para tiendas online. El producto se construye por separado. Lo que el equipo necesita ahora es su sitio web público:

• Una página de inicio que explique el producto y muestre cómo se ve el dashboard.
• Una página de precios con tres planes y un interruptor mensual o anual.
• Un blog en el que el equipo pueda escribir, con búsqueda y categorías.
• Un formulario de contacto y páginas de registro e inicio de sesión que llevarán al producto.
• Páginas legales y páginas de error como es debido.
• Todas las páginas en inglés y árabe, con el árabe maquetado de derecha a izquierda.
• Los enlaces canónicos, el sitemap y la imagen para compartir correctos, para que los buscadores y las apps de chat muestren bien el sitio.

Cómo cubre la plantilla el encargo

Necesidad	Dónde está	Qué usas
Historia del producto y vista previa del dashboard	Sitio web	Secciones de la página de inicio y la vista previa del dashboard hecha en código en el hero
Planes y precios	Sitio web	Página de precios y la sección de precios de la página de inicio
Blog	Sitio web	Páginas del blog; las entradas son archivos de la plantilla
Contacto, registro, inicio de sesión	Sitio web; el envío necesita tu servicio	Formulario de contacto, páginas de autenticación, cajas de boletín
Páginas legales y de error	Sitio web	Páginas de términos, privacidad, cookies y RGPD con texto de ejemplo, más diseños para los errores 401, 404 y 500
Inglés y árabe	Sitio web	Direcciones /en y /ar, archivos en messages/
Búsqueda y contenido compartido	Sitio web	NEXT_PUBLIC_SITE_URL, sitemap, robots.txt, public/meta_image.png
Cuentas y pagos	Tus propios servicios (no incluidos)	Tu proveedor de inicio de sesión, tu servicio de formularios y tu pago

Plantilla, desde cero o un constructor alojado

Hay tres formas habituales de tener un sitio de marketing para un SaaS, y la respuesta honesta depende de quién esté en tu equipo.

Desde cero. Decides cada detalle y nada en la página está ahí por casualidad. También diseñas y construyes el hero, las tarjetas animadas de funciones, la tabla de precios, el blog, los formularios, las páginas legales y de error, las versiones en inglés y árabe y los ajustes de búsqueda. Si un diseñador y un desarrollador tienen tiempo, es lo que da el resultado más distintivo. Si el objetivo es poner un producto delante de los clientes, es el camino más lento.

Un constructor de sitios alojado. Un constructor te pone en línea sin escribir código, se encarga del alojamiento y a menudo incluye una herramienta de formularios y un editor de blog. La contrapartida es que trabajas dentro de sus diseños y de sus precios, que mover el sitio a otro lugar más adelante puede implicar rehacerlo, y que el soporte para diseños árabes de derecha a izquierda varía. Lee sus condiciones sobre la exportación de tu contenido antes de decidirte.

Una plantilla con código fuente. Empiezas con páginas y animaciones terminadas, eres dueño del código, lo alojas donde quieras y editas lo que sea. El coste es que un desarrollador debe hacer los cambios, y las conexiones (formularios, inicio de sesión, pago) te toca construirlas a ti. La licencia cubre proyectos ilimitados, incluidos los sitios de clientes, con un pago único y actualizaciones gratis, pero no puedes publicar el código fuente ni revenderlo como plantilla.

Plainview tiene un desarrollador y un diseñador que escribirá los textos, así que elige la plantilla. Un fundador sin desarrollador debería considerar en serio un constructor alojado, y una empresa de servicios quizá encuentre más cercana otra plantilla, porque esta está pensada en torno a un único producto de software con un diseño oscuro.

Un plan de lanzamiento de ejemplo, semana a semana

Este calendario es un ejemplo para Plainview, no una promesa sobre tus plazos.

• Semana 1, ejecutar y decidir. Ejecuta el sitio en local, lee cada página en los dos idiomas y resuelve las decisiones de arriba.
• Semana 2, marca y textos. Cambia el nombre, el logo, el tema y la imagen para compartir. Reescribe las secciones de la página de inicio y la vista previa del dashboard para el producto.
• Semana 3, planes y contenido. Define los planes y los precios, escribe las primeras entradas del blog, sustituye el texto legal y traduce todo al árabe.
• Semana 4, conectar y probar. Conecta los formularios y el registro, prueba en teléfonos reales y revisa la compilación de producción.
• Semana 5, lanzamiento. Fija la dirección final, despliega, revisa el sitemap y anuncia.

Paso a paso

1. Decide qué conectas tú mismo

Haz una lista de las tres conexiones antes de editar una sola página. Para Plainview son: a dónde va un registro (el sistema de cuentas del propio producto), a dónde van los mensajes de contacto (un buzón compartido a través de un servicio de formularios) y a dónde llega un cliente que paga después de elegir un plan.

Los botones de los planes de la página de precios llevan a la página de registro, y nada en la plantilla cobra una tarjeta. Eso te deja la elección: un enlace de pago alojado de tu proveedor de pagos o una pantalla de facturación dentro de tu producto. Resuélvelo ahora para que los nombres de los planes del sitio coincidan con lo que vende tu pago.

Comprueba: puedes decir, para cada formulario y botón del sitio, a dónde enviará al visitante o los datos. Lo que suele salir mal: descubrir en el lanzamiento que el mensaje de éxito de un formulario era solo un mensaje.

2. Ejecuta el sitio en tu ordenador

Instala Docker Desktop y sigue estos subpasos.

2a. Descarga. En tu cuenta de Aniq UI, abre My templates y descarga el ZIP.

Fíjate en la página My templates, donde cada plantilla comprada tiene su propia descarga.

2b. Descomprime y abre la carpeta. Descomprime el archivo y abre una terminal en la carpeta Nextjs-landing-page-template-2.

Fíjate en la ubicación de la terminal: la carpeta debe contener Dockerfile, package.json, messages, public y src.

2c. Construye la imagen y arráncala.

docker build -t analytics-landing .
docker run -p 3030:3030 analytics-landing

Cuenta con unos minutos para la primera compilación, y con que hace falta acceso a internet, porque las dependencias se instalan y el sitio se compila dentro de la imagen.

Fíjate en que el registro de la compilación termine antes de ejecutar el segundo comando.

2d. Ábrelo. Ve a localhost:3030/en. Si el puerto está ocupado, cambia el primer número después de -p, como en docker run -p 3041:3030 analytics-landing, y abre localhost:3041/en. Las ediciones no llegan a un contenedor que ya está en marcha: reconstruye la imagen después de cambiar un archivo, porque contiene una copia de tu código tal como estaba.

Fíjate en la barra de direcciones: el sitio se abre en /en, así que el idioma forma parte de cada URL.

Para editar, Node.js es más cómodo. Instala la versión 20.9 o superior, ejecuta corepack enable una vez y luego yarn install y yarn dev. El servidor de desarrollo también responde en el puerto 3030 y se recarga con cada guardado.

Fíjate en los dos comandos que necesita la ruta sin Docker una vez activado Corepack.

Lo que suele salir mal: Docker no está en marcha (inicia Docker Desktop y espera), un puerto está en uso, Yarn responde con la versión 1.22 porque Corepack está desactivado, o Node.js es anterior a la 20.9. Usa Yarn en lugar de npm, porque el archivo de bloqueo mantiene tu instalación en las versiones probadas.

Fíjate en el hero: un titular, dos botones, tarjetas flotantes y, debajo, un dashboard de producto hecho en código.

3. Recorre todo el sitio antes de cambiarlo

Dedica media hora a leer el sitio como un visitante. Abre cada página en los dos idiomas: Inicio, Precios, Blog, una entrada del blog, Contacto, Iniciar sesión, Registrarse, Olvidé mi contraseña, las cuatro páginas legales y las páginas de error en /error/401, /error/404 y /error/500. Escribir una dirección que no existe es una forma rápida de ver la página 404.

Fíjate en el orden de las secciones mientras haces scroll, porque las reescribirás una por una en el paso 5.

Mientras lees, haz una lista titulada "por reemplazar". Debe incluir los logos de empresas de ejemplo, los testimonios de ejemplo, el texto legal de ejemplo, las entradas de blog de ejemplo, los planes de ejemplo y cualquier enlace que lleve a #. Esa lista es tu plan de edición.

Lo que suele salir mal: la gente se salta la revisión del árabe en esta etapa y descubre sorpresas de maquetación solo después de haber reescrito todo.

4. Dale a Plainview su nombre y su aspecto

La marca está repartida en un puñado de archivos, todos listados en la documentación:

• Nombre, título y descripción del sitio: el bloque Metadata de messages/layout/en.json y ar.json. Cada una de las demás páginas tiene su propio bloque meta, como PricingPage.meta en messages/pricing/.
• El logo: src/components/Logo.tsx. Por defecto es texto (la palabra LOGO y una marca registrada), y el encabezado, el pie de página y las páginas de inicio de sesión usan este mismo componente. Cambia la palabra o sustituye los dos spans por una imagen de public/.
• Tema de color: defaultTheme en src/app/[locale]/layout.tsx. Vienen cuatro: monocromo, azul (el predeterminado), morado y cian. Para usar tu propio color, edita un tema en src/Demo/ThemeColorSwitcher/themes.ts.
• Favicon: src/app/favicon.ico. Imagen para compartir: public/meta_image.png, de 1200 por 630 píxeles.

Con yarn dev, un panel flotante muestra una vista previa de los cuatro temas. Es solo una herramienta de desarrollo; las compilaciones de producción nunca la incluyen. Como el navegador recuerda la elección hecha en el panel, esa elección prevalece sobre defaultTheme mientras desarrollas. Si tu nuevo tema no se ve, elígelo en el panel o borra los datos almacenados de localhost:3030 en tu navegador.

Las fuentes son DM Sans para el texto en inglés con Clash Display para los títulos, y Noto Sans Arabic con Almarai para el árabe. Para cambiar una fuente de Google, impórtala desde next/font/google en el layout y conserva el mismo nombre de variable.

El pie de página muestra una línea de copyright y un enlace de crédito. Las palabras son Footer.copyright y Footer.madeWith en los archivos de mensajes del layout, y el enlace está en src/components/shared/layout/footer/components/BottomSection.tsx. Cámbialos o quítalos como prefieras.

Qué comprobar: abre el código fuente de la página o la pestaña del navegador y confirma que el título y la imagen para compartir son tuyos. Pega la dirección de una página en una app de chat para ver la tarjeta al compartir. Lo que suele salir mal: cambiar el nombre en inglés y olvidar el bloque Metadata en árabe.

5. Reescribe la página de inicio para tu producto

La página de inicio es una pila de secciones: Hero, una fila móvil de logos de empresas, cinco tarjetas animadas de funciones, tres estadísticas con contador, precios, testimonios, unas preguntas frecuentes con búsqueda y un bloque "Where we work" con un mapamundi y una caja de email. Todo lo que hay en ellas es contenido de ejemplo para un producto de analítica, y la documentación te indica reemplazarlo antes del lanzamiento.

Recórrelo sección por sección:

1. Hero. Reescribe el titular y las etiquetas de los dos botones para tu única llamada a la acción.
2. Fila de empresas. Quítala, o rellénala con clientes que aceptaron aparecer con su nombre.
3. Tarjetas de funciones. Deja cinco, o menos. Cada una describe un beneficio en una o dos frases.
4. Estadísticas. Tres cifras suben hasta su valor al aparecer. Conserva solo las cifras que puedas demostrar, y usa las reales.
5. Testimonios. Conserva solo citas reales y autorizadas. Si no, elimina la sección.
6. Preguntas frecuentes. Sustituye las diez preguntas por las que de verdad hacen tus clientes potenciales, y usa las categorías.
7. Where we work. Conserva el mapa si tienes lugares que mostrar, o redúcelo a la caja de email.

Plainview también es un producto de analítica, así que su vista previa del dashboard es la que menos trabajo necesita. La vista previa está hecha en código en lugar de mostrarse como una imagen: una barra lateral, cinco cifras clave que puedes arrastrar, un gráfico de usuarios nuevos, un donut de fuentes de tráfico, una lista de tareas y una tabla de clientes. Reemplaza sus nombres, números y etiquetas por otros que encajen con tu producto. En árabe se mantiene de izquierda a derecha, como lo haría una captura real de producto, y sus etiquetas están traducidas.

Fíjate en las cinco cifras clave y en los dos gráficos, las partes que vas a renombrar con las métricas de tu propio producto.

Dos secciones piden honestidad más que edición. La fila de logos y los testimonios llevan empresas y citas de ejemplo. No lances con ellos. Usa clientes reales, con su permiso, o quita esas secciones hasta que los tengas. A un producto nuevo sin clientes todavía le sirven más unas preguntas frecuentes sencillas y unos precios claros que elogios inventados.

Lo que suele salir mal: dejar una estadística de ejemplo, como un número de usuarios que tu producto no puede respaldar. Los visitantes la leen como una afirmación.

6. Define los planes y los precios

Los planes aparecen en dos lugares: la sección de la página de inicio y la página /pricing. Los planes de ejemplo, todos en dólares estadounidenses al mes, son Starter ($29), Growth ($79, marcado como Most Popular) y Enterprise ($199). Son valores de ejemplo para que los reemplaces. La página de precios añade un interruptor Mensual y Anual, después una cuadrícula de comparación que cubre 32 funciones en cinco grupos, una lista corta de preguntas y un bloque final que enlaza a la página de contacto.

La facturación anual se calcula a diez meses, y el interruptor lo anuncia como "Ahorra 17%". Cambia el texto si tu descuento es distinto. Un detalle sorprende a la gente: la sección de inicio, la página de precios y el encabezado de la cuadrícula de comparación guardan cada uno su propia copia del precio, así que después de cambiar un precio, busca el número antiguo en el código y actualiza cada coincidencia. Las cifras son valores simples en el código, mientras que los nombres de los planes y las líneas de funciones están en los archivos de mensajes de ambos idiomas.

Los botones de los planes de la página de precios llevan a la página de registro. Apúntalos a tu enlace de pago, o a tu flujo de registro con el plan elegido en la dirección, según la decisión que tomaste en el paso 1. En la página de inicio, el botón de un plan abre una ventana corta que ofrece el registro por email o seguir navegando; decide si eso encaja con tu flujo o si el botón debe ir directamente al registro.

La sección de inicio también tiene un filtro que reduce la lista de funciones a una categoría, con cuatro nombres de categoría de ejemplo. Renómbralos con nombres que describan tu producto, o quita el filtro si tus planes son sencillos.

Qué comprobar: alterna entre Mensual y Anual y lee cada número de la página contra tu lista de precios, en los dos idiomas. Lo que suele salir mal: un precio mensual cambiado en las tarjetas pero no en el encabezado de la comparación.

7. Añade el blog y escribe las primeras entradas

El índice del blog muestra las entradas como tarjetas, cinco por página, y los visitantes pueden buscar en títulos y resúmenes o filtrar por categoría. Una barra lateral añade entradas populares y etiquetas. Cada página de entrada muestra la portada, la fecha, el tiempo de lectura, el autor, botones para compartir y hasta tres entradas relacionadas. Cada entrada lleva su propio título, descripción e imagen para compartir, y el sitemap la lista en los dos idiomas.

Las entradas son archivos de la plantilla, no registros de un CMS. Un archivo de datos tipado y archivos de mensajes en inglés y árabe las contienen, y vienen cinco entradas de ejemplo con portadas en public/images/blog/. En el caso de Plainview, eso significa que un desarrollador añade cada entrada. Funciona para un equipo que publica unos pocos artículos al mes. Si quieres que los editores publiquen por su cuenta, sustituye el archivo de datos por un CMS a tu elección.

Planifica las primeras entradas antes de escribirlas. Buenos temas iniciales para Plainview siguen las preguntas de sus compradores: cómo leer un informe de tráfico, qué medir en una tienda pequeña y cómo es la primera semana con la herramienta. Escribe cada una primero en inglés, tradúcela y añade las dos versiones en el mismo cambio.

Qué comprobar: abre la nueva entrada en los dos idiomas, revisa su portada y luego búscala desde el índice del blog. Lo que suele salir mal: borrar las entradas de ejemplo una por una y dejar botones de categoría que ahora no muestran nada.

8. Revisa el árabe página por página

Cada dirección existe bajo /en y /ar. En /ar el layout establece dir="rtl", así que los menús, las tarjetas, las flechas y las tablas se reflejan. Al abrir / el visitante pasa al árabe cuando su navegador lo prefiere, y al inglés en caso contrario.

Los textos viven en siete carpetas dentro de messages/: home, layout, pricing, blog, contact, auth y legal, cada una con un en.json y un ar.json. Edita ambos a la vez. Si añades marcado, usa clases lógicas como ms-2 y text-start en lugar de ml-2 y text-left. Pide a un hablante nativo de árabe que lea las páginas traducidas; la plantilla traduce su propio texto de ejemplo, y el texto de tu producto necesita el mismo cuidado.

Los títulos en árabe usan Almarai y el texto de cuerpo usa Noto Sans Arabic, elegidos según la dirección en src/styles/base.css. Revisa las palabras largas en inglés y los números dentro de frases en árabe, porque el texto mezclado es donde los diseños de derecha a izquierda dejan ver sus costuras.

Qué comprobar: cada página que cambiaste, en /ar, con el ancho de un teléfono. Lo que suele salir mal: un texto nuevo en en.json sin su gemelo en ar.json.

9. Conecta los formularios

La plantilla valida sus formularios y luego muestra un mensaje de éxito, pero nada sale del navegador. Eso incluye el formulario de contacto, los formularios de inicio de sesión, registro y contraseña olvidada, y las cajas de boletín y de email del pie de página, de la barra lateral del blog y de la sección "Where we work". Los botones de Google, GitHub y X de las páginas de autenticación todavía no hacen nada.

Para cada formulario que conserves, conecta un destino: una API propia, una herramienta de formularios alojada, una plataforma de email o un proveedor de inicio de sesión. Elimina los formularios que no necesites. Un visitante que lee "Mensaje enviado" mientras no llega nada es peor que un formulario ausente. Las claves secretas pertenecen a un servidor. Todo lo que llega al navegador, incluido un valor NEXT_PUBLIC_, puede leerlo cualquier visitante.

Las comprobaciones que ya existen te ayudan. Cada campo se valida cuando el visitante sale de él, y los mensajes llegan en el idioma de la página. Los emails deben ser válidos, los nombres necesitan 2 caracteres o más, el asunto de contacto necesita 5 y el mensaje necesita 20, y una contraseña nueva necesita 8 caracteres que combinen mayúsculas, minúsculas, un número y un símbolo. Asegúrate de que tu servicio acepte las mismas reglas, o ajusta el código para que coincida.

Busca también los enlaces que apuntan a #: algunos enlaces del pie de página y los iconos de redes sociales son marcadores de posición para tus propias páginas y perfiles.

Qué comprobar: envía cada formulario que conservaste con una dirección real y confirma que llega donde esperas. Lo que suele salir mal: poner una clave en una variable NEXT_PUBLIC_ para que "simplemente funcione", lo que la expone a todo el mundo.

10. Fija tu dirección y sal en vivo

El único ajuste que importa es NEXT_PUBLIC_SITE_URL: tu dirección pública, que empieza por https:// y termina sin barra. Los enlaces canónicos, los enlaces del cambio de idioma, el sitemap, robots.txt y las tarjetas para compartir se construyen a partir de ella. Se incorpora al compilar el sitio, así que defínela donde se ejecuta la compilación. Con Docker, pásala como argumento de compilación:

docker build --build-arg NEXT_PUBLIC_SITE_URL=https://www.your-domain.com -t analytics-landing .

Tus opciones de alojamiento:

• Vercel. Sube la carpeta a un repositorio privado (la licencia no permite compartir el código fuente públicamente), impórtala y añade NEXT_PUBLIC_SITE_URL más ENABLE_EXPERIMENTAL_COREPACK con el valor 1. Despliega y luego añade tu dominio.
• Un servidor Node.js. Instala, compila con tu dirección e inicia. Escucha en el 3030, así que pon Nginx o Caddy delante para tener HTTPS. En un host que elige el puerto, usa yarn start -p $PORT.
• Docker. El Dockerfile incluido construye una imagen pequeña que se ejecuta con un usuario sin derechos de administrador.

Cuando esté en línea, abre /sitemap.xml en tu dominio y confirma que cada dirección de la lista empieza por tu dominio. Deja NEXT_PUBLIC_BUY_URL vacío; cuando tiene valor, el pie de página muestra una franja "Buy This Template". Por último, sustituye el texto de ejemplo de las cuatro páginas legales (términos, privacidad, cookies y RGPD) por un texto que se ajuste a tu negocio, idealmente revisado por un abogado. La plantilla las incluye solo como texto de ejemplo.

El sitio combina Framer Motion, GSAP y WebGL, lo que es mucho movimiento. Ábrelo en un teléfono de gama media antes del lanzamiento y recorta efectos si se siente pesado.

Qué comprobar: el sitemap en vivo, un enlace compartido en una app de chat y el cambio de idioma en cada página. Lo que suele salir mal: una compilación hecha antes de fijar la dirección, de modo que todos los enlaces canónicos apuntan a localhost. Define el valor y vuelve a compilar.

El día a día

Después del lanzamiento, el trabajo es pequeño y regular. Estas son las rutinas que seguiría Plainview.

Publicar una entrada del blog

Escribe la entrada en inglés y luego tradúcela. Añade su registro al archivo de datos tipado del blog, añade el texto en inglés al archivo de mensajes del blog en messages/blog/ y el texto en árabe a su gemelo, y pon la imagen de portada en public/images/blog/. Revisa la página de la entrada y el índice en los dos idiomas, y búscala en el sitemap después de desplegar. Si más adelante cambias a un CMS, el archivo de datos es la pieza que sustituyes.

Actualizar los precios

Cambia el número en cada lugar que lo guarda: la sección de inicio, la página de precios y el encabezado de la cuadrícula de comparación. Después actualiza los nombres de los planes o las líneas de funciones en los archivos de mensajes de los dos idiomas, y vuelve a leer las vistas Mensual y Anual. Avisa a quien gestiona tu pago, para que el sitio y el pago coincidan siempre.

Añadir o cambiar un texto de idioma

Busca la carpeta correcta dentro de messages/ (home, layout, pricing, blog, contact, auth o legal), edita el valor en en.json y ar.json, y deja las claves como están, con cualquier palabra entre llaves sin tocar. Reinicia yarn dev o vuelve a compilar, y revisa los dos idiomas. Para añadir un idioma nuevo, añade su código a src/i18n/routing.ts y src/config/i18n.ts, copia cada archivo de mensajes de las siete carpetas y añádelo al menú de idiomas. Los enlaces canónicos y el sitemap incluyen el nuevo idioma sin más trabajo.

Rutinas menores

• Cambiar el tema. Edita defaultTheme y vuelve a compilar.
• Revisar los formularios. Envía una prueba por cada uno de vez en cuando, porque una integración rota se ve exactamente igual que un formulario que funciona.
• Actualizar la plantilla. Las dependencias llevan versiones exactas con un archivo de bloqueo. Cambia las versiones a propósito, compila y prueba los dos idiomas.

Cuánto cuesta mantenerlo

La plantilla es una compra única desde $79. La licencia cubre proyectos ilimitados, incluidos los sitios hechos para clientes, y las actualizaciones vienen incluidas.

Lo que pagas además, cada cosa según las tarifas de su propio proveedor:

• Alojamiento. Sirven Vercel, un servidor Node.js o cualquier host con Docker.
• Un nombre de dominio.
• Los servicios que conectes: un proveedor de inicio de sesión, un servicio de formularios o de email y un proveedor de pagos para el pago (que cobra comisiones según su propia página de precios).
• Un CMS, solo si sustituyes el blog basado en archivos.
• Un traductor para el texto en árabe, si nadie del equipo lo escribe.

Lo que es gratis: no hay base de datos ni secretos para ejecutar el sitio, así que un primer despliegue solo necesita el ajuste de la dirección.

Qué personalizar después

• Los datos de la vista previa. Reconstruye el dashboard del hero con cifras que tu producto realmente muestre.
• Un color propio. Edita brandPrimary y bgDark en un tema para igualar exactamente tu marca.
• El logo. Cambia la marca de texto por un SVG en Logo.tsx, y el encabezado, el pie de página y las páginas de autenticación lo siguen.
• Un tercer idioma. Añade el código, copia cada archivo de mensajes de las siete carpetas y añádelo al menú de idiomas.
• Las páginas de error. Los diseños 401, 404 y 500 están para mostrarse y también para reutilizarse dentro de tu producto.
• El blog. Sustituye el archivo de datos por un CMS si quienes publican no son desarrolladores.

Lista de comprobación del lanzamiento

• NEXT_PUBLIC_SITE_URL fijada a la dirección real antes de la compilación de producción.
• Nombre del sitio, logo, favicon, color del tema e imagen para compartir cambiados.
• Logos de empresas, testimonios y estadísticas de ejemplo sustituidos por material real o eliminados.
• Planes y precios que coinciden con el pago, en todos los lugares donde aparecen.
• Cada formulario conectado a un servicio o eliminado.
• Los enlaces que apuntaban a # ahora van a un destino real.
• Páginas legales reescritas para tu negocio.
• Cada página revisada en los dos idiomas, en un teléfono y en un escritorio.
• Sitemap abierto en el dominio en vivo.
• NEXT_PUBLIC_BUY_URL dejado vacío.

Errores comunes

Lanzar con la dirección todavía en localhost

Si NEXT_PUBLIC_SITE_URL no está definida al compilar, los enlaces canónicos, el sitemap y las tarjetas para compartir apuntan a http://localhost:3030. Defínela antes de compilar para producción.

Formularios que parecen terminados pero no envían nada

Cada formulario muestra éxito sin enviar. Conecta o elimina cada uno antes de que alguien vea el sitio.

Dejar clientes y citas de ejemplo

La fila de logos y los testimonios son contenido de ejemplo. Sustitúyelos por material real y autorizado, o elimina las secciones.

Cambiar un precio en un solo lugar

Los planes se repiten en la sección de inicio, la página de precios y el encabezado de la comparación. Actualiza todos, en los dos idiomas cuando haya palabras.

Editar un ajuste de compilación y no volver a compilar

Los valores que empiezan por NEXT_PUBLIC_ se incorporan al compilar. Reconstruye la imagen, ejecuta yarn build de nuevo o vuelve a desplegar en Vercel.

Publicar las páginas legales de ejemplo

Las páginas de términos, privacidad, cookies y RGPD son texto de ejemplo. Sustitúyelas por un texto adecuado para tu negocio y para los países de tus visitantes.

Preguntas frecuentes

¿Cómo lanzo un sitio web de SaaS en inglés y árabe con Next.js?

Usa una plantilla que ya tenga los dos idiomas integrados y luego reemplaza el texto de ejemplo en los dos archivos de mensajes. Aquí, cada página existe bajo /en y /ar, y la versión en árabe se maqueta de derecha a izquierda.

¿Necesito un backend?

No para ejecutar el sitio web. No tiene base de datos ni back end. Necesitas servicios solo para lo que conectes: inicio de sesión, formularios y pago.

¿Incluye pago o cobros?

No. Los botones de los planes llevan a la página de registro. Tú añades un enlace de pago o un flujo de facturación de tu proveedor de pagos.

¿Admite árabe y RTL?

Sí, a través de next-intl. Los menús, las tarjetas y las tablas se reflejan en las páginas en árabe, mientras que la vista previa del dashboard del hero se mantiene de izquierda a derecha como una captura de producto.

¿Hay un CMS para el blog?

No. Las entradas se guardan en el código, en un archivo de datos tipado más archivos de mensajes, así que las publica un desarrollador. Un CMS puede encargarse si sustituyes ese archivo de datos.

¿Puedo usarla para clientes?

Sí. La licencia comercial cubre proyectos ilimitados, incluido el trabajo de clientes que entregas. No puedes publicar el código fuente ni revenderlo como plantilla.

¿Puedo cambiar los colores?

Sí. Vienen cuatro temas (monocromo, azul, morado y cian), y puedes editar uno con el color de tu marca. El diseño en sí es oscuro.

¿Es buena para los buscadores?

Construye por ti los enlaces canónicos, los enlaces de idioma, un sitemap, robots.txt y las tarjetas para compartir, y cada entrada del blog tiene sus propios metadatos. Todo depende de NEXT_PUBLIC_SITE_URL, así que fíjala a tu dominio real antes de compilar.

¿El sitio pesa mucho en los teléfonos?

Combina Framer Motion, GSAP y WebGL, así que hay mucho movimiento. Pruébalo en un teléfono de gama media y reduce los efectos si va lento.

Pruébala tú mismo

Abre la demo en vivo para ver el sitio en inglés y cambia al árabe desde el menú de idiomas. La página de producto de la plantilla SaaS tiene los detalles, y la documentación cubre cada paso. Explora la categoría de plantillas de landing page, o lee la guía de plantillas SaaS con Next.js para comparar opciones.

Esta plantilla es también una de las diez del paquete de plantillas Next.js (Next.js Templates Bundle), si piensas construir más de un tipo de producto.