【Next.js/React】VercelでデプロイしたらDo not pass children as propsとエラーが発生した場合の解決法

最近フロントエンドの技術に興味が湧き、Reactのフレームワーク「Next.js」を勉強していた時のこと。

チュートリアルで作ったWebサイトをVercelにデプロイすると以下のエラーが発生してビルドに失敗してしまった。

Error: Do not pass children as props. Instead, nest children between the opening and closing tags. react/no-children-prop

今回はこのエラーの解決法を紹介する。

エラーの原因と解決法

まず、エラーの原因となっていたコードを抜粋したものがこちら。

const contents = props.markdownBody

<ReactMarkdown children={contents} />

検証した結果、マークダウンをHTMLに変換するReactMarkdownで、childrenに対し読み込んだマークダウン形式のコンテンツを与えていたのが問題だったようだ。

上記のコードを以下の通り修正する。

<ReactMarkdown>{contents}</ReactMarkdown>

エラーメッセージを翻訳したものがこちらで、指示どおりにchildrenに与えるコンテンツを開始タグと終了タグで囲んであげることで、今回のエラーは解消することができた。