このチャプターの目次
App Directory では、専用の画面が用意されています。
ローディング画面
データを取得中に表示されるローディング画面を用意します。
app フォルダにloading.tsxファイルを作成します。
app/loading.tsx
// ローディング
const Loading = () => {
return (
<div className="flex justify-center">
<div className="h-10 w-10 animate-spin rounded-full border-4 border-yellow-500 border-t-transparent" />
</div>
)
}
export default Loading
エラー画面
サーバーコンポーネントでエラーが発生した場合に表示されるエラー画面を用意します。
app フォルダにerror.tsxファイルを作成します。
app/error.tsx
'use client'
// エラー画面
const Error = () => {
return (
<div>
<div className="text-center text-5xl font-bold mb-3 text-white">500</div>
<div className="text-center text-xl font-bold text-white">Server Error</div>
</div>
)
}
export default Error
データが存在しないときの画面
データが存在しないときに表示する画面を用意します。
app フォルダにnot-found.tsxファイルを作成します。
app/not-found.tsx
'use client'
// データが存在しないときの画面
const NotFound = () => {
return (
<div>
<div className="text-center text-5xl font-bold mb-3 text-white">404</div>
<div className="text-center text-xl font-bold text-white">Not Found</div>
</div>
)
}
export default NotFound