generateViewport

Sie können den initialen Viewport der Seite mit dem statischen viewport-Objekt oder der dynamischen generateViewport-Funktion anpassen.

Gut zu wissen:

• Die viewport-Objekt- und generateViewport-Funktions-Exports werden nur in Server Components unterstützt.
• Sie können nicht sowohl das viewport-Objekt als auch die generateViewport-Funktion aus demselben Routensegment exportieren.
• Wenn Sie von der Migration der metadata-Exports kommen, können Sie den metadata-to-viewport-export Codemod verwenden, um Ihre Änderungen zu aktualisieren.

Das viewport-Objekt

Um Viewport-Optionen zu definieren, exportieren Sie ein viewport-Objekt aus einer layout.jsx- oder page.jsx-Datei.

import type { Viewport } from 'next'

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

export default function Page() {}

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

export default function Page() {}

generateViewport-Funktion

generateViewport sollte ein Viewport-Objekt zurückgeben, das ein oder mehrere Viewport-Felder enthält.

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

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

Gut zu wissen:

• Wenn der Viewport nicht von Laufzeitinformationen abhängt, sollte er mit dem statischen viewport-Objekt definiert werden, nicht mit generateMetadata.

Viewport-Felder

themeColor

Mehr über theme-color erfahren.

Einfache Theme-Farbe

import type { Viewport } from 'next'

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

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

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

Mit media-Attribut

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

<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 und userScalable

Gut zu wissen: Das viewport-Meta-Tag wird automatisch gesetzt, und eine manuelle Konfiguration ist normalerweise nicht erforderlich, da die Standardeinstellungen ausreichend sind. Die Informationen werden jedoch der Vollständigkeit halber bereitgestellt.

import type { Viewport } from 'next'

export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
  maximumScale: 1,
  userScalable: false,
  // Wird auch seltener verwendet
  // interactiveWidget: 'resizes-visual',
}

export const viewport = {
  width: 'device-width',
  initialScale: 1,
  maximumScale: 1,
  userScalable: false,
  // Wird auch seltener verwendet
  // interactiveWidget: 'resizes-visual',
}

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

colorScheme

Mehr über color-scheme erfahren.

import type { Viewport } from 'next'

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

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

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

Typen

Sie können Ihrem Viewport-Objekt Typsicherheit hinzufügen, indem Sie den Viewport-Typ verwenden. Wenn Sie das integrierte TypeScript-Plugin in Ihrer IDE verwenden, müssen Sie den Typ nicht manuell hinzufügen, aber Sie können ihn dennoch explizit angeben, wenn Sie möchten.

viewport-Objekt

import type { Viewport } from 'next'

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

generateViewport-Funktion

Reguläre Funktion

import type { Viewport } from 'next'

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

Mit Segment-Props

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

JavaScript-Projekte

Für JavaScript-Projekte können Sie JSDoc verwenden, um Typsicherheit hinzuzufügen.

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

Versionsverlauf