請求書ページの構築

おめでとうございます！Next.js の基本的な概念をすべて学習しました。これで Next.js を使ってさまざまな種類のアプリを構築するための知識が身につきました。

これからは、いくつかのアプリやプロジェクトでは必須ではないものの、習得しておくと非常に役立つ高度な概念について学んでいきます。

プロジェクトに戻る

ここからは Invoices ページに注目し、その開発を進めていきます。

次のコードを app/dashboard/invoices/page.tsx にコピー＆ペーストしてください。このコードの目的を確認し、理解する時間を取ってください。

アプリケーションには3つの主要な機能があります：

• Search は特定の請求書の検索機能
• Pagination は請求書一覧ページ間の移動機能
• Table は利用可能なすべての請求書の表示機能

検索状態の管理にはURL検索パラメータを使用します。これは、クライアントサイドの状態管理に慣れている場合は新しい方法かもしれません。

主な利点：

• パラメータがURLの一部となるため、ユーザーは現在のアプリケーション状態（検索クエリやフィルターを含む）をブックマークや共有が可能
• URLパラメータによりサーバーサイドレンダリングが容易になり、サーバーでの初期状態設定が簡単
• 検索内容がURLに含まれるため、ユーザー行動の追跡が容易になり、クライアントサイドのロジックが少なくて済む

この考え方を次の章で実践します。

実践例