loading.tsx
from Route Segment
https://nextjs.org/docs/app/api-reference/file-conventions/loading
App Router の app ディレクトリ内に配置する特別なファイルの 1 つ
https://nextjs.org/docs/app/api-reference/file-conventions/layout
別に .jsx(.js)でも良い radish-miyazaki.icon
page.tsx をラップする Suspense コンポーネントのフォールバックコンテンツ
Suspense コンポーネントは自動で挿入される
layout.tsx は親階層に位置する
code:tsx
<Layout>
<ErrorBoundary fallback={<Error />}>
<Suspense>
<Page />
</Suspense>
</ErrorBoundary>
</Layout>
通常 Server Component だが、Client Component にすることも可能
Props は指定できない
code:tsx
export default function Loading() {
return <>...Loading</>;
}
#Next.js #App_Router