Next.js - generateViewport() Function

---

---

The generateViewport() Function

The Next.js generateViewport() function used to customize initial viewport of the page with the static viewport object. This function is helpful when you want to set the initial viewport of the page based on the user's device or browser settings.

Syntax

Following is the syntax of generateViewport() function:

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

Parameters

The generateViewport() function takes a single parameter:

• params: An object containing the populated params from the parent generateViewport, which can be used to generate the viewport in a child segment.

Return Value

The generateViewport() function returns an object representing the viewport of the page. The object can contain the following properties:

• themeColor: A string representing the color of the theme. This can be a hex code, RGB value, or a color name.
• initialScale: A number representing the initial scale of the page. This can be a value between 0 and 10.
• width: A number representing the width of the viewport in pixels.
• height: A number representing the height of the viewport in pixels.
• minimumScale: A number representing the minimum scale of the page. This can be a value between 0 and 10.
• maximumScale: A number representing the maximum scale of the page. This can be a value between 0 and 10.
• userScalable: A boolean value indicating whether the user can zoom in or out of the page. This can be true or false.

The viewport object

The viewport object is a static object that can also be used to set the initial viewport of the page. The object can contain the following properties:

import type { Viewport } from 'next'
 
export const viewport: Viewport = {
  themeColor: 'black',
}
 
export default function Page() {}

Example 1

In the code below, we demonstrate how to use the generateViewport() function to set the initial viewport of the page based on the user's device or browser settings. We set the theme color to black.

// app/index.tsx

import type { Viewport } from 'next'
 
export const viewport: Viewport = {
    themeColor: 'black',
}
 
export default async function AdminPage() {
  return (
    <main>
      <h1>Next.js Example</h1>
        <p>Admin Page</p>
    </main>
  )
}

Output

When you run the above code, you can see black theme color is set on browser dev tools.

Example 2

In the code below, we demonstrate how to use the generateViewport() function to set the initial viewport of the page based on the user's device or browser settings. We set the theme color to white, initial scale to 1, width to 320, height to 480, minimum scale to 1, maximum scale to 1, and user scalable to false.

import type { Viewport } from 'next'
 
export function generateViewport(): Viewport {
    return {
        themeColor: '#ffffff',
        initialScale: 1,
        width: 320,
        height: 480,
        minimumScale: 1,
        maximumScale: 1,
        userScalable: false,
    }
  }
 
export default async function AdminPage() {
  return (
    <main>
      <h1>Next.js Example</h1>
        <p>Admin Page</p>
    </main>
  )
}

Output

When you run the above code, you can see white theme color is set on browser dev tools with initial scale of 1, width of 320, height of 480, minimum scale of 1, maximum scale of 1, and user scalable is set to false.