Uncaught Error: invariant expected app router to be mountedの対処法【Next.js】

Next.js,プログラミング

Next.jsで画面が全く表示されないことがあります。
特にコンパイルエラーも出ていないのに、なぜ…

コンポーネントが何も表示されていない…

結論：<html><body>タグがあるか確認しよう

こういった場合、コンパイル時には問題が無いのだが、コンソールでエラーを吐いている場合があります。
開発者ツールで確認してみると真っ赤になっていました…。

Uncaught Error: invariant expected app router to be mountedが出力されている

これを修正するためには、ルートページにhtmlやbodyタグが書かれているか確認しましょう。
タグを追加してやると解消する可能性があります。

Next.jsのApp Routing

App RoutingはNext.js13から導入されたルーティング機能であり、ツリー上に構築されたディレクトリがその構成のままURLに変換されます。

そしてその最上位のツリー（ルートページ）には、htmlタグとbodyタグを記載する必要があります。

確かに今回のエラーも、App Routingを実装した際に発生しました。

// app/layout.tsx

import './globals.css'
import Header from '@/components/header';

<html lang="ja">
  <body>
    <Header />     
      <main>{children}</main>
  </body>
</html>

上記のようにすると解消しました。