SEO technique Next.js App Router : guide complet pour les équipes SaaS

// Métadonnées statiques — page.tsx

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Votre page SaaS",
  description: "Meta description 150-155 chars",
  alternates: {
    canonical: "https://votredomaine.com/votre-page",
  },
  openGraph: {
    title: "...",
    description: "...",
    url: "...",
    type: "article",
  },
};

// Métadonnées dynamiques — page dynamique

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const data = await fetchPageData(slug);

  return {
    title: data.title,
    description: data.description,
    alternates: {
      canonical: `https://votredomaine.com/${slug}`,
    },
  };
}

// app/sitemap.ts

import { MetadataRoute } from "next";

const siteUrl = "https://votredomaine.com";

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  // Pages statiques
  const staticPages: MetadataRoute.Sitemap = [
    { url: siteUrl, priority: 1, changeFrequency: "weekly" },
    { url: `${siteUrl}/pricing`, priority: 0.9, changeFrequency: "monthly" },
    { url: `${siteUrl}/features`, priority: 0.9, changeFrequency: "weekly" },
  ];

  // Pages dynamiques (blog, docs, etc.)
  const articles = await fetchArticles();
  const dynamicPages: MetadataRoute.Sitemap = articles.map((a) => ({
    url: `${siteUrl}/blog/${a.slug}`,
    lastModified: a.updatedAt,
    priority: 0.7,
    changeFrequency: "monthly" as const,
  }));

  return [...staticPages, ...dynamicPages];
}

// app/robots.ts

import { MetadataRoute } from "next";

export default function robots(): MetadataRoute.Robots {
  const siteUrl = "https://votredomaine.com";
  const isProduction = process.env.NODE_ENV === "production";

  return {
    rules: [
      {
        userAgent: "*",
        allow: isProduction ? "/" : [],
        disallow: [
          "/dashboard",
          "/api/",
          "/auth/",
          "/admin/",
          "/_next/",
          "/staging/",
        ],
      },
    ],
    sitemap: `${siteUrl}/sitemap.xml`,
    host: siteUrl,
  };
}

// app/features/[slug]/page.tsx

// Pré-génère toutes les pages features au build time
export async function generateStaticParams() {
  const features = await getAllFeatures();

  return features.map((feature) => ({
    slug: feature.slug,
  }));
}

// Revalidation toutes les 24h (ISR)
export const revalidate = 86400;

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

  return <FeatureContent feature={feature} />;
}