Qu'est-ce que Next.js ?
Next.js est un framework populaire donnant la possibilité de créer et développer des applications web performantes et évolutives. Il offre des fonctionnalités développées telles que le routage basé sur les fichiers, le support de TypeScript, les fonctions sans serveur, etc.
Next.js se distingue des autres frameworks par sa capacité à proposer plusieurs méthodes de rendu au sein même de votre application.
Harmonisation des efforts SEO
L’harmonie entre la production de contenu de qualité, le choix de bons mots-clésTerme ou expression que les utilisateurs saisissent dans un moteur de recherche. Base de toute stratégie SEO., la création d’une stratégie de backlinksLien provenant d'un site externe pointant vers votre site. Facteur de ranking majeur. et tous les aspects techniques du SEOSearch Engine Optimization. Ensemble des techniques visant à améliorer le positionnement d'un site web dans les résultats naturels des moteurs de recherche. sont un ensemble de tâches contribuant à une optimisation efficace.
Le SEO technique (vitesse de chargement, structure du site, rendu des pages etc.) influence les moteurs de recherche dans leur indexationProcessus par lequel Google ajoute une page à sa base de données pour qu'elle puisse apparaître dans les résultats. du site un site tandis que les autres éléments donnent de l’autorité et de la pertinence au site.
Si l’harmonie entre ces deux parties ne fonctionnent pas, Next.js apparaît comme une solution intéressante. Il facilite notamment le rendu côté serveurTechnique générant le HTML sur le serveur, facilitant l'indexation du contenu JavaScript. et offre une flexibilité aux développeurs pour sélectionner l’option la plus intéressante pour chaque type de contenu.
L’association de Next.js avec un CMS Headless comme Prismic ajoute un élément d’optimisation supplémentaire, notamment lorsque l’on cherche à optimiser son CMS pour le SEO sans sacrifier la performance technique. Chaque membre de l’équipe des développeurs peut travailler indépendamment sans avoir à toucher au code.
Besoin d'aide avec le SEO de votre site sous next.js ? Faites appel à Slashr, une agence de référencement technique parfaitement aux faits des enjeux de next.js.
Meilleures pratiques SEO avec Next.js
Utilisation du composant "Head"
Le composant Head de Next.js permet d’ajouter des éléments à l’en-tête de votre document HTML comme par exemple des méta-tags.
Pour définir la balise titleBalise HTML définissant le titre d'une page, affiché dans les SERP et l'onglet du navigateur. Facteur de ranking important. d’une page, le code se prAlgorithme historique de Google évaluant l'importance d'une page selon ses backlinks. Toujours utilisé en interne.ésente sous cette forme :
import Head from 'next/head';
function MaPage() {
return (
<div>
<Head>
<title>Mon titre de page pour le SEO</title>
</Head>
<p>Contenu de ma page</p>
</div>
);
}Données structurées
Les données structuréesCode ajouté au HTML pour aider les moteurs à comprendre le contenu et générer des rich snippets. sont répertoriées sous un format prédéfini fixe. Elles donnent aux moteurs de recherche les informations nécessaires à une bonne compréhension du contenu de la page.
Pour un article de blog, les données structurées vont informer les moteurs de recherche que la page est un article, que l’auteur est…, que la date de publication est …, etc.
import Head from 'next/head';
function ArticlePage() {
const structuredData = {
"@context": "httpsProtocole sécurisé de transfert de données. Facteur de ranking depuis 2014.://schema.orgVocabulaire standardisé de balisage structuré reconnu par Google, Bing et Yahoo.",
"@type": "BlogPosting",
"headline": "Titre de l'article",
"image": "url_de_l'image",
"author": {
"@type": "Person",
"name": "Nom de l'auteur"
},
"datePublished": "date_de_publication",
"articleBody": "Contenu de l'article"
};
return (
<div>
<Head>
<script type="application/ld+json">
{JSON.stringify(structuredData)}
</script>
</Head>
<h1Balise HTML du titre principal d'une page. Il ne doit y en avoir qu'un seul par page.>Titre de l'article</h1>
<p>Contenu de l'article</p>
</div>
);
}Avantages des imports dynamiques
L’utilisation des imports dynamiques n’est pas systématique. Supposez que vous ayez un composant lourd qui n’est nécessaire que sous certaines conditions, votre formule de code se présentera ainsi :
import dynamic from 'next/dynamic';
const MonComposantLourd = dynamic(() => import('./MonComposantLourd'), {
loading: () => <p>Chargement...</p>,
ssr: false
});
function MaPage() {
return (
<div>
<h1>Ma page</h1>
<MonComposantLourd />
</div>
);
}Ici, MonComposantLourd n’est chargé que côté client et uniquement lorsqu’il est nécessaire.
Rendu côté serveur avec "getServerSideProps"
Le rendu côté serveur sert à générer du contenu HTML côté serveur pour chaque requête. C’est une fonction utile pour les pages nécessitant des données en temps réel. Voici un exemple concret d’utilisation de getServerSideProps dans Next.js permettant de récupérer des données depuis une API :
function MaPage({ data }) {
return (
<div>
<h1>{data.titre}</h1>
<p>{data.description}</p>
</div>
);
}
export async function getServerSideProps() {
const res = await fetch('https://monapi.com/data');
const data = await res.json();
return {
props: {
data
}
};
}Pour chaque utilisateur qui parcourt la page, les données sont recueillies en instantanées depuis l’API.
Exemples pratiques
Optimisation des images avec next/image
L’optimisation des images est l’une des techniques clés pour booster la performance SEO, souvent couplée à d’autres leviers comme l'obfuscation SEO afin d’optimiser à la fois la vitesse de chargement et la structure du maillage. Avec Next.js et son composant next/image vous avez en main un outil puissant d’optimisation d’image. Taille, poids, format, etc. l’outil opère rapidement et efficacement.
import Image from 'next/image';
function MaPage() {
return (
<div>
<h1>Ma page avec une image optimisée</h1>
<Image
src="/chemin/vers/mon/image.jpg"
alt="Description de l'image"
width={640}
height={480}
/>
</div>
);
}Gestion des routes et des liens avec next/link
La structure des URLsUniform Resource Locator. Adresse unique d'une page web. Une URL optimisée est courte, descriptive et contient le mot-clé. et la navigation interne entre les liens est un aspect du SEO à ne pas négliger, tout comme l’organisation du contenu via un maillage interne intelligent qui maximise la pertinence sémantique. Avec next/link, la gestion de la navigation entre les pages de votre application devient simple. Nul besoin de recharger la page entière.
import Link from 'next/link';
function Navbar() {
return (
<nav>
<Link href="/">Accueil</Link>
<Link href="/a-propos">À propos</Link>
<Link href="/contact">Contact</Link>
</nav>
);
}Utilisation des routes API pour créer des endpoints côté serveur
Next.js facilite la création d’endpoints API sans avoir recours à un serveur backend. Une solution appréciable pour gérer des tâches côté serveur.
Exemple de création d’un endpoint qui renvoie à une liste d’articles :
// pages/api/articles.js
export default function handler(req, res) {
const articles = [
{ id: 1, title: 'Article 1' },
{ id: 2, title: 'Article 2' },
];
res.status(200).json(articles);
}Cet endpoint est accessible depuis n’importe quel client HTTP à l’URL /api/articles.
Faites appel à Slashr, agence SEO basée à Lille pour faire décoller le trafic de votre site next.js !
Quel rendu est le meilleur pour le SEO avec Next.js ?
Server-Side Rendering (SSR)
Le Server-Side Rendering est un langage de programmation qui indique que le contenu de la page est généré à chaque sollicitation du serveur. Lorsqu’un utilisateur arrive sur une page, le serveur active le code associé puis génère la version HTML. Reste ensuite à l’envoye au navigateur.
Avantages pour l’optimisation SEO :
- Un contenu toujours actualisé.
- Un affichage rendu complet favorisant l’indexation.
Utilisez le SSR avec Next.js lorsque :
- Le contenu change fréquemment.
- Les pages nécessitent des données en temps réel.
Static Site Generation (SSG)
Avec le programme Static Site Generation, le contenu est généré lors de la construction. Il se présente sous la forme d’un fichier statique qui s’affiche à chaque fois qu’un utilisateur accède à la page.
Avantages pour le SEO :
- Une extrême rapidité.
- Une diminution du temps de chargement.
Utilisez le SSG avec Next.js :
- Pour les sites ou les pages avec un contenu qui change peu.
- Pour les blogs, les portfolios et les sites d’entreprises.
Incremental Static Regeneration (ISR)
Specificité de Next.js, Incremental Static Regeneration est idéal pour bénéficier des avantages du SSG tout en régénérant des pages statiques déja produites.
Avantages pour le SEO :
- Une combinaison vitesse du SSG/mise à jour en temps réel du SSR.
- Une mise à jour des pages obsolètes sans impact sur les utilisateurs.
Utilisez l’ISR avec Next.js pour :
- Des pages statiques ayant besoin de mises à jour occasionnelles.
- Des articles de blog ajoutés régulièrement sur un site.
Client-Side Rendering (CSR)
Le client-Side Rendering laisse le navigateur analyser le JavascriptLangage de programmation web. Son mauvais usage peut bloquer l'indexation par les moteurs de recherche. avant de générer le contenu HTML. L’accès à la page génère une arborescence de la page, puis son contenu.
Avantages pour le SEO :
- Idéal pour l’expérience utilisateurUser Experience. Qualité de l'expérience vécue par un utilisateur sur un site. Facteur de ranking indirect..
Inconvénients pour le SEO :
- Affichage possible pour les moteurs de recherche d’une page vide, défavorable pour l’indexation.
- Nécessiter parfois d’ajout de configurations pour être SEO-friendly.
Utilisez le CSR avec Next.js :
- Pour les parties interactives de votre application.
| Méthode de Rendu | Avantages | Inconvénients | Cas d'utilisation |
|---|---|---|---|
| Server-Side Rendering (SSR) | - Toujours à jour. - Excellent pour l'indexation. | - Plus lent que le SSG car le contenu est généré à chaque demande. | - Contenu qui change fréquemment. - Données en temps réel. |
| Static Site Generation (SSG) | - Très rapide. - Excellent pour l'indexation et l'expérience utilisateur. | - Pas idéal pour le contenu en temps réel. | - Sites ou pages avec un contenu stable. - Blogs, portfolios. |
| Incremental Static Regeneration (ISR) | - Vitesse du SSG. - Mises à jour en temps réel. | - Nécessite une configuration supplémentaire. | - Pages statiques nécessitant des mises à jour occasionnelles. |
| Client-Side Rendering (CSR) | - Idéal pour les applications web interactives. | - Risque d'indexation faible. - Nécessite des configurations SEO supplémentaires. | - Parties interactives d'une application, comme un tableau de bord utilisateur. |
Tags
Co-fondateur & SEO Director
Benoît Demonchaux est co-fondateur de Slashr, agence de référencement naturel basée à Lille et consultant SEO depuis 6 ans. Avant de créer Slashr, il a exercé en tant qu'éditeur de sites et chef de projets dans une grande agence SEO.
Voir tous ses articlesArticles recommandés
React SEO : le guide complet
Le développement de technologies toujours plus innovantes a permis de voir apparaître React, une bibliothèque Javascript, largement utilisée par les développeurs. Mis en place par la plateforme Facebook, React permet de créer des interfaces utilisateur interactives et performantes. Son efficacité en matière de développement ne doit pas pour autant nous faire oublier que l’outil présente [...]
Shopify SEO : Le guide pour optimiser votre référencement naturel
Nos conseils sur le référencement sur Shopify en bref On entend souvent que Shopify n'est pas super pour le SEO. Cependant, avec quelques ajustement, il est possible bien performer en SEO. Voici les éléments les plus importants pour optimiser la base technique pour le SEO de votre Shopify : Nous examinons également les possibilités de [...]
Gatsby et JavaScript pour le SEO : le guide complet
Gatsby est un outil générateur de sites statiques basé sur JavaScript React qui bénéficient de performances en termes de conception technique mais également de référencement SEO. Depuis l’arrivée de Gatsby, différencier un site statique d’un site dynamique est devenu complexe. Google et ses concurrents ont toujours privilégié les sites dotés d’une rapidité de téléchargement tels [...]