Builders Academy
Next.js 15 — Applications Full-Stack Modernes
3 of 3

Chapitre 2 · Leçon 1

SEO & Metadata

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.

Metadata statique et dynamique

app/layout.tsx

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}
Génère un sitemap automatiquement

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

typescript
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 en production

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.

Topics and skills covered

  • Next.js
  • SEO
  • Open Graph
  • Metadata API