Next.js Functions : generateMetadata (original) (raw)

Last Updated : 27 Mar, 2024

NextJS is a React **framework that is used to build **full-stack web applications. It is used both for **front-end as well and back-end. It simplifies React development with powerful features. One of its features is **generateMetadata. In this article, we will learn about the **generateMetadata function with its **syntax and **example.

generateMetadata function:

**Metadata is a data about the web page. It is used by browsers, search engines, and other web services. NextJS provides a convenient way to manage metadata using the **generateMetadata function. **generateMetadata feature is used to dynamically generate metadata for each page. **generateMetadata function must return one or more metadata fields search params.

You can extract **params and search params from **generateMetadata(props) as a prop. **params is an object that contains a Dynamic route parameter object. **searchParams is an object that contains the **fields search current URL's search parameter such as **url...?name=gfg.

**Syntax:

// A function that generates dynamic metadata for a page
//Destructuring params and searchParams object from props
export async function generateMetadata({ params, searchParams }) {

// Return an object with metadata properties
return {
title: "Title of the page",
description: "Description of the page",
// ...other metadata properties...
};
}
// Meta data will be applied to this page
export default function Page() {
return (
<>

Next.js Page


</>
);
}

Steps to Create NextJS Application:

**Step 1: Create a Next.js application using the following command.

npx create-next-app@latest gfg

**Step 2: It will ask you some questions, so choose as the following.

√ Would you like to use TypeScript? ... No
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... No
√ Would you like to use src/ directory? ... Yes
√ Would you like to use App Router? (recommended) ... Yes
√ Would you like to customize the default import alias (@/*)? ... Yes

**Step 3: After creating your project folder i.e. gfg, move to it using the following command.

cd gfg

**Folder Structure:

metadata-example-structure

**Example: The below example demonstrates the use of **generateMetadata function.

**Note: Remove the included css file from layout.js file.

JavaScript `

//File path: src/app/page.js import Link from "next/link";

export async function generateMetadata() { return { title: 'Home', description: "This is Home Page" } }

export default function Home() { return ( <> <h1 style={{ color: "green" }}> GeeksForGeeks | generateMetadata Example

Select Course

</> ); }

` JavaScript ``

//Filepath: src/app/[course]/page.js import Link from "next/link";

export async function generateMetadata({ params, searchParams }) { return { title: ${searchParams.name}, description: Course name is ${searchParams.name} } }

export default function Course() { return ( <>

Course Page

</> ) }

``

**To run the Application open the terminal in the project folder and enter the following command:

npm run dev

**Output: You can see the metadata are changing according to the search parameter.

generateMetadata-output