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 に接続
エラー
次のような画面が表示された
「Hydration failed because the server rendered HTML didn't match the client. 」ということで、サーバーでレンダリングされた HTML がクライアントと一致しなかったため、ハイドレーションに失敗したとのこと。
ハイドレーション？これはSSRが関係しているのか？と色々調べて、page.jsファイルの内容を空のdivタグに差し替えてみたりしたが解決にはつながらなかった。
原因はChromeの拡張機能
なぜひな型のプロジェクトの時点でエラーが出るのかと頭を抱えたが、ChatGPTに再度「ひな型の時点でこういうエラーが出る」と訊いてみたら、Chromeの拡張機能が悪さしてるかもとのこと。確かに広告ブロッカーなどを使っている。
シークレットモード（拡張機能が原則無効になる）でhttp://localhost:3000 にアクセスし直したところ、エラーが消えた。
とりあえず原因が拡張機能と分かってすっきりした。Chrome側の問題というのは盲点だった。
Chromeのプロフィールを追加すれば拡張機能が外れた状態でブラウザを使えるようなので、今後の確認では今回作成した素のプロフィールで行っていきたい。