はじめに
この記事では、Next.js プロジェクトでよく見られるエラーの一つである Error: The default export is not a React Component in "/page" の発生原因とその対処法について解説します。
個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。
書こうと思ったきっかけ
受講しているITスクールのハッカソンの開発の一環で、ページを表示させようとした際にこのエラーに遭遇しました。原因が特定できるまで少し時間がかかり、同じようなエラーに悩む人の参考になればと思い、備忘録としてまとめました。
内容
このエラー：
Error: The default export is not a React Component in "/page"
は、Next.js が app/page.tsx（または app/page.js）を読み込もうとした際に、正しく export された React コンポーネントが存在しない場合に発生します。
問題だったこと
今回のケースで問題だったのは、React コンポーネントを定義していながら、それを export default していなかった点です。
原因: export default を書いていない
const Home = () => {
return <div>ようこそ</div>;
};
// ← export がない！
正しい例：
const Home = () => {
return <div>ようこそ</div>;
};
export default Home;
他の可能性：
- 関数の return が抜けている（記述ミス）
-
export defaultしているのが Reactコンポーネントではない -
page.tsxが本来あるべき場所（app/直下）に存在しない
まとめ
このエラーは初歩的なミスであることが多いですが、構文エラーや return 文の書き忘れなどが原因となるため、エディタで構文をしっかりチェックすることが大切だと思いました...。