Start here

Arrows to move, enter to open, escape to close.

Ship/Now

Guides · 2 min

Ajouter une page

Une nouvelle route avec ses métadonnées, sa traduction et sa place dans le sitemap, pour qu'elle soit atteignable et pas seulement construite.

Le fichier

// src/app/pricing/page.tsx
import type { Metadata } from "next";
import { currentLocale } from "@/lib/i18n.server";
import { messages } from "@/lib/i18n";

export const metadata: Metadata = {
  title: "Tarifs",
  description: "Un paiement, les deux dépôts, aucun renouvellement.",
  alternates: { canonical: "/pricing" },
};

export default async function PricingPage() {
  const t = messages(await currentLocale());
  return <h1>{t.pricingTitle()}</h1>;
}

Composant serveur. Pas de "use client" sauf si quelque chose dessus a besoin d'état.

Les quatre choses qu'on oublie

Un lien vers elle

Une route sans lien n'est pas livrée. Ajoutez-la à la navigation, au pied de page, ou là où quelqu'un la chercherait. Si vous ne voyez pas où mettre le lien, cela vaut la peine de s'arrêter dessus.

Le texte dans les deux langues

Ajoutez les clés à messages/en.json et messages/fr.json. Les clés manquantes sont une erreur de compilation, ce qui est le but, mais seulement après avoir recompilé.

Le sitemap

src/app/sitemap.ts est une liste. Une page absente est une page que Google trouve tard ou jamais.

Faut-il l'indexer

Tout ce qui est derrière une connexion demande robots: { index: false, follow: false }.

Les routes dynamiques

export const dynamicParams = false;

export async function generateStaticParams() {
  return (await allPosts()).map((post) => ({ slug: post.slug }));
}

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
}

params est une Promise dans Next.js 16. La déstructurer directement est l'erreur de migration la plus courante, et le message de type qu'elle produit ne le dit pas.

dynamicParams = false transforme un slug inconnu en 404 plutôt qu'en tentative de rendre quelque chose qui n'existe pas.

Une page qui a besoin de l'utilisateur

const user = await requireUser();

C'est tout. La fonction redirige vers la connexion avec un paramètre next, donc après connexion la personne arrive là où elle allait plutôt que sur le tableau de bord.

Une erreur ou un manque sur cette page ? Dites-le-nous.