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és, la création d’une stratégie de backlinks et tous les aspects techniques du SEO 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 indexation 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é serveur 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. 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 title d’une page, le code se pré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ées 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": "https://schema.org",
"@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>
<h1>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 une des techniques efficaces pour améliorer les performances SEO de votre site. 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 URLs et la navigation interne entre les liens est un aspect du SEO à ne pas négliger ni sous-estimer. 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 Javascript 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 utilisateur.
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. |