NextJS on Cloudflare Wiki

1. Initialize a NextJs app and set it for Cloudflare:

   npx create-next-app@latest <appName>

   You can follow options from https://vrealmatic.com/typescript/nextjs.

2. Add output: "export", trailingSlash: true, to next.config.ts. The file may look as follow:

   import type { NextConfig } from "next";
   
   const nextConfig: NextConfig = {
     output: "export",
     trailingSlash: true,
   };
   
   export default nextConfig;

3. Add wrangler.jsonc file to root

   {
     "$schema": "./node_modules/wrangler/config-schema.json",
     "name": "next444",
     "main": "src/worker.ts",
     "compatibility_date": "2026-03-04",
     "assets": {
       "directory": "./out",
       "binding": "ASSETS",
       "run_worker_first": ["/api/*"]
     }
   }

4. Add small worker src/worker.ts

   interface AssetsBinding {
     fetch(input: Request | URL | string, init?: RequestInit): Promise<Response>;
   }
   
   interface Env {
     ASSETS: AssetsBinding;
   }
   
   export default {
     async fetch(request: Request, env: Env): Promise<Response> {
       const url = new URL(request.url);
   
       if (url.pathname === "/api/hello") {
         return Response.json({
           ok: true,
           message: "Hello from Worker API",
         });
       }
   
       return env.ASSETS.fetch(request);
     },
   };

5. Install Wrangler

   npm install -D wrangler

Preview:

npx wrangler dev

Deploy:

npx wrangler deploy

Initialize a NextJs Worker app for Cloudflare:

npm create cloudflare@latest -- my-next-app --framework=next --platform=workers

• You're in an existing git repository. Do you want to use git for version control? - choose Yes
• Do you want to deploy your application? choose Yes or No based on your preference.

Run the app on localhost options:

1. npm run dev
2. npx wrangler dev

Deploy / Redeploy (from Ubuntu WSL on Windows)

NOTE: If you need to deploy applications to more Cloudflare accounts, use Deploying with a token.

1. Be sure you are authentizated / use proper token

   npx wrangler whoami

2. Build the app for Cloudflare Worker

   npx @opennextjs/cloudflare build

3. npx wrangler deploy

Check real-time logs on deployed ver through wrangler

wrangler tail

Sample R2 Library src/lib/r2.ts

import { getCloudflareContext } from "@opennextjs/cloudflare";

type Env = { NEXT_INC_CACHE_R2_BUCKET: R2Bucket; };
   
const r2CacheKey : string = 'vrealmatic_page/v3/';
       
async function getBucket(): Promise<R2Bucket> {
    const ctx = getCloudflareContext() as { env: Env };
    const bucket = ctx.env.NEXT_INC_CACHE_R2_BUCKET;
    if (!bucket) throw new Error("R2 binding NEXT_INC_CACHE_R2_BUCKET is missing in Cloudflare context env.");
    return bucket;
}
            
export async function r2GetJson<T>(key: string): Promise<T | null> {
    const bucket = await getBucket();
    const obj = await bucket.get(r2CacheKey+key);
    if (!obj) return null;
    return await obj.json<T>();
}
            
export async function r2PutJson(key: string, value: unknown): Promise<void> {
    const bucket = await getBucket();
    await bucket.put((r2CacheKey+key), JSON.stringify(value), { httpMetadata: { contentType: "application/json" } });
}

Use Sample for saving cache data to R2

type R2Cached<T> = {
    ts: number;     // stored at (ms)
    data: T;
};
                    
const PAGE_CTX_TTL_MS = 86_400_000; // 24h
                    
const inFlight = new Map<string, Promise<PageContext>>();
async function getRequestedAndAlternates_TTL(urlPath: string): Promise<PageContext> {
                    
    const existing = inFlight.get(urlPath);
    if (existing) return existing;
                      
    const p = (async () => {
        try {
          const now = Date.now();
                    
          // 1) try cache
          const cached = await r2GetJson<R2Cached<PageContext>>(urlPath);
          if ( cached && (now - cached.ts) < PAGE_CTX_TTL_MS ) return cached.data;
          
          // 2) MISS/STALE => DB
          const data: PageContext = await GetPageByUrlAndAlternates(urlPath);
                          
          // 3) Write / update to cache, if the page exists
          if(data.page) await r2PutJson(urlPath, { ts: now, data } satisfies R2Cached<PageContext>);
                    
          return data;
        } finally {
          inFlight.delete(urlPath);
        }
      })();
                    
      inFlight.set(urlPath, p);
      return p;
    }
                    
    export function getPageContext(slug?: string[]) {
      const baseUrlPath = (!slug || slug.length === 0) ? "" : slug.join("/");
      return getPageContextCache(baseUrlPath);
    }
                    
    export const getPageContextCache = cache(getRequestedAndAlternates_TTL);

R2 Bucket can be private as well as public. Public bucket has its own domain / subdomain you can get the files through. Files at private bucket can be attached through worker app that includes binding at the bucket.