メインコンテンツまでスキップ

loading.js

loadingファイルは、Suspense上に構築されたインスタント・ローディングの状態を作り出すことができます。

デフォルトでは、このファイルは Server Components ですが、"use client"ディレクティブによって Client Components として使用できます。

app/feed/loading.tsx
export default function Loading() {
// またはカスタムのローディング・スケルトン コンポーネント
return <p>'Loading...'</p>
}

ローディング UI コンポーネントはパラメータを受け付けません。

Good to know:

  • ローディング UI をデザインしている間、React Developer Toolsを使って Suspense バウンダリに手動で切り替えると便利です。

バージョン履歴

VersionChanges
v13.0.0loadingの導入