---
title: "Leiho pour Next.js : l’édition visuelle sur WordPress"
description: "Gardez l’App Router, vos composants et votre hébergement. Leiho ajoute un composant client à votre layout et un spread par élément modifiable."
url: https://leiho.dev/fr/frameworks/nextjs
lang: fr
updated: 2026-11-04
---
Next.js · App Router

# Édition visuelle pour Next.js, sur WordPress.

Gardez l’App Router, vos composants et votre hébergement. Leiho ajoute un composant client à votre layout et un spread par élément modifiable.

1. 01
   ## Autorisez l’éditeur à afficher votre site
   Copiez ceci dans next.config.ts.
   ```ts
   import type { NextConfig } from 'next';
   
   const nextConfig: NextConfig = {
     async headers() {
       return [
         {
           source: '/:path*',
           headers: [
             { key: 'Content-Security-Policy', value: "frame-ancestors 'self' https://cms.example.com" },
           ],
         },
       ];
     },
   };
   
   export default nextConfig;
   ```
2. 02
   ## Ajoutez le bridge
   Installez le package, puis ajoutez le composant à app/layout.tsx. C’est déjà un composant client.
   ```Terminal
   npm install leiho
   ```
   ```tsx
   import { LeihoBridge } from 'leiho/react';
   
   export default function RootLayout({ children }: { children: React.ReactNode }) {
     return (
       <html lang="en">
         <body>
           {children}
           <LeihoBridge wpOrigin="https://cms.example.com" />
         </body>
       </html>
     );
   }
   ```
3. 03
   ## Lisez le contenu
   Chargez le contenu dans lib/leiho.ts, puis lisez chaque page par son chemin.
   ```ts
   import { cache } from 'react';
   import { loadLeihoContent, indexLeihoContent } from 'leiho/content';
   
   // One request per render, shared by every component.
   export const getContent = cache(async () => {
     const { data } = await loadLeihoContent({ url: 'https://cms.example.com/wp-json/leiho/v1/export' });
     return indexLeihoContent(data);
   });
   ```
   ```tsx
   import { notFound } from 'next/navigation';
   import { getContent } from '@/lib/leiho';
   
   export default async function Page({ params }: { params: Promise<{ slug?: string[] }> }) {
     const { slug = [] } = await params;
     const page = (await getContent()).byPath('/' + slug.join('/'));
     if (!page) notFound();
   
     return (
       <main data-wp-post={page.id}>
         <h1 data-wp-field="_title">{page.title}</h1>
       </main>
     );
   }
   ```
   Hébergement serverless avec un disque en lecture seule ? Passez snapshot: false à loadLeihoContent.
4. 04
   ## Marquez ce que les éditeurs peuvent modifier
   Appliquez field() sur chaque élément que les éditeurs doivent pouvoir modifier. Affichez toujours l’élément, même quand sa valeur est vide.
   ```JSX
   import { field, entry } from 'leiho';
   // field() writes data-wp-post + data-wp-field, entry() names a section.
   // Flexible content rows: block(page, 'sections', i, 'Label').
   
   <section {...entry(page, 'Hero')}>
     <h1 {...field(page, 'hero_title')}>{page.fields.hero_title}</h1>
     <img {...field(page, 'hero_image')} src={page.fields.hero_image?.url} alt={page.fields.hero_image?.alt} />
     {page.fields.cards?.map((card, i) => (
       <article key={i} {...field(page, `cards.${i}.title`)}>{card.title}</article>
     ))}
   </section>
   ```

Remplacez https://cms.example.com par l’adresse de votre WordPress. Dans wp-admin, **Leiho → Démarrer** affiche ces étapes avec votre adresse, vérifie chacune et peut confier toute l’installation à votre agent de code en une seule consigne.

Autres frameworks

- [**Astro**](https://leiho.dev/fr/frameworks/astro)
- [**Nuxt**](https://leiho.dev/fr/frameworks/nuxt)
- [**SvelteKit**](https://leiho.dev/fr/frameworks/sveltekit)
- [**React**](https://leiho.dev/fr/frameworks/react)
- [**HTML, PHP and others**](https://leiho.dev/fr/frameworks/html)

## Modifiez le vrai site.

Gratuit et open source. Essayez-le sur un vrai WordPress, dans votre navigateur.

- [Essayer dans votre navigateur](https://leiho.dev/fr/try)
- [Voir sur GitHub](https://github.com/pixelersagency/leiho)