次のコンポーネントである `LatestInvoices` に注目。
このコンポーネントは、日付順に並べた最新5件の請求書を表示することを目的としています。

JavaScript でこれを実現するのは簡単に思えるかもしれません。しかし、アプリが成長しデータが増えるにつれて、請求書の並び替えや件数制限は SQL で処理する方が望ましいです。この方法により、フロントエンドで不要な計算が発生するのを防げます。

`fetchLatestInvoices` 関数を確認するには、`app/lib/data.ts` を参照してください。

## プロジェクトに戻る
ダッシュボードページで `fetchLatestInvoices` 関数を使用し、最新の請求書を取得して `LatestInvoices` コンポーネントで表示します。

`app/ui/dashboard/latest-invoices.tsx` を開き、用意されている UI のコメントアウトを解除することも忘れずに。

## チャレンジ
今回は、データを取得し、ユーザーに情報を表示する課題です。

主に、ダッシュボードページに `Card` コンポーネントがあります。あなたのタスクは、以下の情報を提供する `fetchCardData` 関数をインポートすることです：
- `numberOfSellers`;
- `numberOfInvoices`;
- `totalFulfilledInvoices`;
- `totalAwaitingInvoices`。

取得したデータに基づいて、該当する `Card` コンポーネントのコメントアウトを解除してください。

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

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

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

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

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

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

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

チャレンジ：データの取得と表示

プロジェクトに戻る

チャレンジ

結果

実践例