Next.js Function generateViewport
Last Updated :
20 Sep, 2024
Next.js is a Javascript based framework to develop full-stack web applications. In some cases, we want to customize the initial viewports of the page getting rendered with some dynamic content. In this article, we will learn how to do so using generateViewport function in next.js
We can set the viewport metadata in our html pages generated by next.js using viewport object, or generateViewport function. The return value of the generateViewport function helps in setting up the dynamic contents of the viewport metadata in HTML.
Setting up the NextJS project
Use the below commands to create a next.js project
npx create-next-app@latest gen-viewport
cd gen-viewport
Project structure:
Project StructureUpdated dependencies:
"dependencies": {
"react": "^18",
"react-dom": "^18",
"next": "14.2.10"
}Creating viewport using viewport object
We will create a viewport meta tag using the viewport object in next.js. We will add a meta tag with the property of "theme-color" and its value as "red".
JavaScript
export const viewport = {
themeColor: "red",
};
export default function Home() {
return (
<>
<body>
<h1>My Page</h1>
</body>
</>
);
}
Run the server
Start the server using the below command:
npm run dev
Output:
Creating viewport using generateViewport function
we will create a viewport meta tag using the generateViewport function that next.js provides. We will add a meta tag with property of "theme-color" and its value as "red"
JavaScript
src/app/page.js
export function generateViewport({ params }) {
return {
themeColor: "red",
};
}
export default function Home() {
return (
<>
<body>
<h1>My Page</h1>
</body>
</>
);
}
Run the server
Start the server using the below command:
npm run dev
Output:
Viewport fields
themeColor
To add theme-color metadata, we can return "themeColor" key in the Viewport object in the page layout file.
JavaScript
// src/app/page.js
export function generateViewport({ params }) {
return {
themeColor: "red",
};
}
export default function Home() {
return (
<>
<body>
<h1>My Page</h1>
</body>
</>
);
}
Output:
width, initialScale, maximumScale and userScalable
To set the initialScale, maximumScale, width, and userScalable in the viewport metadata, we can create the Viewport object as below.
JavaScript
// src/app/page.js
export const viewport = {
width: "device-width",
initialScale: 1,
maximumScale: 1,
userScalable: false,
};
export default function Home() {
return (
<>
<body>
<h1>My Page</h1>
</body>
</>
);
}
Output:
colorScheme
To set the colorScheme in viewport metadata, we can the viewport object as below.
JavaScript
export const viewport = {
colorScheme: "dark",
};
export default function Home() {
return (
<>
<body>
<h1>My Page</h1>
</body>
</>
);
}
Output:
OutputTypes
We can also add typesafety to the viewport object, or the generateViewport function.
viewport object
To add the type to the viewport object, we can use the Viewport inbuilt type in next.js
import type { Viewport } from 'next'
export const viewport: Viewport = {
colorScheme: "dark",
};generateViewport function
We can add the types to the generateViewport function using 2 different approaches:
1. Regular function
import type { Viewport } from 'next'
export function generateViewport(): Viewport {
return {
themeColor: 'black',
}
}2. Using segment props
import type { Viewport } from 'next'
type Props = {
params: { id: string }
}
export function generateViewport({ params }: Props): Viewport {
return {
themeColor: 'black',
}
}
export default function Page({ params }: Props) {}
Similar Reads
D3.js geoMercator() Function
D3.js is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of Scalable Vector Graphics, HTML5, and Cascading Style Sheets standards. The geoMercator() function in d3.js is used to draw The spherical Mercator projection. Syntax: d3.geoMercator()
2 min read
D3.js geoGringorten() Function
D3.js is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of Scalable Vector Graphics, HTML5, and Cascading Style Sheets standards. The geoGringorten() function in d3.js is used to draw the Gringorten square equal-area projection, rearranged t
2 min read
D3.js geoNaturalEarth1() Function
The JavaScript D3.js library provides interactive data visualizations for web page using HTML5, Scalable Vector Graphics, and Cascading Style Sheets. The geoNaturalEarth1() function in d3.js is used to draw the Natural Earth projection. Syntax: d3.geoNaturalEarth1() Parameters: This method does not
2 min read
D3.js geoNaturalEarth2() Function
The JavaScript D3.js library provides interactive data visualizations for web page using HTML5, Scalable Vector Graphics, and Cascading Style Sheets. The geoNaturalEarth2() function in d3.js is used to draw the Natural Earth II projection which Compared to Natural Earth I is slightly taller and roun
2 min read
D3.js geoTransverseMercator() Function
D3.js is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of Scalable Vector Graphics, HTML5, and Cascading Style Sheets standards. The geoTransverseMercator() function in d3.js is used to draw the transverse spherical Mercator projection. Syn
1 min read
D3.js geoStereographic() Function
The JavaScript D3.js library provides interactive data visualizations for web page using HTML5, Scalable Vector Graphics, and Cascading Style Sheets. The geoStereographic() function in d3.js is used to draw the stereographic projection. Syntax: d3.geoStereographic() Parameters: This method does not
2 min read
D3.js geoWagner7() Function
D3.js is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of Scalable Vector Graphics, HTML5, and Cascading Style Sheets standards. The geoWagner7() function in d3.js is used to draw the Wagner VII projection. Syntax: d3.geoWagner7() Parameter
2 min read
D3.js geoLagrange() Function
D3.js is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of Scalable Vector Graphics, HTML5, and Cascading Style Sheets standards. The geoLagrange() function in d3.js is used to draw the Lagrange conformal projection. Syntax: d3.geoLagrange()
2 min read
D3.js transform.invertX() Function
The transform.invertX() Function in D3.js is used to get the inverse transformation of the specified x-coordinate, (x - tx) / k. Syntax: transform.invertX(x)Parameters: This function accepts the following parameter as mentioned above and described below: x: This parameter is the x-coordinate.Return
3 min read
p5.js imageMode() Function
The imageMode() function is used to set the image mode of an image. The image mode defines the position of the image in the canvas, by changing the way that the parameters given to the image() function are interpreted. Syntax: imageMode( mode ) Parameters: This function accepts a single parameter mo
2 min read