MENU


HTML head (Viewport)

You can customize the page's initial viewport using either the static viewport object or the dynamic generateViewport() function.

The viewport object and generateViewport() function exports are supported exclusively in Server Components. You cannot export both the viewport object and the generateViewport() function from the same route segment.

Using the static viewport object.
import type { Viewport } from 'next'
 
export const viewport: Viewport = {
  themeColor: 'black',
  themeColor: [
    { media: '(prefers-color-scheme: light)', color: 'cyan' },
    { media: '(prefers-color-scheme: dark)', color: 'black' },
  ],
  width: 'device-width',
  initialScale: 1,
  maximumScale: 1,
  userScalable: false,
  colorScheme: 'dark',
}

<meta name="theme-color" content="black" />
<meta name="theme-color" media="(prefers-color-scheme: light)" content="cyan" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<meta name="color-scheme" content="dark" />
Using the dynamic generateViewport() function.
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) {}