nextjs dynamic title [nextjs] - blog.howtoclicks.com

nextjs dynamic title

nextjs

To set a dynamic title for a webpage in a Next.js application, you can pass props to the MyPage component and use the props to set the title.

Here is an example of how to do this:

import Head from 'next/head';

function MyPage(props) {
  return (
    <div>
      <Head>
        <title>{props.pageTitle}</title>
      </Head>
      {/* page content goes here */}
    </div>
  );
}

MyPage.getInitialProps = async () => {
  // Fetch data for the page
  const data = await fetchData();
  // Return the page title as a prop
  return { pageTitle: data.pageTitle };
}

In this example, the pageTitle prop is passed to the MyPage component and is used to set the title of the webpage. The page title is fetched asynchronously using the getInitialProps function, which is a Next.js lifecycle method that runs before the component is rendered.

You can then use the MyPage component in your application like this:

<MyPage pageTitle="Dynamic Page Title" />

The title of the webpage will be set to “Dynamic Page Title”.

nextjs dynamic title

Other Article on Tag nextjs

All Tags