generateViewport

Вы можете настроить начальный viewport страницы с помощью статического объекта viewport или динамической функции generateViewport.

Важно знать:

• Экспорты объекта viewport и функции generateViewport поддерживаются только в серверных компонентах.
• Вы не можете экспортировать одновременно объект viewport и функцию generateViewport из одного сегмента маршрута.
• Если вы переходите с миграции экспортов metadata, вы можете использовать модификатор кода metadata-to-viewport-export для обновления ваших изменений.

Объект viewport

Для определения параметров viewport экспортируйте объект viewport из файла layout.jsx или page.jsx.

import type { Viewport } from 'next'
 
export const viewport: Viewport = {
  themeColor: 'black',
}
 
export default function Page() {}

Функция generateViewport

Функция generateViewport должна возвращать объект Viewport содержащий одно или несколько полей viewport.

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

Важно знать:

• Если viewport не зависит от информации во время выполнения, он должен быть определён с помощью статического объекта viewport, а не generateMetadata.

Поля viewport

themeColor

Подробнее о theme-color.

Простое значение theme color

import type { Viewport } from 'next'
 
export const viewport: Viewport = {
  themeColor: 'black',
}

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

Со значением атрибута 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 и userScalable

Важно знать: Тег viewport метатега автоматически устанавливается, и ручная настройка обычно не требуется, так как значение по умолчанию достаточно. Однако эта информация предоставлена для полноты.

import type { Viewport } from 'next'
 
export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
  maximumScale: 1,
  userScalable: false,
  // Also supported by less commonly used
  // interactiveWidget: 'resizes-visual',
}

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

colorScheme

Подробнее о color-scheme.

import type { Viewport } from 'next'
 
export const viewport: Viewport = {
  colorScheme: 'dark',
}

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

Типы

Вы можете добавить проверку типов к вашему объекту viewport, используя тип Viewport. Если вы используете встроенный плагин TypeScript в вашем IDE, вам не нужно вручную добавлять тип, но вы всё равно можете явно добавить его, если хотите.

Объект viewport

import type { Viewport } from 'next'
 
export const viewport: Viewport = {
  themeColor: 'black',
}

Функция generateViewport

Обычная функция

import type { Viewport } from 'next'
 
export function generateViewport(): Viewport {
  return {
    themeColor: 'black',
  }
}

С параметрами сегмента

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

Для проектов на JavaScript вы можете использовать JSDoc для добавления проверки типов.

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

История версий