データベースから情報を取ってきて表示するページを作ると、リンクをクリックした瞬間に画面が固まったように反応しなくなったり、直接そのURLを開いたりリロードしたときに一瞬真っ白な画面が見えたりすることがあります。「データを取得している間は仕方ない」と思って、そのままにしていないでしょうか。

【よくある誤解】
誤解1: データ取得には時間がかかるので、その間画面が固まって見えるのは避けられない
誤解2: ローディング中の見た目を作るには、isLoadingのような状態を自分で管理しなければいけない

どちらも、Next.jsのApp Routerでは必ずしも正しくありません。

【何が起きているか】
ページの中でデータを取得する処理（awaitを使った処理など）があると、そのデータが揃うまで、Next.jsはページの表示を待ちます。待っている間、代わりに何も表示する仕組みを用意していないと、ユーザーからは「反応していない」ように見えてしまいます。

// app/posts/page.tsx
export default async function PostsPage() {
  const posts = await getPosts(); // ここで時間がかかると、それまで画面が動かない
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

このコード自体は正しく動きます。ただし、getPosts()の取得に時間がかかる場合、その間ユーザーには何も表示されず、クリックが効いていないように感じさせてしまいます。

【直し方】
同じフォルダにloading.tsxというファイルを1つ置くだけで、データが揃うまでの間、代わりに表示する内容を指定できます。

// app/posts/loading.tsx
export default function Loading() {
  return <p>読み込み中です...</p>;
}

これだけで、app/posts/page.tsx側でデータ取得中はloading.tsxの内容が自動的に表示され、データが揃った時点で本来のページに切り替わります。isLoadingのような状態を自分で用意する必要はありません。

もう少し凝った見た目にしたい場合は、実際のレイアウトの形をそのまま灰色のブロックにした「スケルトン画面」をloading.tsxに書くこともできます。

【AIに確認するときの聞き方】
データを取得して表示するページを作ってもらったら、「このページにloading.tsxは用意されていますか？」と一言確認するだけで、この種の見落としはその場で気づけます。

面談なしで、今日から始められます

この講座は 未経験から Next.js + Supabase + Claude Code で Webアプリを公開するまで を全20セッションで体系化した教材付きプランです。無料相談を挟まず、申し込んだその日から教材で学習を始められます。AIが学習パートナーになって何度でも質問でき、つまずいた所だけチャットで直接サポートします。

プログラミングの知識だけでなく、AIへの指示の出し方や、AIが出してきたコードを自分の言葉で確認する目も、教材を進める中で自然に身についていきます。

  • 今日から始める（教材完全版＋月5,500円・チャット質問し放題・いつでも解約OK）→ https://menta.work/plan/20251?ref=menta-knowledge
  • いきなりは不安な方へ：無料の教材体験版もあります（最初の数セッション分）→ プラン詳細をご覧ください