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

generateViewport

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

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

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

Объект 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, содержащий одно или несколько полей viewport.

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

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

  • Если viewport не зависит от runtime-информации, его следует определять с помощью статического объекта viewport, а не функции generateViewport.

Поля 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: 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) {}

JavaScript-проекты

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

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

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

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

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

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

generateStaticParams

API-справочник для функции generateStaticParams.

headers

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