rsnext/errors/no-document-title.mdx

---
title: '`<title>` should not be used in _document.js `<Head>`'
---

## Why This Error Occurred

Adding `<title>` in `pages/_document.js` will lead to unexpected results with `next/head` since `_document.js` is only rendered on the initial pre-render.

## Possible Ways to Fix It

Set `<title>` in `pages/_app.js` instead:

```js filename="pages/_app.js"
import React from 'react'
import Head from 'next/head'

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        <title>My new cool app</title>
      </Head>
      <Component {...pageProps} />
    </>
  )
}

export default MyApp
```

## Useful Links

- [The issue this was reported in: #4596](https://github.com/vercel/next.js/issues/4596)
docs: Migrate error messages to MDX and App Router. (#52038) This PR is part of a larger effort to migrate error messages to MDX and use App Router: https://github.com/vercel/front/pull/23459 2023-07-05 15:11:16 +02:00			`---`
			title: '`<title>` should not be used in _document.js `<Head>`'
			`---`
Show warning if there is a title in _document.js's Head (#5160) * show warning if there is a title in _document.js Head * dont loop through children in production * only 1 loop through this.props.children 💪 * also raise warning in test env * check for null childs 2018-09-28 00:24:12 +02:00
docs: Migrate error messages to MDX and App Router. (#52038) This PR is part of a larger effort to migrate error messages to MDX and use App Router: https://github.com/vercel/front/pull/23459 2023-07-05 15:11:16 +02:00			`## Why This Error Occurred`
Show warning if there is a title in _document.js's Head (#5160) * show warning if there is a title in _document.js Head * dont loop through children in production * only 1 loop through this.props.children 💪 * also raise warning in test env * check for null childs 2018-09-28 00:24:12 +02:00
			Adding `<title>` in `pages/_document.js` will lead to unexpected results with `next/head` since `_document.js` is only rendered on the initial pre-render.

docs: Migrate error messages to MDX and App Router. (#52038) This PR is part of a larger effort to migrate error messages to MDX and use App Router: https://github.com/vercel/front/pull/23459 2023-07-05 15:11:16 +02:00			`## Possible Ways to Fix It`
Show warning if there is a title in _document.js's Head (#5160) * show warning if there is a title in _document.js Head * dont loop through children in production * only 1 loop through this.props.children 💪 * also raise warning in test env * check for null childs 2018-09-28 00:24:12 +02:00
Format no-document-title description (#5803) 2018-12-03 23:04:18 +01:00			Set `<title>` in `pages/_app.js` instead:
Show warning if there is a title in _document.js's Head (#5160) * show warning if there is a title in _document.js Head * dont loop through children in production * only 1 loop through this.props.children 💪 * also raise warning in test env * check for null childs 2018-09-28 00:24:12 +02:00
docs: Migrate error messages to MDX and App Router. (#52038) This PR is part of a larger effort to migrate error messages to MDX and use App Router: https://github.com/vercel/front/pull/23459 2023-07-05 15:11:16 +02:00			```js filename="pages/_app.js"
Show warning if there is a title in _document.js's Head (#5160) * show warning if there is a title in _document.js Head * dont loop through children in production * only 1 loop through this.props.children 💪 * also raise warning in test env * check for null childs 2018-09-28 00:24:12 +02:00			`import React from 'react'`
Add warning when viewport meta tag is added to _document.js (#13452) Co-authored-by: Joe Haddad <timer150@gmail.com> Co-authored-by: Joe Haddad <joe.haddad@zeit.co> 2020-07-07 07:43:16 +02:00			`import Head from 'next/head'`
Show warning if there is a title in _document.js's Head (#5160) * show warning if there is a title in _document.js Head * dont loop through children in production * only 1 loop through this.props.children 💪 * also raise warning in test env * check for null childs 2018-09-28 00:24:12 +02:00
Add warning when viewport meta tag is added to _document.js (#13452) Co-authored-by: Joe Haddad <timer150@gmail.com> Co-authored-by: Joe Haddad <joe.haddad@zeit.co> 2020-07-07 07:43:16 +02:00			`function MyApp({ Component, pageProps }) {`
			`return (`
			`<>`
			`<Head>`
			`<title>My new cool app</title>`
			`</Head>`
			`<Component {...pageProps} />`
			`</>`
			`)`
Show warning if there is a title in _document.js's Head (#5160) * show warning if there is a title in _document.js Head * dont loop through children in production * only 1 loop through this.props.children 💪 * also raise warning in test env * check for null childs 2018-09-28 00:24:12 +02:00			`}`
Add warning when viewport meta tag is added to _document.js (#13452) Co-authored-by: Joe Haddad <timer150@gmail.com> Co-authored-by: Joe Haddad <joe.haddad@zeit.co> 2020-07-07 07:43:16 +02:00
			`export default MyApp`
Show warning if there is a title in _document.js's Head (#5160) * show warning if there is a title in _document.js Head * dont loop through children in production * only 1 loop through this.props.children 💪 * also raise warning in test env * check for null childs 2018-09-28 00:24:12 +02:00			```

docs: Migrate error messages to MDX and App Router. (#52038) This PR is part of a larger effort to migrate error messages to MDX and use App Router: https://github.com/vercel/front/pull/23459 2023-07-05 15:11:16 +02:00			`## Useful Links`
Show warning if there is a title in _document.js's Head (#5160) * show warning if there is a title in _document.js Head * dont loop through children in production * only 1 loop through this.props.children 💪 * also raise warning in test env * check for null childs 2018-09-28 00:24:12 +02:00
Update references to zeit/next.js (#13463) 2020-05-27 23:51:11 +02:00			`- [The issue this was reported in: #4596](https://github.com/vercel/next.js/issues/4596)`