Next.js: How to Populate the Head Tag with Custom Tags

Customizing the head tag of your Next.js app is a useful way to enhance your page’s metadata. Whether you want to modify the page title or add a custom meta tag, you can easily do so by following the steps below.

Inside your Next.js page component, import the Head component from next/head:

import Head from 'next/head'

Include the Head component in your component’s JSX output:

const House = props => (
  <div>
    <Head>
      <title>The page title</title>
      {/* Add any additional tags here */}
    </Head>
    {/* The rest of the JSX */}
  </div>
)

export default House

Within the Head component, you can add any HTML tag that you’d like to appear in the <head> section of the page. For example, you can add meta tags, link tags, or any other custom tags you need.

When you mount the component, Next.js will automatically add the tags inside the Head component to the page’s header. Similarly, when you unmount the component, Next.js will remove those tags from the header.

By leveraging the Head component in Next.js, you have full control over customizing the head tag of your app’s pages.