Uncaught Error: invariant expected app router to be mountedの対処法【Next.js】
Next.jsで画面が全く表示されないことがあります。
特にコンパイルエラーも出ていないのに、なぜ…
結論:<html><body>タグがあるか確認しよう
こういった場合、コンパイル時には問題が無いのだが、コンソールでエラーを吐いている場合があります。
開発者ツールで確認してみると真っ赤になっていました…。
これを修正するためには、ルートページに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>
上記のようにすると解消しました。
関連記事
【Next.js】shadcn-uiを使ってUIを簡単実装する
shadcn-ui(シャッドシーエヌユーアイ)は、アプリにコンポーネントを貼り付 ...
【Rails】NoMethodError (undefined method `fetch_value’ for nil:NilClass)の原因と対処法
モデルクラスのインスタンスを作成しようとすると発生します。原因はカラム名にRub ...
【Rails】バリデーションエラーメッセージの日本語化【i18n】
今回は、『バリデーションチェック時のエラーメッセージ を日本語化』したいと思いま ...
【Ruby on rails】ビュー(erbファイル)で動的な処理が実装できる
現在, 2019年に書かれた記事内容の更新中です。 最新版の公開まで一部加筆, ...
【Ruby on rails】RDBMSとモデルによるテーブル操作
例えばブログなどを書く場合、新規投稿を送信するとデータベースに保存され、過去の投 ...
ディスカッション
コメント一覧
まだ、コメントがありません