先生と生徒の会話形式で理解しよう

生徒

「Next.jsで画面の読み込み中に、くるくる回る表示を出したいんですが、どうすればいいですか？」

先生

「Next.jsのApp Routerでは、loading.tsxという特別なファイルを使うと簡単に作れます。」

生徒

「特別なファイルを書くと、自動で表示されるんですか？」

先生

「そうです。では、仕組みから順番に見ていきましょう。」

1. Next.js App Routerとは何か？

Next.js App Routerとは、Next.jsでページや画面構成を管理する新しい仕組みです。これまでのPages Routerと違い、フォルダ構成そのものが画面の構造になります。パソコンのフォルダ分けと同じ感覚で考えると理解しやすいです。フォルダは「場所」、ファイルは「役割」と覚えると混乱しません。

2. loading.tsxとは？ローディングUIの基本

loading.tsxとは、画面の読み込み中に表示される専用のファイルです。たとえば、重たいデータを取得している間、何も表示されないと不安になります。そこで「今、読み込み中ですよ」と伝えるための画面がローディングUIです。 loading.tsxは、App Routerでは自動で呼び出される点が大きな特徴です。

3. loading.tsxの配置ルールを理解しよう

loading.tsxは、表示したいページと同じフォルダに置きます。フォルダごとにローディング画面を変えられるのが便利な点です。これは、建物の階ごとに案内板があるようなイメージです。上の階と下の階で、表示内容が違っても問題ありません。

4. 最小構成のloading.tsxを書いてみよう

まずは、一番シンプルなloading.tsxを作ってみます。特別な設定は不要で、Reactコンポーネントを書くだけです。


export default function Loading() {
  return <p>読み込み中です…</p>;
}

（ページを開くと、データ取得中に「読み込み中です…」と表示されます）

5. スピナー風のローディングUIを作る

文字だけでは少し味気ないので、見た目を工夫してみましょう。ローディングスピナーとは、くるくる回るアイコンのことです。動いている表示があると、待っている人も安心できます。


export default function Loading() {
  return (
    <div style={{ textAlign: "center" }}>
      <div>��</div>
      <p>データを読み込んでいます</p>
    </div>
  );
}

（画面中央にアイコンと「データを読み込んでいます」と表示されます）

6. レイアウトと組み合わせたloading.tsx

App Routerでは、layout.tsxという共通レイアウトがあります。 loading.tsxは、そのレイアウトの中で表示されます。これは、建物の骨組みはそのままで、中身だけが切り替わる感覚です。


export default function Loading() {
  return (
    <main>
      <h2>準備中</h2>
      <p>しばらくお待ちください</p>
    </main>
  );
}

（共通レイアウトを保ったまま、準備中の表示が出ます）

7. データ取得とloading.tsxの関係

Next.jsでは、データ取得に時間がかかると自動でloading.tsxが表示されます。プログラム側で特別な処理を書く必要はありません。電子レンジで温めている間、残り時間が表示されるのと同じ仕組みです。終われば、自動で通常画面に切り替わります。

8. 初心者がつまずきやすいポイント

よくある間違いは、ファイル名の書き間違いです。 loading.tsxは、すべて小文字で書く必要があります。また、App Routerを使っていないと動作しません。フォルダ構成と名前を落ち着いて確認することが大切です。

Next.js App Router入門！loading.tsxでわかるローディングUIの作り方