Édition visuelle pour Next.js, sur WordPress.

1. 01

   Autorisez l’éditeur à afficher votre site

   Copiez ceci dans next.config.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.

   npm install leiho

   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.

   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);
   });

   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.

   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.