loading.tsx
待っているあいだ、何も出ないのは事故に見える
商品一覧はサーバーからデータを取ってから表示します。取り終わるまでの1秒ほど、画面には何も出ません。使う人からは、リンクを押したのに反応が無いように見えます。
React実践では isLoading という状態を自分で持ち、if (isLoading) return ... を毎回書いていました。ページが増えるとこの3行が全ページに散らばります。
Next.js では、ファイル名で決まる
App Router には loading.tsx という決まった名前があります。ページと同じフォルダに置くだけで、そのページの読み込み中に自動で表示されます。
app/
items/
page.tsx データを取ってから出る本体
loading.tsx 取り終わるまでのあいだ出るものpage.tsx 側には何も足しません。isLoading も if も要りません。ファイルを置いたという事実が、そのまま設定になります。
どこまで効くか
loading.tsx は、そのフォルダとその下のフォルダ全部に効きます。app/loading.tsx を置けばサイト全体の既定になり、app/items/loading.tsx を置けば一覧まわりだけが上書きされます。近いほうが勝つ、という決まりです。
中身は自由
出すものは決まっていません。回っている輪でもよいですし、実際に出る一覧の形をした灰色の箱を並べる書き方もよく使われます。後者はスケルトンと呼ばれ、切り替わったときに画面が飛び跳ねにくいという利点があります。
なお loading.tsx も export default で関数を1つ出す、ふつうの部品です。特別なのは名前だけです。
演習
商品一覧の読み込み中を作ります。