Comment créer le site d’une agence immobilière avec Next.js

Ce guide montre comment créer le site web d’une agence immobilière en Next.js, avec des annonces de biens, un tableau de bord d’administration pour les agents et une API qui relie les deux. Nous partons du template Velra et suivons une agence fictive de la première installation jusqu’au lancement.

Un site immobilier a un seul travail : transformer un visiteur qui navigue en une demande qu’un agent peut traiter. Les étapes se concentrent donc sur le parcours de l’annonce au contact, puis sur la façon dont l’équipe traite ce contact, en gardant la configuration au strict minimum. Si vous créez le site pour une agence cliente, le même ordre fonctionne.

Le cahier des charges

Sandstone Realty est une petite agence de Dubaï avec cinq agents. Elle vend et loue des appartements, des villas et des maisons de ville, et la plupart de ses demandes viennent de personnes qui naviguent sur mobile, en anglais ou en arabe. Le nouveau site doit :

• Proposer des biens à acheter et à louer, filtrés par quartier, type, budget, nombre de chambres et équipements.
• Donner à chaque bien une page avec des photos, des informations, une description et un emplacement sur une carte.
• Permettre aux visiteurs d’enregistrer des biens et d’en comparer quelques-uns côte à côte sans créer de compte.
• Recueillir des demandes de visite à l’horaire souhaité, et laisser un agent les confirmer ou les refuser.
• Donner aux agents un tableau de bord pour ajouter et publier des annonces, traiter les demandes et gérer les visites.
• Afficher des photos mises en scène de pièces vides, clairement signalées comme générées par IA.
• Fonctionner en anglais et en arabe, avec les pages arabes de droite à gauche.

Deux faits cadrent l’exemple. Le template affiche les prix en dirhams des Émirats (AED) et utilise le fuseau horaire Asia/Dubai, et c’est un site de génération de contacts : il n’y a ni étape de paiement ni envoi d’e-mails. Sandstone est à Dubaï, donc les deux lui conviennent.

Comment le template couvre le cahier des charges

Besoin	Où ça se trouve	Ce que vous utilisez
Annonces avec filtres	Site public	La page des biens, avec filtres et tri conservés dans l’adresse
Pages de biens	Site web et API	Galerie, informations, équipements, quartier et biens similaires
Biens enregistrés et comparaison	Site web	Page des favoris et page de comparaison, toutes deux conservées dans le navigateur du visiteur
Demandes de visite	Site web et tableau de bord	La fenêtre de visite de chaque bien, et la page Visites
Ajouter et publier des annonces	Tableau de bord de l’agence	Liste des biens et éditeur avec onglets en anglais et en arabe, photos ordonnées et statuts
Demandes des visiteurs	Tableau de bord	La page Leads, avec un statut et une note sur chaque demande
Photos de pièces mises en scène	Tableau de bord et site web	Le studio de mise en scène, et le curseur avant et après sur la page d’un bien
Anglais et arabe	Les trois applications	Routes /en et /ar, fichiers de messages, éditeur de biens bilingue

Avant de commencer : les décisions à prendre

Un site d’annonces vaut ce que valent les décisions qui le fondent. Réglez ces points d’abord.

• Quel package. Full Stack pour une nouvelle agence. Un front end seul a besoin d’une API quelque part.
• Où il tourne. Un hébergeur Node pour trois applications, une base de données (SQLite sur un disque persistant, ou MySQL) et un endroit pour les photos (un dossier persistant ou un bucket comme Cloudflare R2).
• Le marché. Le template est réglé sur l’AED et le fuseau Asia/Dubai, avec des formulations propres à Dubaï dans certains messages. Un autre marché demande des modifications.
• Les langues. Chaque bien est rédigé en anglais et en arabe, donc prévoyez qui écrit et qui relit l’arabe.
• Les outils d’IA. La mise en scène demande une clé Google Gemini. L’assistant fonctionne avec une clé Gemini, OpenAI ou DeepSeek. Décidez si vous utilisez l’un ou l’autre, et qui paie le fournisseur.
• Comment les contacts reçoivent une réponse. Il n’y a ni service d’e-mail ni service de paiement, donc décidez qui surveille les notifications et qui répond, depuis quelle boîte mail ou quel téléphone.
• Qui a quel rôle. Le propriétaire, les agents, et toute personne qui a besoin d’un rôle restreint, comme un photographe.
• Ce qui compte comme une annonce. Convenez de la façon de traiter les biens vendus, loués et archivés avant d’en avoir cinquante.

Étape par étape

Étape 1 : Choisir le package

Velra se vend sous quatre formes : Full Stack, le site web public seul, le tableau de bord de l’agence seul et l’API backend seule. Le site web et le tableau de bord n’ont pas de données propres, et tous deux lisent dans l’API. Une nouvelle agence a donc besoin du package Full Stack, qui réunit les trois applications dans un seul dossier.

Les packages séparés conviennent à d’autres cas. Une agence qui a déjà une API, ou un développeur qui veut remplacer un des côtés, peut prendre séparément le site web public ou le tableau de bord de l’agence. Gardez en tête la forme du produit : il sert une seule agence, ce n’est pas un portail où plusieurs agences publient leurs propres annonces.

À vérifier avant de continuer

Vous savez quel ZIP vous avez et quelles applications il contient, et où l’API tournera si vous n’avez qu’un front end.

Ce qui se passe mal le plus souvent

Un front end seul n’affiche rien sans l’API, car aucune des deux applications ne détient ses propres données.

Étape 2 : Le lancer en local avec Docker

Installez Docker Desktop, téléchargez le ZIP depuis Mes templates, extrayez-le et ouvrez un terminal dans le dossier velra-real-estate-full-stack. Lancez ensuite les trois applications :

docker compose up --build

Aucune configuration n’est nécessaire pour ce premier lancement. Il construit trois images et charge une agence de démonstration dans la base de données, donc prévoyez quelques minutes. Le site web public s’ouvre sur http://localhost:3030 (l’arabe sur /ar), le tableau de bord de l’agence sur http://localhost:3031 et l’API sur http://localhost:8000. Si un port est occupé, ajoutez SITE_PORT, ADMIN_PORT ou API_PORT dans un fichier .env à côté de docker-compose.yml et relancez la commande.

Connectez-vous au tableau de bord avec admin@velra.example et Admin@123, ou en tant qu’agent avec agent@velra.example et Agent@123. Le site web n’a aucune connexion.

L’agence de démonstration compte 17 biens (15 publiés, 2 brouillons), 6 quartiers, 2 pièces mises en scène approuvées, 5 demandes et 8 demandes de visite. Parcourez d’abord le site comme un visiteur, envoyez-vous une demande de visite, puis ouvrez Visites dans le tableau de bord en tant qu’agent. Cette seule boucle montre tout le produit en deux minutes.

Sur cette capture de la vidéo d’installation, regardez la commande unique qui lance les trois applications.

Regardez la pièce vide à côté de sa version meublée par IA, la comparaison que les visiteurs voient sur la page d’accueil.

Pour arrêter, appuyez sur Ctrl+C. Vos données vivent dans le volume velra-data, et docker compose down -v le supprime, après quoi le prochain démarrage charge une nouvelle agence de démonstration.

À vérifier avant de continuer

Les trois adresses répondent, vous vous êtes envoyé une demande de visite et vous l’avez vue sous Visites dans le tableau de bord.

Ce qui se passe mal le plus souvent

Docker ne tourne pas : lancez Docker Desktop et réessayez. Un port occupé fait échouer le démarrage avec « address already in use » : déplacez l’application avec les variables de port ci-dessus. Sans Docker, les applications demandent Node.js 22 ou plus récent, et c’est Yarn 1.22 qui répond tant que vous n’avez pas exécuté corepack enable.

Étape 3 : Le mettre aux couleurs de Sandstone

L’identité de marque se trouve à quelques endroits prévisibles. Dans le dossier du site web, src/config/brand.config.ts contient le nom, l’e-mail de contact et le marché. src/styles/theme-variables.css contient chaque couleur sous forme de token avec une valeur claire et une valeur sombre, donc changez la couleur principale dans les deux blocs. Les fichiers du logo sont dans public/brand/, et les photos propres à l’agence sont servies par l’API depuis public/media/velra/site/.

Plusieurs phrases citent la marque de démonstration et sa ville. Cherchez Velra et Dubai (et leurs graphies arabes) dans messages/ et réécrivez ces lignes dans les deux langues. Les informations de l’agence que lisent les visiteurs sont des données : le nom de l’agence, son slogan et sa description, un e-mail de contact et la ville se modifient dans le tableau de bord, sous Paramètres, Agence. Enfin, réécrivez la page de confidentialité. C’est un texte provisoire pour une agence fictive, et la page le dit tant que vous n’avez pas retiré l’indicateur.

À vérifier avant de continuer

Le nom du site, le pied de page et les titres sont ceux de Sandstone dans les deux langues, et aucune page ne mentionne plus Velra ni la ville de démonstration.

Ce qui se passe mal le plus souvent

Une couleur changée dans un seul thème, du texte arabe oublié dans les fichiers de messages, ou le texte de confidentialité provisoire publié tel quel.

Étape 4 : Ajouter des quartiers et des biens

Commencez par les quartiers, car une annonce pointe vers l’un d’eux. Sous Paramètres, Quartiers, ajoutez chaque quartier avec un nom dans les deux langues, un slug, une courte description et une photo de couverture, et choisissez s’il est mis en avant. Ouvrez ensuite Biens et ajoutez une annonce. Chaque nouveau bien commence en brouillon, masqué sur le site web, donc vous pouvez prendre votre temps.

L’éditeur a quatre onglets :

• Détails : titre et descriptions en anglais et en arabe, objet (vente ou location), type (appartement, villa ou maison de ville), prix, caractéristiques et équipements.
• Médias : jusqu’à 30 photos, ordonnées par glisser-déposer, dont une marquée comme couverture.
• Localisation : la ville, le quartier, l’adresse et un repère sur la carte, indiqué comme exact ou approximatif. La recherche trouve le lieu pour vous.
• SEO : le titre et la description pour les moteurs de recherche, le slug de l’adresse et les notes internes.

Les locations sont tarifées à l’année, et le prix est un montant en AED. Les statuts vont au-delà de brouillon et publié : vous pouvez marquer un bien comme vendu, loué ou archivé, et chacun de ces statuts le masque du site tout en gardant la fiche. Utilisez la localisation approximative pour les biens dont le propriétaire ne veut pas que le repère exact soit public.

Terminez avec Paramètres, Accueil, où vous choisissez les trois biens mis en avant, dans l’ordre. Si aucun d’eux n’est publié, la page d’accueil se rabat sur les biens publiés marqués comme mis en avant.

Regardez la galerie, les informations clés et la carte de visite, qui sont toutes remplies depuis les onglets de l’éditeur ci-dessus.

À vérifier avant de continuer

Ouvrez un bien publié comme visiteur, puis cherchez le même bien sous Vendus ou Archivés après avoir changé son statut. Il doit disparaître du site et rester dans le tableau de bord.

Ce qui se passe mal le plus souvent

Les photos ne se chargent pas, car leurs adresses viennent de PUBLIC_MEDIA_URL et doivent atteindre l’API depuis le navigateur du visiteur. Autre piège : supprimer un bien, ce qui le retire aussi du tableau de bord. Archivez-le plutôt si vous pouvez en avoir besoin plus tard.

Étape 5 : Essayer la mise en scène par IA sur une pièce vide

La mise en scène est facultative, et elle convient bien aux logements neufs photographiés vides. Ouvrez le studio de mise en scène, choisissez une photo de pièce vide du bien ou importez-en une bien nette, choisissez le type de pièce (salon, chambre, salle à manger ou bureau) et un style (moderne chaleureux, moderne minimal ou contemporain), puis lancez la génération. Le résultat conserve les murs, les fenêtres et l’agencement. Vous le comparez à l’original, enregistrez la paire sur le bien et cochez la case d’approbation pour l’afficher publiquement.

Sur le site web, la page du bien affiche alors un curseur avant et après avec une étiquette IA sur l’image meublée. Gardez cette étiquette. Elle dit aux acheteurs ce qu’ils regardent, et elle vous garde du bon côté d’un marketing honnête.

Le studio fonctionne avec Google Gemini, il lui faut donc GOOGLE_API_KEY dans le .env de l’API. Sans elle, le studio indique qu’il a besoin d’une clé et rien n’est facturé. Google facture selon sa propre grille, publiée sur la page des tarifs de Gemini.

Regardez le curseur avant et après et l’étiquette qui signale que l’image meublée est générée par IA.

À vérifier avant de continuer

Ouvrez le bien mis en scène comme visiteur et faites glisser le curseur. Vérifiez que l’étiquette IA est visible.

Ce qui se passe mal le plus souvent

Le studio demande une clé. Il ne génère qu’avec Google, donc GOOGLE_API_KEY est nécessaire quelle que soit l’autre clé définie. Mettez-la dans le .env de l’API, pas dans un fichier du front end, et redémarrez l’API.

Étape 6 : Décider comment traiter les demandes et les visites

Un visiteur peut joindre l’agence de deux façons. Le formulaire de contact crée une demande, avec un choix achat ou location, un quartier souhaité, un budget et un message. La fenêtre de visite sur la page d’un bien demande un nom, un e-mail, un téléphone facultatif, une date et une heure. Les visiteurs choisissent un créneau entre 09:00 et 18:00, heure de Dubaï, par pas d’une demi-heure, au moins une heure à l’avance.

Regardez les champs de date et d’heure, et le fait que la fenêtre demande une heure souhaitée, pas un créneau confirmé.

Regardez le message d’attente que le visiteur voit ensuite, qui précise que l’agence n’a pas encore confirmé.

Une demande de visite est présentée au visiteur comme en attente de confirmation, avec une référence, jamais comme un rendez-vous réservé. Dans le tableau de bord, elle apparaît sous Visites avec une notification, et un agent peut la confirmer, la confirmer de nouveau à une autre heure, la marquer comme réalisée ou l’annuler. Les demandes passent de Nouvelle à Contactée, Qualifiée ou Clôturée, et chacune a un champ de note.

Comme le template n’envoie pas d’e-mail, l’agence doit décider comment le visiteur reçoit la réponse. La règle la plus simple pour Sandstone est qu’un agent réponde depuis l’e-mail ou le téléphone de l’agence dès qu’une demande est confirmée, et que le site l’indique près du formulaire. Les deux formulaires acceptent cinq envois par adresse en dix minutes et ignorent le trafic des robots, pour que la première vraie boîte de réception ne soit pas noyée sous le spam.

À vérifier avant de continuer

Envoyez une demande de visite et un formulaire de contact. Vérifiez que la première apparaît sous Visites comme demandée et le second sous Leads comme nouveau, chacun avec une notification.

Ce qui se passe mal le plus souvent

Un formulaire est refusé après quelques essais. Les deux formulaires acceptent cinq envois par adresse en dix minutes, et derrière un proxy tout le monde peut sembler venir d’une seule adresse tant que vous n’avez pas défini TRUST_PROXY.

Étape 7 : Ajouter l’équipe et définir ses accès

Il n’y a pas de page d’inscription : les deux premiers comptes du tableau de bord viennent des données initiales. Le Super Admin peut tout faire. Le rôle Agent est plus restreint : biens, demandes, visites, mise en scène et liste des quartiers, mais ni paramètres, ni comptes d’administration, ni rôles, ni assistant. Créez les vrais comptes sous Gestion des administrateurs, puis remplacez les mots de passe de démonstration ou supprimez les comptes initiaux avant que le tableau de bord soit exposé sur internet.

Pour Sandstone, le propriétaire garde le rôle Super Admin, les cinq agents prennent le rôle Agent, et un photographe à temps partiel reçoit un rôle personnalisé. Sous Rôles d’administration, vous ne cochez que ce dont cette personne a besoin, par exemple properties.view, properties.edit et les permissions de mise en scène.

À vérifier avant de continuer

Connectez-vous comme agent et vérifiez que Paramètres, les pages d’administration et l’assistant sont absents. Connectez-vous avec le rôle du photographe et vérifiez que seuls les biens et la mise en scène apparaissent.

Ce qui se passe mal le plus souvent

Les mots de passe initiaux restent en place. Changez-les avant que le tableau de bord soit exposé sur internet.

Étape 8 : Activer l’assistant, si vous le souhaitez

Le tableau de bord inclut un assistant de chat qui répond à partir des données de l’agence : combien de demandes sont arrivées cette semaine, quelles visites attendent, quelles annonces sont encore en brouillon. Il peut aussi agir sur demande, par exemple faire avancer une demande ou confirmer une visite. Il travaille dans la limite des permissions de la personne connectée.

Il lui faut une clé de fournisseur dans le .env de l’API, de Google Gemini, OpenAI ou DeepSeek, sous la forme GOOGLE_API_KEY, OPENAI_API_KEY ou DEEPSEEK_API_KEY. Une seule suffit. Sans clé, il indique qu’il en a besoin d’une et rien n’est facturé. Chaque fournisseur facture selon sa propre grille.

Regardez le graphique que l’assistant trace à partir des visites de l’agence.

À vérifier avant de continuer

Posez à l’assistant une question que vous pouvez vérifier sur la page Leads, comme le nombre de nouvelles demandes, et contrôlez sa réponse.

Ce qui se passe mal le plus souvent

L’assistant affiche un message du fournisseur au lieu d’une réponse : la clé n’a pas été acceptée, le compte n’a plus de crédit, le modèle n’a plus de requêtes disponibles ou le fournisseur est saturé. Il reste sur le modèle que vous avez choisi et ne réessaie pas et ne bascule pas tout seul, donc corrigez la cause ou choisissez un autre modèle, puis cliquez sur Réessayer.

Étape 9 : Tester sur mobile et en arabe

La plupart des recherches de biens commencent sur un téléphone. Ouvrez le site sur l’un d’eux, lancez une recherche, ouvrez un bien et envoyez une demande de visite. Sur la mise en page mobile, une barre de visite fixe reste en bas de la page du bien. Enregistrez deux biens, comparez-les, puis essayez d’ajouter un quatrième à la comparaison : le site refuse, car la limite est de trois.

Regardez les trois biens dans un seul tableau, ce qui est le maximum qu’un visiteur peut comparer à la fois.

Regardez la barre de visite qui reste en bas de l’écran du téléphone pendant que la page défile.

Recommencez en arabe sur /ar, et dans le tableau de bord. Vérifiez que le texte arabe, les filtres et les libellés de la carte s’affichent bien une fois inversés. Les tuiles de carte du tableau de bord viennent d’OpenFreeMap et la recherche de lieux d’un service public, donc testez-les avec une connexion internet.

À vérifier avant de continuer

Faites un test complet sur un téléphone : rechercher, ouvrir un bien, enregistrer deux biens, les comparer, demander une visite, puis la confirmer en tant qu’agent.

Ce qui se passe mal le plus souvent

Le site web indique qu’il n’a pas pu charger quelque chose. Dans la console du navigateur, un message CORS signifie que l’adresse du front end manque dans CORS_ORIGIN. De plus, un onglet de page de bien qui affiche « Property details » sous Docker est sans gravité : le serveur du site web ne peut pas joindre l’API sur localhost depuis l’intérieur du conteneur, et le full stack définit déjà la bonne adresse interne.

Étape 10 : Mettre en ligne

Vous pouvez déployer de trois façons : un serveur avec Docker Compose derrière un reverse proxy pour le HTTPS, chaque application depuis son propre Dockerfile chez un hébergeur comme Railway ou Render, ou Node.js seul. Pour une petite agence, un seul serveur est le plus simple. Placez les trois adresses publiques dans un .env à côté de docker-compose.yml sous les noms SITE_URL, ADMIN_URL et API_URL, et les origines autorisées et les adresses des photos en découlent.

• Construisez le site web et le tableau de bord avec des adresses publiques. NEXT_PUBLIC_API_BASE_URL et les autres valeurs NEXT_PUBLIC_* sont compilées dans les pages, donc un changement demande une reconstruction.
• Définissez NODE_ENV=production, votre propre JWT_SECRET et CORS_ORIGIN. L’API ne démarre pas en production sans un secret correct et une liste d’origines.
• Créez les tables une fois sur une installation de production avec yarn seed:prod (agence de démonstration) ou yarn db:sync:prod (tables vides, aucun compte). Avec des tables vides, il vous faut encore un premier administrateur, donc commencez avec l’agence de démonstration et remplacez ses données.
• Stockez le fichier SQLite et les envois sur un stockage persistant, ou utilisez MySQL et un bucket comme Cloudflare R2.
• Définissez NEXT_PUBLIC_SITE_URL avec l’adresse réelle du site web pour les liens canoniques et le sitemap.
• Définissez TRUST_PROXY derrière un reverse proxy pour que les limites par visiteur comptent le vrai visiteur.

N’exécutez jamais yarn setup:fresh ni yarn db:reset sur une agence qui a de vraies annonces. Les deux suppriment toutes les tables.

À vérifier avant de continuer

Dans une fenêtre privée, demandez une visite sur le site en ligne et vérifiez qu’elle arrive avec une notification.

Ce qui se passe mal le plus souvent

Les pages restent vides parce que les vraies adresses ne sont pas dans CORS_ORIGIN, ou les photos échouent parce que NEXT_PUBLIC_MEDIA_HOSTNAME ne nomme pas leur hôte. Reconstruisez les front ends après avoir changé une valeur NEXT_PUBLIC_*.

Au quotidien

Voici une semaine ordinaire chez Sandstone, avec des écrans que le tableau de bord possède déjà.

Une matinée dans le tableau de bord

La vue d’ensemble montre les biens, les demandes et les visites en un coup d’œil, avec une carte des biens. Commencez par la cloche de notifications, qui rassemble les nouvelles demandes et les demandes de visite.

Regardez les compteurs de nouvelles demandes et de visites demandées, qui décident qui les agents appellent en premier.

Ouvrez ensuite Leads. Chaque demande a un statut (nouvelle, contactée, qualifiée ou clôturée) et une note. Faites-la avancer dès qu’un agent répond, pour que la liste montre toujours qui attend.

Regardez le panneau de détail à côté de la liste, où se trouvent le statut et la note de l’agent.

Garder les annonces à jour

La page Biens liste tout avec des onglets de statut, une recherche et des filtres. Vérifiez les brouillons prêts à être publiés, marquez les affaires conclues comme vendues ou louées, et archivez ce qui est retiré.

Regardez les onglets de statut en haut, qui séparent les annonces en ligne des brouillons et des affaires conclues.

Tâches hebdomadaires

• Confirmez ou annulez chaque visite encore marquée comme demandée, et marquez comme réalisées celles qui ont eu lieu.
• Mettez à jour les trois biens mis en avant sous Paramètres, Accueil.
• Générez et approuvez des pièces mises en scène pour les nouveaux logements vides.
• Demandez à l’assistant combien de visites attendent ou quelles annonces sont encore en brouillon.
• Sauvegardez la base de données et les envois, et gardez une copie ailleurs.

Un exemple de plan de lancement, semaine par semaine

Voici un calendrier d’exemple pour Sandstone, pas une promesse sur la durée de votre projet.

• Semaine 1, les fondations. Lancez le stack avec Docker, envoyez-vous une demande de visite, prenez les décisions ci-dessus, et commencez l’identité de marque et la page de confidentialité.
• Semaine 2, le contenu. Ajoutez les quartiers et les premières annonces dans les deux langues avec des photos ordonnées, et publiez-les.
• Semaine 3, les personnes et les outils. Créez l’équipe et les rôles, essayez la mise en scène sur un logement vide, et testez sur mobile et en arabe.
• Semaine 4, la mise en ligne. Déployez sur votre domaine, envoyez une vraie demande de visite, et prévenez d’abord les anciens clients.

Liste de contrôle du lancement

• Le nom de l’agence, le slogan, l’e-mail de contact et la ville sont les vôtres, dans les deux langues.
• La page de confidentialité est réécrite pour votre agence et votre pays, et la mention provisoire est retirée.
• Chaque bien publié a les deux langues, des photos ordonnées, une couverture et un repère placé sur la carte.
• Les mots de passe de démonstration sont remplacés ou les comptes initiaux supprimés.
• NODE_ENV vaut production, JWT_SECRET est le vôtre, et CORS_ORIGIN liste les adresses en ligne.
• NEXT_PUBLIC_SITE_URL est l’adresse réelle du site web, et les deux front ends ont été reconstruits.
• Les photos et la base de données sont sur un stockage qui persiste, avec une sauvegarde.
• Les photos mises en scène ne sont approuvées que lorsqu’elles sont étiquetées et honnêtes.
• Quelqu’un est responsable des notifications et du processus de réponse.

Template, développement sur mesure ou plateforme hébergée

Il y a trois voies réalistes pour obtenir le site d’une agence.

Un template comme celui-ci

Vous obtenez le code source du site web, du tableau de bord et de l’API, avec annonces, leads, visites, rôles et mise en scène qui fonctionnent déjà ensemble. Il est à vous et vous pouvez le modifier. C’est aussi vous qui l’hébergez, et ce qui manque au template, comme les paiements ou l’e-mail, est du travail de développement.

Construire de zéro

Vous obtenez exactement le produit que vous concevez, et vous construisez tout : des filtres conservés dans l’adresse, l’éditeur avec photos ordonnées, le parcours de visite, les permissions. C’est un long chemin pour un site dont beaucoup d’agences ont besoin sous une forme proche.

Une plateforme immobilière hébergée

C’est rapide à lancer et les serveurs sont gérés pour vous. En contrepartie, il y a des frais récurrents, moins de contrôle sur la mise en page et le parcours, et vos contacts vivent sur leur système. Comparez d’abord les conditions, les frais et la prise en charge de l’arabe.

Ce que coûte l’exploitation

Le template est un achat unique, à partir de $79 pour le site web public seul. Le package Full Stack utilisé dans cet exemple coûte $179, et il inclut une licence commerciale et un support à vie.

Les coûts d’exploitation se situent en dehors du template :

• L’hébergement des trois applications, et un disque persistant ou une base de données MySQL.
• Le stockage en bucket, si vous envoyez les fichiers vers Cloudflare R2 ou un service similaire.
• Un nom de domaine.
• Une clé d’IA, seulement si vous utilisez le studio de mise en scène (Google Gemini) ou l’assistant (Gemini, OpenAI ou DeepSeek). Les fournisseurs facturent selon leur propre grille.

Gratuit à l’usage : SQLite pour le développement, les tuiles de carte et la recherche de lieux vers lesquelles le template pointe par défaut, et les données de démonstration fournies. Il n’y a aucun prestataire de paiement à payer, car le produit n’a pas de caisse.

Que personnaliser ensuite

• Devise et marché. Le template est réglé sur l’AED et Dubaï. Un autre marché relève du travail sur mesure, car la devise, le fuseau horaire et une partie des textes sont définis pour ce marché.
• Types de biens et équipements. Chaque liste vit dans l’API et est libellée dans les deux front ends, donc ajouter une valeur oblige à modifier les trois applications.
• Pages de quartiers. Rédigez de vraies descriptions et choisissez des photos de couverture pour chaque quartier, dans les deux langues.
• Suivi. Ajoutez un identifiant Google Tag Manager, GA4, Meta, TikTok, Snapchat ou Pinterest au .env du site web et reconstruisez. Le site remonte des événements comme viewing_request et contact_submit.
• Rôles. Créez un rôle par fonction, par exemple une réceptionniste qui voit les visites mais pas les annonces.
• Agents de code. L’API propose les outils de l’assistant sur POST /api/mcp, protégés par une clé de votre choix.

Erreurs courantes

Publier un bien sans vérifier sa localisation

Un repère dans la mauvaise rue donne à l’annonce un air négligé. Utilisez la recherche de lieux de l’onglet Localisation, et choisissez approximative quand l’adresse exacte est privée.

Traiter une demande de visite comme un rendez-vous réservé

Le site indique aux visiteurs qu’une demande attend une confirmation. Si les agents tardent à confirmer, les visiteurs le remarqueront. Convenez d’un délai de réponse et surveillez la cloche de notifications.

Oublier l’étiquette IA sur les photos mises en scène

L’étiquette IA du curseur est là pour une raison. Ne la retirez pas, et n’approuvez pas une photo mise en scène pour une pièce qui paraît différente dans la réalité.

S’attendre à des e-mails ou à des paiements

Le template n’envoie pas d’e-mails et n’encaisse pas de paiements. Prévoyez comment les agents répondront, et ajoutez vous-même un service d’e-mail si vous voulez des confirmations automatiques.

Modifier un .env sans reconstruire les front ends

Si le site en ligne appelle encore l’ancienne API après un changement d’adresse, reconstruisez. Avec Docker Compose, définissez la valeur dans le .env à côté de docker-compose.yml et exécutez docker compose up --build.

FAQ

Comment créer un site immobilier avec Next.js ?

Partez d’un template qui a déjà des annonces, des pages de biens, des leads et un espace d’administration, puis configurez-le pour votre agence. Il vous faut un site public, un tableau de bord pour les agents et une API qui stocke les biens et les demandes. Les étapes ci-dessus montrent ce parcours avec Velra.

Ai-je besoin d’un backend pour un site d’annonces immobilières ?

Oui, car les annonces, les photos, les demandes et les visites doivent être stockées et gérées quelque part. Le template fournit une API NestJS avec TypeORM que les deux applications utilisent, sur SQLite ou MySQL.

Puis-je l’utiliser pour des agences clientes ?

Oui. Il est fourni avec une licence commerciale pour un nombre illimité de projets, ce qui couvre les agences qui créent des sites pour des clients. Lisez la page de licence dans la documentation pour les conditions exactes.

Prend-il en charge l’arabe et le RTL ?

Oui. Le site web et le tableau de bord fonctionnent en anglais et en arabe, avec l’arabe mis en page de droite à gauche. Les biens sont rédigés dans les deux langues.

Les visiteurs peuvent-ils payer ou réserver en ligne ?

Non. Les visiteurs demandent une visite ou envoient une demande, et l’agence assure le suivi. Il n’y a pas de paiement en ligne, donc le template convient aux agences qui concluent leurs affaires hors ligne.

Plusieurs agences peuvent-elles publier sur un même site ?

Non. Il est conçu pour une agence avec une équipe. Un portail pour plusieurs agences demanderait de nouvelles fonctions, comme des comptes d’agence et la facturation.

Ai-je besoin de Docker ?

Non, mais c’est le démarrage le plus rapide. Sans Docker, il vous faut Node.js 22 ou plus récent, Corepack activé, et un terminal par application. L’API fonctionne avec SQLite, donc aucun serveur de base de données à installer.

Les visiteurs peuvent-ils créer des comptes ?

Non. Le site web n’a pas de comptes. Les biens enregistrés et la comparaison restent dans le navigateur du visiteur, et une demande de visite ne demande qu’un nom, un e-mail et une heure.

Puis-je utiliser MySQL à la place de SQLite ?

Oui, par un simple changement de configuration. Créez une base de données vide, définissez le pilote et la connexion dans le .env de l’API, puis lancez le chargement initial ou la création des tables avant le premier démarrage en production.

L’étiquette des photos mises en scène est-elle facultative ?

Non. La page du bien affiche les pièces mises en scène avec une étiquette claire indiquant qu’elles sont générées par IA, et vous devriez la garder.

Essayez par vous-même

Cherchez des biens sur le site web public en ligne, puis ouvrez la démo du tableau de bord de l’agence pour voir comment une demande arrive. La documentation de Velra couvre chaque réglage mentionné ici, et la page du produit liste les packages. Pour d’autres options, parcourez la catégorie des templates immobiliers. Velra fait aussi partie des dix templates du bundle de templates Next.js.