Comment intégrer un blog performant sur un site Next.js existant
Un site sans blog, c'est comme une boutique sans vitrine. Vous avez des choses à dire, des expertises à partager, des mots-clés à capter sur Google. Mais sans contenu régulier, Google ne vous trouve pas.
Si votre site est déjà en Next.js, ajouter un blog est simple. Si votre site est encore sur WordPress, c'est l'occasion de migrer tout en gardant votre contenu.
Voici comment on construit un blog performant sur Next.js.
L'architecture d'un blog Next.js
Option 1 : Fichiers Markdown (MDX)
Pour qui : les sites avec un contenu géré par des développeurs, ou les blogs avec peu de contributeurs.
Comment ça marche :
- Chaque article est un fichier
.mdou.mdx - Le frontmatter (YAML en haut du fichier) contient les métadonnées
- Next.js génère les pages statiquement au build
- Les articles sont versionnés avec Git
Exemple de fichier :
---
title: "Mon super article"
date: "2026-05-20"
author: "Promto.be"
tag: "SEO"
---
## Mon titre
Mon contenu en markdown...
Avantages :
- Ultra-rapide (fichiers statiques)
- Versionné avec Git (historique complet)
- Pas de base de données
- Gratuit
Inconvénients :
- Nécessite Git pour publier
- Pas d'interface WYSIWYG
- Moins accessible aux non-développeurs
Option 2 : CMS Headless (recommandé)
Pour qui : les équipes marketing, les blogs avec plusieurs auteurs, les sites où le contenu change fréquemment.
Comment ça marche :
- Les articles sont rédigés dans Sanity, DatoCMS, ou Contentful
- Next.js récupère le contenu via API au build
- Les pages sont générées statiquement (SSG)
- ISR régénère les pages quand le contenu change
Avantages :
- Interface d'édition friendly
- Pas besoin de Git pour publier
- Gestion des images intégrée
- Workflows de validation
- Planification de publication
Inconvénients :
- Dépendance à un service tiers
- Coût potentiel à grande échelle
Les fonctionnalités essentielles d'un blog moderne
1. URLs propres et sémantiques
❌ /blog/post.php?id=42
✅ /blog/comment-optimiser-son-seo-en-2026
Next.js gère les routes dynamiques nativement :
// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
const posts = await getPosts();
return posts.map((post) => ({ slug: post.slug }));
}
2. Metadata SEO par article
Chaque article doit avoir son propre title, description, et Open Graph.
export async function generateMetadata({ params }) {
const post = await getPost(params.slug);
return {
title: post.title,
description: post.excerpt,
openGraph: {
images: [post.coverImage],
},
};
}
3. Sitemap XML automatique
// next-sitemap.config.js
module.exports = {
siteUrl: 'https://monsite.be',
generateRobotsTxt: true,
};
Le sitemap se met à jour automatiquement à chaque build.
4. Schema.org Article
{
"@context": "https://schema.org",
"@type": "BlogPosting",
"headline": "Titre de l'article",
"author": { "@type": "Person", "name": "Auteur" },
"datePublished": "2026-05-20",
"dateModified": "2026-05-20"
}
5. Images optimisées
import Image from 'next/image';
<Image
src={post.coverImage}
alt={post.title}
width={1200}
height={630}
priority={isFirstArticle}
/>
Conversion WebP automatique, lazy loading, responsive srcset.
6. Rendu Markdown
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
<ReactMarkdown remarkPlugins={[remarkGfm]}>
{post.content}
</ReactMarkdown>
Avec des composants custom pour les images, liens, et blocs de code.
7. Liste d'articles avec pagination
// Page blog avec 10 articles par page
const POSTS_PER_PAGE = 10;
const posts = await getPosts();
const totalPages = Math.ceil(posts.length / POSTS_PER_PAGE);
8. Tags et catégories
/blog/tag/seo
/blog/tag/nextjs
/blog/category/tutoriels
Routes dynamiques pour filtrer les articles par tag.
9. Recherche full-text
Options légères :
- Fuse.js : recherche côté client, offline
- Algolia DocSearch : recherche instantanée, scalable
- Pagefind : indexation statique, zéro JS runtime
10. RSS Feed
// app/feed.xml/route.ts
export async function GET() {
const posts = await getPosts();
const feed = generateRSS(posts);
return new Response(feed, {
headers: { 'Content-Type': 'application/xml' },
});
}
Encore utile pour les lecteurs RSS et les agrégateurs.
La performance d'un blog Next.js
| Métrique | WordPress | Next.js |
|---|---|---|
| Time to First Byte | 800ms | 50ms |
| First Contentful Paint | 2-4s | 0.3s |
| CLS | 0.1-0.3 | 0 |
| Score PageSpeed | 30-60 | 95-100 |
| Coût hébergement | 30€/mois | 0€ |
Un blog Next.js charge plus vite, se fait mieux indexer, et coûte moins cher.
Migration d'un blog WordPress vers Next.js
Étape 1 : Exporter le contenu
WordPress > Outils > Exporter > Tout le contenu. Fichier XML généré.
Étape 2 : Convertir en Markdown
Outils comme wordpress-export-to-markdown ou scripts Node.js custom.
Étape 3 : Nettoyer
- Supprimer les shortcodes
- Convertir les images
- Uniformiser le frontmatter
- Vérifier les liens internes
Étape 4 : Générer les pages statiques
Next.js build avec generateStaticParams pour chaque article.
Étape 5 : Redirections 301
// next.config.js
redirects: [
{ source: '/2020/05/mon-ancien-article', destination: '/blog/mon-ancien-article', permanent: true },
]
Étape 6 : Vérifier l'indexation
Google Search Console > Sitemap > Soumettre le nouveau sitemap.
Le blog de Promto.be
Notre propre blog (celui que vous lisez) est construit avec :
- Next.js App Router
- Fichiers Markdown dans
/content/blogs/ - gray-matter pour parser le frontmatter
- react-markdown pour le rendu
- next/image pour les images optimisées
- ISR pour les mises à jour instantanées
Résultat : un blog qui se charge en moins d'une seconde, qui est parfaitement référencé, et qui ne nous coûte rien en hébergement.
Conclusion
Un blog n'est pas un accessoire. C'est un outil de visibilité, d'autorité, et de SEO.
Mais un blog lent, mal structuré, et coûteux à maintenir ? C'est un frein.
Next.js transforme le blog en atout : rapide, gratuit à héberger, parfaitement indexé par Google, et simple à maintenir.
Que vous partiez de zéro ou que vous migratiez depuis WordPress, l'investissement en vaut largement la peine.