Next.js: Duplicate title tags in Head

Created on 8 Feb 2017 · 12Comments · Source: vercel/next.js

When using <Head> on a page, as well as specifying the <title> in _document.js inside <Head>, both create duplicate titles.

<head>
  <title class="next-head">Homepage - Welcome</title>
  <meta charset="utf-8" class="next-head">
  <meta name="viewport" content="initial-scale=1.0, width=device-width" class="next-head>
  <title>Homepage</title>
  <link href="/static/styles/sanitize.css" rel="stylesheet">
</head>

Source

khrome83

All 12 comments

Looks like issue resolves itself if <head> the default HTML5 tag, is used instead of <Head> from Next within the _document.js fragment.

Should we be using <Head> or <head> within the _document.js.

If we should be using <head> then the glamor and other _document.js examples are incorrect right now.

khrome83 on 8 Feb 2017

@khrome83 This https://github.com/zeit/next.js/pull/668 would solve your issue 👍 will be released in 2.1

timneutkens on 8 Feb 2017

Regarding this question:

Should we be using or within the _document.js.

cc @arunoda

timneutkens on 8 Feb 2017

@khrome83 I think using the title in the _document.js is not a good idea. Because it'll be static and cannot change with the client side.

Using the <Head/> inside your pages in the better option.

arunoda on 9 Feb 2017

Using <Head/> with https://github.com/zeit/next.js/tree/master/examples/layout-component is the way to go in this case. Since we dedupe <title> in <Head/>

timneutkens on 11 Feb 2017

👍1

[email protected] and still facing this issue.
Here is usage example inside of the reusable component:

<div>
  <Header>
    <style key="transcribe" dangerouslySetInnerHTML={{ __html: stylesheet }} />
  </Header>
  ...

style tag is being rendered on every usage of the component

amankkg on 9 Apr 2017

@khrome83 did you re-checked this behavior since 2.1.0?

amankkg on 9 Apr 2017

I have not upgraded myself. Will upgrade this week and try and reproduce.

Zane Milakovic

On Apr 9, 2017, 10:34 AM -0500, Aman Kubanychbek notifications@github.com, wrote:
>

@khrome83 (https://github.com/khrome83) did you re-checked this behavior since 2.1.0?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub (https://github.com/zeit/next.js/issues/1039#issuecomment-292793042), or mute the thread (https://github.com/notifications/unsubscribe-auth/ABwmA7oPzVRcjWsDPtPRJVKxPuewwGlCks5ruPpxgaJpZM4L7M9k).

khrome83 on 9 Apr 2017

update: related PR is not merged yet

amankkg on 9 Apr 2017

Removing <Head> from _document.js does not render my styles from the server and it causes FOUC.

chhuang on 16 Apr 2017

😕2

Did you get this @khrome83 working? I'm on next 5 in 2018 and it's still unclera for me how to use in _document.js and in my pages to avoid duplicate tags.

mmiszy on 3 May 2018

I moved most of my stuff to my layout components, and pass the information to them from the pages. The only items I use for in _document.js are things that are universal across the site and do not change when navigating between pages. Like the inclusion of font or analytics code. Meta data to validate Google Search Console, etc.

khrome83 on 5 May 2018

Was this page helpful?

0 / 5 - 0 ratings