Update Next.js prototype setup

.biome.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.7.3/schema.json",
+  "organizeImports": { "enabled": true },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "correctness": { "useExhaustiveDependencies": "error" },
+      "suspicious": { "noExplicitAny": "error" }
+    }
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 80
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "double",
+      "semicolons": "always"
+    }
+  }
+}

.eslintrc.js

@@ -0,0 +1,4 @@
+// ESLint の設定ファイル
+module.exports = {
+  extends: ['next/core-web-vitals'],
+};

.github/workflows/ci.yml

@@ -0,0 +1,40 @@
+name: CI
+
+on:
+  push:
+    branches: [main, develop]
+  pull_request:
+    branches: [main, develop]
+
+jobs:
+  lint-and-typecheck:
+    name: Lint and Type Check
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+      - name: Install dependencies
+        run: npm ci
+      - name: Run Biome Lint & Format Check
+        run: npm run lint:biome
+      - name: Run TypeScript Type Check
+        run: npm run build
+  build:
+    name: Build Project
+    runs-on: ubuntu-latest
+    needs: lint-and-typecheck
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+      - name: Install dependencies
+        run: npm ci
+      - name: Build Next.js application
+        run: npm run build

.github/workflows/deploy.yml

@@ -0,0 +1,30 @@
+name: Deploy to Cloudflare Pages
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  publish:
+    name: Publish to Cloudflare Pages
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      deployments: write
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+      - name: Install dependencies
+        run: npm ci
+      - name: Build with OpenNext
+        run: npm run opennext:build
+      - name: Publish to Cloudflare Pages
+        uses: cloudflare/wrangler-action@v3
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          projectName: "prototyping-base-app-router"

.husky/_/husky.sh

@@ -0,0 +1,3 @@
+#!/bin/sh
+# Husky による Git フックの共通処理
+export PATH="$PATH:$(npm bin)"

.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx biome check --apply .
+npx biome format --write .

CLAUDE.md

@@ -0,0 +1,35 @@
+# LLM開発ルール
+
+## LLMで生成したいこと
+- UI生成
+- 機能実装
+- デプロイ
+
+## 絶対に守るべきこと
+- シンプルなアーキテクチャ
+- 日本語でのドキュメント・コードコメント
+- 最新バージョン技術の使用
+- 秘匿情報を含まない公開リポジトリ
+- 汎用的な記述
+
+## 検討事項
+- 技術スタック
+- DB
+- UIデザイン
+- デプロイ先
+
+## リポジトリに必要なもの
+- LLM用rulesファイル (このファイル)
+- packages.json
+- README.md
+- Linter設定
+- Formatter設定
+- Typescript設定
+- TailwindCSS設定
+- envファイル
+- CloudflareでのNext.jsアプリ作成方法
+
+## 不要なもの
+- サンプルアプリケーション
+- 具体的な実装
+- ハッカソン情報

README.md

@@ -12,9 +12,10 @@
 
 ## 技術スタック
 
-- **フロントエンド**: Next.js, React
-- **スタイリング**: CSS Modules または styled-components
-- **バックエンド**: API routes (Next.jsのサーバレスAPI機能を使用)
+- **フロントエンド**: Next.js(App Router) と React
+- **スタイリング**: TailwindCSS
+- **言語/ツール**: TypeScript, Biome, Husky
+- **デプロイ**: OpenNext を利用した Cloudflare Pages へのデプロイを想定
 
 ## プロジェクト構成
 
@@ -44,3 +45,10 @@
 ```bash
 npm install
 npm run dev
+```
+
+アプリを静的にエクスポートする場合は以下を実行してください:
+
+```bash
+npm run opennext:build
+```

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: このファイルは自動生成されます。
+

next.config.js

@@ -0,0 +1,7 @@
+// Next.js の設定ファイル
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+};
+
+module.exports = nextConfig;

package.json

@@ -1,16 +1,37 @@
 {
-    "name": "interview-timer-app",
-    "version": "1.0.0",
-    "description": "A timer application for managing interview sessions",
-    "main": "index.js",
-    "scripts": {
-        "dev": "next dev",
-        "build": "next build",
-        "start": "next start"
-    },
-    "dependencies": {
-        "next": "latest",
-        "react": "latest",
-        "react-dom": "latest"
-    }
+  "name": "prototyping-base-app-router",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "lint:biome": "biome check --apply .",
+    "format:biome": "biome format --write .",
+    "prepare": "husky install",
+    "cf-typegen": "wrangler types --env cloudflare-pages > src/types/cloudflare.d.ts",
+    "opennext:build": "opennext build"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "latest",
+    "react-dom": "latest"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "latest",
+    "@cloudflare/workers-types": "latest",
+    "@types/node": "latest",
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "autoprefixer": "latest",
+    "eslint": "latest",
+    "eslint-config-next": "latest",
+    "husky": "latest",
+    "opennext": "latest",
+    "postcss": "latest",
+    "tailwindcss": "latest",
+    "typescript": "latest",
+    "wrangler": "latest"
+  }
 }

postcss.config.js

@@ -0,0 +1,7 @@
+// PostCSS の設定ファイル
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

src/app/globals.css

@@ -0,0 +1,4 @@
+/* TailwindCSS の基本スタイルを読み込み */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/app/layout.tsx

@@ -0,0 +1,11 @@
+import '../app/globals.css';
+import type { ReactNode } from 'react';
+
+// ルートレイアウト
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="ja">
+      <body>{children}</body>
+    </html>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,11 @@
+import Timer from '../components/Timer';
+
+// トップページ
+export default function Page() {
+  return (
+    <main className="p-4">
+      <h1 className="text-xl font-bold">Interview Timer App</h1>
+      <Timer initialTime={60} />
+    </main>
+  );
+}

src/components/Alert.tsx

@@ -0,0 +1,9 @@
+// アラート表示用コンポーネント
+export default function Alert({ message, isVisible }: { message: string; isVisible: boolean }) {
+  if (!isVisible) return null;
+  return (
+    <div style={{ backgroundColor: 'red', color: 'white' }}>
+      <p>{message}</p>
+    </div>
+  );
+}