chore: Cloudflareにデプロイするためのセットアップ

app/page.tsx

@@ -1,5 +1,7 @@
 import Image from "next/image";
 
+export const runtime = "edge";
+
 export default function Home() {
 	return (
 		<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">

next.config.ts

@@ -1,7 +1,14 @@
+import { setupDevPlatform } from "@cloudflare/next-on-pages/next-dev";
 import type { NextConfig } from "next";
 
-const nextConfig: NextConfig = {
-	/* config options here */
+const createConfig = async (): Promise<NextConfig> => {
+	if (process.env.NODE_ENV === "development") {
+		await setupDevPlatform();
+	}
+	const nextConfig: NextConfig = {
+		/* config options here */
+	};
+	return nextConfig;
 };
 
-export default nextConfig;
+export default createConfig();

package.json

@@ -12,7 +12,10 @@
 		"lint": "bunx biome lint ./",
 		"check": "bunx biome check --write ./",
 		"type-check": "tsc --noEmit",
-		"type-check:watch": "tsc --noEmit --watch"
+		"type-check:watch": "tsc --noEmit --watch",
+		"pages:build": "bunx @cloudflare/next-on-pages",
+		"preview": "bun pages:build && wrangler pages dev",
+		"deploy": "bun pages:build && wrangler pages deploy"
 	},
 	"dependencies": {
 		"class-variance-authority": "^0.7.1",
@@ -26,12 +29,14 @@
 	},
 	"devDependencies": {
 		"@biomejs/biome": "1.9.4",
+		"@cloudflare/next-on-pages": "^1.13.7",
 		"@types/node": "^20",
 		"@types/react": "^19",
 		"@types/react-dom": "^19",
 		"lefthook": "^1.10.0",
 		"postcss": "^8",
 		"tailwindcss": "^3.4.1",
-		"typescript": "^5"
+		"typescript": "^5",
+		"wrangler": "^3.99.0"
 	}
 }

wrangler.toml

@@ -0,0 +1,4 @@
+name = "dev-recap"
+compatibility_date = "2024-12-25"
+compatibility_flags = ["nodejs_compat"]
+pages_build_output_dir = ".vercel/output/static"