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:

• title (string, required): The title of the page
• description (string, required): The description of the page
• pageRoute (string, required): The URL route for the page
• ogImg (string): 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, name and default URL of the Open Graph image.

TypeScript

const siteConfig: SiteConfig = {
  baseUrl: "https://novajs.dev",
  siteName: "Nova.js",
  defaultOgImg: "/og-default.png",
};

JavaScript

const siteConfig = {
  baseUrl: "https://novajs.dev",
  siteName: "Nova.js",
  defaultOgImg: "/og-default.png",
};

Import the genPageMetadata function

Import the genPageMetadata function into every page where you want to generate metadata.

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",
});