generateViewport

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

Importante:

• 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 la 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() {}

Función generateViewport

generateViewport debe devolver un objeto Viewport que contenga uno o más campos de viewport.

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

Importante:

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

Campos de Viewport

themeColor

Más información sobre theme-color.

Color de tema simple

import type { Viewport } from 'next'

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

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

<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

Importante: La etiqueta meta viewport se configura automáticamente y normalmente no es necesario configurarla manualmente ya que el valor predeterminado es suficiente. Sin embargo, se proporciona la información 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',
}

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

colorScheme

Más información sobre color-scheme.

import type { Viewport } from 'next'

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

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

Tipos

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 el tipo manualmente, 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: 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) {}

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