質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

解決済

React ハイドレーションエラーが解決できない

bigbox267
bigbox267

総合スコア31

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

1回答

0グッド

0クリップ

723閲覧

投稿2022/11/09 04:16

前提

next.jsを試しているのですがコンソールのエラーメッセージが解決できません。

実現したいこと

  • コンソールにでているエラーをなくしたい。

発生している問題・エラーメッセージ

Warning: Did not expect server HTML to contain a <script> in <header>. at header at body at html at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:53:9) at HotReload (webpack-internal:///./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:19:11) at Router (webpack-internal:///./node_modules/next/dist/client/components/app-router.js:73:11) at ErrorBoundaryHandler (webpack-internal:///./node_modules/next/dist/client/components/error-boundary.js:28:9) at ErrorBoundary (webpack-internal:///./node_modules/next/dist/client/components/error-boundary.js:40:11) at AppRouter at ServerRoot (webpack-internal:///./node_modules/next/dist/client/app-index.js:114:11) at RSCComponent at Root (webpack-internal:///./node_modules/next/dist/client/app-index.js:130:11)
Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.
Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server. at throwOnHydrationMismatch (react-dom.development.js?160d:14643:1) at popHydrationState (react-dom.development.js?160d:14844:1) at completeWork (react-dom.development.js?160d:25200:1) at completeUnitOfWork (react-dom.development.js?160d:30674:1) at performUnitOfWork (react-dom.development.js?160d:30560:1) at workLoopConcurrent (react-dom.development.js?160d:30535:1) at renderRootConcurrent (react-dom.development.js?160d:30474:1) at performConcurrentWorkOnRoot (react-dom.development.js?160d:29662:1) at workLoop (index.js?82e4:10:3922) at flushWork (index.js?82e4:10:3630)
Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering. at updateHostRoot (react-dom.development.js?160d:22659:1) at beginWork (react-dom.development.js?160d:24521:1) at beginWork$1 (react-dom.development.js?160d:31617:1) at performUnitOfWork (react-dom.development.js?160d:30549:1) at workLoopSync (react-dom.development.js?160d:30434:1) at renderRootSync (react-dom.development.js?160d:30387:1) at recoverFromConcurrentError (react-dom.development.js?160d:29776:1) at performConcurrentWorkOnRoot (react-dom.development.js?160d:29675:1) at workLoop (index.js?82e4:10:3922) at flushWork (index.js?82e4:10:3630)

該当のソースコード

app/layout.tsx

1import '~/styles/globals.scss' 2import Header from '~/components/header' 3import Footer from '~/components/footer' 4 5export default function RootLayout({ children }: { children: React.ReactNode }) { 6 return ( 7 <html lang='ja'> 8 <body> 9 <div> 10 <Header /> 11 <div> 12 {children} 13 <Footer /> 14 </div> 15 </div> 16 </body> 17 </html> 18 ) 19}

components/header.tsx

1export default function AppHeader({}) { 2 return ( 3 <header> 4 <h1>ロゴなど</h1> 5 <nav> 6 <ul> 7 <li>リスト01</li> 8 <li>リスト02</li> 9 <li>リスト03</li> 10 </ul> 11 </nav> 12 </header> 13 ) 14}

components/footer.tsx

1export default function Footer({}) { 2 return ( 3 <footer> 4 <div>fotter</div> 5 </footer> 6 ) 7} 8

試したこと

レイアウトから<Header/>を削除するとエラーメッセージが消えるのでHeaderコンポーネントが原因だということは分かった。
Headerの<header></header>タグを<div></div>などに変えるとエラーメッセージが消えた。
Headerコンポーネントの中身を下記のように変更してもダメだった。

components/header.tsx

1export default function AppHeader({}) { 2 return ( 3 <header><h1>ロゴなど</h1></header> 4 ) 5}

補足情報(FW/ツールのバージョンなど)

next.config.js

1/** @type {import('next').NextConfig} */ 2const path = require('path'); 3const TerserPlugin = require("terser-webpack-plugin"); 4 5const nextConfig = { 6 webpack: (config, options) => { 7 config.optimization.minimize = true; 8 config.optimization.minimizer = [ 9 new TerserPlugin({ 10 terserOptions: { 11 compress: { drop_console: true } 12 }, 13 extractComments: "all" 14 }) 15 ]; 16 return config; 17 }, 18 reactStrictMode: true, 19 swcMinify: true, 20 sassOptions: { 21 includePaths: [ 22 path.join(__dirname, 'styles'), 23 ], 24 }, 25 experimental: { 26 appDir: true, 27 fontLoaders: [ 28 { 29 loader: '@next/font/google', 30 options: { 31 subsets: [ 32 'M PLUS 1p', 33 ] 34 } 35 }, 36 ], 37 } 38} 39 40module.exports = nextConfig

package.json

1{ 2 "name": "next_app", 3 "version": "0.1.0", 4 "private": true, 5 "scripts": { 6 "dev": "next dev", 7 "build": "next build", 8 "start": "next start", 9 "lint": "next lint" 10 }, 11 "dependencies": { 12 "@next/font": "^13.0.1", 13 "next": "13.0.0", 14 "react": "18.2.0", 15 "react-dom": "18.2.0" 16 }, 17 "devDependencies": { 18 "@types/node": "18.11.7", 19 "@types/react": "18.0.24", 20 "@types/react-dom": "18.0.8", 21 "eslint": "8.26.0", 22 "eslint-config-next": "13.0.0", 23 "image-minimizer-webpack-plugin": "^3.8.0", 24 "imagemin-webp-webpack-plugin": "^3.3.6", 25 "normalize.css": "^8.0.1", 26 "prettier": "^2.7.1", 27 "sass": "^1.55.0", 28 "terser-webpack-plugin": "^5.3.6", 29 "typescript": "4.8.4" 30 } 31}

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

hoshi-takanori

2022/11/09 05:48

Header の「ロゴなど」の中に script タグがあったりしますか?
bigbox267

2022/11/09 05:59

ご質問ありがとうございました。 Headerのコードは記載したもので全てです。 下記の記載で自己解決できました。 ありがとうございます。

回答1

0

自己解決

layout.tsxを下記に修正したところエラーがでなくなった。

<body>タグを削除

app/layout.tsx

1import '~/styles/globals.scss' 2import Header from '~/components/header' 3import Footer from '~/components/footer' 4 5export default function RootLayout({ children }: { children: React.ReactNode }) { 6 return ( 7 <html lang='ja' className={inter.className}> 8 <div> 9 <Header /> 10 <div> 11 {children} 12 <Footer /> 13 </div> 14 </div> 15 </html> 16 ) 17}

投稿2022/11/09 05:56

bigbox267

総合スコア31

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。