Next.js13(app router) Warning: Expected server HTML to contain ...
概要
すいません... タイトルに入らなかったのでこちらで補足します。
Warning: Expected server HTML to contain a matching <html> in <body>.
というエラーです。
今回のエラーはNext.js特有のエラーではないです。
ただ、海外のgithubのissueやstacoverlowの記事や参考になるものが少なく、自分でエラーを特定して白み潰しでやりました。
こちらのエラーに遭遇したら、こちらの記事を参考して頂けると幸いです。
Warningが出ていた箇所
エラー内容の詳細を見てみますと、「body要素内にhtml要素が入っているよ！」という警告です。
chromeの検証ツールのElementsを見てみると、特に<body>要素内には<html>要素は入っていなくてエラーが出ていました。
「あれ？<body>要素内には特に<html>要素は入っていないのに、なんでwarningなんだ？」と思っていました。
ページを遷移する度にこの警告エラーは出ていました。
調べた箇所
今度は、chromeの「ページのソースの表示」というのを開いてみると、コンパイルしたソースコードが表示されるのですが、文字検索で「html」と調べたら、なんと、<body>内に<html>が入っていたのです。
しかし、buildが終わって、Topページにだけ遷移した時にはなぜかこのエラーは出てこなかったのです。
よくよく調べてみたら、layout.tsxはapp/layout.tsxだとRootLayoutで全体的に反映されますが、app/(ドメイン名)/layout.tsxだと、変更部分だけを反映することができるみたいです。
解決
こちらNext.js(app router)での実装になります。
<head>タグ内にデータを入れる時にlayout.tsxに書くのですが、ディレクトリの下にlayout.tsxを作るとそのドメインのページだけに表示させたいコンテンツを含ませることが出来ます。
修正前
return (
<html lang="ja">
<body>{children}</body>
</html>
)
修正後
return <>{children}</>
まとめ
ディレクトリごとにlayout.tsxファイルを作成しているのですが、どうやら<html>と<body>が悪さをしていたみたいです(僕のlayoutファイルの読み込みや役割について理解していなかっただけでした。。。)
それぞれのファイル毎に上記の<html>要素と<body>要素を削除したら、warningのエラーは解消されました！
Next.js13から初めて触ったのですが、Next12以前とは変更点が多いため、
意外とキャッチアップするのが大変です。公式ドキュメントと他の人が書いた記事を交互に読みつつ、
Nextjs13についてもっと知っていきたいと思います。
参考記事
公式ドキュメント
Discussion