logoNext.js Русский
ДокументацияБлогИзучение
Введение/Справочник API/Функции/generateViewport

generateViewport

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

Полезно знать:

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

Объект viewport

Для определения параметров области просмотра экспортируйте объект viewport из файла layout.jsx или 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() {}

Функция generateViewport

generateViewport должна возвращать объект Viewport, содержащий одно или несколько полей области просмотра.

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

Полезно знать:

  • Если параметры области просмотра не зависят от runtime-информации, их следует определять через статический объект viewport, а не через generateMetadata.

Поля Viewport

themeColor

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

Простой цвет темы

import type { Viewport } from 'next'

export const viewport: Viewport = {
  themeColor: 'black',
}
export const viewport = {
  themeColor: 'black',
}
<head> output
<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' },
  ],
}
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 и userScalable

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

import type { Viewport } from 'next'

export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
  maximumScale: 1,
  userScalable: false,
  // Также поддерживаются менее распространённые параметры
  // interactiveWidget: 'resizes-visual',
}
export const viewport = {
  width: 'device-width',
  initialScale: 1,
  maximumScale: 1,
  userScalable: false,
  // Также поддерживаются менее распространённые параметры
  // interactiveWidget: 'resizes-visual',
}
<head> output
<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',
}
export const viewport = {
  colorScheme: 'dark',
}
<head> output
<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',
}

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

ВерсияИзменения
v14.0.0Добавлены viewport и generateViewport.

Файлы метаданных

API документация по соглашениям о файлах метаданных.

generateStaticParams

Справочник API функции generateStaticParams.

headers

Справочник API для функции headers.