Next.jsでいやーな画面がでました。
普通ならエラーからHTML構造のマークアップのミスを疑うのですが、本件はこれで解決できませんでした。
おそらくNext.js13のバグだと思われます。=> Githubでバグ報告しました。
/appはまだbetaだから
appディレクトリは13の目玉機能ですが、ver13.3.2現在まだまだbetaです。
しかし、今後appがデフォルトになることを考えれば、今のうちに予行練習くらいはしておきたいもの。
さっそく試験的に導入してみたところ、特定の条件で、ページロード中にクリック連打などのイベントでエラーが発生することがわかりました。筆者のNext.js歴は浅く、何かの間違いかもしれないと思いつつも、念の為？Githubでバグ報告することにしました。
Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.
サーバとそっちでレンダリングしたhtmlがちゃうから流し込みでけへんでで。というエラー。
発生状況
- Next.13をインストール
- AppDirを有効化
- layout.tsxにLinkタグを書く。あるいはLinkが含まれるコンポーネントをインポートして呼び出す
- page.tsxで表示する
- ロード中にキー操作やクリックイベントを発生させる（連打）
- エラー表示
SSGページだとロードが早すぎて発生しませんが、SSRやdevモードだとロード中の操作で発生します。
エラー発生の環境
- Docker
- Next.js13.0.2（tailwind.css, typeScript）
next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
experimental: {
appDir: true,
},
}
module.exports = nextConfiglayout.tsx
import "../styles/globals.css";
import "tailwindcss/tailwind.css";
import Link from "next/link";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<>
<html lang="ja" className="scroll-smooth">
<body>
<Link href="/">sample</Link>
{children}
</body>
</html>
</>
);
}page.tsx
import Link from "next/link";
export default function Home() {
return (
<>
<h1>test</h1>
</>
);
}
