Next.jsでlayout.jsは必須のファイルでしょうか？

実現したいこと

Next.jsの使用方法の理解を深めたいです。

ひとまず、layout.jsの使い方について教えて欲しいです！

発生している問題・分からないこと

layout.jsについてレイアウト(CSS)付与で多く使うファイルのイメージです。
私は主にtailwindcssを使用していますのでタグにそのままclassNameを付与しようと思い。src/app及び遷移先(Linkタグのhrefに設定したフォルダ)配下のlayout.jsを削除しました。
しかし、①エラーが表示されました。(該当のソース〜〜に記載)
適当(rafce)にlayout.jsを作成しましたが、②エラーになりました(該当のソース〜〜に記載)

すごく初歩的な質問ですが、layout.jsは使用しなくても各フォルダに存在していないといけないのでしょうか？
また、その場合、どのような内容を記述すればいいのでしょうか？

該当のソースコード

①エラー
page.js doesn't have a root layout. To fix this error, make sure every page has a root layout.
②Error: The default export is not a React Component in "/page"

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

ネットで調べましたが、初歩的すぎるのか情報が出てこなく、Aiに質問しても下記のループです。
①Next.jsでは、appディレクトリを使用する場合、各ページは通常layout.js（もしくはlayout.tsx）を持つ必要があります。これにより、ページごとのレイアウトや共通のスタイリング、ヘッダーやフッターなどを管理できます。
②layout.jsは必須ではなく、使用しない場合は削除しても問題ありません。Next.jsのappディレクトリを使う場合、ページに共通のレイアウト（ヘッダーやフッターなど）を管理したいときにlayout.jsを使いますが、特に共通のレイアウトを必要としない場合は、layout.jsを作成しなくてもエラーにはなりません。

補足

特になし

maisumakun

2024/12/10 05:50

page.jsやそれを呼ぶ側のコードはどのような内容でしょうか？

行動規範の内容に同意します

回答1件

すごく初歩的な質問ですが、layout.jsは使用しなくても各フォルダに存在していないといけないのでしょうか？
また、その場合、どのような内容を記述すればいいのでしょうか？

app直下以外でディレクトリ（フォルダ）を切っているようであれば、そのディレクトリ内部では、layout.jsは必須ではありません

https://nextjs.org/docs/app/building-your-application/routing/layouts-and-templates#root-layout-required

上記はNextjsの公式ドキュメントですが、Route Layoutは必須（Required）となっています。ですので、app/にはpage.jsに加えて、layout.jsも必要ということになります。

https://nextjs.org/docs/app/building-your-application/routing/layouts-and-templates#nesting-layouts

二つ目のリンクは、そこからRoutingの仕組みに沿ってディレクトリを切った場合には、app/のlayout.jsを読み込んだ上で、さらにdashboard/layout.jsを読み込んだ上でdashboard/page.jsを読み込むよ、となっています。

二つ目のリンクのGood to knowにある記載を抜粋しました。

When a layout.js and page.js file are defined in the same folder, the layout will wrap the page.

つまり、もし同じフォルダ（ディレクトリ）にlayout.jsとpage.jsがある時には、レイアウトがページをラップすることが書かれていますので、dashboard/layout.jsがなければ、app/layout.jsを読み込んでからすぐにdashboard/page.jsを読み込んでくれると思います。

質問者さんのエラーについては、app/にlayout.jsが存在していないことが原因なのではないでしょうか？

投稿2024/12/10 05:59

uky

総合スコア270

KAI

2024/12/10 10:27

ご回答ありがとうございます！解決できました！ layuot.jsについては完全にスタイル付与のものとイメージしてしまっていました。よくよく考えてみればhtmlファイルも存在していないので、スタイルを付与しないにしても、少なくともapp配下のlayuot.jsに下記のコード書かないといけないのですね(汗) return ( <html lang="en"> <body>{children}</body> </html> )

行動規範の内容に同意します