generateViewport

Puedes personalizar la viewport inicial de la página con el objeto estático viewport o la función dinámica generateViewport.

Es bueno saber:

Las exportaciones del objeto viewport y la función generateViewport solo son compatibles en Componentes de Servidor (Server Components).

No puedes exportar tanto el objeto viewport como la función generateViewport desde el mismo segmento de ruta.

Si estás migrando desde exportaciones de metadata, puedes usar el codemod metadata-to-viewport-export para actualizar tus cambios.

El objeto `viewport`

Para definir las opciones de viewport, exporta un objeto viewport desde un archivo layout.jsx o 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() {}

Función `generateViewport`

generateViewport debe retornar un objeto Viewport conteniendo uno o más campos de viewport.

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

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

Es bueno saber:

Si la viewport no depende de información en tiempo de ejecución, debe definirse usando el objeto estático viewport en lugar de generateMetadata.

Campos de Viewport

`themeColor`

Aprende más sobre theme-color.

Color de tema simple

import type { Viewport } from 'next'

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

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

<head> output

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

Con atributo 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` y `userScalable`

Es bueno saber: La etiqueta meta viewport se configura automáticamente, y la configuración manual generalmente no es necesaria ya que el valor por defecto es suficiente. Sin embargo, la información se proporciona para completitud.

import type { Viewport } from 'next'

export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
  maximumScale: 1,
  userScalable: false,
  // También soportado pero menos común
  // interactiveWidget: 'resizes-visual',
}

export const viewport = {
  width: 'device-width',
  initialScale: 1,
  maximumScale: 1,
  userScalable: false,
  // También soportado pero menos común
  // interactiveWidget: 'resizes-visual',
}

<head> output

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

`colorScheme`

Aprende más sobre 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" />

Puedes añadir seguridad de tipos a tu objeto viewport usando el tipo Viewport. Si estás usando el plugin de TypeScript integrado en tu IDE, no necesitas añadir manualmente el tipo, pero aún puedes hacerlo explícitamente si lo deseas.

Objeto `viewport`

import type { Viewport } from 'next'

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

Función `generateViewport`

Función regular

import type { Viewport } from 'next'

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

Con props de segmento

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

Proyectos JavaScript

Para proyectos JavaScript, puedes usar JSDoc para añadir seguridad de tipos.

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

Historial de versiones

Versión	Cambios
`v14.0.0`	Se introducen `viewport` y `generateViewport`.

Archivos de metadatos

Documentación de la API para las convenciones de archivos de metadatos.

El objeto `viewport`

Función `generateViewport`

Campos de Viewport

`themeColor`

`width`, `initialScale`, `maximumScale` y `userScalable`

`colorScheme`

Tipos

Objeto `viewport`

Función `generateViewport`

Función regular

Con props de segmento

Proyectos JavaScript

Historial de versiones

Archivos de metadatos

On this page