ローディングUIとエラーUI
`loading.js`でローディング状態を実装し、アプリケーション内の`error.js`境界を使ってエラーを適切に処理します
「ローディングUIとエラーUI」はCoddyKit上の無料Next.js 15 Fullstack (App Router + Server Actions)レッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはNext.js 15 Fullstack (App Router + Server Actions)学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Next.js 15 Fullstack (App Router + Server Actions)コースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
Why Loading States Matter
When your Next.js application fetches data, it can take some time. Without any visual feedback, users might think the app is frozen or broken.
- Improve User Experience: Keep users informed.
- Reduce Frustration: Prevent perceived slowness.
- Indicate Progress: Show that something is happening in the background.
Introducing `loading.js`
Next.js App Router provides a special file convention, loading.js, to automatically create a loading UI for a route segment.
When data is being fetched for a page.js or layout.js file, Next.js automatically displays the UI defined in its nearest loading.js sibling or ancestor.
Creating a Simple Loading UI
To create a loading UI, simply add a loading.js file inside a route segment folder. It should export a default React component.
This component will be rendered instantly when the segment is loading.
export default function Loading() {
return (
<div style={{ padding: '20px', textAlign: 'center' }}>
<h2>Loading...</h2>
<p>Please wait while we fetch the content.</p>
</div>
);
}How `loading.js` Works
Under the hood, loading.js works with React Suspense. Next.js wraps the corresponding page.js and its nested children in a Suspense Boundary.
When any data fetching inside that boundary is pending, the loading.js component is shown as a fallback.
Nested Loading States
You can have multiple loading.js files at different levels of your route. For example, a global loading UI and a more specific one for a sub-route.
Next.js will show the closest ancestor loading.js for the segment that is currently loading.
Handling Application Errors
Just like loading states, errors are a part of any application. Uncaught errors can crash your app, leading to a poor user experience.
Next.js App Router provides a way to gracefully handle errors and display a custom error UI using error.js.
Introducing `error.js`
The error.js file convention allows you to define an error UI that automatically wraps a route segment and its children in a React Error Boundary.
This boundary catches errors that occur during rendering, in event handlers, and in data fetching within its scope.
Creating a Basic Error UI
Similar to loading.js, create an error.js file in a route segment. It must be a React Client Component (use 'use client'; at the top).
It receives error (the error object) and a reset function as props.
'use client';
import { useEffect } from 'react';
export default function Error({ error, reset }) {
useEffect(() => {
// Log the error to an error reporting service
console.error(error);
}, [error]);
return (
<div style={{ padding: '20px', textAlign: 'center', color: 'red' }}>
<h2>Something went wrong!</h2>
<button
onClick={() => reset()} // Attempt to re-render the segment
style={{ marginTop: '10px', padding: '8px 15px' }}
>
Try again
</button>
</div>
);
}Error Recovery with `reset()`
The reset() function provided to your error.js component is crucial. When called, it attempts to re-render the entire segment that threw the error.
This allows users to try again without navigating away, potentially resolving transient issues.
Quick Check on UI Files
Which statement accurately describes the primary purpose of loading.js in Next.js App Router?
Recap: Loading & Error UI
In this lesson, you learned how to enhance your Next.js application's user experience by implementing visual feedback for loading and error states.
loading.js: Displays a temporary UI while data is being fetched, using React Suspense.error.js: Catches errors in a segment and displays a fallback UI, allowing users to attempt recovery with thereset()function.
These conventions help create more robust and user-friendly Next.js applications.
よくある質問
「ローディングUIとエラーUI」レッスンは無料ですか？
はい。「ローディングUIとエラーUI」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Next.js 15 Fullstack (App Router + Server Actions)コースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Next.js 15 Fullstack (App Router + Server Actions)コースには全4レッスンが含まれています。
「ローディングUIとエラーUI」で何を学びますか？
`loading.js`でローディング状態を実装し、アプリケーション内の`error.js`境界を使ってエラーを適切に処理します ブラウザで直接実行するハンズオンコードでNext.js 15 Fullstack (App Router + Server Actions)を演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Next.js 15 Fullstack (App Router + Server Actions)を始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのNext.js 15 Fullstack (App Router + Server Actions)は初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「ローディングUIとエラーUI」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このNext.js 15 Fullstack (App Router + Server Actions)レッスンでコードを書いて実行できますか？
はい。すべてのNext.js 15 Fullstack (App Router + Server Actions)レッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- レイアウトとページコンポーネント
- 動的ルートとパラメーター
- ローディングUIとエラーUI
- ルートグループとネストされたレイアウト