ポケモンおみくじアプリ

概要

このプロジェクトでは、ポケモンおみくじアプリを構築します。

ボタンをクリックすると、ランダムなポケモンと運勢が表示され、そのポケモンの詳細から、ヒントを得ることができます。

学習目標

Next.js App Router の、基本的な機能と使い方について学習します。

合わせて、サーバーコンポーネントとクライアントコンポーネントの使い分け、さまざまなデータフェッチの方法について確認してください。

推奨技術

このプロジェクトの難易度と趣旨を踏まえて、以下の使用をお勧めします。

• Next.js 15/ App Router
• TypeScript による型チェック
• Tailwind CSS によるスタイリング
• shadcn/ui によるコンポーネントの導入
• loading.tsx によるローディング制御
• PokeAPI を用いたポケモンデータの取得

---

🎯 お題

• 「ユーザーストーリー」を全て満たす、アプリを構築してください。
• 必要に応じて、スクリーンショットやデモサイトの URL を、参照してください。
• なお、スタイルは、あなた自身で独自にカスタマイズすることが可能です。

必須機能

1. おみくじを引く：
   • トップページでボタンをクリックすると、ランダムなポケモンと運勢が表示される
2. 結果表示：
   • ポケモンの画像、名前（日本語）、運勢をカードで表示
3. 詳細情報：
   • ポケモン占いの詳細情報（タイプ、能力値など）を確認できる

追加情報

今回推奨する API は、「PokeAPI」です。

• この API は、ユーザー登録なしで、無料で使用できます
• 以下のエンドポイントから、データを取得できます
  • /api/v2/pokemon/{id} - ポケモンの基本情報
  • /api/v2/pokemon-species/{id} - 日本語名と説明文

ユーザーストーリー

• ユーザーがサイトにアクセスすると、おみくじを引く「Drow Fortune」ボタンが表示されている
• ボタンをクリックすると、ローディング表示の後に結果が表示される
• 結果には、運勢（大吉、吉、中吉、末吉、凶）とポケモンの情報が含まれる
• ポケモンの情報は日本語で表示される
• ポケモンの画像が表示される
• 「詳細を見る」をクリックすると、そのポケモンの詳細情報が表示される
• 詳細ページには、ポケモン占いの詳細が、日本語で表示されている
• ポケモンの画像が表示されている
• データ取得中は適切なローディング表示がされる
• アプリケーションがデプロイされており、誰でもアクセス可能である。