Cómo crear una web de reservas de alquiler vacacional con Next.js

Esta guía muestra cómo crear una web de alquiler vacacional con reserva directa en Next.js: un sitio público donde los huéspedes eligen noches libres y pagan, un panel donde el anfitrión gestiona el calendario y una API que mantiene todas las fechas coherentes. Usamos la plantilla Hollina como base y seguimos a un anfitrión de ejemplo desde la instalación hasta el lanzamiento.

La reserva directa depende sobre todo de la confianza en el calendario. Si la web muestra una noche como libre y el panel dice que está ocupada, pierdes al huésped y la tarde. Por eso los pasos siguientes dedican más tiempo a la disponibilidad, los pagos y la primera semana tras el lanzamiento, y menos a la decoración.

El encargo

Larch Ridge Cabins es un anfitrión pequeño con seis cabañas y casitas, gestionado por un equipo de tres personas. Hoy recibe reservas por teléfono y a través de un portal de anuncios, y quiere tener también su propia web. El proyecto debe:

• Permitir que un huésped busque alojamientos por destino, fechas, número de personas y tipo de alojamiento.
• Mostrar cada alojamiento con fotos, comodidades, normas de la casa, reseñas y un calendario de noches libres.
• Calcular el precio antes del pago: tarifa por noche, tarifa de limpieza y total.
• Aceptar pagos con tarjeta y PayPal, y permitir pagar a la llegada a quien lo prefiera.
• Evitar las reservas duplicadas, pero dejar que un huésped llegue el día en que otro se va.
• Dejar que el anfitrión bloquee noches por reparaciones y vea de un vistazo las llegadas y salidas.
• Funcionar en inglés y en árabe, porque algunos huéspedes navegan en árabe.

Una restricción más, que debe figurar en cualquier encargo honesto: la plantilla calcula el precio de una estancia con una sola tarifa por noche y una sola tarifa de limpieza, y trabaja con una moneda (dólares estadounidenses) y una zona horaria (America/New_York). Larch Ridge es un negocio de la costa este de Estados Unidos, así que le encaja. Si tu negocio necesita tarifas por temporada u otra moneda, cuenta con desarrollo a medida.

Cómo cubre la plantilla el encargo

Necesidad	Dónde está	Qué usas
Buscar y filtrar alojamientos	Web de alojamientos	La lista de alojamientos en /en/stays, con los filtros guardados en la dirección
Noches libres y presupuesto al instante	Web y API	El calendario de dos meses y la tarjeta de reserva en cada página de alojamiento
Sin reservas duplicadas	API	Un único servicio de disponibilidad que usan el calendario, el pago y el panel
Tarjeta, PayPal o pago a la llegada	API y panel	Las claves de Stripe y PayPal en el .env de la API, y el interruptor de pago a la llegada en Ajustes, Pagos
Fechas bloqueadas y reservas	Panel de reservas	La página Calendario con el cuadro de bloqueo de fechas, y la página Reservas
Preguntas y reseñas de huéspedes	Web y panel	El cuadro de preguntas y el formulario de contacto que llegan a Consultas; Reseñas para publicar u ocultar
Inglés y árabe	Las tres apps	Rutas /en y /ar, archivos de mensajes, editor de alojamientos bilingüe

Antes de empezar: decisiones que tomar

Las webs de reservas fallan cuando las reglas del negocio son vagas. Decide esto primero.

• Qué paquete. Full Stack para un negocio nuevo. Un único front end necesita una API en algún lugar.
• Dónde se ejecuta. Un servidor Node para tres apps, 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).
• Idiomas. Cada alojamiento se escribe en inglés y en árabe. Para publicar hacen falta ambos, así que alguien tiene que redactar el texto en árabe.
• Pagos. Stripe, PayPal, pago a la llegada o una mezcla, con cuentas que pertenezcan al negocio. El dinero va a esas cuentas, no pasa por la plantilla.
• Reglas de precio. Una tarifa por noche, una tarifa de limpieza y una estancia mínima por cabaña. Las tarifas por temporada, los códigos de descuento y la sincronización de calendarios con otros portales no están incluidos.
• Quién gestiona el panel. Decide quién es Super Admin, quién es gestor y si una persona de limpieza necesita un rol propio.
• Cómo reciben respuesta los huéspedes. La API no envía correos, así que decide quién responde a las preguntas y desde qué bandeja de entrada.

Paso a paso

Paso 1: Elige el paquete

Hollina se ofrece como paquete Full Stack (web, panel y API) y como tres paquetes por separado. La web y el panel no guardan datos propios, así que cada uno necesita la API detrás. Para un negocio nuevo, elige el paquete Full Stack y mantén todo en una sola carpeta.

Las piezas por separado tienen sentido para agencias que ya alojan una API, o para un anfitrión que solo quiere la web de alojamientos o solo el panel de reservas. Algo que conviene saber antes de decidirte: la plantilla está pensada para una sola empresa anfitriona. No es un marketplace donde muchos propietarios publican sus propiedades.

Comprueba antes de seguir

Sabes decir qué ZIP descargaste y qué apps contiene. Si es un único front end, sabes dónde se ejecutará su API.

Qué suele salir mal

Un front end solo no muestra nada sin su API, porque ninguna de las dos apps guarda datos propios.

Paso 2: Ejecútala en local con Docker

Instala Docker Desktop, descarga tu ZIP desde Mis plantillas, descomprímelo y abre una terminal en la carpeta hollina-vacation-rental-full-stack. Después ejecuta:

docker compose up --build

El primer arranque construye tres imágenes y crea una empresa de demostración, así que tarda unos minutos. Después tienes la web de alojamientos en http://localhost:3030, el panel de reservas 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.

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

El panel tiene dos cuentas de demostración: admin@hollina.example con la contraseña Admin@123, y manager@hollina.example con Manager@123. La web no tiene cuentas. Los huéspedes se identifican con una referencia de reserva y el correo con el que reservaron.

Dedica una hora a los datos de demostración antes de borrar nada. El seed incluye 14 alojamientos, 60 reservas repartidas a lo largo del año, rangos bloqueados, preguntas de huéspedes y reseñas, y mantiene sus fechas relativas al día en que arrancas, así que una base de datos nueva siempre tiene a alguien por llegar. Reserva un alojamiento como huésped, luego busca esa reserva en el panel y hazla avanzar.

Observa el camino desde la página de un alojamiento hasta una reserva, que es el recorrido que debes ensayar como huésped.

Cuidado con docker compose down -v: también borra el volumen hollina-data, así que el siguiente arranque trae una empresa de demostración nueva y todo lo que hayas introducido desaparece.

Comprueba antes de seguir

Las tres direcciones responden, reservaste un alojamiento de demostración como huésped y encontraste esa reserva en el 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": cambia el puerto de la app con las variables de puerto de arriba. En un arranque nuevo, una pestaña de la página de alojamiento que dice solo "Alojamiento" es inofensiva dentro de Docker, y el stack completo ya define la dirección interna de la API que lo corrige. Sin Docker, recuerda que las apps esperan Node.js 22 o superior y que responde Yarn 1.22 hasta que ejecutes corepack enable.

Paso 3: Pon los datos de la empresa

Algunos datos son código y otros son contenido. Los de código están en la carpeta de la web:

• storefront/src/config/brand.config.ts contiene el nombre del sitio y los metadatos.
• storefront/src/config/booking.config.ts contiene los valores de respaldo de zona horaria y moneda.
• storefront/src/styles/theme-variables.css contiene los colores como tokens, con un valor claro y uno oscuro. Cambia los dos, o un tema conservará el color antiguo de la marca.
• storefront/public/brand/ contiene el logotipo, y las fotografías propias del anfitrión para el sitio (portada, pasos de cómo funciona, tarjeta de contacto) están en la carpeta de la API, en public/media/hollina/site/.

Busca Hollina en messages/ y reescribe esas líneas en inglés y en árabe. Los datos de contenido se editan en el panel, en Ajustes, pestaña Empresa: el nombre de la empresa, el eslogan y la descripción en ambos idiomas, los datos de contacto y las horas de entrada y salida por defecto. Después abre la página de privacidad. Su texto es un marcador de posición, señalado como tal en la propia página, así que reescríbelo para tu empresa y tu país y quita esa señal.

Comprueba antes de seguir

Los títulos de las pestañas, el pie de página y los encabezados muestran Larch Ridge en ambos idiomas, y los dos temas se leen bien con los colores nuevos.

Qué suele salir mal

Un color cambiado en un solo tema, o una frase reescrita en inglés sin la línea equivalente en el archivo de mensajes en árabe. La página de privacidad es el olvido clásico.

Paso 4: Añade destinos y alojamientos

Crea primero los destinos (Ajustes, Destinos), porque cada alojamiento pertenece a uno. Larch Ridge usa dos: la orilla del lago y la cresta. Después añade cada alojamiento desde la página Alojamientos. El editor guarda el título y las descripciones en pestañas de inglés y árabe, el tipo de alojamiento (cabaña, casita, chalet, etc.), la capacidad, la tarifa por noche, la tarifa de limpieza, las noches mínimas, las comodidades, las normas de la casa y las fotos.

Algunas reglas del editor importan para planificar:

• Todo alojamiento nuevo es un borrador. Un borrador responde como no encontrado en el sitio público hasta que lo publicas.
• Para publicar hacen falta tres fotografías y los dos idiomas.
• Las fotos las subes y las ordenas tú. La primera es la foto de la tarjeta y de la portada.
• La tarifa es un número entero de dólares estadounidenses. El presupuesto multiplica la tarifa por las noches y suma la tarifa de limpieza una sola vez.

Cuando los alojamientos estén cargados, elige el alojamiento de la portada de la página de inicio y los cuatro alojamientos destacados en Ajustes, Página de inicio. Empieza con los pocos alojamientos que puedas fotografiar bien, en lugar de los seis a la vez.

Comprueba antes de seguir

Publica un alojamiento y ábrelo como huésped en una ventana privada. Luego intenta publicar un segundo alojamiento con un solo idioma rellenado, para ver la comprobación que te lo impide.

Qué suele salir mal

Las fotos del alojamiento no cargan. Sus direcciones se construyen a partir de PUBLIC_MEDIA_URL, que debe llegar a la API desde el navegador del huésped. Recuerda también que el panel no tiene botón para eliminar alojamientos, así que deja de publicarlos.

Paso 5: Entiende cómo funcionan las noches

La lógica del calendario es el corazón de una web de reservas, y esta es fácil de razonar. Una reserva cubre las noches desde la entrada hasta la salida, sin incluir esta última. Si un huésped se va el día 10, el siguiente puede llegar ese mismo día, y tres noches son tres noches, no cuatro.

El presupuesto y el pago aplican las mismas cuatro comprobaciones: la fecha de entrada no ha pasado, la estancia cumple las noches mínimas, el grupo cabe en la capacidad y ninguna de las noches está ocupada. El pago las repite al escribir la reserva, de modo que dos huéspedes no pueden pagar la misma noche. Una reserva a la espera de pago retiene sus fechas durante 30 minutos y después caduca.

El calendario del panel muestra cada reserva como una barra a lo largo de sus noches. Para cerrar una cabaña por reparaciones, abre el cuadro de bloqueo de fechas, elige mantenimiento, uso de la empresa u otro, y añade una nota. Si el rango choca con una reserva o con un bloqueo anterior, el cuadro lo rechaza y muestra con cuál.

Fíjate en las opciones de motivo y en el campo de nota del cuadro que cierra una cabaña por reparaciones.

Comprueba antes de seguir

Reserva la misma cabaña dos veces para noches que se solapan y confirma que el segundo intento se rechaza con un mensaje que dice que esas noches están ocupadas. Bloquea un rango y luego intenta reservar a través de él.

Qué suele salir mal

La gente espera que un huésped que sale el día 10 bloquee el día 10. No lo hace: ese día queda libre para quien llegue después. Otra sorpresa es la estancia mínima, que también limita los días de salida que ofrece el calendario.

Paso 6: Configura los pagos y apaga el simulador

Una instalación nueva no tiene procesador de pagos, así que un simulador incluido da por liquidada cada reserva con tarjeta o PayPal sin cobrar dinero. El pago muestra "Modo de prueba: no se cobra ninguna tarjeta", y un número de tarjeta que termina en 0 falla a propósito, para que veas el camino del error. Es útil mientras construyes y peligroso si lo olvidas. Cuando Stripe o PayPal están configurados, el simulador se apaga solo.

Para Stripe, define una clave secreta de prueba (sk_test_) como STRIPE_SECRET_KEY en el .env de la API. Cuando la API esté en un servidor, añade en Stripe un endpoint de webhook cuya dirección sea la dirección pública de tu API más:

/api/webhooks/payments/stripe

Suscríbelo a checkout.session.completed, payment_intent.payment_failed, charge.refunded y charge.dispute.created, y pon su secreto de firma en STRIPE_WEBHOOK_SECRET. Si omites ese secreto, la API rechaza todos los webhooks de Stripe y ninguna reserva con tarjeta llega a liquidarse. Después reserva un alojamiento en el navegador con la tarjeta de prueba 4242 4242 4242 4242.

Observa las opciones de pago y la política de cancelación que aparecen junto al resumen de noches.

Para PayPal, define PAYPAL_CLIENT_ID, PAYPAL_CLIENT_SECRET y PAYPAL_WEBHOOK_ID; PAYPAL_ENV se queda en sandbox hasta que salgas en producción. El pago a la llegada no necesita clave. Es un interruptor en Ajustes, Pagos, y la misma pestaña guarda la política de cancelación que leen los huéspedes, en ambos idiomas.

Comprueba antes de seguir

Reserva con la tarjeta de prueba de Stripe, luego confirma que la reserva pasa a pagada en el panel y que la página de la reserva del huésped deja de decir que se está confirmando el pago.

Qué suele salir mal

Una reserva pagada se queda pendiente. La página de la reserva espera al webhook, así que revisa la dirección del endpoint, el secreto de firma y reinicia la API. Pasados 30 minutos la retención sin pagar termina y un proceso automático cancela la reserva como caducada.

Paso 7: Añade al equipo y limita lo que ve cada persona

No hay página de registro. Las dos cuentas del panel vienen del seed: un Super Admin con los 32 permisos y un Manager con todo salvo administradores, roles y ajustes de la empresa. Crea cuentas reales en Gestión de administradores y después cambia las contraseñas de demostración, o elimina las cuentas del seed, antes de que alguien ajeno a tu equipo pueda llegar al panel.

Para Larch Ridge, añade un rol para la persona de limpieza, que solo necesita el calendario. En Roles de administrador, crea un rol solo con los permisos del calendario y asígnaselo a esa persona. El asistente respeta los mismos permisos, así que quien no tenga derecho a editar reservas tampoco puede cancelar una desde el chat.

Comprueba antes de seguir

Inicia sesión como gestor y confirma que faltan las páginas de administradores y roles. Inicia sesión con el rol de limpieza y confirma que solo aparece el calendario.

Qué suele salir mal

Nadie eliminó las contraseñas del seed. El rol Manager tampoco puede editar los ajustes de la empresa, así que el propietario debe hacer los cambios de la pestaña Pagos.

Paso 8: Planifica el lado del huésped después de la reserva

Aquí es donde la reserva directa se distingue de un portal de anuncios, y conviene decidirlo antes del lanzamiento. La API no envía correos. Tras el pago, el huésped ve la página de la reserva con un número de referencia, y la vuelve a encontrar en la página Buscar mi reserva con la referencia y el correo usado. Las preguntas del formulario de contacto y de la página del alojamiento llegan como consultas al panel, con una notificación en la campana, y el equipo responde desde su propio correo.

Fíjate en la referencia de la reserva, que el huésped necesita después para volver a encontrarla.

Los huéspedes pueden cancelar desde la página de su reserva mientras falten al menos siete días para la entrada. Una reserva pagada pasa entonces a reembolso pendiente, y el anfitrión hace el reembolso en el panel de Stripe o de PayPal. Las reseñas solo funcionan para estancias completadas, una por reserva, y el equipo puede ocultar o publicar cada una.

El asistente es opcional. Con una clave de Google Gemini en GOOGLE_API_KEY, el chat del panel responde preguntas como qué cabañas están libres el próximo fin de semana y, si se lo pides, puede bloquear fechas o hacer avanzar una reserva. Sin clave, dice que no está conectado, no se factura nada y todo lo demás funciona. Google cobra Gemini según su propia tarifa, que figura en la página de precios de Gemini.

Observa el gráfico que dibuja el asistente cuando la pregunta es sobre una tendencia.

Comprueba antes de seguir

Encuentra tu propia reserva de prueba con su referencia y su correo, cancela una que esté a más de siete días y envíate una pregunta desde la página de un alojamiento para ver cómo llega como consulta.

Qué suele salir mal

Un formulario rechaza un envío. Los formularios admiten cinco de cada tipo por dirección en diez minutos y llevan un campo oculto contra bots, así que una racha de pruebas desde un solo portátil puede bloquearte un rato.

Paso 9: Pruébala en el móvil, en los dos idiomas

Recorre todo el camino como huésped en un móvil real: busca, abre un alojamiento, elige noches, revisa el presupuesto, reserva, paga con la tarjeta de prueba de Stripe y abre la página de la reserva. En el móvil, una barra de reserva queda fija al pie de la página del alojamiento, así que desplázate por una página larga y por una corta para comprobarla. Luego haz lo mismo en árabe, en /ar.

Fíjate en la barra de reserva de la parte inferior, que mantiene el precio y el siguiente paso al alcance.

Prueba a propósito los casos incómodos: noches que ya están ocupadas, menos noches que el mínimo, un grupo más grande de lo que admite la cabaña y un pago que falla. En el panel, confirma que la reserva aparece en el calendario y luego confírmala, registra la llegada y complétala. Una reserva con pago a la llegada se marca como pagada al registrar la llegada.

Comprueba antes de seguir

Guarda una lista de pruebas corta y ejecútala en un móvil y en un portátil: buscar, presupuesto, reservar, pagar, encontrar la reserva, cancelarla y valorar una estancia completada.

Qué suele salir mal

La página del alojamiento muestra un error de mapa en lugar del mapa. El mapa usa OpenFreeMap por defecto, que necesita acceso a internet y no promete disponibilidad. Define NEXT_PUBLIC_MAP_STYLE_LIGHT con otro estilo de MapLibre si necesitas un nivel de servicio.

Paso 10: Sal a producción

La documentación cubre tres formas de desplegar: un servidor con Docker Compose, cada app desde su propio Dockerfile en un servicio como Railway o Render, o Node.js a secas. Para un anfitrión pequeño, un servidor con Docker Compose es lo más sencillo. Pon las tres direcciones públicas en un .env junto a docker-compose.yml (SITE_URL, ADMIN_URL y API_URL), y de ellas se construyen los orígenes permitidos, las direcciones de las fotos y los ajustes del front end. Usa un proxy inverso para HTTPS.

La lista de comprobación antes del primer huésped real:

• Construye la web y el panel con direcciones públicas. NEXT_PUBLIC_API_BASE_URL se compila dentro del JavaScript, así que un cambio exige reconstruir.
• Define NODE_ENV=production, tu propio JWT_SECRET y CORS_ORIGIN. La API los comprueba antes de arrancar.
• Define SITE_URL con la dirección por la que navegan los huéspedes, porque el procesador de pagos devuelve a los huéspedes allí.
• Pon el archivo SQLite y las subidas en un disco que sobreviva a los despliegues, o cambia a MySQL más un bucket.
• En un servidor con NODE_ENV=production, crea primero las tablas con yarn seed:prod o yarn db:sync:prod, después de yarn build. Usa la opción de tablas vacías para una empresa real.
• Cambia las claves de prueba de Stripe y PayPal por claves reales, y registra el webhook real. Detrás de un proxy, reenvía el cuerpo del webhook sin tocarlo, o la firma no coincidirá.

No ejecutes nunca yarn setup:fresh ni yarn db:reset en una empresa en producción. Ambos borran todas las tablas. Por último, haz una pequeña reserva real en una fecha tranquila y cancélala, para haber visto moverse dinero real en los dos sentidos.

Comprueba antes de seguir

En una ventana privada, reserva un alojamiento real pequeño en una fecha tranquila, confirma que el webhook lo marca como pagado, luego cancélalo y reembólsalo desde el panel del procesador.

Qué suele salir mal

Las páginas muestran "Something went wrong" y la consola menciona CORS: añade las dos direcciones reales a CORS_ORIGIN. Todos los visitantes reciben errores "Too many" detrás de un proxy: define TRUST_PROXY. Las fotos fallan cuando NEXT_PUBLIC_MEDIA_HOSTNAME no nombra su servidor.

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

Esta es una semana normal del equipo de Larch Ridge, usando solo pantallas que el panel ya tiene.

Una mañana en el panel

El resumen muestra la ocupación y los ingresos del mes en curso, quién llega y quién se va hoy, las reservas que necesitan una decisión, un año de ingresos y las reservas más recientes. Empieza por lo que está esperando.

Fíjate en las llegadas y salidas de hoy, que le dicen a la persona de limpieza y al anfitrión lo que trae el día.

Después abre Reservas. Las pestañas de estado con su recuento, un cuadro de búsqueda por referencia o nombre del huésped y un rango de fechas de entrada mantienen la lista manejable. Abre una reserva para ver la cronología y las acciones que permite su estado: confirmar, registrar la llegada, completar o cancelar, y se muestra el motivo cuando un paso no está disponible.

Fíjate en los botones que se ofrecen para esta reserva y en el motivo que se muestra en los que no están disponibles.

El calendario y las consultas

El calendario dibuja cada reserva como una barra a lo largo de sus noches, coloreada según el estado, y las fechas bloqueadas aparecen a su lado. Ábrelo antes de prometer una fecha por teléfono.

Fíjate en cómo una reserva abarca solo sus noches, de modo que el día de salida queda visiblemente libre para una llegada.

Las consultas tienen su propia página. Cada una se abre junto a la lista y muestra el alojamiento y las fechas por los que preguntó el huésped, el número de personas y una nota privada. Márcala como respondida o cerrada sobre la marcha.

Fíjate en el estado de cada consulta, que evita que el equipo responda dos veces la misma pregunta.

Tareas semanales

• Publica u oculta las reseñas nuevas y observa cómo cambia la valoración de cada alojamiento.
• Revisa el registro de fechas bloqueadas y quita las que ya han pasado.
• Renueva los alojamientos destacados y las preguntas de la página de inicio en Ajustes, Página de inicio.
• Pregunta al asistente qué cabañas están libres el próximo fin de semana o cómo se comparan los ingresos mes a mes.
• Haz una copia de seguridad de la base de datos y de las subidas, y guarda otra copia en otro lugar.

Un plan de lanzamiento de ejemplo, semana a semana

Este es un calendario de ejemplo para Larch Ridge, no una promesa de lo que tardará tu proyecto.

• Semana 1, cimientos. Ejecuta el stack con Docker, reserva un alojamiento de demostración, toma las decisiones de arriba y empieza con la marca y la página de privacidad.
• Semana 2, alojamientos. Añade los destinos y las primeras cabañas en ambos idiomas con fotos, define tarifas y noches mínimas, y prueba el bloqueo de fechas.
• Semana 3, dinero y personas. Conecta Stripe y PayPal en modo de prueba, redacta la política de cancelación, crea el equipo y prueba en móviles y en árabe.
• Semana 4, salida a producción. Despliega, cambia a claves reales, reserva y reembolsa una estancia real, y abre el sitio primero a antiguos huéspedes.

Lista de comprobación del lanzamiento

• El nombre de la empresa, los datos de contacto, el texto de privacidad y la política de cancelación son tuyos, en ambos idiomas.
• Cada alojamiento publicado tiene tres o más fotos, ambos idiomas, una tarifa, una tarifa de limpieza y una estancia mínima.
• Las contraseñas de demostración están cambiadas o las cuentas del seed están eliminadas.
• Las claves de Stripe o PayPal son reales, el webhook entrega y la pestaña Pagos ya no dice que se usa el simulador.
• NODE_ENV es production, JWT_SECRET es tuyo y CORS_ORIGIN enumera las direcciones reales.
• SITE_URL es la dirección por la que navegan los huéspedes.
• Los dos front ends se reconstruyeron con la dirección real de la API.
• La base de datos y las subidas están en un almacenamiento persistente, con copia de seguridad.
• Alguien es responsable de la bandeja de entrada donde se responden las preguntas de los huéspedes.
• Se hizo una reserva real, se canceló y se reembolsó.

Plantilla, desde cero o plataforma alojada

Tienes tres caminos realistas hacia una web de reserva directa.

Una plantilla como esta

Obtienes el código fuente de la web, el panel y la API, con la disponibilidad, los presupuestos, los pagos y los webhooks ya funcionando juntos. Es tuya y puedes cambiarla. También tienes que alojarla, y lo que le falta a la plantilla, como los correos, las tarifas por temporada o la sincronización de calendarios con otros sitios, es trabajo de desarrollo.

Crearla desde cero

Obtienes un producto hecho justo a la medida de tu negocio, y construyes tú las partes difíciles: la lógica de noches que se solapan, las retenciones de reservas sin pagar, un manejo de webhooks que confirme un pago una sola vez, los reembolsos. Es un camino largo, salvo que tus reglas sean poco habituales.

Una plataforma de reservas alojada

Es rápida de poner en marcha y a menudo incluye herramientas de canales. A cambio hay cuotas recurrentes, menos control sobre la experiencia del huésped y los datos de tus huéspedes en su sistema. Revisa antes las condiciones, las tarifas y el soporte de árabe.

Muchos anfitriones mantienen los portales de anuncios por el alcance y añaden una web directa para conservar a los huéspedes que repiten. Si haces las dos cosas, recuerda que esta plantilla no sincroniza calendarios con otros sitios, así que los bloqueos hay que replicarlos a mano.

Cuánto cuesta mantenerla

La plantilla es una compra única, desde $79 solo por la web de alojamientos. El paquete Full Stack que usamos aquí cuesta $179, con licencia comercial y soporte de por vida.

Además de eso, pagas por:

• Un servidor o servicios de alojamiento para la API, la web y el panel, más un disco persistente o una base de datos MySQL.
• El almacenamiento de fotos, si usas un bucket como Cloudflare R2 en lugar del disco de la API.
• Las comisiones de Stripe y PayPal, que se cobran según sus propias páginas de precios (consulta los precios de Stripe). El dinero va a tus propias cuentas y la plantilla nunca lo retiene.
• Una clave de Google Gemini, solo si activas el asistente.
• Un nombre de dominio.

Gratis: ejecutarla en local con SQLite, el simulador de pagos, el pago a la llegada y el mapa de la página del alojamiento, que usa estilos de OpenFreeMap que no necesitan clave.

Qué personalizar después

• Destinos y la página de inicio. Añade portadas de destino y reescribe las preguntas de la página de inicio en ambos idiomas desde Ajustes.
• Tipos de alojamiento. Los seis tipos de alojamiento (villa, apartamento, cabaña, chalet, loft y casita) tienen sus propios iconos en public/icons/stay-types/.
• Seguimiento. Añade un id de Google Tag Manager, GA4, Meta, TikTok, Snapchat o Pinterest en el .env de la web.
• Política de cancelación. Edita el texto en ambos idiomas para que coincida con lo que vas a cumplir.

Errores comunes

Dejar el simulador encendido

El simulador confirma reservas que nunca se pagaron. Configura Stripe o PayPal antes de que el sitio sea público y comprueba después que la pestaña Pagos ya no dice que se usa el simulador.

Olvidar el secreto del webhook de Stripe

Si un pago con tarjeta se completa en Stripe pero la reserva sigue pendiente, el webhook no está llegando o falta su secreto. La reserva mantiene sus noches retenidas durante 30 minutos, y después un proceso en segundo plano la cancela como caducada.

Esperar tarifas por temporada o impuestos

Cada alojamiento tiene una única tarifa por noche. No existen las tarifas por temporada, las tarifas de fin de semana, los impuestos ni las comisiones de servicio. Si tus precios son más complicados, decide pronto si ampliar la lógica del presupuesto o simplificar los precios.

Esperar correos automáticos

La API no envía correo, así que los huéspedes solo ven lo que ocurre en la página. Planifica cómo escribirá el equipo a los huéspedes, y dilo en la web.

Preguntas frecuentes

¿Cómo creo una web de alquiler vacacional con Next.js?

Parte de una plantilla que ya gestione la disponibilidad, los precios y los pagos, y luego configúrala para tus propiedades. Una web de reserva directa necesita un sitio público, un panel para el anfitrión y una API que sea la única fuente de verdad de las fechas. Los pasos de arriba lo recorren con Hollina.

¿Necesito un backend?

Sí. Las fechas libres, los precios y la confirmación del pago tienen que decidirse en un servidor. La plantilla incluye una API de NestJS con TypeORM, que usan tanto la web como el panel.

¿Cómo evita las reservas duplicadas?

Un único servicio de disponibilidad decide qué noches están libres para el calendario, el presupuesto, el pago y el panel, y el pago vuelve a comprobarlo al escribir la reserva. Las reservas sin pagar retienen sus noches durante 30 minutos.

¿Puedo usarla para clientes?

Sí. Incluye una licencia comercial para proyectos ilimitados. Consulta la página de licencia en la documentación para ver las condiciones exactas.

¿Admite árabe y RTL?

Sí. La web y el panel están en inglés y árabe, y el árabe refleja todo el diseño. Los alojamientos se escriben en ambos idiomas, y los precios y las fechas mantienen los dígitos latinos.

¿Pueden varios propietarios publicar propiedades en ella?

No. Está pensada para una sola empresa anfitriona, con un solo conjunto de alojamientos, un solo equipo y una sola cuenta de pagos. Un marketplace exigiría trabajo adicional.

¿Qué métodos de pago pueden usar los huéspedes?

Tarjeta mediante el Checkout alojado de Stripe, PayPal y pago a la llegada mientras ese interruptor esté activado. El pago alojado hace que ningún número de tarjeta llegue a tu servidor.

¿Pueden reservar los huéspedes sin crear una cuenta?

Sí. La web no tiene cuentas de huésped. El huésped reserva con un nombre y un correo, y luego vuelve a encontrar la reserva con su referencia y ese correo.

¿Se sincroniza con otros portales de anuncios?

No. La sincronización de canales no está incluida, así que, si también publicas en otros sitios, tienes que replicar tú las fechas bloqueadas y las reservas o construir la sincronización.

Pruébala tú mismo

Reserva un alojamiento en la web de alojamientos en vivo y luego abre la demo del panel de reservas para ver cómo llega. La demo usa el modo de prueba de Stripe: paga con la tarjeta de prueba de Stripe y no se mueve dinero. La documentación de Hollina cubre cada ajuste de esta guía, y la página del producto enumera los paquetes. Explora proyectos similares en la categoría de plantillas full stack. Hollina es además una de las diez plantillas del Next.js Templates Bundle.