Next.js: next/head unsetting _document <title>
I'm trying to add a custom Social component to my site that adds several relevant meta tags, but it's setting the <title> to an empty string. I have the title defined in _document.js and don't change it anywhere else in the codebase. I'm running the Canary version of Next.js
import Document, { Head, Main, NextScript } from 'next/document'
export default class CustomDocument extends Document {
static async getInitialProps (ctx) {
return await Document.getInitialProps(ctx)
}
render () {
return (
<html lang="en">
<Head>
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Website Title</title>
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
)
}
}
The custom component I call looks like this:
import Head from 'next/head'
export default ({ title, image, description, url }) => (
<Head>
<meta key="twitter-card" name="twitter:card" content="summary" />
<meta key="twitter-site" name="twitter:site" content="@ianmitchel1" />
<meta key="twitter-title" name="twitter:title" content={title} />
<meta key="twitter-description" name="twitter:description" content={description} />
<meta key="twitter-image" name="twitter:image" content={image} />
<meta key="twitter-url" name="twitter:url" content={url} />
<meta key="facebook-type" property="og:type" content="article" />
<meta key="facebook-title" property="og:title" content={title} />
<meta key="facebook-description" property="og:description" content={description} />
<meta key="facebook-image" property="og:image" content={image} />
<meta key="facebook-url" property="og:url" content={url} />
</Head>
)
It adds all the meta tags correctly (not sure if it's related, but I needed to add the key parameter - otherwise only the second set of meta tags was added) and the other meta tags from _document.js remain intact, but somehow the title tag just becomes <title></title>.
I've created a small example here - https://next-title-pnxpfydvvh.now.sh
bug
IanMitchell
👍16
All 16 comments
Same issue, running 4.2.1
gsimone
on 8 Jan 2018
I had this problem with 4.3.0-canary.1
It has been corrected as of 4.4.0-canary.3
gihrig
on 14 Jan 2018
This is indeed a bug. This line show be wrapped in the if statement. I'll fix it once I'm done with universal webpack
https://github.com/zeit/next.js/blob/9320d9f006164f2e997982ce76e80122049ccb3c/client/head-manager.js#L33
timneutkens
on 16 Jan 2018
👍4
@timneutkens I can make PR for this if you don't mind.
Sekhmet
on 13 Feb 2018
👍1
@Sekhmet sure 👍 Please add tests for it 👍
timneutkens
on 13 Feb 2018
I've just come across this and it's still present in [email protected]. Example here: https://next-title-bug-kraxvxvjas.now.sh - source
remy
on 17 Mar 2018
This is quite critical and still present. Any news?
mzzfederico
on 19 Mar 2018
👍6
Same here, title and description appears in first glance but instantly goes away.
@Sekhmet will you fix this? @timneutkens Any plans to release it?
felipekm
on 20 Mar 2018
👍4
still an issue in 0.5.1, when will the fix be merged?
JonathonJulian
on 19 Apr 2018
👍3
Chiming in to say this appears to still be an issue. React is logging the correct value for
Most helpful comment
This is quite critical and still present. Any news?