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() {}

Fonction generateViewport

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

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',
}

<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' },
  ],
}

<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',
}

<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',
}

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

Types

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