OC広場 — Next.js + Node

オレンジカウンティの日本語コミュニティサイト「OC広場」を、WordPress から Next.js + Node へ移行した実装です。

ログイン必須の宇宙デザインの広場（10パネル）、9カテゴリーの投稿管理、サイト内メッセージ、マイページ、お問い合わせまでを含みます。

OC Tennel/
  web/        Next.js (App Router) + Tailwind — 画面
  server/     Express + Prisma + SQLite — API
  docs/       現行サイトの調査資料（移行前の分析）
  public_html/ WordPress のダンプ（参照用・実行はしません）

動かし方

必要環境: Node.js 18 以上

1. API サーバー

cd server
npm install
cp .env.example .env        # Windows: Copy-Item .env.example .env
npm run db:setup            # マイグレーション + 初期データ投入
npm run dev                 # http://localhost:4000

2. フロントエンド

cd web
npm install
cp .env.local.example .env.local
npm run dev                 # http://localhost:3000

http://localhost:3000 を開くと、未ログインの場合はログイン画面が表示されます。

初期アカウント（seed）

種別	メールアドレス	パスワード
運営（ADMIN）	admin@ochiroba.com	ochiroba2026
一般会員	member@ochiroba.com	ochiroba2026

初期データとして、現行サイトに掲載中の求人3件と、住まい・イベントのサンプルが投入されます。

環境変数

server/.env

変数	説明
DATABASE_URL	既定は file:./dev.db（SQLite）。本番で Postgres に変更可能
JWT_SECRET	セッション用の署名鍵。本番では必ず変更してください
CLIENT_ORIGIN	ブラウザからアクセスするフロントの URL
PUBLIC_API_URL	アップロード画像の URL 生成に使用
SMTP_HOST / SMTP_PORT / SMTP_USER / SMTP_PASS	メール送信設定。未設定の場合はコンソールに出力されます
MAIL_FROM	送信元アドレス
CONTACT_INBOX	お問い合わせの通知先

web/.env.local

変数	説明
NEXT_PUBLIC_API_URL	API サーバーの URL

主な仕様

ログイン必須の導線

未ログインの訪問者に見えるのは、ログイン・新規登録・パスワード再設定・利用規約・プライバシーポリシーのみです。判定は web/src/middleware.ts で行い、セッション Cookie がない場合は /login に転送します。

ログイン後、9カテゴリー + お問い合わせの10パネルの広場が表示されます。パネルをクリックすると、二択画面を挟まずにそのカテゴリーの一覧へ直接移動し、一覧上部に「投稿する」ボタンを配置しています。

カテゴリー

jobs / marketplace / housing / events / seniors / community / ai-help / business / board の9つ。定義は web/src/lib/categories.ts と server/src/lib/categories.ts にあります。カテゴリーごとに追加フォーム項目（求人なら報酬・勤務形態、住まいなら家賃・間取りなど）を持ちます。

投稿の状態は 受付中 / 終了 / 売却済み の3種類で、マイページの投稿管理からいつでも変更できます。

メッセージ（びびなびの課題への対応）

• 会話は最後にやり取りした日時の新しい順に並びます。数か月ぶりの返信でも、その会話が自動的にいちばん上へ移動します。
• 未読の会話はオレンジ色で光り、ヘッダーとマイページに未読件数を表示します。会話を開くと既読になります。
• 会話は「投稿 × 相手」ごとに整理され、件名にどの投稿についての連絡かを表示します。
• 新着時は登録メールに「OC広場に新しいメッセージがあります」という通知のみを送ります。本文は含めず、返信はサイト内で行います。
• 会員同士にメールアドレス・生年月日・電話番号は公開されません。公開されるのはニックネーム・エリア・写真・自己紹介のみです。

セキュリティ

パスワードは bcrypt でハッシュ化、セッションは httpOnly Cookie の JWT、認証系とお問い合わせにはレート制限、入力は Zod で検証、投稿の編集・削除には所有者チェック、アップロードは画像のみ・1枚5MB・最大8枚に制限しています。

API

分類	エンドポイント
認証	POST /auth/register /login /logout /forgot-password /reset-password /change-password、GET /auth/me
プロフィール	GET/PATCH /me、GET /me/listings、POST /me/change-email /me/confirm-email
投稿	GET /listings?category=&q=、GET /listings/counts、GET /listings/:id、POST /listings、PATCH /listings/:id、DELETE /listings/:id
メッセージ	GET /conversations、GET /conversations/:id、POST /conversations、POST /conversations/:id/messages、POST /conversations/:id/read
お問い合わせ	POST /contact
画像	POST /uploads-api
死活監視	GET /health

動作確認

API サーバーを起動した状態で、一連の動作を自動確認できます。

cd server
npm run smoke

登録 → ログイン必須の確認 → 投稿 → メッセージ → 未読 → 既読 → 新着順への並べ替え → 状態変更 → 権限チェック → 削除 → お問い合わせ → ログアウトまでを検証します。

画面での確認手順

1. /register から新規登録（18歳未満は登録できないこと）
2. ログイン後に10パネルの広場が表示されること
3. パネル → 一覧 → 「投稿する」から投稿できること
4. 別のアカウントで投稿の詳細を開き、「投稿者へメッセージを送る」から送信できること
5. 受信側のヘッダーに未読バッジが光ること
6. 会話を開くと既読になり、バッジが消えること
7. 古い会話に返信すると、その会話が一覧のいちばん上に来ること
8. マイページの投稿管理から、状態変更・編集・削除ができること
9. プロフィールの変更（ニックネーム・写真・生年月日・メール・パスワード）ができること
10. スマートフォン幅で各画面が崩れないこと

本番運用に向けて

• JWT_SECRET を十分に長いランダム文字列へ変更し、HTTPS 配信にすると Cookie が secure になります（NODE_ENV=production）。
• SQLite から Postgres へ移行する場合は、server/prisma/schema.prisma の provider を postgresql に変更し、DATABASE_URL を差し替えて npx prisma migrate deploy を実行します。データモデルはそのまま利用できます。
• アップロード画像は Cloudinary（CLOUDINARY_* 設定時）へ保存し、Prisma には HTTPS URL のみ保存します。未設定時は server/uploads/ へフォールバックします。
• 決済・有料広告・セミナー掲載は今回の実装範囲外です。会員情報と投稿データをそのまま活かして、後から追加できる構成にしています。