知りたいこと

以下のFacebook公式ページで紹介されているいいね！ボタンをページに設置するソースコードをNext.jsアプリケーションに組み込みたいのですが、どのように組み込めば良いのかわかりません。
https://developers.facebook.com/docs/plugins/like-button

_document.tsxに以下のように実装し、

tsx
1import Document, { Head, Html, Main, NextScript } from 'next/document'
2
3class MyDocument extends Document {
4  render() {
5    return (
6      <Html lang="ja">
7        <body>
8          {/* いいね！ボタン用スクリプト */}
9          <div id="fb-root"></div>
10          <script
11            async
12            defer
13            crossOrigin="anonymous"
14            src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v11.0"
15            nonce="qV8TYH2W"
16          ></script>
17          <Main />
18          <NextScript />
19          <script> </script>
20        </body>
21      </Html>
22    )
23  }
24}
25
26export default MyDocument
27

ボタンを表示したい箇所に以下のように記述しましたが、表示されません。

tsx
1          {/* いいね！ボタンボタン */}
2          <div
3            className="fb-like"
4            data-width=""
5            data-layout="button_count"
6            data-action="like"
7            data-size="large"
8            data-share="true"
9          ></div>