How to set document's title per page?

Question

I am actually using the pages/_document.js hook to add Bootstrap and jQuery to my pages, by the way I set the <Head>

export default class MyDocument extends Document {
  render() {
    return (
      <html>
        <Head>
          <title>Default title</title>
          <link rel="stylesheet" href="/static/lib/bootstrap3/css/bootstrap.min.css" />
        </Head>

        <body>
          <Main/>
          <NextScript/>
          <script src="/static/lib/jquery3/jquery-3.3.1.min.js" />
          <script src="/static/lib/bootstrap3/js/bootstrap.min.js" />
        </body>
      </html>
    )
  }
}

Now I would like to set a different Title,for my pages. Is it possible to used <Head> outside of Document ? I mean in <div> like this:

const ContactPage = () => {
  return (
    <div>
      <Head>
        <title>You better contact us!</title>
      </Head>

      <div className="page-body">...</div>
    </div>
  )
}

And if possible, will it overwrite or merge what is already set in pages/_document.js ?

There might be, but I'm sure Common JS would work just fine here. — ihodonald, Sep 04 '18 at 17:14

score 81 · Accepted Answer · edited Nov 09 '20 at 14:27

81

You want to use the next/head component:

import Head from 'next/head'

export default () =>
  <div>
    <Head>
      <title>My page title</title>
      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
    </Head>

    <p>Hello world!</p>
  </div>

See the docs: https://nextjs.org/docs/api-reference/next/head

edited Nov 09 '20 at 14:27

Henry

1,311
1
9
26

answered Sep 04 '18 at 20:22

Jeff Kilbride

2,614
1
20
21

1

OK. But as I test it, if you set a tag in Head, in one page, for example the title, you will have to set it for all the others pages, because it will just unset what you put for the title in _document.js. – acmoune Sep 05 '18 at 08:32
28

Don't use `_document.js` for things that change on different pages. Create a layout component and pass the title in as a property. Then wrap your pages in that layout. The `next.js` repository on github has many examples. You should take a look at them. For the title stuff, look at this one in particular: https://github.com/zeit/next.js/tree/master/examples/layout-component – Jeff Kilbride Sep 05 '18 at 19:20
OK I got it, Thanks – acmoune Sep 06 '18 at 10:47

Anas · Answer 2 · 2023-05-26T10:29:32.417

6

In NextJs 13 using the app directory you don't have to use the 'next/head' component anymore. What you need to do instead is just define an exported object whether in layout.js OR page.js holding the title statically like the example below:

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

Or if you need a dynamic title, you can use the generateMetadata function to achieve what you need like the example below:

//in this example I use the generateMetadata function to generate a multi languages title.

export async function generateMetadata({ params: { lng } }) {

  const myTitle = lng === "en" ? "Hi" : "مرحبا";

  return {
    title: myTitle,
  };
}

Reference Config-based Metadata

edited May 26 '23 at 10:29

answered May 14 '23 at 08:51

Anas

1,000
11
18

1

This generateMetadata will work only in Server Pages. How to give title and description in a Client Component. If you use generateMetadata in layout.js, title and description will be same for every page. Please correct me where I am wrong. Thanks – Jagdish Padeliya Jun 09 '23 at 14:24
@jagdish-padeliya I think you miss understand the new Next.js 13, in Next.js 13 you can define layout.js for each page. also, you can use the `generateMetadata()` in layout.js OR page.js as I mentioned in the answer. I think you should read Next.js 13 docs for more understanding and read more about "use client" if you would like to render the component on the client side – Anas Jun 09 '23 at 16:40
Can you please have a look to this question? https://stackoverflow.com/q/76441912/15384724 – Jagdish Padeliya Jun 09 '23 at 17:09

How to set document's title per page?

2 Answers2

Linked