Generate the metadata for a page in Next.js

Use the genPageMetadata function to generate the metadata for a page in Next.js, including the title, description, canonical URL, and Open Graph and Twitter metadata.

Requirements

Before using the file, make sure your project meets the following requirements:

Next.js 13.2.0 or higher
Next.js App Router

Parameters

It receives an object with the following properties:

Name
title
Type
string
Required
required
Description
The title of the page.
Name
description
Type
string
Required
required
Description
The description of the page.
Name
pageRoute
Type
string
Required
required
Description
The URL route for the page.
Name
ogImg
Type
string
Required
required
Description
The URL of the Open Graph image.

Usage

Add the file to your project

Copy the genPageMetadata.ts or genPageMetadata.js file to your project.

Edit the `siteConfig` object

Update the siteConfig object in the genPageMetadata.ts or genPageMetadata.js file with your site's base URL and name.

const siteConfig: SiteConfig = {
  baseUrl: "https://novajs.dev",
  siteName: "Nova.js",
};

Import the `genPageMetadata` function

Import the genPageMetadata function into every page where you want to generate metadata and call it with the metadata you want to generate.

src/app/page.tsx

import { genPageMetadata } from "@/utils/genPageMetadata";

export const metadata = genPageMetadata({
  title: "Nova.js - A collection of dependency-free React hooks",
  description:
    "Carefully developed React hooks that you can copy and paste into your project.",
  pageRoute: "/",
  ogImg: "/og-landing.png",
});