Étude de cas · Développement logiciel
Un site bilinguerelié aux annonces de l'agence
Antibes · Côte d'Azur et Vosges
Annonces, recherche, blog et contact en français et en anglais : le site Next.js d'une agence immobilière d'Antibes, alimenté par ses propres annonces.
- Client
- Angeles Immobilier
- Secteur
- Agence immobilière · vente, location et gestion locative
- Ville
- Antibes
- Notre rôle
- Conception et développement, de l'intégration des annonces jusqu'au déploiement
Sept chapitres
01
Une agence, deux marchés, deux langues
Angeles Immobilier est une agence immobilière installée à Antibes. Elle vend, achète et loue des appartements, des maisons, des locaux et des terrains sur la Côte d'Azur, et propose un service de gestion locative aux propriétaires bailleurs. Depuis mars 2025, une antenne à Pouxeux couvre aussi les Vosges.
- Côte d'AzurAntibes · vente, location, gestion locative
- VosgesPouxeux · antenne ouverte en mars 2025
Une partie de sa clientèle ne parle pas français : acquéreurs étrangers, propriétaires installés hors de France, locataires de passage. Le site devait donc exister en français et en anglais, avec les mêmes annonces des deux côtés.
Adresses préfixées par la langue
/fr/Français, par défaut/en/Anglais
Mêmes annonces, seule l'interface change
next-intlnext-intl gère le routage par langue et les textes, rangés dans des fichiers par langue. Les annonces sont communes aux deux versions : seule l'interface change.
Le même accueil, dans les deux langues
- Accueil en français
Accueil en anglais
Captures du site public en production.
02
Ce que le site devait résoudre
- Être trouvéUne agence immobilière vit de ses annonces, et une annonce qui n'est pas trouvée sur un moteur de recherche ne génère pas d'appel. Il fallait des pages de biens indexables, chacune avec son titre, sa description et sa photo de partage, et un plan du site qui suive le catalogue.
- Deux marchés, sans doublonLe site devait aussi séparer deux marchés très différents, la Côte d'Azur et les Vosges, sans dupliquer les données. Les anciennes adresses d'annonces, déjà partagées ou référencées, devaient continuer à mener au bon bien.
- Des demandes fiablesEnfin, chaque demande de contact devait arriver à l'agence de façon fiable, avec un accusé de réception pour le visiteur, sans ouvrir la porte au spam ni exposer les données saisies.
03
Afficher ce que l'agence publie déjà
Les annonces, elles, sont saisies dans le logiciel de transaction de l'agence, qui les exporte avec leurs photos. Le site n'avait pas vocation à devenir un second outil de saisie : il devait afficher ce que l'agence publie déjà, sans double travail.
Du logiciel de l'agence à la fiche en ligne
- Logiciel de transactionLes annonces y sont saisies, puis exportées avec leurs photos.
- Fichier d'exportMonté sur un volume : une nouvelle version s'affiche sans reconstruire le site.
- LectureLe site lit le fichier et corrige les défauts d'encodage des descriptions.
- Filtre par département06 pour la Côte d'Azur, 88 pour les Vosges.
- CacheCinq minutes pour les résultats, une heure pour la liste des villes.
Fiche structurée
- Prix
- Surface
- Pièces
- Chambres
- Prestations
- Photos
Illustration : valeurs masquées.
TypeScriptUne annonce compte plusieurs dizaines de champs. Les décrire dans un type unique évite les erreurs de lecture entre le fichier source, la recherche et l'affichage. La vérification de types tourne avant chaque commit, avec ESLint et Prettier.
04
Chercher, puis ouvrir la fiche
Un moteur de recherche par type d'annonce, ville, type de bien, nombre de pièces, fourchette de prix et surface. Une fiche détaillée par bien, avec galerie photo, visionneuse plein écran et suggestions d'autres biens.
Les critères de recherche
La fiche d'un bien
- Galerie photoToutes les photos de l'annonce.
- Visionneuse plein écranPour parcourir les photos en grand.
- Autres biensDes suggestions en bas de fiche.
Des pages dédiées
- Achat
- Location
- Gestion locative
- Vosges
- À propos
- Contact
- Blog
La recherche et la fiche, en production
Page Acheter : recherche et biens à vendre
Fiche d'un bien : galerie, prix, surface et description
Captures du site public en production.
05
Des pages que les moteurs trouvent
Les pages d'annonces sont rendues côté serveur. Chacune génère ses propres métadonnées : titre reprenant le libellé et la ville, description du bien, image Open Graph tirée des photos. Le plan du site liste automatiquement tous les biens à vendre et à louer, et les pages déclarent leurs équivalents dans l'autre langue.
Les métadonnées d'une fiche
- Titre
- Libellé et ville du bien
- Description
- Description du bien
- Image de partage
- Tirée des photos
Plan du site
- Tous les biens à vendre
- Tous les biens à louer
- Équivalent dans l'autre langue
Anciennes adresses
Ancienne adresse d'annonceFiche correspondante
La reprise des anciennes adresses d'annonces, qui aboutissent à la fiche correspondante.
06
Chaque demande arrive
Un formulaire de contact qui envoie deux e-mails : une notification à l'agence et une confirmation au visiteur. L'envoi passe par Resend, avec des modèles d'e-mail écrits en React.
Demande envoyée
- NotificationÀ l'agence, avec la possibilité de répondre directement.
- ConfirmationAu visiteur.
Ce que vérifie la route
- Chaque champ est validé
- Pas de retour à la ligne dans l'adresse e-mail, contre l'injection d'en-têtes
- Longueur des messages limitée
- Nombre d'envois limité par adresse IP
Les journaux ne contiennent jamais les valeurs saisies dans le formulaire.
Le formulaire, en production
Page contact : coordonnées de l'agence et formulaire (numéro masqué)
Captures du site public en production.
07
Un seul service, de la branche à la production
Le routeur de Next.js permet de construire les pages côté serveur et de loger dans le même projet les routes d'API internes : lecture des annonces, liste des villes, relais du blog, envoi des e-mails. Un seul service à déployer et à surveiller.
developImage publiée dans le registreConteneur relancéRecettemainImage publiée dans le registreConteneur relancéProductionProxy inverse · certificats HTTPS
- DockerL'image est construite en plusieurs étapes sur Node.js Alpine, à partir de la sortie autonome de Next.js, et s'exécute avec un utilisateur non privilégié. Les variables d'environnement sont injectées au build par un gestionnaire de secrets, jamais versionnées.
- GitLab CILa branche develop construit et déploie l'environnement de recette, la branche main la production. Chaque déploiement récupère l'image publiée dans le registre et relance le conteneur derrière un proxy inverse qui gère les certificats HTTPS.
- SentrySentry est configuré côté serveur, edge et navigateur. Une source d'annonces indisponible ou une liste vide est remontée comme signal, sans faire tomber la page.
Aujourd'hui
Ce que le site permet aujourd'hui
- Pour le visiteurUn visiteur peut consulter, en français ou en anglais, les biens à vendre et à louer sur la Côte d'Azur et dans les Vosges. Il filtre par ville, type de bien, nombre de pièces, budget et surface, puis ouvre une fiche avec l'ensemble des photos, les caractéristiques du bien et d'autres biens suggérés.
- Pour les demandesDepuis chaque fiche, et depuis la page contact, il peut envoyer une demande : l'agence la reçoit par e-mail, avec la possibilité de répondre directement, et le visiteur reçoit une confirmation.
- Pour les bailleursLes propriétaires bailleurs trouvent une page consacrée à la gestion locative. Les avis Google de l'agence s'affichent sur l'accueil et la page Vosges. Le blog publie des articles dans les deux langues.
- Pour l'agenceCôté agence, le catalogue en ligne suit l'export du logiciel de transaction, sans ressaisie. Les anciens liens d'annonces restent valides, et chaque nouveau bien entre automatiquement dans le plan du site.
Le site en production
Blog de l'agence
Accueil sur mobile
Captures du site public en production.
Stack technique
Les technologies du projet, et leur rôle
- ReactSite Next.js : annonces, recherche et formulaires de contact.
- TypeScriptTypage du site et des routes d'API.
- Node.jsServeur Next.js et routes d'API en production.
- DockerImage de production du site.
- GitLabIntégration et déploiement continus.
Un projet similaire ?
Décrivez-nous votre situation. Le premier échange est gratuit et sans engagement, sur site à Nice et dans sa région.
Voir notre offre de développement logicielVoir toutes nos réalisations