はじめに

こんにちは！開志専門職大学大学 3 年(25卒)のかずや(@bearone236)と申します！
今回は、最近 version 14 から安定版として登場した Server Actionsや、Next.js Native が登場して世間では大盛り上がりを見せている Next.js に関しての投稿したいと思います。

内容は 「version13.4 から登場した App Router での Export の扱い方について」 です！

ブログ自体は非常に短いものとなっていますが、自分の失敗談から得た知識のため 備忘録 として残したいと思います。

ではいきましょう！！

Next.js とは

Next.jsとは、React のフレームワークであり、フルスタック Web アプリケーションを構築するためのツールとして登場し、話題を博しています。

Nextjs の記述は React をベースとしているため、React を学習している・開発している人にとっては非常に挑戦しやすいフレームワークとなっています。(ちなみに簡単ではないです。コッテリな内容となっています。)

React と異なる大きな特徴としては特に下記が挙げられます。

version13.4 以前と以後によるルーティング設定の違い (Page Router と App Router)
SSG, SSR, ISR など、レンダリング手法が複数存在しており、アプリケーションの特徴によってレンダリングを切り替えることができる

レンダリング手法の違いについてやルーティングについて、Next.js の歴史については学習量が膨大なため、気になる方は公式ドキュメントをご確認ください。今後これらのトピックについてもブログとして発信していきたいと思います！

該当バージョン

Next.js： version13.4 から

発生した App Router での問題

app ディレクトリ配下に、app/hoge/page.jsx ファイルを作成しルーティング設定を行おうと考え、下記のコードのように関数を定義しました。

【問題点】

page.jsx ファイル ( app/hoge/page.jsx )

// 関数宣言
export function Page() {}

// 関数式(アロー関数)
export const Page = () => {};

上記のように関数式、関数宣言それぞれで、ただのルーティング設定を行ったところ、下記のランタイムエラーが出力されました。

Unhandled Rutime Error
Error: The default export is not a React Component in page: “/hoge”

【解決方法】

page ファイルの関数定義をexportではなく、 export default に変更

// 関数宣言
export default function Page() {}

// 関数式(アロー関数)
export default const Page = () => {}

【上記の結果から自身で考えたこと】

Default Export は 1 つのファイル(モジュール内)に 1 つだけ export することができるため「ファイルの責務を強制的に 1 つに絞ることができる」 という特徴を持っている。
Default Export は 「別ファイルでの import 時に命名を変更することができる」 という特徴を持っている。
→ Next.js の App Router は、page.jsx ファイルによってルーティングファイルを判断しているため、export 時は 命名を変更できるように default export で扱うような 「仕様」 が Next.js 内で存在するのではないか？

( Next.js 側：「page.jsx ファイルだから、App Router の Page 関数宣言・関数式になるはず… だからインポート時に混在しないように export default で命名変更できるようにしよう！」 )

参考文献