<ul>
<li>
<p>Solution➀</p>
<ul>
<li>コンポーネントがImportしてるファイルを小文字ではなく大文字でパスを指定していた</li>
<li>上記を修正してOK</li>
</ul>
</li>
<li>
<p>Solution➁</p>
<ul>
<li>ReactとReactRouterDomのバージョンが原因</li>
<li>アンインストールして再インストールしてOK</li>
</ul>
</li>
<li>
<p>Solution➂</p>
<ul>
<li>nextとreactのバージョンが原因</li>
<li>next@10.0.7　react@17.0.1 でOK</li>
</ul>
</li>
<li>
<p>MySolution</p>
<ul>
<li>➂を手がかりにバージョンに関係があると疑う</li>
<li>直前にReactのバージョンをv17→v18にしていた</li>
<li>バージョンをv17に戻すことで解決</li>
</ul>
</li>
</ul>
<div class="code-block-container"><pre><code>    "next": "^11.1.4",
    "react": "^17.0.2",
    "react-dom": "^17.0.1",
</code></pre></div><ul>
<li>参考資料
<ul>
<li><a href="https://github.com/vercel/next.js/issues/16449#issuecomment-790581757" target="_blank" rel="nofollow noopener noreferrer">https://github.com/vercel/next.js/issues/16449#issuecomment-790581757</a></li>
</ul>
</li>
</ul>


Next.jsでHotReloadが効かないときの対処法

Discussion