Head コンポーネントの中身は頭に追加される

問題

例えば_document.jsx<head>のデフォルトを定義して各ページでそれを上書きしようとしてもできないものがある。

_document.jsx<head>

<head>
  <title>foo</title>
</head>

pages/index.jsx<Head>

const Head = require('next/head');

<Head>
  <title>bar</title>
<Head>

結果

<title>bar</title>
<title>foo</title>

解決

ページ毎にすべて<Head>に書く。
まぁ<title>は何かうまくやってくれるみたいですが、ツイッターカードとかはうまく取得できてませんでした。