{"id":76407,"date":"2024-03-04T09:07:46","date_gmt":"2024-03-04T08:07:46","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=76407&preview=true&preview_id=76407"},"modified":"2024-03-05T15:21:37","modified_gmt":"2024-03-05T14:21:37","slug":"wordpress-headless-next-js","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless-next-js\/","title":{"rendered":"Comment utiliser WordPress comme un CMS headless pour Next.js"},"content":{"rendered":"

WordPress existe depuis plus de 20 ans et alimente 42,7 % de tous les sites web sur l’internet, selon W3Techs<\/a>. Il d\u00e9tient \u00e9galement une part de march\u00e9 de 62,5 % pour les syst\u00e8mes de gestion de contenu (CMS) derri\u00e8re les sites web.<\/p>\n

Aujourd’hui, de nombreux langages de programmation et frameworks sont disponibles pour construire des sites web conviviaux et performants qui sont bien plus rapides que WordPress, quelle que soit l’optimisation que vous fassiez dans votre tableau de bord WordPress. Next.js<\/a>, un framework React tr\u00e8s populaire, en est un exemple.<\/p>\n

Ce guide montre comment utiliser WordPress comme un CMS headless, en fournissant des donn\u00e9es \u00e0 votre application Next.js. Il explique \u00e9galement comment d\u00e9ployer votre code Next.js en tant que site statique<\/a> sur le service gratuit d’h\u00e9bergement de sites statiques<\/a> de Kinsta.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Comprendre WordPress headless<\/h2>\n

WordPress headless se r\u00e9f\u00e8re \u00e0 l’utilisation de WordPress uniquement pour ses capacit\u00e9s de backend – gestion et stockage de contenu – et \u00e0 l’utilisation d’un syst\u00e8me s\u00e9par\u00e9, comme Next.js, pour la pr\u00e9sentation frontend.<\/p>\n

Ce d\u00e9couplage permet aux d\u00e9veloppeurs d’utiliser les outils de gestion de contenu robustes de WordPress tout en profitant pleinement des fonctionnalit\u00e9s modernes de d\u00e9veloppement du frontend, telles que le rendu c\u00f4t\u00e9 serveur et la g\u00e9n\u00e9ration de sites statiques dans Next.js.<\/p>\n

Pr\u00e9parer votre site WordPress<\/h3>\n

Avant de plonger dans le d\u00e9veloppement de Next.js, votre site WordPress a besoin d’un peu de pr\u00e9paration pour servir d’un\u00a0CMS headless<\/a>.<\/p>\n

Si vous n’avez pas encore de site WordPress, vous pouvez en cr\u00e9er un facilement avec Kinsta. Il existe trois m\u00e9thodes pour cr\u00e9er un site WordPress avec Kinsta :<\/p>\n

    \n
  1. Cr\u00e9er un site sur votre machine locale<\/a> (\u00e9ventuellement en utilisant nos outils DevKinsta<\/a>) avant de transf\u00e9rer le site sur nos serveurs<\/li>\n
  2. Cr\u00e9er un site \u00e0 distance en utilisant le tableau de bord MyKinsta<\/a><\/li>\n
  3. Cr\u00e9er un site \u00e0 distance en utilisant l’API Kinsta<\/a><\/li>\n<\/ol>\n

    Une fois que vous avez un site WordPress, il y a deux approches pour r\u00e9cup\u00e9rer les donn\u00e9es de votre CMS WordPress dans votre framework frontend : WPGraphQL et REST API<\/a>.<\/p>\n

    L’API REST facilite la r\u00e9cup\u00e9ration des donn\u00e9es au format JSON en utilisant des approches JavaScript comme l’API Fetch<\/a> ou la biblioth\u00e8que Axios<\/a>. L’API REST est int\u00e9gr\u00e9e \u00e0 WordPress depuis la version 4.7, ce qui signifie qu’elle ne n\u00e9cessite aucune extension pour fonctionner. Mais pour utiliser WPGraphQL, qui vous permet d’interagir avec vos donn\u00e9es WordPress \u00e0 l’aide de requ\u00eates GraphQL, vous devez installer l’extension WPGraphQL.<\/p>\n

    Utilisons l’API REST pour ce guide. Pour obtenir vos donn\u00e9es WordPress au format JSON, ajoutez \/wp-json\/wp\/v2<\/code> \u00e0 l’URL de votre site WordPress :<\/p>\n

    http:\/\/yoursite.com\/wp-json\/wp\/v2<\/code><\/pre>\n
    Si l’API JSON n’est pas activ\u00e9e par d\u00e9faut lorsque vous visitez http:\/\/yoursite.com\/wp-json<\/code>, vous pouvez l’activer en ouvrant Permaliens<\/strong> sous R\u00e9glages<\/strong> dans le tableau de bord de WordPress et en s\u00e9lectionnant Nom de la publication<\/strong> ou tout autre nom de votre choix sauf Simple <\/strong>:<\/p>\n
    \"Configurez
    Configurez l’API REST de WordPress pour acc\u00e9der aux donn\u00e9es JSON.<\/figcaption><\/figure>\n
    Cela fonctionne pour les sites WordPress locaux et publics, offrant des points de terminaison<\/a> pour le contenu qui comprend les articles<\/a>, les pages<\/a>, les commentaires<\/a> et les m\u00e9dias<\/a>. Lisez notre guide complet de l’API REST<\/a> pour en savoir plus.<\/p>\n
    Configurer votre environnement Next.js<\/h2>\n
    Next.js aide les d\u00e9veloppeurs \u00e0 cr\u00e9er des applications web facilement, en am\u00e9liorant les performances et en optimisant l’exp\u00e9rience de d\u00e9veloppement. L’une de ses principales fonctionnalit\u00e9s est le routage bas\u00e9 sur les fichiers, qui simplifie la cr\u00e9ation d’itin\u00e9raires.<\/p>\n
    Next.js met \u00e9galement l’accent sur les performances, en offrant des fonctionnalit\u00e9s telles que le fractionnement automatique du code<\/a>, qui ne charge que le JavaScript n\u00e9cessaire pour chaque page, r\u00e9duisant ainsi de mani\u00e8re significative le temps de chargement.<\/p>\n
    Pour mettre en place un projet Next.js, vous pouvez ex\u00e9cuter la commande suivante et utiliser ses r\u00e9ponses par d\u00e9faut :<\/p>\n
    npx create-next-app@latest nextjs-wp-demo<\/code><\/pre>\n
    Pour ce guide, vous pouvez utiliser notre mod\u00e8le de d\u00e9marrage Git<\/a> en suivant les \u00e9tapes suivantes :<\/p>\n
      \n
    1. Visitez le d\u00e9p\u00f4t GitHub<\/a> de ce projet.<\/li>\n
    2. S\u00e9lectionnez Utiliser ce mod\u00e8le<\/strong> > Cr\u00e9er un nouveau d\u00e9p\u00f4t<\/strong> pour copier le code de d\u00e9marrage dans un d\u00e9p\u00f4t de votre compte GitHub (cochez la case pour inclure toutes les branches<\/strong>).<\/li>\n
    3. T\u00e9l\u00e9chargez le d\u00e9p\u00f4t sur votre ordinateur local et passez \u00e0 la branche starter-files<\/a> \u00e0 l’aide de la commande : git checkout starter-files<\/code>.<\/li>\n<\/ol>\n
        \n
      1. Installez les d\u00e9pendances n\u00e9cessaires en ex\u00e9cutant la commande npm install<\/code>.<\/li>\n<\/ol>\n
        Une fois l’installation termin\u00e9e, lancez le projet sur votre ordinateur local en ex\u00e9cutant la commande npm run dev<\/code>. Le projet est alors disponible \u00e0 l’adresse http:\/\/localhost:3000\/<\/a>.<\/p>\n
        \"Capture
        Capture d’\u00e9cran d’un projet de d\u00e9marrage construit avec Next.js.<\/figcaption><\/figure>\n
        Comprendre le projet<\/h3>\n
        L’App Router a \u00e9t\u00e9 introduit dans Next.js 13, rempla\u00e7ant le r\u00e9pertoire pages<\/strong> existant pour le routage. Le routage avec l’App Router implique \u00e9galement la cr\u00e9ation de dossiers dans le r\u00e9pertoire app<\/strong>. Ensuite, vous imbriquez un fichier page.js<\/strong> dans le dossier appropri\u00e9 pour d\u00e9finir votre itin\u00e9raire.<\/p>\n
        Dans ce projet, app<\/strong> est le r\u00e9pertoire principal avec lequel vous allez interagir, et vous trouverez la structure de fichiers suivante.<\/p>\n
        \/\n|-- \/app\n    |-- \/blog\n        |-- \/[postId]\n        \t|-- page.js\n        |-- page.js\n    |-- globals.css\n    |-- layout.js\n    |-- navbar.js\n    |-- page.js<\/code><\/pre>\n
        Trois pages sont cr\u00e9\u00e9es : la page d’accueil pour afficher les informations de base, la page du blog pour afficher tous les articles de votre CMS WordPress, et la page dynamique ([postId]\/page.js<\/strong>) pour le rendu des articles individuels.<\/p>\n
        Vous remarquerez \u00e9galement le composant navbar.js<\/strong>, qui est import\u00e9 dans le fichier layout.js<\/strong> afin de cr\u00e9er une mise en page pour le projet.<\/p>\n
        R\u00e9cup\u00e9rer des donn\u00e9es de WordPress vers Next.js<\/h2>\n
        Avec l’API REST de WordPress, vous pouvez r\u00e9cup\u00e9rer des articles, des pages et des types de publication personnalis\u00e9s en envoyant des requ\u00eates HTTP \u00e0 des points de terminaison sp\u00e9cifiques.<\/p>\n
        Faisons une demande de r\u00e9cup\u00e9ration dans le fichier blog\/page.js<\/strong> pour r\u00e9cup\u00e9rer tous les articles de votre CMS WordPress, puis faisons une demande pour r\u00e9cup\u00e9rer chaque article dynamiquement dans le fichier blog\/[postId]\/page.js<\/strong> en fonction du param\u00e8tre id<\/code> pass\u00e9.<\/p>\n
        Avant d’effectuer ces requ\u00eates, il est conseill\u00e9 d’ajouter l’adresse de votre API JSON \u00e0 une variable d’environnement. Cette approche garantit que l’URL de base de votre API est facilement configurable et qu’elle n’est pas cod\u00e9e en dur dans plusieurs fichiers.<\/p>\n
        Cr\u00e9ez un fichier .<\/strong> env \u00e0 la racine de votre projet Next.js et ajoutez ce qui suit :<\/p>\n
        NEXT_PUBLIC_WORDPRESS_API_URL=https:\/\/yoursite.kinsta.cloud\/wp-json\/wp\/v2<\/code><\/pre>\n
        Assurez-vous de remplacer l’URL par l’API JSON de votre site. Ajoutez \u00e9galement .env<\/code> \u00e0 votre fichier .gitignore<\/a><\/strong> pour qu’il ne pousse pas le fichier vers votre fournisseur Git.<\/p>\n
        R\u00e9cup\u00e9rer tous les articles de WordPress vers Next.js<\/h3>\n
        Pour r\u00e9cup\u00e9rer tous les articles de votre site WordPress, cr\u00e9ez une fonction asynchrone nomm\u00e9e getPosts<\/code> dans votre fichier blog\/page.j<\/strong> s. Cette fonction utilise l’API Fetch pour faire une requ\u00eate GET au point de terminaison \/posts<\/code> de votre API REST WordPress.<\/p>\n
        async function getPosts() {\n    const response = await fetch(\n        `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}\/posts`\n    );\n    const posts = await response.json();\n    return posts;\n}<\/code><\/pre>\n
        Lorsqu’elle re\u00e7oit la r\u00e9ponse, elle la convertit en JSON et construit un tableau d’objets post. Ces posts<\/code> peuvent \u00eatre rendus dans votre application Next.js, fournissant une liste dynamique d’articles de blog r\u00e9cup\u00e9r\u00e9s directement de WordPress.<\/p>\n
        const BlogPage = async () => {\n    const posts = await getPosts();\n    return (\n        <div className=\"blog-page\">\n            <h2>All Blog Posts<\/h2>\n            <p>All blog posts are fetched from WordPress via the WP REST API.<\/p>\n            <div className=\"posts\">\n                {posts.map((post) => {\n                    return (\n                        <Link href={`\/blog\/${post.id}`} className=\"post\" key={post.id}>\n                            <h3>{post.title.rendered}<\/h3>\n                            <p\n                                dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }}\n                            ><\/p>\n                        <\/Link>\n                    );\n                })}\n            <\/div>\n        <\/div>\n    );\n};<\/code><\/pre>\n
        Dans le composant de page Next.js, appelez getPosts<\/code> de mani\u00e8re asynchrone pour r\u00e9cup\u00e9rer les articles. Ensuite, map<\/code> sur le tableau de posts<\/code>, rendez les title<\/code> et excerpt<\/code> de chaque article dans un composant <Link><\/code>.<\/p>\n
        Cela permet non seulement d’afficher les articles, mais aussi d’ins\u00e9rer dans chacun d’eux un lien qui permet de naviguer vers une vue d\u00e9taill\u00e9e du message. Ceci est r\u00e9alis\u00e9 en utilisant le routage bas\u00e9 sur les fichiers de Next.js, o\u00f9 l’ID de l’article est utilis\u00e9 pour g\u00e9n\u00e9rer dynamiquement le chemin de l’URL.<\/p>\n
        R\u00e9cup\u00e9rer les articles dynamiques de WordPress vers Next.js<\/h3>\n
        Dans le code ci-dessus, chaque article est entour\u00e9 d’un lien qui devrait aider les utilisateurs \u00e0 naviguer vers une vue d\u00e9taill\u00e9e de l’article.<\/p>\n
        Pour les pages d’articles individuels, vous utilisez le routage dynamique dans Next.js pour cr\u00e9er une page qui r\u00e9cup\u00e8re et affiche un seul article en fonction de son ID. Une page dynamique [postID]\/page.js<\/strong> est d\u00e9j\u00e0 cr\u00e9\u00e9e dans le code stater-files.<\/p>\n
        Cr\u00e9ez une fonction getSinglePost<\/code>, similaire \u00e0 getPosts<\/code>, pour r\u00e9cup\u00e9rer un seul message en utilisant l’ID du message pass\u00e9 en param\u00e8tre.<\/p>\n
        async function getSinglePost(postId) {\n    const response = await fetch(\n        `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}\/posts\/${postId}`\n    );\n    const post = await response.json();\n    return post;\n}<\/code><\/pre>\n
        Dans le composant de page dynamique, vous extrayez l’ID du message \u00e0 partir des param\u00e8tres de l’URL, vous appelez getSinglePost<\/code> avec cet ID et vous rendez le contenu du message.<\/p>\n
        const page = async ({ params }) => {\n    const post = await getSinglePost(params.postId);\n    \/\/ ... the rest of the page code\n};<\/code><\/pre>\n
        Vous pouvez ensuite remplir la page avec les donn\u00e9es extraites :<\/p>\n
        const page = async ({ params }) => {\n    const post = await getSinglePost(params.postId);\n    if (!post) {\n        return <div>Loading...<\/div>;\n    }\n    return (\n        <div className=\"single-blog-page\">\n            <h2>{post.title.rendered}<\/h2>\n            <div className=\"blog-post\">\n                <p> dangerouslySetInnerHTML={{ __html: post.content.rendered }}><\/p>\n            <\/div>\n        <\/div>\n    );\n};<\/code><\/pre>\n
        Vous pouvez acc\u00e9der au code complet sur notre d\u00e9p\u00f4t GitHub<\/a>.<\/p>\n
        D\u00e9ployer gratuitement votre application Next.js sur Kinsta<\/h2>\n
        Le service d’h\u00e9bergement de sites statiques<\/a> de Kinsta permet d’h\u00e9berger gratuitement<\/strong> jusqu’\u00e0 100 sites statiques.<\/p>\n
        Ce service n’h\u00e9berge que des fichiers statiques. Si vous utilisez un g\u00e9n\u00e9rateur de site statique<\/a> comme Next.js, vous pouvez configurer des options qui construisent votre projet \u00e0 partir de GitHub et d\u00e9ploient les fichiers statiques sur Kinsta.<\/p>\n
        Rendu statique dans Next.js<\/h3>\n
        Pour activer une exportation statique dans Next.js version 13 ci-dessus, changez le mode output<\/code> dans next.config.js<\/strong>:<\/p>\n
        const nextConfig = {\n    output: 'export',\n};<\/code><\/pre>\n
        Maintenant, lorsque vous construisez votre projet, Next.js est cens\u00e9 produire un dossier out<\/strong> qui contient les ressources HTML<\/a>, CSS<\/a> et JavaScript<\/a> pour votre application.<\/p>\n
        Depuis la version 13, Next.js a pris en charge le d\u00e9marrage en tant que site statique, puis plus tard la mise \u00e0 niveau optionnelle pour utiliser des fonctionnalit\u00e9s qui n\u00e9cessitent un serveur. Lorsque vous utilisez des fonctions serveur, la construction de vos pages ne g\u00e9n\u00e8re pas de pages statiques.<\/p>\n
        Par exemple, dans la route dynamique, vous r\u00e9cup\u00e9rez ces donn\u00e9es dynamiquement. Vous devez \u00eatre en mesure de g\u00e9n\u00e9rer tous les articles de mani\u00e8re statique. Vous pouvez le faire en utilisant la fonction generateStaticParams<\/code>.<\/p>\n
        Cette fonction est utilis\u00e9e en combinaison avec les segments de route dynamique pour g\u00e9n\u00e9rer statiquement des routes au moment de la construction au lieu de les g\u00e9n\u00e9rer \u00e0 la demande au moment de la requ\u00eate. Lorsque vous construisez, generateStaticParams<\/code> s’ex\u00e9cute avant que les mises en page ou les pages correspondantes ne soient g\u00e9n\u00e9r\u00e9es.<\/p>\n
        Dans [postID]\/page.js<\/strong>, utilisez la fonction generateStaticParams<\/code> pour obtenir l’itin\u00e9raire de tous les articles :<\/p>\n
        export async function generateStaticParams() {\n    const response = await fetch(\n        `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}\/posts`\n    );\n    const posts = await response.json();\n\n    return posts.map((post) => ({\n        postId: post.id.toString(),\n    }));\n}<\/code><\/pre>\n
        Lorsque vous ex\u00e9cutez la commande de construction, votre projet Next.js g\u00e9n\u00e8re maintenant un r\u00e9pertoire out<\/strong> avec les fichiers statiques.<\/p>\n
        D\u00e9ployer Next.js sur l’h\u00e9bergement de site statique Kinsta<\/h3>\n
        Poussez vos codes vers votre fournisseur Git pr\u00e9f\u00e9r\u00e9 (Bitbucket<\/a>, GitHub<\/a>, ou GitLab<\/a>). Ensuite, suivez ces \u00e9tapes pour d\u00e9ployer votre site statique Next.js sur Kinsta :<\/p>\n
          \n
        1. Connectez-vous ou cr\u00e9ez un compte pour afficher votre tableau de bord MyKinsta<\/a>.<\/li>\n
        2. Autorisez Kinsta avec votre fournisseur Git.<\/li>\n
        3. Cliquez sur Sites statiques<\/strong> dans la colonne lat\u00e9rale de gauche, puis sur Ajouter un site<\/strong>.<\/li>\n
        4. S\u00e9lectionnez le d\u00e9p\u00f4t et la branche \u00e0 partir desquels vous souhaitez d\u00e9ployer.<\/li>\n
        5. Attribuez un nom unique \u00e0 votre site.<\/li>\n
        6. Ajoutez les param\u00e8tres de construction dans le format suivant :\n