As stated in https://nextjs.org/docs/app/api-reference/functions/generate-metadata#title, website titles can be specified and automatically set with an export metadata structured like this:

import { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: {
    template: '...',
    default: '...',
    absolute: '...',
  },
}

Also, there is another official component Head that allow you to freely set whatever header tags you want.

There is only indeed one BIG problem: none of them worked in the client mode.

Thanks to Stoyan Delev, we can build our own client-side Head component and does the samething pretty easily.

Original post at https://medium.com/@mutebg/create-simple-react-head-component-using-react-portals-c9621004779d

Create a new component named head.ts:

import * as React from "react";
import * as ReactDOM from "react-dom";

export default class Head extends React.Component {
  public render() {
    return ReactDOM.createPortal(this.props.children, document.head);
  }
}

import it anywhere you'd like to modify head tags like this:

 <Head>
    <meta property="og:title" content="My Page" />
    <title>My Page</title>
  </Head>

and it does work in other frameworks in react, but not in next.js. Because all components are by default server-side rendered and when running server-side, document is not available.

Here is how we can ensure it only runs in browser:

"use client"

import dynamic from "next/dynamic"
import * as React from "react"
import * as ReactDOM from "react-dom"

class Head extends React.Component<React.PropsWithChildren> {
  public render() {
    return ReactDOM.createPortal(this.props.children, document.head)
  }
}

export default dynamic(() => Promise.resolve(Head), { ssr: false })

Done and enjoy.