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

Created on 13 Nov 2018  路  12Comments  路  Source: vercel/next.js

Examples bug report

Example name

with-react-helmet

Describe the bug

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

To Reproduce

  • hub clone zeit/next.js
  • cd next.js/examples/with-react-helmet
  • yarn install
  • yarn next
  • open http://localhost:3000

Expected behavior

I expect that the example is set up in compliance with Next's functionality.

Screenshots

N/A

System information

  • OS: macOS
  • Browser (if applies): N/A
  • Version of Next.js: 7.0.2

Additional context

I previously didn't get the Warning, but I noticed this in my production app.
Also, AFAIK, it's not only <title> related, but also <meta>'s and basically everything else that is page related rather than totally global?

I cannot seem to figure out a way how to use react-helmet in compliance with Next, though.

bug
Source
picture tomsseisums
👍3

Most helpful comment

Maybe adding <html lang="fr"> ?

picture lucleray on 16 Nov 2018
👍7

All 12 comments

I created a PR to fix that, you can have a look here : https://github.com/zeit/next.js/pull/5678

lucleray picture lucleray on 15 Nov 2018

Ok, but isn't there a reason why default <Head> prevents the setting of <title> in _document?
I mean, with this you got rid of the warning, but doesn't it introduce other problems?

I don't know the intricacies of <Head>, that's why I'm being cautions here.

Because, even without using Helmet, the proposed solution is to set <title> in _app instead, otherwise ... __. So, it's not just about getting rid of the warning, is it?

tomsseisums picture tomsseisums on 15 Nov 2018

The reason for the warning is explained here : https://github.com/zeit/next.js/issues/4596

react-helmet is basically an alternative of next/head. So when you use it, you shouldn't use next/head anymore and that's why <Head> should be removed from _document and replaced by Helmet's own <head> tag.

If you try to use next/head and react-helmet at the same time, they will probably conflict. Thankfully, _document.js allows you to opt-out of next/head and replace it by your preferred solution 馃檪

lucleray picture lucleray on 15 Nov 2018
👍1

Actually this is an interesting issue, since you don't want to remove <Head> from _document.js

timneutkens picture timneutkens on 15 Nov 2018

Some off topic thoughts if anyone feels like chewing on them:

  • Do you think the example readme should inform new users that next already has next/head feature to avoid people that are jumping into examples they think are relevant before reading all the docs?
  • What are some things that react-helmet does that next/head doesn't? As a new user, I am curious what reasons someone would choose to use it over next/head.
  • I noticed this interesting alternative: https://www.npmjs.com/package/react-helmet-async. Would new users be better off being shown that in the next example instead?
Enalmada picture Enalmada on 15 Nov 2018

Do you think the example readme should inform new users that next already has next/head feature to avoid people that are jumping into examples they think are relevant before reading all the docs?

Definitely, adding react-helmet would increase bundle size while it's not needed because we provide next/head

What are some things that react-helmet does that next/head doesn't? As a new user, I am curious what reasons someone would choose to use it over next/head.

In pretty much all cases you don't want to use react-helmet, it's mostly for interoperating old and new code while moving from a different app to Next.js

I noticed this interesting alternative: npmjs.com/package/react-helmet-async. Would new users be better off being shown that in the next example instead?

We could, but it doesn't make much difference until we implement streaming rendering.

timneutkens picture timneutkens on 16 Nov 2018

In pretty much all cases you don't want to use react-helmet, it's mostly for interoperating old and new code while moving from a different app to Next.js

For instance, how would I add a class to <html> from anywhere in my code?

With Helmet I can:

<Helmet>
    <html className="classname-to-be-added" />
</Helmet>

That's the sole reason I looked upon Helmet as I couldn't find a way how to do it with native Head...

tomsseisums picture tomsseisums on 16 Nov 2018

What's the reason for adding classes to html/body 馃 Because of the way css inheritance works you could add classes on pages / _app.js and it'd work in the same way.

timneutkens picture timneutkens on 16 Nov 2018

Maybe adding <html lang="fr"> ?

lucleray picture lucleray on 16 Nov 2018
👍7

When working with modals, to add overflow: hidden, for instance, to prevent background scroll.

tomsseisums picture tomsseisums on 16 Nov 2018
👍2

@timneutkens
I am working on an application that needs to be interoperable with some old code, in the process of being upgraded, but that is expected to take at least another year. In the meantime, the new code is being written and deployed in pieces, and one of the things it needs to be able to do is add classes to <body>.

Right now I'm using react-helmet to accomplish this, but would love to shed that 7kb dependency :)

I might just create a simple component that goes straight to the DOM via document.body.classList on mount ... this would be nice and declarative though.

codinronan picture codinronan on 21 Nov 2018

Solved in https://github.com/zeit/next.js/pull/7483

Timer picture Timer on 14 Jun 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

timneutkens picture timneutkens  路  3Comments
sospedra picture sospedra  路  3Comments
lixiaoyan picture lixiaoyan  路  3Comments
havefive picture havefive  路  3Comments
flybayer picture flybayer  路  3Comments