Title set briefly using next/head before reverting

sarimabbas commented 4 years ago

Subject of the issue

I'm using <Head> from "next/head" to set page titles. It works well on my normal.tsx pages. But in .mdx pages, the title is only set for a split second when loading the page before it reverts to "localhost". Which is why I'm posting here on the MDX repo.

ScreenFlow

Here is some code:

// sample-post.mdx

import Head from "next/head";

<Head>
  <title>Sarim - My page title</title>
</Head>

# My page title

The title shows up in the source code, just not in the browser tab.

Strangely, when I remove the <Head> import, the title persists, but then I get a warning that is not registered with MDXProvider.

Your environment

OS: macOS 10.15.5 Catalina
Packages: "@mdx-js/loader": "^1.6.6", "@next/mdx": "^9.4.4", "next": "9.4.4",
Env: Node 14.4.0, Google Chrome (latest)

Steps to reproduce

Create an .mdx file in pages
Import next/head and use it to set a title
Observe that the title is set only momentarily before blanking

wooorm commented 4 years ago

Thanks for all the details! I'm doubting that this is a problem with MDX, rather, maybe you'll have more luck in the Next direction?

samrobbins85 commented 4 years ago

You might have better luck with the next-mdx-enhanced plugin. You can set the title in the frontmatter (which is a nicer user interface anyway) and specify it to be taken in as the title in a layout you create. I've got a website set up with this technique and I don't get the issue you are facing.

sarimabbas commented 4 years ago

I'll give that a try, thank you!

mdx-js / mdx