Colas Mérand
14/06/2025
Next.js
SEO
SSR
5 minutes
Dans le monde du développement web moderne, la performance et le référencement sont des facteurs critiques pour le succès de tout projet digital. Chez Platane, nous constatons régulièrement que de nombreux développeurs et entreprises rencontrent des difficultés pour optimiser leurs applications Next.js pour les moteurs de recherche. Un problème récurrent concerne la génération de pages statiques et la détection de ces pages par les outils d'analyse SEO de Google.
Les frameworks JavaScript comme Next.js offrent une expérience utilisateur exceptionnelle, mais peuvent poser des défis particuliers en matière de référencement. Contrairement aux sites web traditionnels, les applications construites avec React et Next.js nécessitent une attention particulière pour s'assurer que les moteurs de recherche puissent correctement indexer leur contenu.
Le problème principal ? Les robots d'indexation de Google et d'autres moteurs de recherche ne traitent pas le JavaScript de la même manière qu'un navigateur web. Sans configuration appropriée, vos pages risquent de ne pas être correctement indexées, rendant votre contenu invisible aux utilisateurs potentiels.
Next.js propose deux approches principales pour résoudre ce problème :
Le rendu côté serveur génère le HTML de chaque page à chaque requête. Cela garantit que les moteurs de recherche reçoivent une page HTML complète à indexer, même si votre application utilise beaucoup de JavaScript.
// Exemple de page avec SSR dans Next.js
export async function getServerSideProps(context) {
// Récupération de données depuis une API
const data = await fetchData();
return {
props: { data }, // Ces props seront passées au composant de la page
};
}
La génération de sites statiques pré-rend les pages HTML au moment de la construction (build). Cette approche est idéale pour les pages dont le contenu ne change pas fréquemment.
// Exemple de page avec SSG dans Next.js
export async function getStaticProps() {
// Récupération de données depuis une API
const data = await fetchData();
return {
props: { data },
// Revalidation optionnelle pour l'ISR (Incremental Static Regeneration)
revalidate: 60, // Régénère la page toutes les 60 secondes si nécessaire
};
}
// Pour les pages avec des paramètres dynamiques
export async function getStaticPaths() {
// Définir les chemins à pré-rendre
const paths = [
{ params: { id: '1' } },
{ params: { id: '2' } }
];
return {
paths,
fallback: 'blocking' // ou true/false selon vos besoins
};
}
Si les outils Google comme Search Console ne détectent pas certaines de vos pages, plusieurs facteurs peuvent être en cause :
Le choix entre SSR et SSG dépend de la nature de votre contenu :
Chez Platane, nous avons récemment mis en œuvre cette approche pour le site du Festival Ouaille Note. En utilisant Gatsby (un framework similaire à Next.js pour le SSG) combiné à une boutique Shopify headless, nous avons créé un site ultra-optimisé pour le SEO et la vitesse de chargement. Les résultats ont été impressionnants, avec une amélioration significative du classement dans les résultats de recherche.
Next.js permet de générer des sitemaps dynamiques qui incluent toutes vos pages :
// pages/sitemap.xml.js
import { getAllPostIds } from '../lib/posts';
const Sitemap = () => {};
export async function getServerSideProps({ res }) {
const baseUrl = 'https://votredomaine.com';
const posts = getAllPostIds();
const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>${baseUrl}</loc>
<lastmod>${new Date().toISOString()}</lastmod>
<changefreq>monthly</changefreq>
<priority>1.0</priority>
</url>
${posts
.map(({ params: { id } }) => {
return `
<url>
<loc>${baseUrl}/posts/${id}</loc>
<lastmod>${new Date().toISOString()}</lastmod>
<changefreq>weekly</changefreq>
<priority>0.8</priority>
</url>
`;
})
.join('')}
</urlset>
`;
res.setHeader('Content-Type', 'text/xml');
res.write(sitemap);
res.end();
return {
props: {},
};
}
export default Sitemap;
Assurez-vous que toutes vos pages sont accessibles via des liens internes. Une bonne architecture de navigation aide non seulement les utilisateurs mais aussi les robots d'indexation.
Next.js facilite l'ajout de balises meta avec le composant Head :
import Head from 'next/head';
function MaPage({ data }) {
return (
<>
<Head>
<title>{data.title}</title>
<meta name="description" content={data.description} />
<meta property="og:title" content={data.title} />
<meta property="og:description" content={data.description} />
<meta property="og:image" content={data.image} />
<link rel="canonical" href={`https://votredomaine.com/page/${data.slug}`} />
</Head>
{/* Contenu de la page */}
</>
);
}
La performance est un facteur de classement important. Utilisez des outils comme @next/bundle-analyzer pour identifier et réduire la taille de vos bundles JavaScript :
npm install --save-dev @next/bundle-analyzer
Puis dans votre next.config.js :
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
});
module.exports = withBundleAnalyzer({
// Vos autres configurations Next.js
});
Lors du développement de la plateforme Epictory, qui génère des posters basés sur des parcours Strava, nous avons été confrontés à un défi similaire. La nature dynamique du contenu nécessitait une approche hybride.
Nous avons implémenté :
Cette approche a permis d'obtenir d'excellents scores de performance dans Lighthouse et une indexation complète par Google, tout en maintenant une expérience utilisateur fluide.
Une fois vos optimisations mises en place, utilisez ces outils pour vérifier que vos pages sont correctement indexées :
site: : Utilisez la commande site:votredomaine.com dans Google pour voir quelles pages sont indexées.L'optimisation SEO des applications Next.js nécessite une compréhension approfondie des mécanismes de rendu et des bonnes pratiques en matière de référencement. En choisissant la bonne stratégie entre SSR et SSG, en implémentant un sitemap dynamique, et en veillant à la performance de votre application, vous pouvez considérablement améliorer la visibilité de votre site dans les résultats de recherche.
Chez Platane, nous combinons expertise technique et créativité pour développer des solutions sur mesure qui répondent précisément à ces défis. Notre approche intègre les technologies de pointe comme Next.js, TypeScript et TailwindCSS, tout en gardant un œil attentif sur les performances et le référencement.
Vous rencontrez des difficultés avec l'optimisation SEO de votre application Next.js ? Vous souhaitez améliorer la visibilité de votre site web ? N'hésitez pas à nous contacter via notre formulaire de contact pour échanger sur votre projet. Notre équipe d'experts sera ravie de vous accompagner dans la résolution de vos problématiques techniques et la réalisation de vos objectifs business.
Vous préférez discuter de vive voix ? Nous aussi et c'est évidemment sans engagement !
Une question, un besoin de renseignements ? N'hésitez pas à nous contacter.