opennextjs/cloudflare を導入

Author: na-trium-144

.gitignore

@@ -1,5 +1,8 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+/.open-next
+/cloudflare-env.d.ts
+
 # dependencies
 /node_modules
 /.pnp

README.md

@@ -32,3 +32,4 @@ npm run lint
     - よくわからなかったらstyle直接指定でも良い
 - [react-markdown](https://www.npmjs.com/package/react-markdown)
     - オプションがいろいろあり、今はほぼデフォルト設定で突っ込んでいるがあとでなんとかする
+- [OpenNext](https://opennext.js.org/cloudflare)

app/[docs_id]/page.tsx

@@ -1,8 +1,7 @@
 import { notFound } from "next/navigation";
-import { readFile } from "node:fs/promises";
-import { join } from "node:path";
 import { ChatForm } from "./chatForm";
 import { StyledMarkdown } from "./markdown";
+import { getCloudflareContext } from "@opennextjs/cloudflare";
 
 export default async function Page({
   params,
@@ -13,10 +12,10 @@ export default async function Page({
 
   let mdContent: string;
   try {
-    mdContent = await readFile(
-      join(process.cwd(), "docs", `${docs_id}.md`),
-      "utf-8"
-    );
+    const cfAssets = getCloudflareContext().env.ASSETS;
+    mdContent = await cfAssets!
+      .fetch(`https://assets.local/docs/${docs_id}.md`)
+      .then((res) => res.text());
   } catch (error) {
     console.error(error);
     notFound();
@@ -29,4 +28,3 @@ export default async function Page({
     </div>
   );
 }
-

next.config.ts

@@ -1,7 +1,16 @@
 import type { NextConfig } from "next";
+import { initOpenNextCloudflareForDev } from "@opennextjs/cloudflare";
+
+initOpenNextCloudflareForDev();
 
 const nextConfig: NextConfig = {
   /* config options here */
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
 };
 
 export default nextConfig;

open-next.config.ts

@@ -0,0 +1,3 @@
+import { defineCloudflareConfig } from "@opennextjs/cloudflare";
+ 
+export default defineCloudflareConfig();