logoNext.js Français
DocumentationBlogApprendre
Introduction/Référence API/Fonctions/generateMetadata

Objet Metadata et options generateMetadata

Cette page couvre toutes les options de Metadata basée sur la configuration avec generateMetadata et l'objet metadata statique.

import { Metadata } from 'next'

// soit Metadata statique
export const metadata: Metadata = {
  title: '...',
}

// soit Metadata dynamique
export async function generateMetadata({ params }) {
  return {
    title: '...',
  }
}
// soit Metadata statique
export const metadata = {
  title: '...',
}

// soit Metadata dynamique
export async function generateMetadata({ params }) {
  return {
    title: '...',
  }
}

Bon à savoir :

  • L'objet metadata et la fonction generateMetadata sont uniquement pris en charge dans les composants serveur.
  • Vous ne pouvez pas exporter à la fois l'objet metadata et la fonction generateMetadata depuis le même segment de route.

L'objet metadata

Pour définir des métadonnées statiques, exportez un objet Metadata depuis un fichier layout.js ou page.js.

import { Metadata } from 'next'

export const metadata: Metadata = {
  title: '...',
  description: '...',
}

export default function Page() {}
export const metadata = {
  title: '...',
  description: '...',
}

export default function Page() {}

Voir les Champs Metadata pour une liste complète des options prises en charge.

Fonction generateMetadata

Les métadonnées dynamiques, qui dépendent d'informations dynamiques comme les paramètres de route actuels, des données externes ou les metadata des segments parents, peuvent être définies en exportant une fonction generateMetadata qui retourne un objet Metadata.

import { Metadata, ResolvingMetadata } from 'next'

type Props = {
  params: { id: string }
  searchParams: { [key: string]: string | string[] | undefined }
}

export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  // lire les paramètres de route
  const id = params.id

  // récupérer les données
  const product = await fetch(`https://.../${id}`).then((res) => res.json())

  // optionnellement accéder et étendre (plutôt que remplacer) les métadonnées parentes
  const previousImages = (await parent).openGraph?.images || []

  return {
    title: product.title,
    openGraph: {
      images: ['/some-specific-page-image.jpg', ...previousImages],
    },
  }
}

export default function Page({ params, searchParams }: Props) {}
export async function generateMetadata({ params, searchParams }, parent) {
  // lire les paramètres de route
  const id = params.id

  // récupérer les données
  const product = await fetch(`https://.../${id}`).then((res) => res.json())

  // optionnellement accéder et étendre (plutôt que remplacer) les métadonnées parentes
  const previousImages = (await parent).openGraph?.images || []

  return {
    title: product.title,
    openGraph: {
      images: ['/some-specific-page-image.jpg', ...previousImages],
    },
  }
}

export default function Page({ params, searchParams }) {}

Paramètres

La fonction generateMetadata accepte les paramètres suivants :

  • props - Un objet contenant les paramètres de la route actuelle :

    • params - Un objet contenant les paramètres de route dynamique depuis le segment racine jusqu'au segment où generateMetadata est appelée. Exemples :

      RouteURLparams
      app/shop/[slug]/page.js/shop/1{ slug: '1' }
      app/shop/[tag]/[item]/page.js/shop/1/2{ tag: '1', item: '2' }
      app/shop/[...slug]/page.js/shop/1/2{ slug: ['1', '2'] }

    • searchParams - Un objet contenant les paramètres de recherche de l'URL actuelle. Exemples :

      URLsearchParams
      /shop?a=1{ a: '1' }
      /shop?a=1&b=2{ a: '1', b: '2' }
      /shop?a=1&a=2{ a: ['1', '2'] }

  • parent - Une promesse des métadonnées résolues des segments de route parents.

Retours

generateMetadata doit retourner un objet Metadata contenant un ou plusieurs champs de métadonnées.

Bon à savoir :

  • Si les métadonnées ne dépendent pas d'informations runtime, elles doivent être définies avec l'objet statique metadata plutôt que generateMetadata.
  • Les requêtes fetch sont automatiquement mémoïsées pour les mêmes données entre generateMetadata, generateStaticParams, les Layouts, Pages et Composants Serveur. Le cache de React peut être utilisé si fetch n'est pas disponible.
  • searchParams est uniquement disponible dans les segments page.js.
  • Les méthodes Next.js redirect() et notFound() peuvent également être utilisées dans generateMetadata.

Champs Metadata

title

L'attribut title est utilisé pour définir le titre du document. Il peut être défini comme une simple chaîne ou un objet template optionnel.

Chaîne

layout.js | page.js
export const metadata = {
  title: 'Next.js',
}
<head> output
<title>Next.js</title>

Objet template

import { Metadata } from 'next'

export const metadata: Metadata = {
  title: {
    template: '...',
    default: '...',
    absolute: '...',
  },
}
export const metadata = {
  title: {
    default: '...',
    template: '...',
    absolute: '...',
  },
}
Default

title.default peut être utilisé pour fournir un titre de repli aux segments de route enfants qui ne définissent pas de title.

app/layout.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: {
    default: 'Acme',
  },
}
app/about/page.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {}

// Output: <title>Acme</title>
Template

title.template peut être utilisé pour ajouter un préfixe ou un suffixe aux titles définis dans les segments de route enfants.

import { Metadata } from 'next'

export const metadata: Metadata = {
  title: {
    template: '%s | Acme',
    default: 'Acme', // un default est requis lors de la création d'un template
  },
}
export const metadata = {
  title: {
    template: '%s | Acme',
    default: 'Acme', // un default est requis lors de la création d'un template
  },
}
import { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'About',
}

// Output: <title>About | Acme</title>
export const metadata = {
  title: 'About',
}

// Output: <title>About | Acme</title>

Bon à savoir :

  • title.template s'applique aux segments de route enfants et non au segment où il est défini. Cela signifie :

    • title.default est requis lorsque vous ajoutez un title.template.
    • title.template défini dans layout.js ne s'appliquera pas à un title défini dans un page.js du même segment de route.
    • title.template défini dans page.js n'a aucun effet car une page est toujours le segment terminal (elle n'a pas de segments enfants).

  • title.template n'a aucun effet si une route n'a pas défini de title ou title.default.

Absolute

title.absolute peut être utilisé pour fournir un titre qui ignore le title.template défini dans les segments parents.

import { Metadata } from 'next'

export const metadata: Metadata = {
  title: {
    template: '%s | Acme',
  },
}
export const metadata = {
  title: {
    template: '%s | Acme',
  },
}
import { Metadata } from 'next'

export const metadata: Metadata = {
  title: {
    absolute: 'About',
  },
}

// Output: <title>About</title>
export const metadata = {
  title: {
    absolute: 'About',
  },
}

// Output: <title>About</title>

Bon à savoir :

  • layout.js

    • title (string) et title.default définissent le titre par défaut pour les segments enfants (qui ne définissent pas leur propre title). Il complétera le title.template du segment parent le plus proche s'il existe.
    • title.absolute définit le titre par défaut pour les segments enfants. Il ignore le title.template des segments parents.
    • title.template définit un nouveau template de titre pour les segments enfants.

  • page.js

    • Si une page ne définit pas son propre titre, le titre résolu du parent le plus proche sera utilisé.
    • title (string) définit le titre de la route. Il complétera le title.template du segment parent le plus proche s'il existe.
    • title.absolute définit le titre de la route. Il ignore le title.template des segments parents.
    • title.template n'a aucun effet dans page.js car une page est toujours le segment terminal d'une route.

description

layout.js | page.js
export const metadata = {
  description: 'The React Framework for the Web',
}
<head> output
<meta name="description" content="The React Framework for the Web" />

Champs de base

layout.js | page.js
export const metadata = {
  generator: 'Next.js',
  applicationName: 'Next.js',
  referrer: 'origin-when-cross-origin',
  keywords: ['Next.js', 'React', 'JavaScript'],
  authors: [{ name: 'Seb' }, { name: 'Josh', url: 'https://nextjs.org' }],
  colorScheme: 'dark',
  creator: 'Jiachi Liu',
  publisher: 'Sebastian Markbåge',
  formatDetection: {
    email: false,
    address: false,
    telephone: false,
  },
}
<head> output
<meta name="application-name" content="Next.js" />
<meta name="author" content="Seb" />
<link rel="author" href="https://nextjs.org" />
<meta name="author" content="Josh" />
<meta name="generator" content="Next.js" />
<meta name="keywords" content="Next.js,React,JavaScript" />
<meta name="referrer" content="origin-when-cross-origin" />
<meta name="color-scheme" content="dark" />
<meta name="creator" content="Jiachi Liu" />
<meta name="publisher" content="Sebastian Markbåge" />
<meta name="format-detection" content="telephone=no, address=no, email=no" />

metadataBase

metadataBase est une option pratique pour définir un préfixe d'URL de base pour les champs metadata qui nécessitent une URL complète.

  • metadataBase permet aux champs metadata basés sur les URL définis dans le segment de route actuel et en dessous d'utiliser un chemin relatif au lieu d'une URL absolue normalement requise.
  • Le chemin relatif du champ sera combiné avec metadataBase pour former une URL complète.
  • Si non configuré, metadataBase est automatiquement rempli avec une valeur par défaut.
layout.js | page.js
export const metadata = {
  metadataBase: new URL('https://acme.com'),
  alternates: {
    canonical: '/',
    languages: {
      'en-US': '/en-US',
      'de-DE': '/de-DE',
    },
  },
  openGraph: {
    images: '/og-image.png',
  },
}
<head> output
<link rel="canonical" href="https://acme.com" />
<link rel="alternate" hreflang="en-US" href="https://acme.com/en-US" />
<link rel="alternate" hreflang="de-DE" href="https://acme.com/de-DE" />
<meta property="og:image" content="https://acme.com/og-image.png" />

Bon à savoir :

  • metadataBase est généralement défini dans le app/layout.js racine pour s'appliquer aux champs metadata basés sur les URL dans toutes les routes.
  • Tous les champs metadata basés sur les URL qui nécessitent des URL absolues peuvent être configurés avec une option metadataBase.
  • metadataBase peut contenir un sous-domaine, par exemple https://app.acme.com ou un chemin de base, par exemple https://acme.com/start/from/here.
  • Si un champ metadata fournit une URL absolue, metadataBase sera ignoré.
  • Utiliser un chemin relatif dans un champ metadata basé sur les URL sans configurer de metadataBase causera une erreur de build.
  • Next.js normalisera les barres obliques doubles entre metadataBase (par exemple https://acme.com/) et un champ relatif (par exemple /path) en une seule barre oblique (par exemple https://acme.com/path).

Valeur par défaut

Si non configuré, metadataBase a une valeur par défaut :

  • Lorsque VERCEL_URL est détecté : https://${process.env.VERCEL_URL}, sinon il revient à http://localhost:${process.env.PORT || 3000}.
  • Lors du remplacement de la valeur par défaut, nous recommandons d'utiliser des variables d'environnement pour calculer l'URL. Cela permet de configurer une URL pour les environnements de développement local, de staging et de production.

Composition d'URL

La composition d'URL privilégie l'intention du développeur par rapport à la sémantique de traversée de répertoire par défaut.

  • Les barres obliques finales entre metadataBase et les champs metadata sont normalisées.
  • Un chemin "absolu" dans un champ metadata (qui remplacerait normalement tout le chemin de l'URL) est traité comme un chemin "relatif" (commençant à la fin de metadataBase).

Par exemple, avec le metadataBase suivant :

import { Metadata } from 'next'

export const metadata: Metadata = {
  metadataBase: new URL('https://acme.com'),
}
export const metadata = {
  metadataBase: new URL('https://acme.com'),
}

Tous les champs metadata qui héritent du metadataBase ci-dessus et définissent leur propre valeur seront résolus comme suit :

Champ metadataURL résolue
/https://acme.com
./https://acme.com
paymentshttps://acme.com/payments
/paymentshttps://acme.com/payments
./paymentshttps://acme.com/payments
../paymentshttps://acme.com/payments
https://beta.acme.com/paymentshttps://beta.acme.com/payments

openGraph

layout.js | page.js
export const metadata = {
  openGraph: {
    title: 'Next.js',
    description: 'The React Framework for the Web',
    url: 'https://nextjs.org',
    siteName: 'Next.js',
    images: [
      {
        url: 'https://nextjs.org/og.png',
        width: 800,
        height: 600,
      },
      {
        url: 'https://nextjs.org/og-alt.png',
        width: 1800,
        height: 1600,
        alt: 'Mon texte alternatif personnalisé',
      },
    ],
    locale: 'en_US',
    type: 'website',
  },
}
<head> output
<meta property="og:title" content="Next.js" />
<meta property="og:description" content="The React Framework for the Web" />
<meta property="og:url" content="https://nextjs.org/" />
<meta property="og:site_name" content="Next.js" />
<meta property="og:locale" content="en_US" />
<meta property="og:image:url" content="https://nextjs.org/og.png" />
<meta property="og:image:width" content="800" />
<meta property="og:image:height" content="600" />
<meta property="og:image:url" content="https://nextjs.org/og-alt.png" />
<meta property="og:image:width" content="1800" />
<meta property="og:image:height" content="1600" />
<meta property="og:image:alt" content="Mon texte alternatif personnalisé" />
<meta property="og:type" content="website" />
layout.js | page.js
export const metadata = {
  openGraph: {
    title: 'Next.js',
    description: 'The React Framework for the Web',
    type: 'article',
    publishedTime: '2023-01-01T00:00:00.000Z',
    authors: ['Seb', 'Josh'],
  },
}
<head> output
<meta property="og:title" content="Next.js" />
<meta property="og:description" content="The React Framework for the Web" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2023-01-01T00:00:00.000Z" />
<meta property="article:author" content="Seb" />
<meta property="article:author" content="Josh" />

Bon à savoir :

  • Il peut être plus pratique d'utiliser l'API Metadata basée sur les fichiers pour les images Open Graph. Plutôt que de devoir synchroniser l'export de configuration avec des fichiers réels, l'API basée sur les fichiers générera automatiquement les métadonnées correctes pour vous.

robots

import type { Metadata } from 'next'

export const metadata: Metadata = {
  robots: {
    index: false,
    follow: true,
    nocache: true,
    googleBot: {
      index: true,
      follow: false,
      noimageindex: true,
      'max-video-preview': -1,
      'max-image-preview': 'large',
      'max-snippet': -1,
    },
  },
}
<head> output
<meta name="robots" content="noindex, follow, nocache" />
<meta
  name="googlebot"
  content="index, nofollow, noimageindex, max-video-preview:-1, max-image-preview:large, max-snippet:-1"
/>

icons

Bon à savoir : Nous recommandons d'utiliser l'API Metadata basée sur les fichiers pour les icônes lorsque c'est possible. Plutôt que de devoir synchroniser l'export de configuration avec des fichiers réels, l'API basée sur les fichiers générera automatiquement les métadonnées correctes pour vous.

layout.js | page.js
export const metadata = {
  icons: {
    icon: '/icon.png',
    shortcut: '/shortcut-icon.png',
    apple: '/apple-icon.png',
    other: {
      rel: 'apple-touch-icon-precomposed',
      url: '/apple-touch-icon-precomposed.png',
    },
  },
}
<head> output
<link rel="shortcut icon" href="/shortcut-icon.png" />
<link rel="icon" href="/icon.png" />
<link rel="apple-touch-icon" href="/apple-icon.png" />
<link
  rel="apple-touch-icon-precomposed"
  href="/apple-touch-icon-precomposed.png"
/>
layout.js | page.js
export const metadata = {
  icons: {
    icon: [{ url: '/icon.png' }, new URL('/icon.png', 'https://example.com')],
    shortcut: ['/shortcut-icon.png'],
    apple: [
      { url: '/apple-icon.png' },
      { url: '/apple-icon-x3.png', sizes: '180x180', type: 'image/png' },
    ],
    other: [
      {
        rel: 'apple-touch-icon-precomposed',
        url: '/apple-touch-icon-precomposed.png',
      },
    ],
  },
}
<head> output
<link rel="shortcut icon" href="/shortcut-icon.png" />
<link rel="icon" href="/icon.png" />
<link rel="apple-touch-icon" href="/apple-icon.png" />
<link
  rel="apple-touch-icon-precomposed"
  href="/apple-touch-icon-precomposed.png"
/>
<link rel="icon" href="https://example.com/icon.png" />
<link
  rel="apple-touch-icon"
  href="/apple-icon-x3.png"
  sizes="180x180"
  type="image/png"
/>

Bon à savoir : Les balises meta msapplication-* ne sont plus supportées dans les versions Chromium de Microsoft Edge, et ne sont donc plus nécessaires.

themeColor

En savoir plus sur theme-color.

Couleur de thème simple

layout.js | page.js
export const metadata = {
  themeColor: 'black',
}
<head> output
<meta name="theme-color" content="black" />

Avec attribut media

layout.js | page.js
export const metadata = {
  themeColor: [
    { media: '(prefers-color-scheme: light)', color: 'cyan' },
    { media: '(prefers-color-scheme: dark)', color: 'black' },
  ],
}
<head> output
<meta name="theme-color" media="(prefers-color-scheme: light)" content="cyan" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />

manifest

Un manifeste d'application web, tel que défini dans la spécification Web Application Manifest.

layout.js | page.js
export const metadata = {
  manifest: 'https://nextjs.org/manifest.json',
}
<head> output
<link rel="manifest" href="https://nextjs.org/manifest.json" />

twitter

En savoir plus sur la référence de balisage Twitter Card.

layout.js | page.js
export const metadata = {
  twitter: {
    card: 'summary_large_image',
    title: 'Next.js',
    description: 'The React Framework for the Web',
    siteId: '1467726470533754880',
    creator: '@nextjs',
    creatorId: '1467726470533754880',
    images: ['https://nextjs.org/og.png'],
  },
}
<head> output
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site:id" content="1467726470533754880" />
<meta name="twitter:creator" content="@nextjs" />
<meta name="twitter:creator:id" content="1467726470533754880" />
<meta name="twitter:title" content="Next.js" />
<meta name="twitter:description" content="The React Framework for the Web" />
<meta name="twitter:image" content="https://nextjs.org/og.png" />
layout.js | page.js
export const metadata = {
  twitter: {
    card: 'app',
    title: 'Next.js',
    description: 'The React Framework for the Web',
    siteId: '1467726470533754880',
    creator: '@nextjs',
    creatorId: '1467726470533754880',
    images: {
      url: 'https://nextjs.org/og.png',
      alt: 'Next.js Logo',
    },
    app: {
      name: 'twitter_app',
      id: {
        iphone: 'twitter_app://iphone',
        ipad: 'twitter_app://ipad',
        googleplay: 'twitter_app://googleplay',
      },
      url: {
        iphone: 'https://iphone_url',
        ipad: 'https://ipad_url',
      },
    },
  },
}
<head> output
<meta name="twitter:site:id" content="1467726470533754880" />
<meta name="twitter:creator" content="@nextjs" />
<meta name="twitter:creator:id" content="1467726470533754880" />
<meta name="twitter:title" content="Next.js" />
<meta name="twitter:description" content="The React Framework for the Web" />
<meta name="twitter:card" content="app" />
<meta name="twitter:image" content="https://nextjs.org/og.png" />
<meta name="twitter:image:alt" content="Next.js Logo" />
<meta name="twitter:app:name:iphone" content="twitter_app" />
<meta name="twitter:app:id:iphone" content="twitter_app://iphone" />
<meta name="twitter:app:id:ipad" content="twitter_app://ipad" />
<meta name="twitter:app:id:googleplay" content="twitter_app://googleplay" />
<meta name="twitter:app:url:iphone" content="https://iphone_url" />
<meta name="twitter:app:url:ipad" content="https://ipad_url" />
<meta name="twitter:app:name:ipad" content="twitter_app" />
<meta name="twitter:app:name:googleplay" content="twitter_app" />

viewport

Bon à savoir : La balise meta viewport est automatiquement définie avec les valeurs par défaut suivantes. Généralement, une configuration manuelle n'est pas nécessaire car les valeurs par défaut sont suffisantes. Cependant, les informations sont fournies pour être exhaustif.

layout.js | page.js
export const metadata = {
  viewport: {
    width: 'device-width',
    initialScale: 1,
    maximumScale: 1,
  },
}
<head> output
<meta
  name="viewport"
  content="width=device-width, initial-scale=1, maximum-scale=1"
/>

verification

layout.js | page.js
export const metadata = {
  verification: {
    google: 'google',
    yandex: 'yandex',
    yahoo: 'yahoo',
    other: {
      me: ['my-email', 'my-link'],
    },
  },
}
<head> output
<meta name="google-site-verification" content="google" />
<meta name="y_key" content="yahoo" />
<meta name="yandex-verification" content="yandex" />
<meta name="me" content="my-email" />
<meta name="me" content="my-link" />

appleWebApp

layout.js | page.js
export const metadata = {
  itunes: {
    appId: 'myAppStoreID',
    appArgument: 'myAppArgument',
  },
  appleWebApp: {
    title: 'Apple Web App',
    statusBarStyle: 'black-translucent',
    startupImage: [
      '/assets/startup/apple-touch-startup-image-768x1004.png',
      {
        url: '/assets/startup/apple-touch-startup-image-1536x2008.png',
        media: '(device-width: 768px) and (device-height: 1024px)',
      },
    ],
  },
}
<head> output
<meta
  name="apple-itunes-app"
  content="app-id=myAppStoreID, app-argument=myAppArgument"
/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="Apple Web App" />
<link
  href="/assets/startup/apple-touch-startup-image-768x1004.png"
  rel="apple-touch-startup-image"
/>
<link
  href="/assets/startup/apple-touch-startup-image-1536x2008.png"
  media="(device-width: 768px) and (device-height: 1024px)"
  rel="apple-touch-startup-image"
/>
<meta
  name="apple-mobile-web-app-status-bar-style"
  content="black-translucent"
/>

alternates

layout.js | page.js
export const metadata = {
  alternates: {
    canonical: 'https://nextjs.org',
    languages: {
      'en-US': 'https://nextjs.org/en-US',
      'de-DE': 'https://nextjs.org/de-DE',
    },
    media: {
      'only screen and (max-width: 600px)': 'https://nextjs.org/mobile',
    },
    types: {
      'application/rss+xml': 'https://nextjs.org/rss',
    },
  },
}
<head> output
<link rel="canonical" href="https://nextjs.org" />
<link rel="alternate" hreflang="en-US" href="https://nextjs.org/en-US" />
<link rel="alternate" hreflang="de-DE" href="https://nextjs.org/de-DE" />
<link
  rel="alternate"
  media="only screen and (max-width: 600px)"
  href="https://nextjs.org/mobile"
/>
<link
  rel="alternate"
  type="application/rss+xml"
  href="https://nextjs.org/rss"
/>
layout.js | page.js
export const metadata = {
  appLinks: {
    ios: {
      url: 'https://nextjs.org/ios',
      app_store_id: 'app_store_id',
    },
    android: {
      package: 'com.example.android/package',
      app_name: 'app_name_android',
    },
    web: {
      url: 'https://nextjs.org/web',
      should_fallback: true,
    },
  },
}
<head> output
<meta property="al:ios:url" content="https://nextjs.org/ios" />
<meta property="al:ios:app_store_id" content="app_store_id" />
<meta property="al:android:package" content="com.example.android/package" />
<meta property="al:android:app_name" content="app_name_android" />
<meta property="al:web:url" content="https://nextjs.org/web" />
<meta property="al:web:should_fallback" content="true" />

archives

Décrit une collection d'enregistrements, de documents ou d'autres matériaux d'intérêt historique (source).

layout.js | page.js
export const metadata = {
  archives: ['https://nextjs.org/13'],
}
<head> output
<link rel="archives" href="https://nextjs.org/13" />

assets

layout.js | page.js
export const metadata = {
  assets: ['https://nextjs.org/assets'],
}
<head> output
<link rel="assets" href="https://nextjs.org/assets" />

bookmarks

layout.js | page.js
export const metadata = {
  bookmarks: ['https://nextjs.org/13'],
}
<head> output
<link rel="bookmarks" href="https://nextjs.org/13" />

category

layout.js | page.js
export const metadata = {
  category: 'technology',
}
<head> output
<meta name="category" content="technology" />

other

Toutes les options de métadonnées devraient être couvertes par le support intégré. Cependant, il peut y avoir des balises de métadonnées personnalisées spécifiques à votre site, ou de nouvelles balises de métadonnées tout juste publiées. Vous pouvez utiliser l'option other pour rendre n'importe quelle balise de métadonnées personnalisée.

layout.js | page.js
export const metadata = {
  other: {
    custom: 'meta',
  },
}
<head> output
<meta name="custom" content="meta" />

Métadonnées non prises en charge

Les types de métadonnées suivants ne sont actuellement pas pris en charge nativement. Cependant, ils peuvent toujours être rendus dans la mise en page (layout) ou la page elle-même.

MétadonnéeRecommandation
<meta http-equiv="...">Utilisez les en-têtes HTTP appropriés via redirect(), Middleware, ou En-têtes de sécurité
<base>Affichez la balise dans la mise en page ou la page elle-même.
<noscript>Affichez la balise dans la mise en page ou la page elle-même.
<style>En savoir plus sur le style dans Next.js.
<script>En savoir plus sur l'utilisation des scripts.
<link rel="stylesheet" />importez les feuilles de style directement dans la mise en page ou la page elle-même.
<link rel="preload />Utilisez la méthode preload de ReactDOM
<link rel="preconnect" />Utilisez la méthode preconnect de ReactDOM
<link rel="dns-prefetch" />Utilisez la méthode prefetchDNS de ReactDOM

Indices de ressources (Resource hints)

L'élément <link> possède plusieurs mots-clés rel qui peuvent être utilisés pour indiquer au navigateur qu'une ressource externe est susceptible d'être nécessaire. Le navigateur utilise ces informations pour appliquer des optimisations de préchargement en fonction du mot-clé.

Bien que l'API Metadata ne prenne pas directement en charge ces indices, vous pouvez utiliser les nouvelles méthodes ReactDOM pour les insérer en toute sécurité dans le <head> du document.

'use client'

import ReactDOM from 'react-dom'

export function PreloadResources() {
  ReactDOM.preload('...', { as: '...' })
  ReactDOM.preconnect('...', { crossOrigin: '...' })
  ReactDOM.prefetchDNS('...')

  return null
}
'use client'

import ReactDOM from 'react-dom'

export function PreloadResources() {
  ReactDOM.preload('...', { as: '...' })
  ReactDOM.preconnect('...', { crossOrigin: '...' })
  ReactDOM.prefetchDNS('...')

  return null
}

Commencez le chargement d'une ressource tôt dans le cycle de rendu de la page (navigateur). Documentation MDN.

ReactDOM.preload(href: string, options: { as: string })
<head> output
<link rel="preload" href="..." as="..." />

Initiez de manière préemptive une connexion à une origine. Documentation MDN.

ReactDOM.preconnect(href: string, options?: { crossOrigin?: string })
<head> output
<link rel="preconnect" href="..." crossorigin />

Tentez de résoudre un nom de domaine avant que les ressources ne soient demandées. Documentation MDN.

ReactDOM.prefetchDNS(href: string)
<head> output
<link rel="dns-prefetch" href="..." />

Bon à savoir :

  • Ces méthodes ne sont actuellement prises en charge que dans les composants clients (Client Components), qui sont toujours rendus côté serveur lors du chargement initial de la page.
  • Les fonctionnalités intégrées de Next.js telles que next/font, next/image et next/script gèrent automatiquement les indices de ressources pertinents.
  • React 18.3 n'inclut pas encore les définitions de types pour ReactDOM.preload, ReactDOM.preconnect et ReactDOM.preconnectDNS. Vous pouvez utiliser // @ts-ignore comme solution temporaire pour éviter les erreurs de type.

Types

Vous pouvez ajouter une sécurité de type à vos métadonnées en utilisant le type Metadata. Si vous utilisez le plugin TypeScript intégré dans votre IDE, vous n'avez pas besoin d'ajouter manuellement le type, mais vous pouvez toujours l'ajouter explicitement si vous le souhaitez.

Objet metadata

import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'Next.js',
}

Fonction generateMetadata

Fonction régulière

import type { Metadata } from 'next'

export function generateMetadata(): Metadata {
  return {
    title: 'Next.js',
  }
}

Fonction asynchrone

import type { Metadata } from 'next'

export async function generateMetadata(): Promise<Metadata> {
  return {
    title: 'Next.js',
  }
}

Avec les propriétés de segment

import type { Metadata } from 'next'

type Props = {
  params: { id: string }
  searchParams: { [key: string]: string | string[] | undefined }
}

export function generateMetadata({ params, searchParams }: Props): Metadata {
  return {
    title: 'Next.js',
  }
}

export default function Page({ params, searchParams }: Props) {}

Avec les métadonnées parentes

import type { Metadata, ResolvingMetadata } from 'next'

export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  return {
    title: 'Next.js',
  }
}

Projets JavaScript

Pour les projets JavaScript, vous pouvez utiliser JSDoc pour ajouter une sécurité de type.

/** @type {import("next").Metadata} */
export const metadata = {
  title: 'Next.js',
}

Historique des versions

VersionChangements
v13.2.0metadata et generateMetadata introduits.

Fichiers de métadonnées

Documentation de l'API pour les conventions des fichiers de métadonnées.

generateImageMetadata

Apprenez à générer plusieurs images dans un seul fichier spécial de l'API Metadata.

generateStaticParams

Référence API pour la fonction generateStaticParams.