jsschools

viewport object

Configures the viewport meta and theme color for a route.

Since Next 14 Spec ↗

Syntax

export const viewport: Viewport = { width, themeColor }

Returns

Viewport — Viewport and theme-color meta configuration.

Examples

// app/layout.tsx
import type { Viewport } from 'next'

export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
  themeColor: '#0f172a',
}

import type { Viewport } from 'next'

export const viewport: Viewport = {
  themeColor: [
    { media: '(prefers-color-scheme: light)', color: '#fff' },
    { media: '(prefers-color-scheme: dark)', color: '#000' },
  ],
}

import type { Viewport } from 'next'

export function generateViewport(): Viewport {
  return { width: 'device-width', initialScale: 1 }
}

Notes

Viewport and `themeColor` were split out of `metadata` into their own `viewport` export (or `generateViewport()` for dynamic values). Defined in `layout.js`/`page.js`, Server Components only. Use the function form when values depend on params/data.

See also