Type a static viewport export
A route has fixed responsive display settings.
Next.js 16+ · Type Alias
Viewport
Viewport is the TypeScript type for Next.js App Router viewport configuration. Use it to type a static viewport export or the result of generateViewport.
- Since
- 14.0.0
How it works
Viewport is the type for the object exported as viewport or returned by generateViewport. It describes initial display settings such as width, scale, color scheme, and theme color; Next.js turns the configured values into viewport-related HTML metadata.
Syntax
type Viewport = { width?: string | number; initialScale?: number; minimumScale?: number; maximumScale?: number; userScalable?: boolean; viewportFit?: string; themeColor?: string | ThemeColorDescriptor | Array<ThemeColorDescriptor>; colorScheme?: ColorScheme }Returns
A Viewport object containing one or more viewport fields when used as the return type of generateViewport.
Key points
- The type applies to both static route configuration and the value returned by dynamic viewport generation.
- Static configuration lives in a route segment's page or layout module.
- Viewport configuration is a server-side App Router API.
Common mistakes
- Declare this type and its export in a Server Component route file, not a Client Component.
- Choose either a static
viewportexport or a dynamicgenerateViewportexport per route segment. - Do not add a manual viewport meta tag unless the default behavior does not meet the route's requirements.
Example: Static viewport configuration
import type { Viewport } from 'next'
export const viewport: Viewport = {
width: 'device-width',
initialScale: 1,
themeColor: '#ffffff',
}
export default function Page() {
return <main>Responsive page</main>
}Export a typed viewport object from a route page or layout.
When to use it
Type a dynamic viewport result
Viewport settings depend on route or application data.
Apply viewport defaults in a layout
A shared layout defines consistent viewport behavior.
Interview questions
QWhat is the purpose of the Viewport type?
Viewport describes the shape of viewport configuration used by Next.js. A route can export a statically typed viewport object, or generateViewport can return a Viewport object dynamically.
Follow-up: Why should it not be exported from a Client Component? Metadata exports are resolved on the server before the page renders, so viewport configuration belongs in Server Components.
QWhen would you use viewport instead of generateViewport?
Use a static viewport export when the values are known ahead of time. Use generateViewport when the returned viewport values depend on data available while rendering the route.
Follow-up: What constraint applies when both forms appear in one route segment? They cannot both be exported there; select one configuration mechanism.
QWhich kinds of settings does Viewport represent?
The type supports settings that control the page's initial viewport presentation, including width, initial scale, color scheme, and theme color. Next.js uses the object to produce viewport-related metadata.
Follow-up: Why should dynamic viewport logic avoid request-bound or uncached data with Cache Components? Viewport metadata affects the initial page load and cannot be deferred behind a Suspense boundary.
Related
generateViewportviewportViewport fieldsServer Components