generateViewport

Vous pouvez personnaliser la viewport initiale de la page avec l'objet statique viewport ou la fonction dynamique generateViewport.

Bon à savoir :

Les exports d'objet viewport et de fonction generateViewport sont uniquement supportés dans les composants serveur.

Vous ne pouvez pas exporter à la fois l'objet viewport et la fonction generateViewport depuis le même segment de route.

Si vous migrez depuis les exports metadata, vous pouvez utiliser le codemod metadata-to-viewport-export pour mettre à jour vos changements.

L'objet `viewport`

Pour définir les options de viewport, exportez un objet viewport depuis un fichier layout.jsx ou page.jsx.

import type { Viewport } from 'next'

export const viewport: Viewport = {
  themeColor: 'black',
}

export default function Page() {}

export const viewport = {
  themeColor: 'black',
}

export default function Page() {}

Fonction `generateViewport`

generateViewport doit retourner un objet Viewport contenant un ou plusieurs champs de viewport.

export function generateViewport({ params }) {
  return {
    themeColor: '...',
  }
}

export function generateViewport({ params }) {
  return {
    themeColor: '...',
  }
}

Bon à savoir :

Si la viewport ne dépend pas d'informations runtime, elle devrait être définie en utilisant l'objet statique viewport plutôt que generateMetadata.

Champs de Viewport

`themeColor`

En savoir plus sur theme-color.

Couleur de thème simple

import type { Viewport } from 'next'

export const viewport: Viewport = {
  themeColor: 'black',
}

export const viewport = {
  themeColor: 'black',
}

<head> output

<meta name="theme-color" content="black" />

Avec attribut media

import type { Viewport } from 'next'

export const viewport: Viewport = {
  themeColor: [
    { media: '(prefers-color-scheme: light)', color: 'cyan' },
    { media: '(prefers-color-scheme: dark)', color: 'black' },
  ],
}

export const viewport = {
  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" />

`width`, `initialScale`, `maximumScale` et `userScalable`

Bon à savoir : La balise meta viewport est automatiquement définie, et une configuration manuelle est généralement inutile car la valeur par défaut est suffisante. Cependant, les informations sont fournies pour exhaustivité.

import type { Viewport } from 'next'

export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
  maximumScale: 1,
  userScalable: false,
  // Également supporté mais moins couramment utilisé
  // interactiveWidget: 'resizes-visual',
}

export const viewport = {
  width: 'device-width',
  initialScale: 1,
  maximumScale: 1,
  userScalable: false,
  // Également supporté mais moins couramment utilisé
  // interactiveWidget: 'resizes-visual',
}

<head> output

<meta
  name="viewport"
  content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
/>

`colorScheme`

En savoir plus sur color-scheme.

import type { Viewport } from 'next'

export const viewport: Viewport = {
  colorScheme: 'dark',
}

export const viewport = {
  colorScheme: 'dark',
}

<head> output

<meta name="color-scheme" content="dark" />

Vous pouvez ajouter une sécurité de type à votre objet viewport en utilisant le type Viewport. 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 `viewport`

import type { Viewport } from 'next'

export const viewport: Viewport = {
  themeColor: 'black',
}

Fonction `generateViewport`

Fonction régulière

import type { Viewport } from 'next'

export function generateViewport(): Viewport {
  return {
    themeColor: 'black',
  }
}

Avec props de segment

import type { Viewport } from 'next'

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

export function generateViewport({ params, searchParams }: Props): Viewport {
  return {
    themeColor: 'black',
  }
}

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

Projets JavaScript

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

/** @type {import("next").Viewport} */
export const viewport = {
  themeColor: 'black',
}

Historique des versions

Version	Changements
`v14.0.0`	`viewport` et `generateViewport` introduits.

Fichiers de métadonnées

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

L'objet `viewport`

Fonction `generateViewport`

Champs de Viewport

`themeColor`

`width`, `initialScale`, `maximumScale` et `userScalable`

`colorScheme`

Types

Objet `viewport`

Fonction `generateViewport`

Fonction régulière

Avec props de segment

Projets JavaScript

Historique des versions

Fichiers de métadonnées

On this page