← Next.js コース
7. loading.tsx — ページ準備中の表示
loading.tsx をフォルダに置くと、同じフォルダの page.tsx の準備が終わるまでの間、代わりにこのファイルの中身が自動で表示されます。スピナーや「読み込み中...」のような軽い UI を default export するだけです。
サーバーでデータを用意するページは表示までに時間がかかることがあり、その間ユーザーには何も起きていないように見えてしまいます。loading.tsx を1ファイル置くだけで「反応している」感覚を返せるので、時間のかかるページにはまず用意するのが実務の定石です。
注意点は、loading.tsx が効くのは同じフォルダ(とその配下)のページだけということです。サイト全体に効かせたいなら app 直下に、特定のページだけならそのページのフォルダに置きます。
サンプルコード(フレームワーク環境が必要なため表示のみ)
// app/posts/loading.tsx
// → /posts の page.tsx の準備中、代わりにこれが表示される
export default function Loading() {
return (
<main>
<p>読み込み中...</p>
</main>
);
}
// ファイルを置くだけで自動的に使われる。
// どこにも import する必要はない。