Using <title> in _document.js's <Head> tag should show a warning to use _app.js instead #4596

timneutkens · 2018-06-13T12:36:06Z

Bug report

Based on #3527

Describe the bug

Currently, users might add <title> in _document.js which will lead to unexpected results with next/head since _document.js is only rendered on the initial pre-render. _app.js is rendered on the server and client side, and is rendered as a normal React tree, whereas _document.js is rendered as static HTML.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

Copy the default _document.js and add <title>:

// _document is only rendered on the server side and not on the client side
// Event handlers like onClick can't be added to this file

// ./pages/_document.js
import Document, { Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <html>
        <Head>
          <title>Hello World</title>
        </Head>
        <body className="custom_class">
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}

Expected behavior

Above example should show a warning that <title> should only be used in _app.js and other pages. This can be done using err.sh, create a link like: https://err.sh/next.js/no-document-title and create a file in the errors directory: errors/no-document-title.md

The text was updated successfully, but these errors were encountered:

remy · 2018-06-13T16:07:46Z

Question on this issue - is including <head><title>xyz</title></head> okay? (note this is the regular head element and not the React element.

Can I also ask what's the thinking behind title being set in _app.js over _document.js? It seems (without background) to be more intuitive that I would set the title in the document.

timneutkens · 2018-06-13T16:43:55Z

A title is directly correlated to a page. So it should be set in a page. <Head> from next/document is a wrapper around the real <head> tag, you shouldn't implement it yourself. The reason you should use next/head for this is that next/head managed the title and all other head elements.

davscro · 2018-06-15T05:27:04Z

Hi @timneutkens, I could take this one

timneutkens · 2018-06-15T09:14:35Z

@davscro go ahead 👍🙌

davscro · 2018-06-15T09:18:04Z

Ok, thanks.
Over the weekend, between soccer matches ⚽️🇭🇷, I will take care of this task. 😀

teleginzhenya · 2018-06-16T12:20:03Z

Hi :)
This is what I came to trying to solve this problem. (I was bored and tried to help 😬) However, I don't know how to go further :(

I've added isTitleExists() in Head server/document.js

isTitleExists () {
  if (this.props.children.filter(children => children.type != "title").length > 0) {
    return;
  }
  console.log("Warning: the <title> should be used only in _app.js and other pages. https://err.sh/next.js/url-deprecated")
}

Any hints?

p.s. sorry, @davscro I was bored 😃 looking forward for your solution 👍

davscro · 2018-06-19T20:56:35Z

Hi @teleginzhenya, you are on the right direction but children could be an object too so your code will break. Also be careful with equality comparisons, I would suggest you to always use strict comparison 😉
@timneutkens I did it, but I think this is not a right way to fix it, IMO it should be one-time check probably during the build time, what do u think?

rainstormza · 2018-10-02T04:41:13Z

https://github.com/zeit/next.js/tree/canary/examples/with-styled-components

This example should be fixed?

it use <Head> tag in _document.js

@timneutkens

timneutkens · 2018-10-02T11:13:04Z

Yes, feel free to update it @rainstormza.

I'm going to close this issue as it was fixed in #5160.

rainstormza · 2018-10-04T03:33:00Z

@timneutkens
How can we inject css-in-js on server side if we can't use<Head>tag in _document.js ?

ref: https://github.com/zeit/next.js#custom-document

timneutkens · 2018-10-04T06:03:45Z

You can use the head tag, just not for setting <title> as it leads to unexpected behavior

zargold · 2019-05-04T20:33:32Z

Using react helmet seems to trigger this warning.

mattdell · 2019-05-16T07:03:15Z

What if I purposely want this behavior? How can I stop it from saying...

Warning: <title> should not be used in _document.js's <Head>. https://err.sh/next.js/no-document-title

itpreneur · 2019-12-15T04:18:31Z

import Head from 'next/head';

from your pages e.g. index.js etc.

<title> cool title </title>

Pushplaybang · 2020-04-05T00:32:51Z

Hi There, I followed the error message, landing up here, moved my Head element, title and description meta tag to _app and received the following:

TypeError: Cannot read property '_documentProps' of null
    at Head.render (/Users/paul/repositories/coronasepush-web/.next/server/static/development/pages/_document.js:665:22)
    at processChild (/Users/paul/repositories/coronasepush-web/node_modules/react-dom/cjs/react-dom-server.node.development.js:3134:18)
    at resolve (/Users/paul/repositories/coronasepush-web/node_modules/react-dom/cjs/react-dom-server.node.development.js:2960:5)
    at ReactDOMServerRenderer.render (/Users/paul/repositories/coronasepush-web/node_modules/react-dom/cjs/react-dom-server.node.development.js:3435:22)
    at ReactDOMServerRenderer.read (/Users/paul/repositories/coronasepush-web/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29)
    at renderToString (/Users/paul/repositories/coronasepush-web/node_modules/react-dom/cjs/react-dom-server.node.development.js:3988:27)
    at render (/Users/paul/repositories/coronasepush-web/node_modules/next/dist/next-server/server/render.js:83:16)
    at renderPage (/Users/paul/repositories/coronasepush-web/node_modules/next/dist/next-server/server/render.js:406:16)
    at Object.ctx.renderPage (/Users/paul/repositories/coronasepush-web/.next/server/static/development/pages/_document.js:1693:28)
    at Function.getInitialProps (/Users/paul/repositories/coronasepush-web/.next/server/static/development/pages/_document.js:506:19)
    at Function.module.exports../src/pages/_document.js.MyDocument.getInitialProps (/Users/paul/repositories/coronasepush-web/.next/server/static/development/pages/_document.js:1704:85)
    at Object.loadGetInitialProps (/Users/paul/repositories/coronasepush-web/node_modules/next/dist/next-server/lib/utils.js:59:29)
    at Object.renderToHTML (/Users/paul/repositories/coronasepush-web/node_modules/next/dist/next-server/server/render.js:410:36)

rjerue · 2020-06-16T20:46:37Z

Hi There, I followed the error message, landing up here, moved my Head element, title and description meta tag to _app and received the following:

TypeError: Cannot read property '_documentProps' of null
    at Head.render (/Users/paul/repositories/coronasepush-web/.next/server/static/development/pages/_document.js:665:22)
    at processChild (/Users/paul/repositories/coronasepush-web/node_modules/react-dom/cjs/react-dom-server.node.development.js:3134:18)
    at resolve (/Users/paul/repositories/coronasepush-web/node_modules/react-dom/cjs/react-dom-server.node.development.js:2960:5)
    at ReactDOMServerRenderer.render (/Users/paul/repositories/coronasepush-web/node_modules/react-dom/cjs/react-dom-server.node.development.js:3435:22)
    at ReactDOMServerRenderer.read (/Users/paul/repositories/coronasepush-web/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29)
    at renderToString (/Users/paul/repositories/coronasepush-web/node_modules/react-dom/cjs/react-dom-server.node.development.js:3988:27)
    at render (/Users/paul/repositories/coronasepush-web/node_modules/next/dist/next-server/server/render.js:83:16)
    at renderPage (/Users/paul/repositories/coronasepush-web/node_modules/next/dist/next-server/server/render.js:406:16)
    at Object.ctx.renderPage (/Users/paul/repositories/coronasepush-web/.next/server/static/development/pages/_document.js:1693:28)
    at Function.getInitialProps (/Users/paul/repositories/coronasepush-web/.next/server/static/development/pages/_document.js:506:19)
    at Function.module.exports../src/pages/_document.js.MyDocument.getInitialProps (/Users/paul/repositories/coronasepush-web/.next/server/static/development/pages/_document.js:1704:85)
    at Object.loadGetInitialProps (/Users/paul/repositories/coronasepush-web/node_modules/next/dist/next-server/lib/utils.js:59:29)
    at Object.renderToHTML (/Users/paul/repositories/coronasepush-web/node_modules/next/dist/next-server/server/render.js:410:36)

See #9647 (comment)

crevulus · 2020-11-13T12:01:32Z

import Head from 'next/head';

from your pages e.g. index.js etc.
<title> cool title </title>

so then, if I'm understanding right, the current best practice to insert <Head> tag with <title> tags in every page, rather than jut setting it once in _document.js?

filipesmedeiros · 2020-11-16T16:00:06Z

@crevulus Afaik, you can set a "global" title in _app.tsx or in individual pages

Title metadata should be set at a page level. See https://nextjs.org/docs/api-reference/next/head and vercel/next.js#4596

Oosasukel · 2021-03-20T16:45:24Z

You should import Head from 'next/head' instead 'next/document' to put the title

phiberber · 2021-08-30T03:16:05Z

Hey, I'm having some problems related to this issue. When creating a _document file, it prompts the following message:

warn - Your custom Document (pages/_document) did not render all the required subcomponent. Missing component: <Head /> Read how to fix here: https://nextjs.org/docs/messages/missing-document-component

For some reason, it prompts another warning saying.

Missing required 'title' element

And obviously, I can't set the title in the _document. Is someone having the same problem? Didn't think it was enough to create a new issue.

nazywamsiepawel · 2021-12-10T10:45:53Z

Hey did anyone manage to solve this with Next 12? Using 12.0.6 currently.

I have a _document.js but not specifying title/head in there. Using next/head in my pages and all of the tags land in the body not in head. It's a pretty bad result for SEO.

balazsorban44 · 2021-12-10T20:02:35Z

If you have issues, I suggest opening a new bug report with a reproduction. 🙏

timneutkens added Type: Enhancement good first issue Easy to fix issues, good for newcomers labels Jun 13, 2018

timneutkens mentioned this issue Jun 13, 2018

next/head unsetting _document <title> #3527

Closed

davscro mentioned this issue Jun 19, 2018

Warn if user is using <title> within the _document.js #4631

Closed

This was referenced Jun 19, 2018

Update with-universal-configuration examples #4519

Closed

Update with-universal-configuration example #4633

Closed

lucleray mentioned this issue Sep 13, 2018

Show warning if there is a title in _document.js's Head #5160

Merged

timneutkens closed this as completed Oct 2, 2018

lucleray mentioned this issue Nov 15, 2018

[examples/with-react-helmet] <title> should not be used in _document.js's <Head> #5668

Closed

Mosoc mentioned this issue Apr 20, 2019

Avoid using <title> within _document.js 's <Head> CannerCMS/canner-firebase-cms#18

Open

ku8ar mentioned this issue Jun 1, 2019

Disable <title/> warning when React Helmet is used #7483

Merged

chrisweb mentioned this issue Jan 5, 2020

Next.js examples update to fix duplicate meta tags mui/material-ui#19074

Closed

2 tasks

vassbence mentioned this issue Mar 30, 2020

Mention <title> and styled-jsx caveats in Document's docs #11499

Merged

gomorizsolt mentioned this issue May 4, 2020

Fix <title> tag usage c-hive/dotdev#121

Merged

matthew-a-carr mentioned this issue Jan 28, 2021

Showcase/29 jan initial mcagov/beacons-webapp#27

Merged

zackads added a commit to mcagov/beacons-webapp that referenced this issue Jan 29, 2021

Move title from _document to page

3134a9c

Title metadata should be set at a page level. See https://nextjs.org/docs/api-reference/next/head and vercel/next.js#4596

vercel locked as resolved and limited conversation to collaborators Dec 10, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Using <title> in _document.js's <Head> tag should show a warning to use _app.js instead #4596

Using <title> in _document.js's <Head> tag should show a warning to use _app.js instead #4596

timneutkens commented Jun 13, 2018

remy commented Jun 13, 2018

timneutkens commented Jun 13, 2018

davscro commented Jun 15, 2018

timneutkens commented Jun 15, 2018

davscro commented Jun 15, 2018

teleginzhenya commented Jun 16, 2018

davscro commented Jun 19, 2018 •

edited

rainstormza commented Oct 2, 2018 •

edited

timneutkens commented Oct 2, 2018

rainstormza commented Oct 4, 2018 •

edited

timneutkens commented Oct 4, 2018

zargold commented May 4, 2019

mattdell commented May 16, 2019

itpreneur commented Dec 15, 2019

Pushplaybang commented Apr 5, 2020 •

edited

rjerue commented Jun 16, 2020

crevulus commented Nov 13, 2020

filipesmedeiros commented Nov 16, 2020

Oosasukel commented Mar 20, 2021

phiberber commented Aug 30, 2021

nazywamsiepawel commented Dec 10, 2021

balazsorban44 commented Dec 10, 2021

Using <title> in _document.js's <Head> tag should show a warning to use _app.js instead #4596

Using <title> in _document.js's <Head> tag should show a warning to use _app.js instead #4596

Comments

timneutkens commented Jun 13, 2018

Bug report

Describe the bug

To Reproduce

Expected behavior

remy commented Jun 13, 2018

timneutkens commented Jun 13, 2018

davscro commented Jun 15, 2018

timneutkens commented Jun 15, 2018

davscro commented Jun 15, 2018

teleginzhenya commented Jun 16, 2018

davscro commented Jun 19, 2018 • edited

rainstormza commented Oct 2, 2018 • edited

timneutkens commented Oct 2, 2018

rainstormza commented Oct 4, 2018 • edited

timneutkens commented Oct 4, 2018

zargold commented May 4, 2019

mattdell commented May 16, 2019

itpreneur commented Dec 15, 2019

Pushplaybang commented Apr 5, 2020 • edited

rjerue commented Jun 16, 2020

crevulus commented Nov 13, 2020

filipesmedeiros commented Nov 16, 2020

Oosasukel commented Mar 20, 2021

phiberber commented Aug 30, 2021

nazywamsiepawel commented Dec 10, 2021

balazsorban44 commented Dec 10, 2021

davscro commented Jun 19, 2018 •

edited

rainstormza commented Oct 2, 2018 •

edited

rainstormza commented Oct 4, 2018 •

edited

Pushplaybang commented Apr 5, 2020 •

edited