feat(build): add cloudflare wrangler

.dev.vars

@@ -0,0 +1 @@
+NEXTJS_ENV=development

.gitignore

@@ -9,6 +9,12 @@
 # testing
 /coverage
 
+# wrangler
+/.wrangler/
+
+# OpenNext
+/.open-next/
+
 # next.js
 /.next/
 /out/

next.config.ts

@@ -8,9 +8,9 @@ const withNextra = nextra({
 
 const nextConfig: NextConfig = {
     // any configs you need
-    turbopack: {
-        resolveExtensions: ['.mdx', '.tsx', '.ts', '.jsx', '.js', '.mjs', '.json'],
-    },
 }
 
 export default withNextra(nextConfig)
+
+import { initOpenNextCloudflareForDev } from "@opennextjs/cloudflare";
+initOpenNextCloudflareForDev();

open-next.config.ts

@@ -0,0 +1,6 @@
+import { defineCloudflareConfig } from "@opennextjs/cloudflare";
+import staticAssetsIncrementalCache from "@opennextjs/cloudflare/overrides/incremental-cache/static-assets-incremental-cache";
+
+export default defineCloudflareConfig({
+    incrementalCache: staticAssetsIncrementalCache,
+})

package.json

@@ -2,33 +2,36 @@
   "name": "anthonyberg-website",
   "version": "0.1.0",
   "description": "A website for my own portfolio",
-  "type": "module",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
     "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
-    "postbuild": "pagefind --site .next/server/app --output-path public/_pagefind"
+    "preview": "opennextjs-cloudflare build && opennextjs-cloudflare preview",
+    "deploy": "opennextjs-cloudflare build && opennextjs-cloudflare deploy",
+    "upload": "opennextjs-cloudflare build && opennextjs-cloudflare upload",
+    "cf-typegen": "wrangler types --env-interface CloudflareEnv cloudflare-env.d.ts"
   },
   "engines": {
     "node": ">=20.x",
     "pnpm": ">=8"
   },
   "dependencies": {
+    "@opennextjs/cloudflare": "^1.5.1",
     "gray-matter": "^4.0.3",
-    "next": "^15.3.1",
+    "next": "15.3.3",
     "nextra": "^4.2.17",
     "nextra-theme-blog": "^4.2.17",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
   },
   "devDependencies": {
     "@types/mdx": "^2.0.13",
-    "@types/node": "^22.14.1",
-    "@types/react": "^19.1.2",
-    "@types/react-dom": "^19.1.2",
-    "pagefind": "^1.3.0",
-    "typescript": "^5.8.3"
+    "@types/node": "^24.0.15",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "typescript": "^5.8.3",
+    "wrangler": "^4.25.0"
   }
 }

pnpm-workspace.yaml

@@ -1,2 +1,4 @@
 onlyBuiltDependencies:
+  - esbuild
   - sharp
+  - workerd

public/_headers

@@ -0,0 +1,2 @@
+/_next/static/*
+  Cache-Control: public,max-age=31536000,immutable

src/app/[[...mdxPath]]/page.tsx

@@ -27,4 +27,4 @@ export default async function Page(props: Props) {
             <MDXContent {...props} params={params} />
         </Wrapper>
     )
-}
+}

src/app/posts/page.tsx

@@ -1,11 +1,13 @@
 import Link from 'next/link'
 import { PostCard } from 'nextra-theme-blog'
 import { getPosts, getTags } from './get-posts'
+import { Metadata } from "next";
 
-export const metadata = {
+export const metadata: Metadata = {
     title: 'Posts'
 }
 
+
 export default async function PostsPage() {
     const tags = await getTags()
     const posts = await getPosts()
@@ -17,10 +19,10 @@ export default async function PostsPage() {
     }
     return (
         <div data-pagefind-ignore="all">
-            <h1>{metadata.title}</h1>
+            <h1>Posts</h1>
             <div
                 className="not-prose"
-                style={{ display: 'flex', flexWrap: 'wrap', gap: '.5rem' }}
+                style={{display: 'flex', flexWrap: 'wrap', gap: '.5rem'}}
             >
                 {Object.entries(allTags).map(([tag, count]) => (
                     <Link key={tag} href={`/tags/${tag}`} className="nextra-tag">
@@ -29,8 +31,8 @@ export default async function PostsPage() {
                 ))}
             </div>
             {posts.map(post => (
-                <PostCard key={post.route} post={post} />
+                <PostCard key={post.route} post={post}/>
             ))}
         </div>
     )
-}
+}

src/app/rss.xml/route.ts

@@ -1,8 +1,6 @@
 import { getPosts } from '../posts/get-posts'
 
 
-export const runtime = 'edge';
-
 const CONFIG = {
     title: 'Anthony\'s Blog',
     siteUrl: 'https://anthonyberg.io',
@@ -38,4 +36,4 @@ ${posts}
             'Content-Type': 'application/rss+xml'
         }
     })
-}
+}

src/content/_meta.tsx

@@ -21,4 +21,4 @@ const meta: MetaRecord = {
     }
 }
 
-export default meta;
+export default meta;

src/mdx-components.ts

@@ -10,4 +10,4 @@ export function useMDXComponents(components?: MDXComponents) {
         ...themeComponents,
         ...components
     }
-}
+}

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es2020",
+    "target": "ESNext",
     "lib": [
       "dom",
       "dom.iterable",
@@ -27,7 +27,7 @@
       {
         "name": "next"
       }
-    ]
+    ],
   },
   "include": [
     "next-env.d.ts",
@@ -36,6 +36,7 @@
     ".next/types/**/*.ts"
   ],
   "exclude": [
-    "node_modules"
+    "node_modules",
+    "open-next.config.ts"
   ]
 }

wrangler.toml

@@ -0,0 +1,8 @@
+main = ".open-next/worker.js"
+name = "anthonyberg-website"
+compatibility_date = "2025-03-25"
+compatibility_flags = ["nodejs_compat"]
+
+[assets]
+directory = ".open-next/assets"
+binding = "ASSETS"