How to make dynamic page title and description in Next.js

Tag: Front-end

How to make dynamic page title and description in Next.js

Making custom page title and description, back-end included!

Hello again! Today, we'll be making page titles and descriptions, dynamically! Usually you need to make dynamic page titles and descriptions in the case of new pages from the database, like me!

It's fairly simple, firstly you declare the Metadata type into your React file,


import type { Metadata } from "next";

then you declare props, this props will be the key to fetch your page title and description from your database, make sure to get it right!


type Props = { params: { page : string } }

And now, we make a function called generateMetadata, which where you will fetch your title and description.



export async function generateMetadata({ params }: Props): Promise {
[your code here]
return {
title: pageTitle,
description: pageDescription
}
}


And that's all you need to know about dynamic page titles and descriptions. See you again soon, and stay determined!