Next.jsのプロジェクトのひな型で現れたエラーを解決した話

Udemyでのreact、next.jsの勉強が一段落したので、「create-next-app」でnext.jsのプロジェクトを作ってみようとしたが、初っ端からエラーが出た。

## 状況

* VScodeを使用
* ターミナルで以下のコマンドを実行してプロジェクト作成
```
npx create-next-app@latest [プロジェクト名]
```
* コンソール上で訊かれた質問（typescriptを使うかなど）にはデフォルトのままyes/noを選択
* 生成されたプロジェクトフォルダ内のpackage.jsonのdependenciesは以下のとおり
```
  "dependencies": {
    "next": "15.1.7",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
```
* 生成されたsrc/app/page.jsの内容は以下のとおり
```
import Image from "next/image";
import styles from "./page.module.css";

export default function Home() {
  return (
    <div className={styles.page}>
      <main className={styles.main}>
        <Image
          className={styles.logo}
          src="/next.svg"
          alt="Next.js logo"
          width={180}
          height={38}
          priority
        />
        <ol>
          <li>
            Get started by editing <code>src/app/page.js</code>.
          </li>
          <li>Save and see your changes instantly.</li>
        </ol>

        <div className={styles.ctas}>
          <a
            className={styles.primary}
            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
            target="_blank"
            rel="noopener noreferrer"
          >
            <Image
              className={styles.logo}
              src="/vercel.svg"
              alt="Vercel logomark"
              width={20}
              height={20}
            />
            Deploy now
          </a>
          <a
            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
            target="_blank"
            rel="noopener noreferrer"
            className={styles.secondary}
          >
            Read our docs
          </a>
        </div>
      </main>
      <footer className={styles.footer}>
        <a
          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          <Image
            aria-hidden
            src="/file.svg"
            alt="File icon"
            width={16}
            height={16}
          />
          Learn
        </a>
        <a
          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          <Image
            aria-hidden
            src="/window.svg"
            alt="Window icon"
            width={16}
            height={16}
          />
          Examples
        </a>
        <a
          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          <Image
            aria-hidden
            src="/globe.svg"
            alt="Globe icon"
            width={16}
            height={16}
          />
          Go to nextjs.org →
        </a>
      </footer>
    </div>
  );
}

```
* 生成されたsrc/app/layout.jsの内容は以下のとおり
```
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={`${geistSans.variable} ${geistMono.variable}`}>
        {children}
      </body>
    </html>
  );
}

```
* ターミナルで生成されたプロジェクトフォルダに移動して、以下のコマンドを実行してサーバー立ち上げ
```
npm run dev
```
* 無事立ち上がったのでChromeでhttp://localhost:3000 に接続

## エラー
次のような画面が表示された

![スクリーンショット (35)_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4014009/39ea9e34-dbb2-4bfc-8432-b2958f2f414d.png)
![スクリーンショット (36).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4014009/6a066b7a-c2aa-4486-b4f3-215fba676ef4.png)

「Hydration failed because the server rendered HTML didn't match the client. 」ということで、サーバーでレンダリングされた HTML がクライアントと一致しなかったため、ハイドレーションに失敗したとのこと。
ハイドレーション？これはSSRが関係しているのか？と色々調べて、page.jsファイルの内容を空のdivタグに差し替えてみたりしたが解決にはつながらなかった。

## 原因はChromeの拡張機能
なぜひな型のプロジェクトの時点でエラーが出るのかと頭を抱えたが、ChatGPTに再度「ひな型の時点でこういうエラーが出る」と訊いてみたら、Chromeの拡張機能が悪さしてるかもとのこと。確かに広告ブロッカーなどを使っている。
シークレットモード（拡張機能が原則無効になる）でhttp://localhost:3000 にアクセスし直したところ、エラーが消えた。

![スクリーンショット (37).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4014009/b4f1a960-b8df-43eb-b8ad-e8f18f9898a8.png)

とりあえず原因が拡張機能と分かってすっきりした。Chrome側の問題というのは盲点だった。
Chromeのプロフィールを追加すれば拡張機能が外れた状態でブラウザを使えるようなので、今後の確認では今回作成した素のプロフィールで行っていきたい。