Summary  
This chapter demonstrates how to implement an async page component that awaits fetched data, passes it as props to child components, and uses array mapping with conditional rendering to build a dynamic chart UI.  

General domain of usage  
Dashboard data visualization

ここではダッシュボードページに注目し、理論が実際にどのように機能するかを確認して、コンセプトをより深く理解します。

## プロジェクトに戻る
以下のコードを `app/dashboard/page.tsx` にコピー＆ペーストしてください。UI を確認してみましょう。ただし、データが存在しないため、ライブページには変更が表示されません。

 ### IncomeChart用データの取得
収入データを取得するには、`fetchIncome`モジュールから`'@/app/lib/data'`関数をインポートし、`Page`コンポーネント内で呼び出します。その後、`IncomeChart`コンポーネントのコメントアウトを解除し、ライブページを確認します。


次に、以下の手順で収入チャートを表示します：
1. `app/ui/dashboard/income-chart.tsx`ファイルを開く。
2. 用意されたUIコードのコメントアウトを解除する。

これにより、ライブページ上に次のような収入チャートが表示されます。

Next.jsを使用して、モダンで高性能なウェブアプリケーションの構築方法を学びます。構造化されたレイアウト、スタイリング、ルーティングによるシームレスなナビゲーションでプロジェクトをセットアップします。効率的なデータ取得と表示を行い、レンダリングとパフォーマンスを最適化します。ページネーション、CRUD操作、グローバル検索などの高度な機能を実装し、動的なウェブアプリを実現します。Next.jsプロジェクトのデプロイ、データベースとの接続、認証機能の追加によるユーザーデータの保護も扱います。

Next.jsフレームワークに取り組む前に学ぶべき内容、このコースで期待できること、そして構築するものについて説明します。

プロジェクトのセットアップを行い、アプリにスタイリングを追加する方法を確認し、画像、フォント、ページ、レイアウトなどのビジュアル面を扱います。

アプリの新しいビューを簡単に作成・管理し、組み込まれたルーティングシステムによってすべてのページをシームレスにナビゲートする方法を学びます。

GitHubおよびVercelアカウントを使用してNext.jsアプリをデプロイします。さらに、アプリに必要なデータを提供するためのデータベースを構築します。

データを明確かつ効率的に取得し、ユーザーに表示する方法を検討します。

ページネーション、CRUD操作、グローバル検索、フォームバリデーションなどの最新ウェブ機能の実装方法を学びます。

ダッシュボードページの操作

プロジェクトに戻る

IncomeChart用データの取得

実践での応用