Cómo crear el sitio web de una agencia inmobiliaria en Next.js

Esta guía muestra cómo crear el sitio web de una agencia inmobiliaria en Next.js, con listados de propiedades, un panel de administración para los agentes y una API que conecta ambos. Usamos la plantilla Velra como punto de partida y seguimos a una agencia de ejemplo desde la primera instalación hasta el lanzamiento.

Un sitio de propiedades tiene una sola tarea: convertir a un visitante que navega en una solicitud que un agente pueda atender. Por eso los pasos se centran en el camino del listado al contacto, y después en cómo el equipo gestiona ese contacto, con las tareas de configuración reducidas al mínimo. Si estás creando el sitio para una agencia que es tu cliente, el mismo orden te sirve.

El encargo

Sandstone Realty es una agencia pequeña de Dubái con cinco agentes. Vende y alquila apartamentos, villas y casas adosadas, y la mayoría de sus consultas llegan de personas que navegan desde el móvil, en inglés o en árabe. El nuevo sitio necesita:

• Ofrecer viviendas en venta y en alquiler, con filtros por zona, tipo, presupuesto, dormitorios y servicios.
• Dar a cada propiedad una página con fotos, datos, una descripción y un lugar en el mapa.
• Permitir que los visitantes guarden viviendas y comparen varias a la vez sin crear una cuenta.
• Recoger solicitudes de visita en el horario preferido y dejar que un agente las confirme o las rechace.
• Dar a los agentes un panel para añadir y publicar listados, atender consultas y gestionar visitas.
• Mostrar fotos escenificadas de habitaciones vacías, con una etiqueta clara que indique que están generadas con IA.
• Funcionar en inglés y en árabe, con las páginas en árabe de derecha a izquierda.

Dos datos condicionan el ejemplo. La plantilla trabaja con precios en dirhams de los Emiratos (AED) y con la zona horaria Asia/Dubai, y es un sitio de captación de contactos: no tiene paso de pago ni envío de correos. Sandstone está en Dubái, así que ambas cosas le encajan.

Cómo cubre la plantilla el encargo

Necesidad	Dónde está	Qué usas
Listados con filtros	Sitio público	La página de propiedades, con filtros y orden guardados en la dirección
Páginas de propiedad	Sitio web y API	Galería, datos, servicios, barrio y viviendas similares
Viviendas guardadas y comparación	Sitio web	Página de guardados y página de comparación, ambas almacenadas en el navegador del visitante
Solicitudes de visita	Sitio web y panel	El cuadro de visita de cada propiedad y la página Visitas
Añadir y publicar listados	Panel de la agencia	Lista de propiedades y editor con pestañas en inglés y árabe, fotos ordenadas y estados
Consultas de los visitantes	Panel	La página Leads, con un estado y una nota en cada consulta
Fotos de habitaciones escenificadas	Panel y sitio web	El estudio de escenificación y el deslizador de antes y después en la página de propiedad
Inglés y árabe	Las tres aplicaciones	Rutas /en y /ar, archivos de mensajes, editor de propiedades bilingüe

Antes de empezar: decisiones que tomar

Un sitio de listados vale tanto como las decisiones que hay detrás. Resuelve esto primero.

• Qué paquete. Full Stack para una agencia nueva. Un solo front end necesita una API en alguna parte.
• Dónde funciona. Un servidor Node para tres aplicaciones, una base de datos (SQLite en un disco persistente, o MySQL) y un lugar para las fotos (una carpeta persistente o un bucket como Cloudflare R2).
• El mercado. La plantilla está configurada para AED y la zona horaria Asia/Dubai, con textos de Dubái en algunos mensajes. Otro mercado implica cambios.
• Idiomas. Cada propiedad se escribe en inglés y en árabe, así que planifica quién redacta y quién revisa el árabe.
• Herramientas de IA. La escenificación necesita una clave de Google Gemini. El asistente funciona con una clave de Gemini, OpenAI o DeepSeek. Decide si vas a usar alguna de las dos, y quién paga al proveedor.
• Cómo se responde a los contactos. No hay servicio de correo ni de pagos, así que decide quién vigila las notificaciones y quién responde, desde qué bandeja de entrada o teléfono.
• Quién tiene qué rol. El propietario, los agentes y cualquiera que necesite un rol limitado, como un fotógrafo.
• Qué cuenta como listado. Acordad cómo tratar las viviendas vendidas, alquiladas y archivadas antes de tener cincuenta.

Paso a paso

Paso 1: Elige el paquete

Velra se vende en cuatro formas: Full Stack, solo el sitio web público, solo el panel de la agencia y solo la API del backend. El sitio web y el panel no tienen datos propios, y ambos leen de la API. Por eso una agencia nueva necesita el paquete Full Stack, que reúne las tres aplicaciones en una sola carpeta.

Los paquetes sueltos sirven para otros casos. Una agencia que ya tiene una API, o un desarrollador que quiere reemplazar uno de los lados, puede llevarse por separado el sitio web público o el panel de la agencia. Recuerda la forma del producto: sirve a una sola agencia, no es un portal donde muchas agencias publican sus propios listados.

Comprueba antes de seguir

Sabes qué ZIP tienes y qué aplicaciones contiene, y dónde funcionará la API si solo tienes un front end.

Qué suele salir mal

Un front end suelto no muestra nada sin la API, porque ninguna de las dos aplicaciones guarda sus propios datos.

Paso 2: Ejecútalo en local con Docker

Instala Docker Desktop, descarga el ZIP desde Mis plantillas, extráelo y abre una terminal en la carpeta velra-real-estate-full-stack. Después arranca las tres aplicaciones:

docker compose up --build

No necesitas ninguna configuración para este primer arranque. Construye tres imágenes y carga una agencia de demostración en la base de datos, así que cuenta con unos minutos. El sitio web público se abre en http://localhost:3030 (el árabe en /ar), el panel de la agencia en http://localhost:3031 y la API en http://localhost:8000. Si un puerto está ocupado, añade SITE_PORT, ADMIN_PORT o API_PORT a un archivo .env junto a docker-compose.yml y vuelve a ejecutar el comando.

Entra en el panel como admin@velra.example con Admin@123, o como agente con agent@velra.example y Agent@123. El sitio web no tiene inicio de sesión.

La agencia de demostración tiene 17 propiedades (15 publicadas, 2 borradores), 6 barrios, 2 habitaciones escenificadas aprobadas, 5 consultas y 8 solicitudes de visita. Navega primero por el sitio como visitante, envíate una solicitud de visita y abre después Visitas en el panel como agente. Ese único recorrido es todo el producto en dos minutos.

En esta captura del vídeo de instalación, fíjate en el único comando que arranca las tres aplicaciones.

Fíjate en la habitación vacía junto a su versión amueblada con IA, la comparación que los visitantes ven en la página de inicio.

Para detenerlo, pulsa Ctrl+C. Tus datos viven en el volumen velra-data, y docker compose down -v lo borra, tras lo cual el siguiente arranque carga una agencia de demostración nueva.

Comprueba antes de seguir

Las tres direcciones responden, te enviaste una solicitud de visita y la viste en Visitas dentro del panel.

Qué suele salir mal

Docker no está en marcha: inicia Docker Desktop y vuelve a intentarlo. Un puerto ocupado termina el arranque con "address already in use": mueve la aplicación con las variables de puerto de arriba. Sin Docker, las aplicaciones necesitan Node.js 22 o superior, y Yarn 1.22 es el que responde hasta que ejecutas corepack enable.

Paso 3: Hazlo de Sandstone

La marca está en unos pocos lugares previsibles. En la carpeta del sitio web, src/config/brand.config.ts contiene el nombre, el correo de contacto y el mercado. src/styles/theme-variables.css contiene cada color como un token con un valor claro y otro oscuro, así que cambia el color primario en los dos bloques. Los archivos del logotipo están en public/brand/, y la API sirve las fotos propias de la agencia desde public/media/velra/site/.

Varias frases nombran la marca de demostración y su ciudad. Busca Velra y Dubai (y sus grafías en árabe) en messages/ y reescribe esas líneas en los dos idiomas. Los datos de la agencia que leen los visitantes son datos del panel: el nombre de la agencia, su eslogan y descripción, un correo de contacto y la ciudad se editan en el panel, en Ajustes, Agencia. Por último, reescribe la página de privacidad. Es un texto de relleno para una agencia ficticia, y lo dice en la propia página hasta que quitas el aviso.

Comprueba antes de seguir

El nombre del sitio, el pie de página y los títulos son de Sandstone en los dos idiomas, y ninguna página menciona ya a Velra ni a la ciudad de la demostración.

Qué suele salir mal

Un color cambiado solo en un tema, textos en árabe olvidados en los archivos de mensajes, o el texto de privacidad de relleno publicado tal cual.

Paso 4: Añade barrios y propiedades

Empieza por las zonas, porque cada listado apunta a una. En Ajustes, Barrios, añade cada zona con un nombre en los dos idiomas, un slug, una descripción breve y una foto de portada, y elige si es destacada. Después abre Propiedades y añade un listado. Cada propiedad nueva empieza como borrador, oculta en el sitio web, así que puedes tomarte el tiempo que necesites.

El editor tiene cuatro pestañas:

• Detalles: título y descripciones en inglés y árabe, finalidad (venta o alquiler), tipo (apartamento, villa o casa adosada), precio, datos y servicios.
• Multimedia: hasta 30 fotos, ordenadas arrastrando, con una marcada como portada.
• Ubicación: la ciudad, el barrio, la dirección y un marcador en el mapa, marcado como exacto o aproximado. El buscador encuentra el lugar por ti.
• SEO: el título y la descripción para buscadores, el slug de la dirección y las notas internas.

Los alquileres se fijan por año, y el precio es un importe en AED. Los estados van más allá de borrador y publicado: puedes marcar una vivienda como vendida, alquilada o archivada, y cada uno de esos estados la oculta del sitio sin borrar el registro. Usa la ubicación aproximada en las viviendas cuyo propietario no quiere que el marcador exacto sea público.

Termina con Ajustes, Página de inicio, donde eliges las tres viviendas destacadas, en orden. Si ninguna de ellas está publicada, la página de inicio recurre a las viviendas publicadas marcadas como destacadas.

Fíjate en la galería, los datos clave y la tarjeta de visita, que se rellenan con las pestañas del editor de arriba.

Comprueba antes de seguir

Abre una propiedad publicada como visitante y busca después la misma propiedad en Vendidas o Archivadas tras cambiar su estado. Debe desaparecer del sitio y seguir en el panel.

Qué suele salir mal

Las fotos no cargan, porque sus direcciones salen de PUBLIC_MEDIA_URL y deben llegar a la API desde el navegador del visitante. Otra trampa es borrar una propiedad, lo que también la quita del panel. Archívala si puedes necesitarla más adelante.

Paso 5: Prueba la escenificación con IA en una habitación vacía

La escenificación es opcional, y va muy bien con unidades de obra nueva que se fotografían vacías. Abre el estudio de escenificación, elige una foto de una habitación vacía de la propiedad o sube una nítida, escoge el tipo de estancia (salón, dormitorio, comedor o despacho) y un estilo (moderno cálido, moderno minimalista o contemporáneo), y genera. El resultado conserva las paredes, las ventanas y la distribución. Lo comparas con el original, guardas el par en la propiedad y marcas la casilla de aprobación para mostrarlo en público.

En el sitio web, la página de la propiedad muestra entonces un deslizador de antes y después con una etiqueta de IA sobre la imagen amueblada. Mantén esa etiqueta. Dice a los compradores qué están viendo y te mantiene del lado de la publicidad honesta.

El estudio funciona con Google Gemini, así que necesita GOOGLE_API_KEY en el .env de la API. Sin ella, el estudio avisa de que necesita una clave y no se factura nada. Google cobra según su propia tarifa, publicada en la página de precios de Gemini.

Fíjate en el deslizador de antes y después y en la etiqueta que indica que la imagen amueblada está generada con IA.

Comprueba antes de seguir

Abre la propiedad escenificada como visitante y arrastra el deslizador. Confirma que la etiqueta de IA es visible.

Qué suele salir mal

El estudio pide una clave. Genera solo con Google, así que hace falta GOOGLE_API_KEY sea cual sea la otra clave que tengas. Ponla en el .env de la API, no en un archivo del front end, y reinicia la API.

Paso 6: Decide cómo se atienden las consultas y las visitas

Hay dos formas de que un visitante llegue a la agencia. El formulario de contacto crea una consulta, con la opción de comprar o alquilar, una zona preferida, un presupuesto y un mensaje. El cuadro de visita de la página de una propiedad pide un nombre, un correo, un teléfono opcional, una fecha y una hora. Los visitantes eligen un horario entre las 09:00 y las 18:00 hora de Dubái, en tramos de media hora, con al menos una hora de antelación.

Fíjate en los campos de fecha y hora, y en que el cuadro pide una hora preferida, no un horario confirmado.

Fíjate en el texto de pendiente que ve el visitante después, que deja claro que la agencia todavía no ha confirmado.

Una solicitud de visita se muestra al visitante como pendiente de confirmación, con una referencia, nunca como una cita reservada. En el panel aparece en Visitas con una notificación, y un agente puede confirmarla, volver a confirmarla a otra hora, completarla o cancelarla. Las consultas pasan de Nueva a Contactada, Cualificada o Cerrada, y cada una tiene un campo de nota.

Como la plantilla no envía correos, la agencia debe decidir cómo se entera el visitante de la respuesta. La regla más sencilla para Sandstone es que un agente responda desde el correo o el teléfono de la agencia en cuanto se confirma una solicitud, y que el sitio lo diga junto al formulario. Ambos formularios aceptan cinco envíos por dirección cada diez minutos e ignoran el tráfico de bots, para que la primera bandeja de entrada real no se llene de spam.

Comprueba antes de seguir

Envía una solicitud de visita y un formulario de contacto. Confirma que la primera aparece en Visitas como solicitada y el segundo en Leads como nuevo, cada uno con una notificación.

Qué suele salir mal

Un formulario se rechaza tras unos intentos. Ambos formularios aceptan cinco envíos por dirección cada diez minutos, y detrás de un proxy todos pueden parecer una sola dirección hasta que configuras TRUST_PROXY.

Paso 7: Añade al equipo y define su acceso

No hay página de registro: las dos primeras cuentas del panel vienen de la carga inicial. El Super Admin puede hacerlo todo. El rol de Agente es más limitado: propiedades, consultas, visitas, escenificación y la lista de barrios, pero sin ajustes, cuentas de administración, roles ni asistente. Crea las cuentas reales en Gestión de administradores y después sustituye las contraseñas de demostración o elimina las cuentas de la carga inicial antes de que el panel quede expuesto a internet.

En Sandstone, el propietario conserva el rol de Super Admin, los cinco agentes toman el rol de Agente y un fotógrafo a tiempo parcial recibe un rol personalizado. En Roles de administración marcas solo lo que esa persona necesita, por ejemplo properties.view, properties.edit y los permisos de escenificación.

Comprueba antes de seguir

Entra como agente y confirma que faltan Ajustes, las páginas de administración y el asistente. Entra con el rol del fotógrafo y confirma que solo aparecen propiedades y escenificación.

Qué suele salir mal

Las contraseñas de la carga inicial se quedan como están. Cámbialas antes de que el panel quede expuesto a internet.

Paso 8: Activa el asistente, si quieres

El panel incluye un asistente de chat que responde con los datos de la propia agencia: cuántas consultas llegaron esta semana, qué visitas están esperando, qué listados siguen en borrador. También puede actuar cuando se lo pides, por ejemplo avanzar una consulta o confirmar una visita. Trabaja dentro de los permisos de la persona que ha iniciado sesión.

Necesita una clave de proveedor en el .env de la API, de Google Gemini, OpenAI o DeepSeek, como GOOGLE_API_KEY, OPENAI_API_KEY o DEEPSEEK_API_KEY. Con una basta. Sin clave, avisa de que necesita una y no se factura nada. Cada proveedor cobra según su propia tarifa.

Fíjate en el gráfico que dibuja el asistente a partir de las visitas de la propia agencia.

Comprueba antes de seguir

Pregunta al asistente algo que puedas verificar en la página Leads, como cuántas consultas son nuevas, y comprueba su respuesta.

Qué suele salir mal

El asistente muestra un mensaje del proveedor en lugar de una respuesta: la clave no fue aceptada, la cuenta se quedó sin saldo, el modelo no tiene más solicitudes disponibles o el proveedor está saturado. Se queda en el modelo que elegiste y no reintenta ni cambia por su cuenta, así que corrige la causa o elige otro modelo y pulsa Reintentar.

Paso 9: Pruébalo en el móvil y en árabe

La mayoría de las búsquedas de propiedades empiezan en un móvil. Abre el sitio en uno, haz una búsqueda, abre una propiedad y envía una solicitud de visita. En el diseño para móvil, una barra de visita fija se queda en la parte inferior de la página de la propiedad. Guarda dos viviendas, compáralas y prueba después a añadir una cuarta a la comparación: el sitio la rechaza, porque el límite es de tres.

Fíjate en las tres viviendas en una sola tabla, que es lo máximo que un visitante puede comparar a la vez.

Fíjate en la barra de visita que se queda en la parte inferior de la pantalla del móvil mientras la página se desplaza.

Repite la prueba en árabe en /ar, y en el panel. Comprueba que el texto en árabe, los filtros y las etiquetas del mapa se ven bien al espejarse. Las teselas del mapa del panel vienen de OpenFreeMap y la búsqueda de lugares de un servicio público, así que pruébalos con conexión a internet.

Comprueba antes de seguir

Haz una lista de pruebas en un móvil: buscar, abrir una propiedad, guardar dos viviendas, compararlas, solicitar una visita y confirmarla después como agente.

Qué suele salir mal

El sitio web dice que no pudo cargar algo. En la consola del navegador, un mensaje de CORS significa que la dirección del front end falta en CORS_ORIGIN. Además, una pestaña de la página de propiedad que dice "Property details" en Docker es inofensiva: el propio servidor del sitio web no puede alcanzar la API en localhost desde dentro del contenedor, y el stack completo ya configura la dirección interna correcta.

Paso 10: Sal en producción

Puedes desplegar de tres maneras: un servidor con Docker Compose detrás de un proxy inverso para HTTPS, cada aplicación desde su propio Dockerfile en un proveedor como Railway o Render, o Node.js a secas. Para una agencia pequeña, un solo servidor es lo más sencillo. Pon las tres direcciones públicas en un .env junto a docker-compose.yml como SITE_URL, ADMIN_URL y API_URL, y de ellas se derivan los orígenes permitidos y las direcciones de las fotos.

• Compila el sitio web y el panel con direcciones públicas. NEXT_PUBLIC_API_BASE_URL y los demás valores NEXT_PUBLIC_* se compilan dentro de las páginas, así que un cambio exige recompilar.
• Define NODE_ENV=production, tu propio JWT_SECRET y CORS_ORIGIN. La API no arranca en producción sin un secreto adecuado y una lista de orígenes.
• Crea las tablas una vez en una instalación de producción con yarn seed:prod (agencia de demostración) o yarn db:sync:prod (tablas vacías, sin cuentas). Con las tablas vacías sigues necesitando un primer administrador, así que empieza con la agencia de demostración y reemplaza sus datos.
• Guarda el archivo SQLite y las subidas en almacenamiento persistente, o usa MySQL y un bucket como Cloudflare R2.
• Define NEXT_PUBLIC_SITE_URL con la dirección real del sitio web para los enlaces canónicos y el sitemap.
• Define TRUST_PROXY detrás de un proxy inverso para que los límites por visitante cuenten al visitante real.

No ejecutes nunca yarn setup:fresh ni yarn db:reset contra una agencia con listados reales. Ambos eliminan todas las tablas.

Comprueba antes de seguir

En una ventana privada, solicita una visita en el sitio en producción y confirma que llega con una notificación.

Qué suele salir mal

Las páginas quedan vacías porque las direcciones reales no están en CORS_ORIGIN, o las fotos fallan porque NEXT_PUBLIC_MEDIA_HOSTNAME no nombra su servidor. Recompila los front ends después de cambiar cualquier valor NEXT_PUBLIC_*.

Cómo se gestiona el día a día

Esta es una semana normal en Sandstone, con pantallas que el panel ya tiene.

Una mañana en el panel

La vista general muestra propiedades, consultas y visitas de un vistazo, con un mapa de las propiedades. Empieza por la campana de notificaciones, que reúne las consultas nuevas y las solicitudes de visita.

Fíjate en los recuentos de consultas nuevas y visitas solicitadas, que deciden a quién llaman primero los agentes.

Abre Leads a continuación. Cada consulta tiene un estado (nueva, contactada, cualificada o cerrada) y una nota. Avánzala en cuanto un agente responda, para que la lista muestre siempre quién está esperando.

Fíjate en el panel de detalle junto a la lista, donde viven el estado y la nota del agente.

Mantener los listados al día

La página Propiedades lista todo con pestañas de estado, búsqueda y filtros. Revisa los borradores listos para publicar, marca como vendidas o alquiladas las operaciones cerradas y archiva lo que se retira.

Fíjate en las pestañas de estado de la parte superior, que separan los listados activos de los borradores y las operaciones cerradas.

Tareas semanales

• Confirma o cancela cada visita que siga como solicitada, y completa las que se realizaron.
• Actualiza las tres viviendas destacadas en Ajustes, Página de inicio.
• Genera y aprueba habitaciones escenificadas para las unidades vacías nuevas.
• Pregunta al asistente cuántas visitas están esperando o qué listados siguen en borrador.
• Haz una copia de seguridad de la base de datos y de las subidas, y guarda una copia en otro sitio.

Un plan de lanzamiento de ejemplo, semana a semana

Este es un calendario de ejemplo para Sandstone, no una promesa de cuánto tarda tu proyecto.

• Semana 1, cimientos. Ejecuta el stack con Docker, envíate una solicitud de visita, toma las decisiones de arriba y empieza con la marca y la página de privacidad.
• Semana 2, contenido. Añade los barrios y los primeros listados en los dos idiomas con las fotos ordenadas, y publícalos.
• Semana 3, personas y herramientas. Crea el equipo y los roles, prueba la escenificación en una unidad vacía y comprueba todo en móviles y en árabe.
• Semana 4, salida a producción. Despliega en tu dominio, envía una solicitud de visita real y avisa primero a los clientes anteriores.

Lista de comprobación del lanzamiento

• El nombre de la agencia, el eslogan, el correo de contacto y la ciudad son tuyos, en los dos idiomas.
• La página de privacidad está reescrita para tu agencia y tu país, y el aviso de relleno se ha quitado.
• Cada propiedad publicada tiene los dos idiomas, fotos ordenadas, una portada y un marcador ubicado.
• Las contraseñas de demostración están reemplazadas o las cuentas de la carga inicial eliminadas.
• NODE_ENV es production, JWT_SECRET es tuyo y CORS_ORIGIN lista las direcciones en producción.
• NEXT_PUBLIC_SITE_URL es la dirección real del sitio web, y los dos front ends se recompilaron.
• Las fotos y la base de datos están en un almacenamiento que persiste, con copia de seguridad.
• Las fotos escenificadas se aprueban solo cuando están etiquetadas y son honestas.
• Alguien se encarga de las notificaciones y del proceso de respuesta.

Plantilla, desde cero o plataforma alojada

Hay tres caminos realistas para llegar al sitio de una agencia.

Una plantilla como esta

Obtienes el código fuente del sitio web, del panel y de la API, con listados, leads, visitas, roles y escenificación ya funcionando juntos. Es tuyo y puedes cambiarlo. También eres tú quien lo aloja, y lo que a la plantilla le falta, como pagos o correo, es trabajo de desarrollo.

Construirlo desde cero

Obtienes exactamente el producto que diseñas, y lo construyes todo: filtros guardados en la dirección, el editor con fotos ordenadas, el flujo de visitas, los permisos. Es un camino largo para un sitio que muchas agencias necesitan casi igual.

Una plataforma inmobiliaria alojada

Es rápida de lanzar y se ocupa de los servidores por ti. A cambio, hay cuotas recurrentes, menos control sobre el diseño y el flujo, y tus contactos viven en su sistema. Compara antes las condiciones, las tarifas y la compatibilidad con el árabe.

Cuánto cuesta mantenerlo

La plantilla es una compra única, desde $79 solo por el sitio web público. El paquete Full Stack que usamos en este ejemplo cuesta $179, e incluye una licencia comercial y soporte de por vida.

Los costes de funcionamiento quedan fuera de la plantilla:

• Alojamiento para las tres aplicaciones, y un disco persistente o una base de datos MySQL.
• Almacenamiento en un bucket, si envías las subidas a Cloudflare R2 o a un servicio similar.
• Un nombre de dominio.
• Una clave de IA, solo si usas el estudio de escenificación (Google Gemini) o el asistente (Gemini, OpenAI o DeepSeek). Los proveedores facturan según su propia tarifa.

Es gratis: SQLite para desarrollo, las teselas de mapa y la búsqueda de lugares a los que la plantilla apunta por defecto, y los datos de demostración incluidos. No hay ningún proveedor de pagos que pagar, porque el producto no tiene pasarela de cobro.

Qué personalizar después

• Moneda y mercado. La plantilla está configurada para AED y Dubái. Otro mercado es trabajo a medida, porque la moneda, la zona horaria y parte de los textos están pensados para ese mercado.
• Tipos de propiedad y servicios. Cada lista vive en la API y se etiqueta en los dos front ends, así que añadir un valor implica editar las tres aplicaciones.
• Páginas de barrio. Escribe descripciones reales y fotos de portada para cada zona, en los dos idiomas.
• Seguimiento. Añade un id de Google Tag Manager, GA4, Meta, TikTok, Snapchat o Pinterest al .env del sitio web y recompila. El sitio informa de eventos como viewing_request y contact_submit.
• Roles. Crea un rol por cada función, por ejemplo un recepcionista que ve las visitas pero no los listados.
• Agentes de programación. La API ofrece las herramientas del asistente en POST /api/mcp, protegidas por una clave que eliges tú.

Errores comunes

Publicar una propiedad sin revisar su ubicación

Un marcador en la calle equivocada hace que el listado parezca descuidado. Usa el buscador de lugares de la pestaña Ubicación y elige aproximada cuando la dirección exacta sea privada.

Tratar una solicitud de visita como una cita reservada

El sitio avisa a los visitantes de que una solicitud espera confirmación. Si los agentes tardan en confirmar, los visitantes lo notarán. Acordad un plazo de respuesta y vigilad la campana de notificaciones.

Olvidar la etiqueta de IA en las fotos escenificadas

La etiqueta de IA del deslizador está ahí por una razón. No la quites, y no apruebes una foto escenificada de una habitación que en la realidad se ve distinta.

Esperar correos o pagos

La plantilla no envía correo ni cobra pagos. Planifica cómo responderán los agentes, y añade tú mismo un servicio de correo si necesitas confirmaciones automáticas.

Cambiar un .env y no recompilar los front ends

Si el sitio en producción sigue llamando a la API antigua después de cambiar una dirección, recompila. Con Docker Compose, define el valor en el .env junto a docker-compose.yml y ejecuta docker compose up --build.

Preguntas frecuentes

¿Cómo creo un sitio web inmobiliario con Next.js?

Empieza por una plantilla que ya tenga listados, páginas de propiedad, leads y una zona de administración, y configúrala para tu agencia. Necesitas un sitio público, un panel para los agentes y una API que guarde propiedades y consultas. Los pasos de arriba muestran ese camino con Velra.

¿Necesito un backend para un sitio de listados de propiedades?

Sí, porque los listados, las fotos, las consultas y las visitas deben guardarse y gestionarse en algún sitio. La plantilla incluye una API en NestJS con TypeORM que usan ambas aplicaciones, sobre SQLite o MySQL.

¿Puedo usarla para agencias que son clientes míos?

Sí. Incluye una licencia comercial para proyectos ilimitados, que cubre a quienes crean sitios para clientes. Lee la página de licencia en la documentación para ver las condiciones exactas.

¿Admite árabe y RTL?

Sí. El sitio web y el panel funcionan en inglés y en árabe, con el árabe maquetado de derecha a izquierda. Las propiedades se escriben en los dos idiomas.

¿Pueden los visitantes pagar o reservar en línea?

No. Los visitantes solicitan una visita o envían una consulta, y la agencia les da seguimiento. No hay pago en línea, así que la plantilla encaja con agencias que cierran las operaciones fuera de la web.

¿Pueden varias agencias publicar en un mismo sitio?

No. Está pensada para una agencia con un equipo. Un portal para muchas agencias necesitaría funciones nuevas, como cuentas de agencia y facturación.

¿Necesito Docker?

No, pero es la forma más rápida de empezar. Sin Docker necesitas Node.js 22 o superior, Corepack activado y una terminal por aplicación. La API funciona con SQLite, así que no hay que instalar ningún servidor de base de datos.

¿Pueden los visitantes crear cuentas?

No. El sitio web no tiene cuentas. Las viviendas guardadas y la comparación se quedan en el navegador del visitante, y una solicitud de visita solo necesita un nombre, un correo y una hora.

¿Puedo usar MySQL en lugar de SQLite?

Sí, con un cambio de configuración. Crea una base de datos vacía, define el controlador y la conexión en el .env de la API, y ejecuta la carga inicial o la creación de tablas antes del primer arranque en producción.

¿Es opcional la etiqueta de las fotos escenificadas?

No. La página de la propiedad muestra las habitaciones escenificadas con una etiqueta clara que indica que están generadas con IA, y conviene mantenerla.

Pruébalo tú mismo

Busca viviendas en el sitio web público en vivo y abre después la demo del panel de la agencia para ver cómo llega una solicitud. La documentación de Velra cubre cada ajuste mencionado aquí, y la página del producto lista los paquetes. Para otras opciones, explora la categoría de plantillas inmobiliarias. Velra es además una de las diez plantillas del paquete de plantillas Next.js.