【Next.js】titleタグに変数を渡すと警告が出る

Next.js でtitleタグに以下のように変数を渡していたら

  <title>{title} | My Company</title>

次のような警告がでた

Warning: A title element received an array with more than 1 element as children. In browsers title Elements can only have Text Nodes as children. If the children being rendered output more than a single text node in aggregate the browser will display markup and comments as text in the title and hydration will likely fail and fall back to client rendering

title要素が複数の要素を子として持つ配列を受け取ったと書いてあるが、検討がつかなかったのでなんだろうと調べたところ以下で解説されていた

github.com

このような書き方をした場合、

const Home: NextPage = () => {
  const world = "World";
  return (
    <div>
      <span>Hello {world} foo</span>
    </div>
  );
};

次のようにレンダリングされる

<div><span>Hello <!-- -->World<!-- --> foo</span></div>

spanの子要素は0だが、nodeとしてはtext、comment、text、comment、textの５つある

つまり、titleタグの実装もこのようになっていることになる

警告をよくよくみるとタイトル要素は１つのテキストノードしか持てないとあるので、以下のように書き換えればよいことがわかった

  <title>{`${title} | My Company`}</title>