Comment utiliser WordPress comme un CMS sans tête pour Next.js

Comprendre WordPress sans tête

L'expression "Headless WordPress" désigne le fait de n'utiliser que la fonctionnalité "back-end" de WordPress (gestion et stockage du contenu) et d'utiliser un système distinct (tel que Next.js) pour afficher le "front-end".

L'avantage de ce modèle de développement est que vous pouvez continuer à utiliser les outils de gestion de contenu puissants et faciles à utiliser de WordPress, tout en bénéficiant des avantages des technologies frontales modernes telles que Next.js, comme le chargement plus rapide des pages (via le rendu côté serveur ou la génération de sites statiques), une meilleure expérience utilisateur et une personnalisation plus souple.

Mise en place de l'environnement Next.js

Next.js aide les développeurs à créer facilement des applications web, en améliorant les performances et en optimisant l'expérience de développement. L'une de ses principales caractéristiques est le routage basé sur les fichiers, qui simplifie la création d'itinéraires.

Next.js est également très orienté vers la performance, offrant des fonctionnalités telles que le fractionnement automatique du code pour charger uniquement le JavaScript nécessaire à chaque page, réduisant ainsi considérablement les temps de chargement. Pour créer un projet Next.js, vous pouvez lancer la commande suivante et utiliser sa réponse par défaut :

npx create-next-app@latest nextjs-wp-demo

En savoir plus sur le projet

Next.js 13 introduitRouteur d'applicationqui remplace le répertoire pages existant pour le routage. Le routage avec App Router nécessite également la création de dossiers dans le répertoire app. Un fichier page.js est ensuite imbriqué dans le dossier approprié pour définir la route. Dans ce projet, app est le répertoire principal avec lequel interagir et possède la structure de fichiers suivante.

/
|-- /app
    |-- /blog
        |-- /[postId]
        |-- page.js
        |-- page.js
    |-- globals.css
    |-- layout.js
    |-- navbar.js
    |-- page.js

Nous avons créé trois pages : la page d'accueil pour les informations de base, la page du blog pour tous les articles du CMS WordPress, la page dynamique ([postId]/page.js) est utilisé pour afficher les messages individuels. Notez également que navbar.js qui est importé dans le layout.js afin de créer une mise en page pour le projet.

Récupérer des données de WordPress vers Next.js

En utilisant l'API REST de WordPress, les articles, les pages et les types d'articles personnalisés peuvent être récupérés en envoyant des requêtes HTTP à des points d'extrémité spécifiques. Dans l'interfaceblog/page.js pour faire une requête de récupération de tous les articles dans le CMS WordPress, et enfin faire une requête pour récupérer dynamiquement tous les articles dans le CMS WordPress en fonction des paramètres passésblog/[postId]/page.jsidTous les messages de la rubrique .

Il est conseillé d'ajouter l'adresse JSON de l'API à une variable d'environnement avant d'effectuer ces demandes. Cette approche garantit que l'URL de l'API de base est facile à configurer et n'est pas codée en dur dans plusieurs fichiers.

 Dans le répertoire racine de votre projet Next.js, créez un fichier.env et ajoutez ce qui suit :

NEXT_PUBLIC_WORDPRESS_API_URL=https://yoursite.kinsta.cloud/wp-json/wp/v2

Veillez à remplacer l'URL par l'API JSON du site. De plus, ajoutez la balise.envjusqu'à.gitignore afin de ne pas pousser le fichier vers le fournisseur Git.

Récupérer tous les articles de WordPress vers Next.js

Pour obtenir tous les articles d'un site WordPress, ajoutez un nouvel article à l'espace de travail de l'application blog/page.js pour créer une fonction asynchrone appelée getPosts. Cette fonction utilise l'API Fetch pour effectuer une requête GET vers le point de terminaison /posts de l'API REST de WordPress.

async function getPosts() {
    const response = await fetch(
        `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts`
    ) ;
    const posts = await response.json() ;
    return posts ; }
}

Une fois la réponse reçue, il la convertit au format JSON et crée un tableau d'objets post. Ces articles peuvent être rendus dans une application Next.js, fournissant une liste dynamique d'articles de blog directement à partir de WordPress.

const BlogPage = async () => {
    const posts = await getPosts() ;
    return (
        <div classname="blog-page">
            <h2>Tous les articles du blog</h2>
            <p>Tous les articles de blog sont extraits de WordPress via l'API WP REST.</p>
            <div classname="posts">
                {posts.map((post) =&gt; {
                    return (
                        <link href="{`/blog/${post.id}`}" classname="post" key="{post.id}">
                            <h3>{post.title.rendered}</h3>
                            <p
                                dangerouslysetinnerhtml="{{" __html: post.excerpt.rendered }}
></p>
                        </Link>
                    );
                })}
            </div>
        </div>
    );
};

Dans le composant de page Next.js, getPosts est appelé de manière asynchrone pour récupérer les articles. Ensuite, le tableau de messages est mappé et le titre et l'extrait de chaque message sont rendus dans le composant.

Cela permet non seulement d'afficher les messages, mais aussi d'encapsuler chaque message dans un lien qui permet de naviguer vers une vue détaillée du message. Pour ce faire, on utilise le routage basé sur le fichier Next.js, où l'identifiant de l'article est utilisé pour générer dynamiquement le chemin d'accès à l'URL.

Obtenir des articles dynamiques de WordPress à Next.js

Dans le code ci-dessus, chaque article est entouré d'un lien qui aide l'utilisateur à naviguer vers la vue détaillée de l'article. Pour les pages de billets individuels, vous pouvez utiliser le routage dynamique dans Next.js pour créer une page qui parcourt et affiche les billets individuels sur la base de l'identifiant du billet. Une page dynamique [postID]/page.js a été créée dans le code stater-files.

Créer une fonction getSinglePost similaire à getPosts qui permet d'obtenir un seul message en utilisant l'identifiant du message passé en paramètre.

async function getSinglePost(postId) {
    const response = await fetch(
        `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts/${postId}`
    ) ;
    const post = await response.json() ;
    const post = await response.json() ; return post ; }
}

Dans le composant Dynamic Pages, vous pouvez extraire l'ID de l'article à partir du paramètre URL, appeler getSinglePost avec cet ID, puis rendre le contenu de l'article.

const page = async ({ params })) => {
    const post = await getSinglePost(params.postId) ;
    // ... le reste du code de la page
} ; }

La page peut alors être remplie avec les données acquises :

const page = async ({ params })) => {
    const post = await getSinglePost(params.postId) ;
    if (!post) {
        return <div>Chargement...</div>;)
    }
    return (
        <div classname="single-blog-page">
            <h2>{post.title.rendered}</h2>
            <div classname="blog-post">
                <p> dangerouslySetInnerHTML={{ __html : post.content.rendered }}&gt;</p>
            </div>
        </div>
    );
};

résumés

Apprenez à récupérer et à afficher dynamiquement des articles dans un projet Next.js en utilisant WordPress sans tête. Cette approche intègre de manière transparente le contenu de WordPress dans les applications Next.js, offrant une expérience web moderne et dynamique. Le potentiel de l'API Headless CMS ne se limite pas aux articles ; elle permet également de récupérer et de gérer les pages, les commentaires, les médias, et plus encore.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.