今日の開発内容

• ローディングコンポーネント追加
• スマホ版ではツールチップを非表示に変更
• ヘッダーのレスポンシブ対応

Next.js の ローディングコンポーネントを実装してみたが、効果がわからない。読み込みが早くて追加したスケルトンが表示されない。Next.js のローディングコンポーネントは以下：

Loading UI and Streaming

というか Next.js だけじゃなくて React にも

<Suspense>

があったのか。

Next.js のローディングコンポーネントファイルは page.tsx と同じ階層に

loading.tsx

というファイル名で置く。サンプルコードにあるようにローディング UI を JSX で返すだけでいいらしい。

export default function Loading() {
  // You can add any UI inside Loading, including a Skeleton.
  return <LoadingSkeleton />;
}

一方 React の

<Suspense>

を見ると子コンポーネントを囲まないとだめらしい。

<Suspense fallback={<Loading />}>
  <Albums />
</Suspense>

React - Suspense

参考

• Loading UI and Streaming
• React - Suspense