Next.js Functions : generateMetadata

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 (
    <>
      <h1>Next.js Page</h1>
    </>
  );
}

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:

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
            </h1>
            <h3>Select Course</h3>
            <ul>
                <li><Link href={'/course?name=JavaScript'}>
                    JavaScript
                </Link>
                </li>
                <li>
                    <Link href={'/course?name=Python'}>
                        Python
                    </Link>
                </li>
                <li>
                    <Link href={'/course?name=DSA'}>
                        DSA
                    </Link>
                </li>
            </ul>
        </>
    );
}

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 (
        <>
            <h1>Course Page</h1>
            <ul>
                <li>
                    <Link href={'/'}>
                        Return Home
                    </Link>
                </li>
            </ul>
        </>
    )
}

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.