#### スタック

- OpenNext
- shadcn/ui
- tailwindcss
- drizzle-orm
- better-auth
- ai-sdk

#### Feature

以下の機能を試してみたい人はリポジトリを見てもらえれば実装方法がわかると思います。

UI上の工夫
- `gpt-4o-transcribe`を使用した音声入力とAIによる校正
- インタビューでのAIのレスポンスのストリーミング
- 記事生成のAIのレスポンスのストリーミング
- 記事OGの動的生成

裏側の工夫
- betterAuthで新規ユーザー作成後に他のDBにデータを登録する
- ストリームしたデータをサーバーサイドで保存する

git log --date=short --format="%ad" | sort -u

2025-07-28
2025-07-31
2025-08-03
2025-08-05
2025-08-09
2025-08-12
2025-08-13
2025-08-14

pnpm create cloudflare@latest {appName} --framework=next

# .dev.vars
NEXTJS_ENV=development

import { createEnv } from '@t3-oss/env-nextjs'
import { z } from 'zod'

export const env = createEnv({
  server: {
    BETTER_AUTH_SECRET: z.string(),
    BETTER_AUTH_URL: z.url(),
    TURSO_DATABASE_URL: z.url(),
    TURSO_AUTH_TOKEN: z.string(),
    GOOGLE_CLIENT_ID: z.string(),
    GOOGLE_CLIENT_SECRET: z.string(),
    OPENAI_API_KEY: z.string(),
    OPENAI_ADMIN_API_KEY: z.string(),
    OPENAI_PROJECT_ID: z.string(),
  },
  client: {
    NEXT_PUBLIC_APP_URL: z.url(),
  },
  runtimeEnv: {
    BETTER_AUTH_SECRET: process.env.BETTER_AUTH_SECRET,
    BETTER_AUTH_URL: process.env.BETTER_AUTH_URL,
    TURSO_DATABASE_URL: process.env.TURSO_DATABASE_URL,
    TURSO_AUTH_TOKEN: process.env.TURSO_AUTH_TOKEN,
    NEXT_PUBLIC_APP_URL: process.env.NEXT_PUBLIC_APP_URL,
    GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID,
    GOOGLE_CLIENT_SECRET: process.env.GOOGLE_CLIENT_SECRET,
    OPENAI_API_KEY: process.env.OPENAI_API_KEY,
    OPENAI_ADMIN_API_KEY: process.env.OPENAI_ADMIN_API_KEY,
    OPENAI_PROJECT_ID: process.env.OPENAI_PROJECT_ID,
  },
})

{
  "$schema": "node_modules/wrangler/config-schema.json",
  "name": "thisisooo",
  "main": ".open-next/worker.js",
  "compatibility_date": "2025-03-01",
  "compatibility_flags": ["nodejs_compat", "global_fetch_strictly_public"],
  "assets": {
    "binding": "ASSETS",
    "directory": ".open-next/assets"
  },
  "observability": {
    "enabled": true
  },
  "workers_dev": false,
  
  "kv_namespaces": [
    {
      "binding": "KV",
      "id": "next-dev-kv"
    }
  ],
  "d1_databases": [
    {
      "binding": "D1",
      "database_name": "d1",
      "database_id": "next-dev-d1",
      "migrations_dir": "drizzle/d1"
    }
  ],
}

opennextjs-cloudflare build && opennextjs-cloudflare preview --env development

const nextConfig: NextConfig = {
  serverExternalPackages: [
    '@libsql/client',
    '@libsql/isomorphic-ws',
  ],
}

import { getCloudflareContext } from "@opennextjs/cloudflare";
import { drizzle } from "drizzle-orm/d1";
import { cache } from "react";
import * as schema from "./schema/d1";
 
export const getDb = cache(() => {
  const { env } = getCloudflareContext();
  return drizzle(env.MY_D1, { schema });
});
 

export const getDbAsync = cache(async () => {
  const { env } = await getCloudflareContext({ async: true });
  return drizzle(env.MY_D1, { schema });
});

  "services": [
    {
      "binding": "WORKER_SELF_REFERENCE",
      "service": "thisisooo"
    }
  ],
  "r2_buckets": [
    {
      "binding": "NEXT_INC_CACHE_R2_BUCKET",
      "bucket_name": "thisisooo-next-incremental-cache-prod"
    }
  ],

import { defineCloudflareConfig } from '@opennextjs/cloudflare'
import r2IncrementalCache from '@opennextjs/cloudflare/overrides/incremental-cache/r2-incremental-cache'

export default defineCloudflareConfig({
  incrementalCache: r2IncrementalCache,
})

import { defineCloudflareConfig } from '@opennextjs/cloudflare'
import r2IncrementalCache from '@opennextjs/cloudflare/overrides/incremental-cache/r2-incremental-cache'
import { withRegionalCache } from '@opennextjs/cloudflare/overrides/incremental-cache/regional-cache'

export default defineCloudflareConfig({
  incrementalCache: withRegionalCache(r2IncrementalCache, {
    mode: 'long-lived',
    shouldLazilyUpdateOnCacheHit: true,
  }),
})