Chapitre 2 · Leçon 1
Configurer les métadonnées pour le référencement
Next.js 15 propose une Metadata API déclarative pour gérer les balises <head> : title, description, Open Graph, Twitter Cards, et plus encore.
app/layout.tsx
1import type { Metadata } from "next";
2
3// Metadata statique — définie une fois
4export const metadata: Metadata = {
5 title: {
6 template: "%s | Usher Platform",
7 default: "Usher — Formation Ingénierie Logicielle",
8 },
9 description: "Formation complète en ingénierie logicielle pour les développeurs africains.",
10 metadataBase: new URL("https://usher.dev"),
11 openGraph: {
12 type: "website",
13 locale: "fr_FR",
14 siteName: "Usher Platform",
15 images: [{ url: "/og-default.png", width: 1200, height: 630 }],
16 },
17 twitter: {
18 card: "summary_large_image",
19 site: "@usher_dev",
20 },
21};
22
23// Metadata dynamique — calculée depuis les params
24export async function generateMetadata({
25 params,
26}: {
27 params: Promise<{ slug: string }>;
28}): Promise<Metadata> {
29 const { slug } = await params;
30 const tutorial = await getTutorialBySlug(slug);
31
32 return {
33 title: tutorial.title,
34 description: tutorial.description,
35 openGraph: {
36 title: tutorial.title,
37 description: tutorial.description,
38 images: [`/api/og?title=${encodeURIComponent(tutorial.title)}`],
39 },
40 };
41}Crée app/sitemap.ts qui exporte une fonction retournant un tableau d'URLs. Next.js génère automatiquement le sitemap.xml en production.
app/sitemap.ts
1import type { MetadataRoute } from "next";
2import { db } from "@/lib/db";
3
4export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
5 const tutorials = await db.tutorial.findMany({
6 select: { slug: true, updatedAt: true },
7 where: { publishedAt: { not: null } },
8 });
9
10 const tutorialEntries = tutorials.map((t) => ({
11 url: `https://usher.dev/tutorials/${t.slug}`,
12 lastModified: t.updatedAt,
13 changeFrequency: "weekly" as const,
14 priority: 0.8,
15 }));
16
17 return [
18 { url: "https://usher.dev", priority: 1 },
19 { url: "https://usher.dev/tutorials", priority: 0.9 },
20 ...tutorialEntries,
21 ];
22}Next.js 15 avec l'App Router est le choix optimal pour une plateforme éducative : SSR pour le SEO, RSC pour la performance, Server Actions pour simplifier les mutations, et la Metadata API pour un référencement complet.