Guide d'intégration via l'API — Vercel, Netlify, Railway

1. Générer votre clé API

Depuis la page Intégrations, dans le bloc « API iziRanker », cliquez sur Générer une clé API. Copiez-la immédiatement : elle ne sera plus jamais affichée en clair ensuite.

2. Stocker la clé (variable d'environnement)

Ne mettez jamais la clé en dur dans le code ni côté navigateur — uniquement en variable d'environnement serveur, nommée par exemple IZIRANKER_API_KEY.

3. Créer un déclencheur de rebuild

Publier un contenu depuis iziRanker ne rebuild pas votre site tout seul : il faut un déclencheur qui prévient votre hébergeur qu'il y a du nouveau.

4. Coller l'URL dans iziRanker

Sur Vercel ou Netlify : collez l'URL copiée à l'étape précédente dans le champ Deploy Hook du bloc « API iziRanker » sur la page Intégrations, puis enregistrez. À chaque publication, iziRanker appelle automatiquement cette URL → votre hébergeur relance un build → votre site republie tout seul, sans action manuelle.

Sur Railway (sans URL de déclenchement), laissez ce champ vide et redéployez manuellement après chaque publication, le temps de mettre en place une automatisation plus poussée si besoin.

5. Le code à copier, par type de contenu

Ce code fonctionne à l'identique sur Vercel, Netlify et Railway (Next.js n'a besoin d'aucune adaptation selon l'hébergeur). Adaptez les noms de dossiers à votre propre structure si besoin.

async function getArticles() {
  const res = await fetch("https://iziranker.com/api/v1/articles", {
    headers: { Authorization: `Bearer ${process.env.IZIRANKER_API_KEY}` },
    next: { revalidate: 3600 },
  });
  const { articles } = await res.json();
  return articles;
}

export default async function BlogPage() {
  const articles = await getArticles();

  return (
    <div>
      {articles.map((article) => (
        <a key={article.slug} href={`/blog/${article.slug}`}>
          <h2>{article.title}</h2>
          <p>{article.metaDescription}</p>
        </a>
      ))}
    </div>
  );
}

async function getArticle(slug: string) {
  const res = await fetch("https://iziranker.com/api/v1/articles", {
    headers: { Authorization: `Bearer ${process.env.IZIRANKER_API_KEY}` },
    next: { revalidate: 3600 },
  });
  const { articles } = await res.json();
  return articles.find((article) => article.slug === slug);
}

export default async function ArticlePage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const article = await getArticle(slug);
  if (!article) return <p>Article introuvable.</p>;

  return (
    <article>
      <h1>{article.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: article.contentHtml }} />
    </article>
  );
}

async function getProducts() {
  const res = await fetch("https://iziranker.com/api/v1/products", {
    headers: { Authorization: `Bearer ${process.env.IZIRANKER_API_KEY}` },
    next: { revalidate: 3600 },
  });
  const { products } = await res.json();
  return products;
}

export default async function ProduitsPage() {
  const products = await getProducts();

  return (
    <div>
      {products.map((product) => (
        <a key={product.slug} href={`/produits/${product.slug}`}>
          {product.productImageUrl && <img src={product.productImageUrl} alt={product.title} />}
          <h2>{product.title}</h2>
          {product.price && <p>{product.price} €</p>}
        </a>
      ))}
    </div>
  );
}

async function getProduct(slug: string) {
  const res = await fetch("https://iziranker.com/api/v1/products", {
    headers: { Authorization: `Bearer ${process.env.IZIRANKER_API_KEY}` },
    next: { revalidate: 3600 },
  });
  const { products } = await res.json();
  return products.find((product) => product.slug === slug);
}

export default async function ProduitPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const product = await getProduct(slug);
  if (!product) return <p>Produit introuvable.</p>;

  return (
    <article>
      <h1>{product.title}</h1>
      {product.productImageUrl && <img src={product.productImageUrl} alt={product.title} />}
      {product.price && <p>{product.price} €</p>}
      <div dangerouslySetInnerHTML={{ __html: product.contentHtml }} />
    </article>
  );
}

async function getLocalPages() {
  const res = await fetch("https://iziranker.com/api/v1/local-pages", {
    headers: { Authorization: `Bearer ${process.env.IZIRANKER_API_KEY}` },
    next: { revalidate: 3600 },
  });
  const { localPages } = await res.json();
  return localPages;
}

export default async function PagesLocalesPage() {
  const localPages = await getLocalPages();

  return (
    <div>
      {localPages.map((page) => (
        <a key={page.slug} href={`/pages-locales/${page.slug}`}>
          <h2>{page.title}</h2>
        </a>
      ))}
    </div>
  );
}

async function getLocalPage(slug: string) {
  const res = await fetch("https://iziranker.com/api/v1/local-pages", {
    headers: { Authorization: `Bearer ${process.env.IZIRANKER_API_KEY}` },
    next: { revalidate: 3600 },
  });
  const { localPages } = await res.json();
  return localPages.find((page) => page.slug === slug);
}

export default async function PageLocalePage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const page = await getLocalPage(slug);
  if (!page) return <p>Page introuvable.</p>;

  return (
    <article>
      <h1>{page.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: page.contentHtml }} />
    </article>
  );
}

async function getServicePages() {
  const res = await fetch("https://iziranker.com/api/v1/service-pages", {
    headers: { Authorization: `Bearer ${process.env.IZIRANKER_API_KEY}` },
    next: { revalidate: 3600 },
  });
  const { servicePages } = await res.json();
  return servicePages;
}

export default async function ServicesPage() {
  const servicePages = await getServicePages();

  return (
    <div>
      {servicePages.map((page) => (
        <a key={page.slug} href={`/services/${page.slug}`}>
          <h2>{page.title}</h2>
        </a>
      ))}
    </div>
  );
}

async function getServicePage(slug: string) {
  const res = await fetch("https://iziranker.com/api/v1/service-pages", {
    headers: { Authorization: `Bearer ${process.env.IZIRANKER_API_KEY}` },
    next: { revalidate: 3600 },
  });
  const { servicePages } = await res.json();
  return servicePages.find((page) => page.slug === slug);
}

export default async function ServicePagePage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const page = await getServicePage(slug);
  if (!page) return <p>Page introuvable.</p>;

  return (
    <article>
      <h1>{page.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: page.contentHtml }} />
    </article>
  );
}

6. Configuration Git

Pour que votre code (étape 5) soit déployé et republié automatiquement, votre projet doit être connecté à un dépôt Git (GitHub, GitLab...).

Une fois le dépôt connecté, seule l'étape 3/4 (ou un redeploy manuel pour Railway) déclenche une republication après chaque nouvelle publication iziRanker — un push Git n'est nécessaire que lorsque vous modifiez vous-même le code.

7. Sécurité

• Ne jamais exposer la clé côté navigateur — uniquement côté serveur ou au moment du build.
• En cas de fuite, cliquez sur Régénérer la clé depuis Intégrations : l'ancienne clé est immédiatement invalidée.