Cloudflare R2 Integration

R2 is an object storage service provided by Cloudflare that seamlessly integrates with Cloudflare's CDN service and can serve as a static file storage and distribution service.

There are many scenarios that require file storage, for example:

User avatar storage
Saving AI-generated images and videos to the cloud
Blog image storage

With these needs, administrators also require a file management backend.

The Nexty.dev template addresses these requirements by encapsulating file upload and deletion methods based on Cloudflare R2, and provides a backend for viewing and managing files.

In this chapter, we'll complete the Cloudflare R2 configuration.

Configure Cloudflare R2

Visit the Cloudflare R2 page and start creating a Bucket

Go to Bucket Settings and copy R2_BUCKET_NAME and R2_ACCOUNT_ID to environment variables

Set up custom domain

Add the configured custom domain with https:// prefix to environment variable R2_PUBLIC_URL

# .env.local or .env
 
R2_PUBLIC_URL=https://R2_PUBLIC_URL

Configure CORS Policy, which controls which origins (domains, protocols, ports) can access resources stored in your R2 Bucket. This is a security mechanism to protect your resources from unauthorized cross-origin access.

[
  {
    "AllowedOrigins": [
      "http://localhost:3000",
      "https://nexty.dev"
    ],
    "AllowedMethods": [
      "GET",
      "PUT",
      "HEAD"
    ],
    "AllowedHeaders": [
      "Content-Type",
      "Content-Length",
      "x-amz-acl"
    ],
    "ExposeHeaders": [
      "ETag"
    ],
    "MaxAgeSeconds": 3000
  }
]

Now return to the R2 homepage and start creating an API Key

Add the API Key to environment variables R2_ACCESS_KEY_ID and R2_SECRET_ACCESS_KEY

Verification

You can start the source code repository and test R2-related features in the following modules:

/dashboard/settings page to test avatar upload
/ai-demo page to test AI-generated image and video uploads
/dashboard/images page to manage AI Demo generated images and videos