generateViewport

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

Bon à savoir :

Les exports de l'objet viewport et de la fonction generateViewport sont uniquement pris en charge 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 effectuez une migration 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 la vue, 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 vue.

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

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

Bon à savoir :

Si la vue ne dépend pas d'informations d'exécution, elle doit être définie en utilisant l'objet statique viewport plutôt que generateViewport.

Champs 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 suffit. Cependant, les informations sont fournies pour être exhaustives.

import type { Viewport } from 'next'

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

export const viewport = {
  width: 'device-width',
  initialScale: 1,
  maximumScale: 1,
  userScalable: false,
  // Également pris en charge 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: Promise<{ id: string }>
  searchParams: Promise<{ [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`	Introduction de `viewport` et `generateViewport`.

Fichiers de métadonnées

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

L'objet `viewport`

Fonction `generateViewport`

Champs 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