こんにちは、Ryuseiです！
今回は、自作のNext.jsアプリにチャット機能を組み込むための構想と、試行錯誤のプロセスを振り返ります。
開発の目的
- ターゲットUI：スマホでも快適に使えるLINE風チャット
- 主な技術：
- Next.js（App Router構成）
- Tailwind CSS（UI設計）
- Firebase（データベース＋認証）
- NextAuth.js（Googleログイン）
技術構成の全体像と理由
| 技術 | 理由 |
|---|---|
| Next.js | SSR対応の柔軟なフレームワーク |
| Firebase | チャットに最適なリアルタイムDB |
| Tailwind CSS | モバイルUIとの相性が良い |
| NextAuth.js | Googleログインの導入が簡単 |
Listと地図（NavMap）連携の試行錯誤メモ
STEP
リスト表示の実装
works.jsonのデータをList.tsxとWorkList.tsxに分けて表示- ここで表示は成功！
STEP
リストの選択を地図に反映したい
useStateで選択IDを管理List.tsxから ID を取得し、該当の座標データをNavMapに渡すように改修
STEP
構成の見直し
page.tsx→WorkList.tsx→List.tsxという構成だったが、冗長と感じてWorkList.tsxを削除- 現在は
page.tsx→List.tsx→NavMapのシンプルな構成で整理中
認証・セッションまわりのエラーと対策記録
「React Context is unavailable in Server Components」
- 原因：
Header.tsxにuseSession()を含むLoginButtonを配置していた - 対策：
Header.tsxを"use client"に変更 → ✅ 解決！
「You are attempting to export metadata from a component marked with ‘use client’」
- 原因：
layout.tsxに"use client"を付けてしまった - 対策：
layout.tsxを Server Component のまま維持し、metadataを正しく定義 → ✅ 解決！
「useSession() must be wrapped in a <SessionProvider />」
- 原因：
SessionProviderのスコープ外にLoginButtonが存在していた - 対策：
Header.tsxを Client Component にし、App Router構成内に設置 → ✅ 解決！
今の状態と次のステップ
実装済み
- Googleログイン成功
- セッション状態の取得OK
- App全体でSessionProviderが有効に
次にやること
- チャットDB（Firestore）の設計
- リアルタイムでのメッセージ表示機能
- 既読・未読ステータスの実装
- Firebase Storageによる画像投稿
- スマホUIの改善とTailwindでの最適化