Nextjs Conventions

命名規則

• ファイル名: kebab-case (stats-card.tsx)
• コンポーネント名: PascalCase (StatsCard)
• イベントハンドラ: onXXX (onClick, onSubmit, onChange)
• カスタムフック: useXXX (useAuth, useForm)

TypeScript

型定義は interface を使う

type ではなく interface を優先する。

// Good
interface User {
	id: string
	name: string
}

// Bad
type User = {
	id: string
	name: string
}

ユニオン型やユーティリティ型など interface で表現できないものは type を使ってよい。

再エクスポート用の index.ts を作らない

バレルファイル（index.ts）による再エクスポートは使わない。各ファイルから直接インポートする。

// Good
import { User } from "@/model/user"

// Bad
import { User } from "@/model"  // index.ts 経由

データモデル (Firestore)

model/ ディレクトリで Firestore のスキーマ（コレクション構造・型定義）を管理する。

model/
├── user.ts        # users コレクションの型定義
├── workout.ts     # workouts コレクションの型定義
└── ...

各ファイルでコレクションに対応する interface を定義する。

コンポーネント利用

shadcn/ui (@/components/ui/*) を優先的に使い、素の HTML 要素をなるべく使わない。

// Good
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

<Button onClick={onSubmit}>送信</Button>

// Bad - 素の HTML を使っている
<button onClick={onSubmit}>送信</button>
<input type="text" />

shadcn/ui に該当コンポーネントがない場合のみ素の HTML を使う。未追加のコンポーネントは npx shadcn@latest add <name> で追加する。

スタイリング

動的クラス結合には必ず cn() を使う。

// Good
<div className={cn("flex items-center", isActive && "bg-primary")} />

// Bad
<div className={`flex items-center ${isActive ? "bg-primary" : ""}`} />

静的クラスのみなら className 直書き OK。色は CSS 変数（bg-primary, text-muted-foreground 等）を使い、ハードコード禁止。

API 設計 (Elysia)

ルート単位でファイル分割

server/
├── index.ts           # エントリポイント（ルート集約）
└── routes/
    ├── health.ts      # /api/health
    ├── users.ts       # /api/users
    └── workouts.ts    # /api/workouts

ルートファイルの書き方

// server/routes/users.ts
import { Elysia } from "elysia"

export const usersRoute = new Elysia({ prefix: "/users" })
	.get("/", () => { /* 一覧 */ })
	.post("/", () => { /* 作成 */ })
	.get("/:id", ({ params }) => { /* 詳細 */ })

index.ts での集約

// server/index.ts
import { Elysia } from "elysia"
import { usersRoute } from "./routes/users"

const app = new Elysia({ prefix: "/api" })
	.use(usersRoute)

export type App = typeof app
export default app

ページ構成 (App Router)

app/
├── layout.tsx
├── page.tsx
├── (auth)/                    # Route Group
│   ├── login/page.tsx
│   └── register/page.tsx
├── dashboard/
│   ├── layout.tsx
│   └── page.tsx
└── api/[[...route]]/route.ts  # Elysia catch-all（変更しない）

• Route Group (name) で URL に影響なくレイアウト共有
• loading.tsx, error.tsx は必要に応じてページ単位で配置