WordPress existe depuis plus de 20 ans et alimente 42,7 % de tous les sites web sur l’internet, selon W3Techs. Il détient également une part de marché de 62,5 % pour les systèmes de gestion de contenu (CMS) derrière les sites web.
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, un framework React très populaire, en est un exemple.
Ce guide montre comment utiliser WordPress comme un CMS headless, en fournissant des données à votre application Next.js. Il explique également comment déployer votre code Next.js en tant que site statique sur le service gratuit d’hébergement de sites statiques de Kinsta.
Comprendre WordPress headless
WordPress headless se réfère à l’utilisation de WordPress uniquement pour ses capacités de backend – gestion et stockage de contenu – et à l’utilisation d’un système séparé, comme Next.js, pour la présentation frontend.
Ce découplage permet aux développeurs d’utiliser les outils de gestion de contenu robustes de WordPress tout en profitant pleinement des fonctionnalités modernes de développement du frontend, telles que le rendu côté serveur et la génération de sites statiques dans Next.js.
Préparer votre site WordPress
Avant de plonger dans le développement de Next.js, votre site WordPress a besoin d’un peu de préparation pour servir d’un CMS headless.
Si vous n’avez pas encore de site WordPress, vous pouvez en créer un facilement avec Kinsta. Il existe trois méthodes pour créer un site WordPress avec Kinsta :
- Créer un site sur votre machine locale (éventuellement en utilisant nos outils DevKinsta) avant de transférer le site sur nos serveurs
- Créer un site à distance en utilisant le tableau de bord MyKinsta
- Créer un site à distance en utilisant l’API Kinsta
Une fois que vous avez un site WordPress, il y a deux approches pour récupérer les données de votre CMS WordPress dans votre framework frontend : WPGraphQL et REST API.
L’API REST facilite la récupération des données au format JSON en utilisant des approches JavaScript comme l’API Fetch ou la bibliothèque Axios. L’API REST est intégrée à WordPress depuis la version 4.7, ce qui signifie qu’elle ne nécessite aucune extension pour fonctionner. Mais pour utiliser WPGraphQL, qui vous permet d’interagir avec vos données WordPress à l’aide de requêtes GraphQL, vous devez installer l’extension WPGraphQL.
Utilisons l’API REST pour ce guide. Pour obtenir vos données WordPress au format JSON, ajoutez /wp-json/wp/v2 à l’URL de votre site WordPress :
http://yoursite.com/wp-json/wp/v2Si l’API JSON n’est pas activée par défaut lorsque vous visitez http://yoursite.com/wp-json, vous pouvez l’activer en ouvrant Permaliens sous Réglages dans le tableau de bord de WordPress et en sélectionnant Nom de la publication ou tout autre nom de votre choix sauf Simple :
Cela fonctionne pour les sites WordPress locaux et publics, offrant des points de terminaison pour le contenu qui comprend les articles, les pages, les commentaires et les médias. Lisez notre guide complet de l’API REST pour en savoir plus.
Configurer votre environnement Next.js
Next.js aide les développeurs à créer des applications web facilement, en améliorant les performances et en optimisant l’expérience de développement. L’une de ses principales fonctionnalités est le routage basé sur les fichiers, qui simplifie la création d’itinéraires.
Next.js met également l’accent sur les performances, en offrant des fonctionnalités telles que le fractionnement automatique du code, qui ne charge que le JavaScript nécessaire pour chaque page, réduisant ainsi de manière significative le temps de chargement.
Pour mettre en place un projet Next.js, vous pouvez exécuter la commande suivante et utiliser ses réponses par défaut :
npx create-next-app@latest nextjs-wp-demoPour ce guide, vous pouvez utiliser notre modèle de démarrage Git en suivant les étapes suivantes :
- Visitez le dépôt GitHub de ce projet.
- Sélectionnez Utiliser ce modèle > Créer un nouveau dépôt pour copier le code de démarrage dans un dépôt de votre compte GitHub (cochez la case pour inclure toutes les branches).
- Téléchargez le dépôt sur votre ordinateur local et passez à la branche starter-files à l’aide de la commande :
git checkout starter-files.
- Installez les dépendances nécessaires en exécutant la commande
npm install.
Une fois l’installation terminée, lancez le projet sur votre ordinateur local en exécutant la commande npm run dev. Le projet est alors disponible à l’adresse http://localhost:3000/.
Comprendre le projet
L’App Router a été introduit dans Next.js 13, remplaçant le répertoire pages existant pour le routage. Le routage avec l’App Router implique également la création de dossiers dans le répertoire app. Ensuite, vous imbriquez un fichier page.js dans le dossier approprié pour définir votre itinéraire.
Dans ce projet, app est le répertoire principal avec lequel vous allez interagir, et vous trouverez la structure de fichiers suivante.
/
|-- /app
|-- /blog
|-- /[postId]
|-- page.js
|-- page.js
|-- globals.css
|-- layout.js
|-- navbar.js
|-- page.jsTrois pages sont créées : 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) pour le rendu des articles individuels.
Vous remarquerez également le composant navbar.js, qui est importé dans le fichier layout.js afin de créer une mise en page pour le projet.
Récupérer des données de WordPress vers Next.js
Avec l’API REST de WordPress, vous pouvez récupérer des articles, des pages et des types de publication personnalisés en envoyant des requêtes HTTP à des points de terminaison spécifiques.
Faisons une demande de récupération dans le fichier blog/page.js pour récupérer tous les articles de votre CMS WordPress, puis faisons une demande pour récupérer chaque article dynamiquement dans le fichier blog/[postId]/page.js en fonction du paramètre id passé.
Avant d’effectuer ces requêtes, il est conseillé d’ajouter l’adresse de votre API JSON à 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ée en dur dans plusieurs fichiers.
Créez un fichier . env à la racine de votre projet Next.js et ajoutez ce qui suit :
NEXT_PUBLIC_WORDPRESS_API_URL=https://yoursite.kinsta.cloud/wp-json/wp/v2Assurez-vous de remplacer l’URL par l’API JSON de votre site. Ajoutez également .env à votre fichier .gitignore pour qu’il ne pousse pas le fichier vers votre fournisseur Git.
Récupérer tous les articles de WordPress vers Next.js
Pour récupérer tous les articles de votre site WordPress, créez une fonction asynchrone nommée getPosts dans votre fichier blog/page.j s. Cette fonction utilise l’API Fetch pour faire une requête GET au point de terminaison /posts de votre API REST WordPress.
async function getPosts() {
const response = await fetch(
`${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts`
);
const posts = await response.json();
return posts;
}Lorsqu’elle reçoit la réponse, elle la convertit en JSON et construit un tableau d’objets post. Ces posts peuvent être rendus dans votre application Next.js, fournissant une liste dynamique d’articles de blog récupérés directement de WordPress.
const BlogPage = async () => {
const posts = await getPosts();
return (
<div className="blog-page">
<h2>All Blog Posts</h2>
<p>All blog posts are fetched from WordPress via the WP REST API.</p>
<div className="posts">
{posts.map((post) => {
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, appelez getPosts de manière asynchrone pour récupérer les articles. Ensuite, map sur le tableau de posts, rendez les title et excerpt de chaque article dans un composant <Link>.
Cela permet non seulement d’afficher les articles, mais aussi d’insérer dans chacun d’eux un lien qui permet de naviguer vers une vue détaillée du message. Ceci est réalisé en utilisant le routage basé sur les fichiers de Next.js, où l’ID de l’article est utilisé pour générer dynamiquement le chemin de l’URL.
Récupérer les articles dynamiques de WordPress vers Next.js
Dans le code ci-dessus, chaque article est entouré d’un lien qui devrait aider les utilisateurs à naviguer vers une vue détaillée de l’article.
Pour les pages d’articles individuels, vous utilisez le routage dynamique dans Next.js pour créer une page qui récupère et affiche un seul article en fonction de son ID. Une page dynamique [postID]/page.js est déjà créée dans le code stater-files.
Créez une fonction getSinglePost, similaire à getPosts, pour récupérer un seul message en utilisant l’ID 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();
return post;
}Dans le composant de page dynamique, vous extrayez l’ID du message à partir des paramètres de l’URL, vous appelez getSinglePost avec cet ID et vous rendez le contenu du message.
const page = async ({ params }) => {
const post = await getSinglePost(params.postId);
// ... the rest of the page code
};Vous pouvez ensuite remplir la page avec les données extraites :
const page = async ({ params }) => {
const post = await getSinglePost(params.postId);
if (!post) {
return <div>Loading...</div>;
}
return (
<div className="single-blog-page">
<h2>{post.title.rendered}</h2>
<div className="blog-post">
<p> dangerouslySetInnerHTML={{ __html: post.content.rendered }}></p>
</div>
</div>
);
};Vous pouvez accéder au code complet sur notre dépôt GitHub.
Déployer gratuitement votre application Next.js sur Kinsta
Le service d’hébergement de sites statiques de Kinsta permet d’héberger gratuitement jusqu’à 100 sites statiques.
Ce service n’héberge que des fichiers statiques. Si vous utilisez un générateur de site statique comme Next.js, vous pouvez configurer des options qui construisent votre projet à partir de GitHub et déploient les fichiers statiques sur Kinsta.
Rendu statique dans Next.js
Pour activer une exportation statique dans Next.js version 13 ci-dessus, changez le mode output dans next.config.js:
const nextConfig = {
output: 'export',
};Maintenant, lorsque vous construisez votre projet, Next.js est censé produire un dossier out qui contient les ressources HTML, CSS et JavaScript pour votre application.
Depuis la version 13, Next.js a pris en charge le démarrage en tant que site statique, puis plus tard la mise à niveau optionnelle pour utiliser des fonctionnalités qui nécessitent un serveur. Lorsque vous utilisez des fonctions serveur, la construction de vos pages ne génère pas de pages statiques.
Par exemple, dans la route dynamique, vous récupérez ces données dynamiquement. Vous devez être en mesure de générer tous les articles de manière statique. Vous pouvez le faire en utilisant la fonction generateStaticParams.
Cette fonction est utilisée en combinaison avec les segments de route dynamique pour générer statiquement des routes au moment de la construction au lieu de les générer à la demande au moment de la requête. Lorsque vous construisez, generateStaticParams s’exécute avant que les mises en page ou les pages correspondantes ne soient générées.
Dans [postID]/page.js, utilisez la fonction generateStaticParams pour obtenir l’itinéraire de tous les articles :
export async function generateStaticParams() {
const response = await fetch(
`${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts`
);
const posts = await response.json();
return posts.map((post) => ({
postId: post.id.toString(),
}));
}Lorsque vous exécutez la commande de construction, votre projet Next.js génère maintenant un répertoire out avec les fichiers statiques.
Déployer Next.js sur l’hébergement de site statique Kinsta
Poussez vos codes vers votre fournisseur Git préféré (Bitbucket, GitHub, ou GitLab). Ensuite, suivez ces étapes pour déployer votre site statique Next.js sur Kinsta :
- Connectez-vous ou créez un compte pour afficher votre tableau de bord MyKinsta.
- Autorisez Kinsta avec votre fournisseur Git.
- Cliquez sur Sites statiques dans la colonne latérale de gauche, puis sur Ajouter un site.
- Sélectionnez le dépôt et la branche à partir desquels vous souhaitez déployer.
- Attribuez un nom unique à votre site.
- Ajoutez les paramètres de construction dans le format suivant :
- Commande de construction :
npm run build - Version du nœud :
18.16.0 - Répertoire de publication :
out
- Commande de construction :
- Enfin, cliquez sur Créer un site.
Et le tour est joué ! En quelques secondes, vous disposez d’un site déployé. Un lien est fourni pour accéder à la version déployée de votre site. Vous pourrez par la suite ajouter votre domaine personnalisé et votre certificat SSL si vous le souhaitez.
Comme alternative à l’hébergement de sites statiques, vous pouvez opter pour le déploiement de votre site statique avec le service d’hébergement d’applications de Kinsta, qui offre une plus grande flexibilité d’hébergement, un plus large éventail d’avantages et l’accès à des fonctionnalités plus robustes – comme l’évolutivité, le déploiement personnalisé à l’aide d’un fichier Docker, et des analyses complètes englobant des données en temps réel et historiques. Vous n’avez pas non plus besoin de configurer votre projet Next.js pour un rendu statique.
Résumé
Dans cet article, vous avez appris comment tirer parti de WordPress headless dans un projet Next.js pour récupérer et afficher les articles de manière dynamique. Cette approche permet l’intégration transparente du contenu de WordPress dans les applications Next.js, offrant une expérience web moderne et dynamique.
Le potentiel de l’API headless CMS s’étend au-delà des simples articles ; elle permet de récupérer et de gérer les pages, les commentaires, les médias, et bien plus encore.
De plus, l’hébergement de votre CMS WordPress avec vos frameworks frontend ne doit pas être un problème. Avec le tableau de bord MyKinsta de Kinsta, vous disposez d’une plateforme unifiée pour gérer facilement vos sites web, applications, bases de données et sites statiques WordPress.
Joel est un développeur d'interfaces publiques qui travaille chez Kinsta en tant que rédacteur technique. Il est un enseignant passionné par l'open source et a écrit plus de 200 articles techniques, principalement autour de JavaScript et de ses frameworks.
Laisser un commentaire