# Next.js + Tailwind CSS を Cloudflare Pages でデプロイする方法

// functions/api/hello.ts
export async function onRequest(context: EventContext) {
  const { request, env } = context;
  return new Response(JSON.stringify({ message: "Hello" }), {
    headers: { "Content-Type": "application/json" },
  });
}

// functions/api/users/[id].ts
export async function onRequestGet(context: EventContext) {
  const { params } = context;
  const user = await fetchUser(params.id);
  return new Response(JSON.stringify(user), {
    headers: { "Content-Type": "application/json" },
  });
}

// functions/api/webhooks/github.ts
import { createHmac } from "crypto";

export async function onRequestPost(context: EventContext) {
  const { request, env } = context;
  const payload = await request.text();
  const signature = request.headers.get("X-Hub-Signature-256");

  // Webhook の署名検証
  const expectedSignature = createHmac("sha256", env.GITHUB_WEBHOOK_SECRET)
    .update(payload)
    .digest("hex");

  if (`sha256=${expectedSignature}` !== signature) {
    return new Response("Invalid signature", { status: 401 });
  }

  const event = JSON.parse(payload);

  // イベントタイプに応じた処理
  switch (request.headers.get("X-GitHub-Event")) {
    case "push":
      await handlePushEvent(event);
      break;
    case "pull_request":
      await handlePullRequestEvent(event);
      break;
  }

  return new Response("OK", { status: 200 });
}

async function handlePushEvent(event: any) {
  // プッシュイベントの処理
  console.log(`Push to ${event.repository.name}`);
}

async function handlePullRequestEvent(event: any) {
  // プルリクエストイベントの処理
  console.log(`PR ${event.action} in ${event.repository.name}`);
}

// functions/_middleware.ts
export async function onRequest(context: EventContext) {
  const { request, next, env } = context;

  // 認証チェック
  const authHeader = request.headers.get("Authorization");
  if (!authHeader || !authHeader.startsWith("Bearer ")) {
    return new Response("Unauthorized", { status: 401 });
  }

  const token = authHeader.substring(7);
  const isValid = await validateToken(token, env.JWT_SECRET);

  if (!isValid) {
    return new Response("Invalid token", { status: 401 });
  }

  // レート制限チェック
  const clientIP = request.headers.get("CF-Connecting-IP") || "";
  const rateLimitKey = `rate_limit:${clientIP}`;

  // Cloudflare KV を使用したレート制限（例）
  // const count = await env.RATE_LIMIT_KV.get(rateLimitKey);
  // if (count && parseInt(count) > 100) {
  //   return new Response('Rate limit exceeded', { status: 429 });
  // }

  // カスタムヘッダーの追加
  const response = await next();
  response.headers.set("X-Authenticated-User", "user-id");

  return response;
}

// functions/api/events.ts
export async function onRequestGet(context: EventContext) {
  const { request, env } = context;

  // Server-Sent Events のストリーム
  const stream = new ReadableStream({
    async start(controller) {
      const encoder = new TextEncoder();

      // 定期的にイベントを送信
      const interval = setInterval(() => {
        const data = {
          timestamp: new Date().toISOString(),
          message: "Hello from SSE",
        };

        controller.enqueue(encoder.encode(`data: ${JSON.stringify(data)}\n\n`));
      }, 1000);

      // クライアントが切断したらクリーンアップ
      request.signal.addEventListener("abort", () => {
        clearInterval(interval);
        controller.close();
      });
    },
  });

  return new Response(stream, {
    headers: {
      "Content-Type": "text/event-stream",
      "Cache-Control": "no-cache",
      Connection: "keep-alive",
    },
  });
}

// functions/api/upload.ts
export async function onRequestPost(context: EventContext) {
  const { request, env } = context;
  const formData = await request.formData();
  const file = formData.get("file") as File;

  if (!file) {
    return new Response("No file provided", { status: 400 });
  }

  // ファイルサイズチェック
  if (file.size > 10 * 1024 * 1024) {
    // 10MB
    return new Response("File too large", { status: 400 });
  }

  // ファイルタイプチェック
  const allowedTypes = ["image/jpeg", "image/png", "image/webp"];
  if (!allowedTypes.includes(file.type)) {
    return new Response("Invalid file type", { status: 400 });
  }

  // Cloudflare R2 や外部ストレージにアップロード
  const fileBuffer = await file.arrayBuffer();
  const uploadUrl = await uploadToStorage(fileBuffer, file.name, env);

  return new Response(JSON.stringify({ url: uploadUrl }), {
    headers: { "Content-Type": "application/json" },
  });
}

async function uploadToStorage(
  buffer: ArrayBuffer,
  filename: string,
  env: any
): Promise<string> {
  // Cloudflare R2 へのアップロード例
  // または外部ストレージサービスへのアップロード
  return "https://storage.example.com/files/" + filename;
}

// functions/api/health.ts
export async function onRequestGet(context: EventContext) {
  const { env } = context;

  const health = {
    status: "ok",
    timestamp: new Date().toISOString(),
    version: env.APP_VERSION || "unknown",
    region: context.request.cf?.colo || "unknown",
  };

  // データベース接続チェック（オプション）
  try {
    // const dbHealth = await checkDatabase(env);
    // health.database = dbHealth;
  } catch (error) {
    health.status = "degraded";
    health.error = "Database check failed";
  }

  return new Response(JSON.stringify(health), {
    headers: { "Content-Type": "application/json" },
  });
}

// functions/_middleware.ts
export async function onRequest(context: EventContext) {
  const { request, next } = context;
  const url = new URL(request.url);

  // 特定のパスをリダイレクト
  if (url.pathname.startsWith("/old-path")) {
    const newPath = url.pathname.replace("/old-path", "/new-path");
    return Response.redirect(new URL(newPath, url.origin), 301);
  }

  // A/B テスト用のリライト
  if (url.pathname === "/landing") {
    const variant = Math.random() > 0.5 ? "a" : "b";
    url.pathname = `/landing/${variant}`;
    return Response.redirect(url, 302);
  }

  return next();
}

// app/actions.ts
"use server";

export async function createUser(formData: FormData) {
  const name = formData.get("name") as string;
  const email = formData.get("email") as string;

  // データベースに保存などの処理
  const user = await saveUser({ name, email });

  return { success: true, user };
}

// app/actions/user.ts
"use server";

import { revalidatePath } from "next/cache";

export async function updateUser(userId: string, formData: FormData) {
  const name = formData.get("name") as string;

  // Cloudflare D1 や外部 API を使用
  const response = await fetch(`https://api.example.com/users/${userId}`, {
    method: "PATCH",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ name }),
  });

  if (!response.ok) {
    throw new Error("ユーザー更新に失敗しました");
  }

  revalidatePath("/users");
  return { success: true };
}