1. Effect Overview

In the previous post Next.js + Cloudflare R2: Higher Performance, Lower Cost, we achieved the separation of Next.js static assets from Vercel to Cloudflare R2, leveraging edge nodes to improve loading speeds.

After further optimization, static assets and web pages are now served from the same domain, and images support responsive on-demand transformation. Lighthouse scores show a perfect 100 across all PC indicators and a 98 for mobile performance, with all other scores at 100. The performance is exceptional.

Next, we will discuss the problems exposed in the previous optimization and their corresponding solutions.

2. Problems after Separating Next.js Static Assets via R2

While separating assets improved some aspects, it introduced two new issues affecting performance and user experience:

• Increased Network Overhead: Previously, both pages and assets were on Vercel, using relative paths. After separation, assets used a separate assets prefix domain. Although modern browsers are no longer limited by the HTTP/1.1 single-domain concurrent connection limit, cross-domain requests still require extra time for DNS resolution, TCP handshakes, and TLS negotiation. This latency is particularly noticeable on mobile networks.
• Inability to Load Images Responsively: Ideally, images should be returned in sizes corresponding to the device dimensions. After using a custom Image Loader, the native Next.js image optimization functionality was lost, leading to original-sized images being returned regardless of device size, which wastes bandwidth and lowers LCP (Largest Contentful Paint) performance.

3. Secondary Exploration of Cloudflare Core Capabilities

If your domain’s DNS is hosted on Cloudflare with proxying enabled (the “orange cloud”), we can utilize two key features for deep optimization.

3.1 Images Transformations

According to Make responsive images, by enabling Transformations under the Images > Transformations menu for your domain, you can modify image dimensions on the fly. For example:

• Original path: https://my-r2-bucket-domain.com/avatar.webp

• Transformed path: https://my-r2-bucket-domain.com /cdn-cgi/image/fit=contain,width=100,blur=30/ avatar.webp

3.2 Workers Routes

According to Workers Routes, when DNS proxying is enabled, Cloudflare Workers can intercept and intervene in logic for specific URL requests.

For instance, by writing a Worker script and mounting it to a specific path in Workers Routes, all requests matching that path will return “Hello World!” directly instead of pointing to the original origin resources.

3.2.1 Click Create in the Workers & Pages page.

3.2.2 Select the Hello World Worker, name it hello, and deploy.

3.2.3 In the Workers Routes page, set up the domain wildcard and select the hello worker you just deployed.

3.2.4 Finally, visiting the configured route will show the data processed by the worker.

With these mechanisms, our goal becomes clear:

• Use Workers Routes to intercept static asset requests.
• Fetch resources from R2 within the Worker and output them.
• For image requests, call Image Resizing within the Worker for on-demand cropping.

4. Specific Steps

Our goal is to achieve static asset serving and on-demand image processing under https://your-site-domain.com/remote-assets/.

4.1 Create a Static Asset Proxy Worker and Mount to Workers Routes

1
/**
2
 * Remote Assets Proxy Worker (Final Version)
3
 * Utilizes Cloudflare Built-in Image Resizing & R2 Storage
4
 */
5

6
export default {
7
  async fetch(request, env, ctx) {
8
    const url = new URL(request.url)
9
    const { pathname, searchParams } = url
10

11
    // 1. Match custom prefix for remote assets
12
    if (pathname.startsWith(env.REMOTE_PREFIX)) {
13
      // Clean up path to ensure no double slashes during concatenation
14
      let originPath = pathname.replace(env.REMOTE_PREFIX, "")
15
      if (originPath.startsWith("/")) originPath = originPath.slice(1)
16

17
      const staticResUrl = `${env.R2_DOMAIN}/${originPath}`
18

19
      const isImage = /\.(jpg|jpeg|png|webp|avif|gif)$/i.test(originPath)
20
      const width = searchParams.get("w")
21
      const quality = searchParams.get("q") || "75"
22

23
      // 2. Trigger Image Resizing if 'w' parameter is present
24
      if (isImage && width) {
25
        return fetch(staticResUrl, {
26
          headers: request.headers,
27
          cf: {
28
            image: {
29
              width: parseInt(width),
30
              quality: parseInt(quality),
31
              format: "auto", // Auto-select best format (WebP/AVIF) based on browser support
32
              fit: "scale-down",
33
            },
34
          },
35
          cacheEverything: true,
36
          cacheTtl: 31536000,
37
        })
38
      }
39

40
      // 3. Standard asset request (JS, CSS, or non-resized images)
41
      const response = await fetch(staticResUrl, {
42
        headers: request.headers,
43
      })
44

45
      // Apply aggressive caching for hashed Next.js static assets
46
      if (pathname.includes("/_next/static/")) {
47
        const newHeaders = new Headers(response.headers)
48
        /**
49
         * 'immutable' prevents browsers from revalidating the file,
50
         * reducing server round-trips to zero for repeat visits.
51
         */
52
        newHeaders.set("Cache-Control", "public, max-age=31536000, immutable")
53
        return new Response(response.body, {
54
          status: response.status,
55
          statusText: response.statusText,
56
          headers: newHeaders,
57
        })
58
      }
59

60
      return response
61
    }
62

63
    // 4. Passthrough all other requests to the main origin (e.g., Vercel)
64
    return fetch(request)
65
  },
66
}

1
name = "remote-assets-proxy"
2
main = "src/index.js"
3
compatibility_date = "2024-12-01"
4

5
[vars]
6
R2_DOMAIN = "https://your-r2-assets-domain.com"
7
REMOTE_PREFIX = "/remote-assets/"
8

9
[[routes]]
10
pattern = "your-site-domain/remote-assets/*"
11
zone_name = "your-site-domain.com"

After completing these files, refer to the workers/wrangler documentation. In the remote-assets folder, execute:

1
pnpm dlx wrangler login
2
pnpm dlx wrangler deploy

This deploys your local worker to the cloud. Then, mount it in the Workers Route page.

Once mounted, visiting the path should return the correct static asset, for example:

• https://your-r2-bucket-domain.com/profile/avatar.webp
• https://your-site-domain.com/remote-assets/profile/avatar.webp

4.2 Modify Next.js Content

4.2.1 Modify Custom ImgLoader

1
interface LoaderProps {
2
  src: string
3
  width: number
4
  quality?: number
5
}
6

7
const ALL_SIZES = [64, 256, 640, 828, 1120, 1920]
8

9
export default function myImageLoader({ src, width, quality }: LoaderProps) {
10
  const isProd = process.env.NODE_ENV === "production"
11
  const isExternal = src.startsWith("http")
12

13
  // Local development or External images: Use original URL
14
  if (!isProd || isExternal) {
15
    return src
16
  }
17

18
  // Find the closest larger bucket size
19
  const targetWidth =
20
    ALL_SIZES.find((s) => s >= width) || ALL_SIZES[ALL_SIZES.length - 1]
21

22
  // Clean path: remove leading slash for consistency
23
  const normalizedSrc = src.startsWith("/") ? src.slice(1) : src
24

25
  // Final Production URL: Relative path to trigger Cloudflare Worker
26
  return `/remote-assets/${normalizedSrc}?w=${targetWidth}&q=${quality || 75}`
27
}

4.3.2 Finally, Update Next.js Config

1
import type { NextConfig } from "next"
2
import createNextIntlPlugin from "next-intl/plugin"
3
const isProd = process.env.NODE_ENV === "production"
4

5
const nextConfig: NextConfig = {
6
  /**
7
   * IMPORTANT: Point this to your Worker path on the MAIN domain.
8
   * This ensures all JS/CSS are served from your-site-domain.com/remote-assets/
9
   */
10
  assetPrefix: isProd
11
    ? "https://your-site-domain.com/remote-assets"
12
    : undefined,
13

14
  images: {
15
    loader: "custom",
16
    loaderFile: "./lib/image-loader.ts",
17
    deviceSizes: [640, 828, 1120, 1920],
18
    imageSizes: [64, 256],
19
  },
20
}
21

22
export default nextConfig

5. Conclusion

Through these modifications, we have implemented mechanisms that further enhance website performance:

• Domain Convergence: Static assets and pages share the same domain connection, eliminating extra DNS/TLS handshake time.
• On-demand Image Loading: Leveraging Cloudflare Image Resizing restores the responsive image capabilities lost when using a custom loader in Next.js.
• Ultimate Caching: Manually injecting immutable headers via the Worker significantly increases the secondary loading speed of static assets.