Connecter Whise à Next.js

Pourquoi un site Next.js pour agence immobilière ?

Next.js est aujourd'hui le framework de référence pour construire des sites immobiliers performants. SSG / ISR / RSC garantissent un temps de chargement < 1 s, un SEO excellent et des coûts d'hébergement maîtrisés. Couplé à Ts-Immo et Whise, vous obtenez un site sur mesure entièrement piloté par votre CRM.

• Pages SSG ou ISR (revalidation toutes les 10 minutes par défaut)
• Composants serveur React (RSC) — aucune fuite de clé API côté client
• JSON-LD `RealEstateListing` injecté automatiquement pour le SEO
• Image optimization Next.js native sur les photos Ts-Immo

L'API REST Ts-Immo en bref

Ts-Immo expose une API REST JSON unifiée, indépendante de Whise. Vous interrogez toujours la même API quel que soit le CRM : si vous changez de logiciel un jour, votre site Next.js n'a pas besoin d'être modifié.

# Public — sans authentification
curl https://api.ts-immo.org/v1/gateway/public/properties/agence-cote-d-azur

# Client — avec API token
curl -H "Authorization: Bearer YOUR_API_TOKEN" \
  https://api.ts-immo.org/v1/gateway/properties

Exemple de réponse JSON

[
  {
    "id": "550e8400-e29b-41d4-a716-446655440000",
    "uri": {
      "fr": "agence-cote-d-azur/villa-4-pieces-vue-mer",
      "en": "agence-cote-d-azur/4-room-villa-sea-view"
    },
    "type": "house",
    "offer_type": "sale",
    "status": "available",
    "title": { "fr": "Villa 4 pièces vue mer", "en": "4-room villa sea view" },
    "bedrooms": 3,
    "financial": {
      "transaction": {
        "price": { "amount": 850000.00, "currency": "EUR" }
      }
    },
    "location": {
      "city": "Nice",
      "postal_code": "06000",
      "country": "France",
      "country_code": "FR"
    },
    "images": [
      { "url": "https://cdn.example.com/photo1.jpg", "ordinal": 0 }
    ]
  }
]

Mise en place dans un projet Next.js

Étapes recommandées pour intégrer Ts-Immo dans un projet Next.js (App Router).

• Créer un compte sur https://dashboard.ts-immo.org et enregistrer la passerelle correspondant à votre CRM.
• Récupérer la clé API Ts-Immo dans le tableau de bord.
• Dans votre projet Next.js, créer un fichier .env.local avec TS_IMMO_API_KEY et TS_IMMO_API_URL.
• Appeler l'API REST depuis les composants serveur (RSC), les Route Handlers ou via fetch côté serveur.
• Mettre en cache les réponses avec next: { revalidate: 600 } pour des pages SSG/ISR ultra-rapides.

Composant serveur — liste des biens

Exemple complet d'un composant serveur Next.js qui consomme l'API Ts-Immo (donc indirectement Whise) avec ISR.

// app/biens/page.tsx — Server Component
type Property = {
  id: string
  uri: { fr: string; en: string }
  type: 'apartment' | 'house' | 'land' | 'commercial' | 'parking' | string
  offer_type: 'sale' | 'rental' | 'auction' | string
  status: 'available' | 'sold' | 'rented' | string
  title: { fr: string; en?: string }
  bedrooms: number | null
  financial: { transaction: { price: { amount: number; currency: 'EUR' } } }
  location: { city: string; postal_code: string; country: string; country_code: string }
  images: { url: string; ordinal: number }[]
}

async function getProperties(agencySlug: string): Promise<Property[]> {
  const res = await fetch(
    `${process.env.TS_IMMO_API_URL}/v1/gateway/public/properties/${agencySlug}`,
    { next: { revalidate: 600 } }, // ISR : 10 minutes
  )
  if (!res.ok) throw new Error('Ts-Immo API error')
  return res.json()
}

export default async function BiensPage() {
  const list = await getProperties('mon-agence')
  return (
    <ul>
      {list.map((p) => (
        <li key={p.id}>
          {p.title.fr} — {p.location.city} —{' '}
          {p.financial.transaction.price.amount.toLocaleString('fr-FR')} €
        </li>
      ))}
    </ul>
  )
}

Configuration de Whise dans Ts-Immo

Configurer l'URL de webhook fournie par Ts-Immo dans le back-office Whise. La clé secrète est échangée automatiquement lors de la création de la passerelle.

JSON-LD SEO pour chaque annonce

Ts-Immo recommande l'utilisation du schéma JSON-LD `RealEstateListing` (Schema.org) sur chaque page de détail. Le SDK Ts-Immo fournit un helper qui génère le JSON-LD à partir de l'objet Listing — voir le guide « API immobilière REST ».

Remontée des leads

Côté Next.js, créez un Route Handler `/api/lead` qui appelle l'endpoint `POST /v1/gateway/estimations` de Ts-Immo (avec un sous-objet `lead`). Les prospects sont persistés dans Ts-Immo et consultables via `GET /v1/gateway/leads`.