🧪 Next.js Lab
100日間でNext.jsを徹底的に学ぶチャレンジ型ポートフォリオ
Day 01 ・ 2025-06-26
ポケモンガチャ
PokeAPIを使ってランダムにポケモンを取得し表示するアプリ。useActionStateとServer Actionを利用。
→ チャレンジを見るDay 02 ・ 2025-06-27
ポケモンコレクション機能
ランダムに取得したポケモンをコレクションに追加し、一覧で表示する機能を実装。useActionStateで状態管理。
→ チャレンジを見るDay 03 ・ 2025-06-28
ポケモン検索フォーム追加
フォームからポケモン名を入力して検索し、コレクションに追加できる機能を実装。未入力ならランダム取得。
→ チャレンジを見るDay 04 ・ 2025-06-29
DataLoaderによる投稿と著者表示
投稿と著者情報をそれぞれのコンポーネントで取得しつつ、DataLoaderとReact.cacheを使ってN+1フェッチを解消。dummyjson APIを活用。
→ チャレンジを見るDay 05 ・ 2025-06-30
クッキーでテーマを保存する機能
ユーザーが選択したテーマ（ライト/ダーク）をクッキーに保存し、次回以降の表示でもテーマを保持。`cookies()` を使って `html` にクラスを設定し、Tailwind の `dark:` スタイルを切り替える仕組みを実装。
→ チャレンジを見るDay 06 ・ 2025-07-01
三目並べ (Tic-Tac-Toe) ゲーム
React公式チュートリアルを参考に、Next.jsのApp RouterとClient Componentsで実装したシンプルな三目並べゲーム。状態管理とイベントハンドリングを学習。
→ チャレンジを見るDay 07 ・ 2025-07-02
J-Quants株価データ遅延ロード
J-Quants APIから株価データを取得する際、useTransitionを使ってUIの応答性を保ち、ローディング中も入力が可能なアプリ。Server Actionsと組み合わせ。
→ チャレンジを見る