Using Variables in Next/Head Tags (<!– –> Issue)
P
I am a full-stack developer specializing in React, Next.js, TypeScript, C#, .NET and Sitecore. I love working on back-end as well as front-end, writing documentation, finding solutions to problems, and writing technical blog posts to help others. I've been Sitecore certified and Coveo for Sitecore certified twice.
I use Next.js's <Head><title> tagging heavily in one of my personal website projects to show a customized title in the browser tab. When using variables in this <title> tag, I noticed the string <!-- --> would show in the browser title where I injected these variables, but only on first render - so they would appear for a moment when you refreshed the page, then disappear.
This was quite the annoying experience. Luckily, I found that if I wrap the entire contents of the <title> tag in {``}, it works fine:
<Head>
<title>{`${title} | My Website`}</title>
</Head>
Not sure if this is a bug or intended functionality within Next.js?
9 views
