How to integrate Cloudflare R2 Bucket with Boilerplate and Template

Managing file uploads efficiently is critical to building a scalable and user-friendly SaaS application. Fortunately, Cloudflare R2 provides a robust, cost-effective storage solution. Integrating an R2 Bucket with your Next.js SaaS boilerplate or template is a straightforward and efficient way to handle file uploads, such as user profile images.

Ready to add file storage to your SaaS application?

In this article, we will guide you through integrating Cloudflare R2 with your Next.js SaaS boilerplate ( using the SaaSBold, or you can use your own) and template. This will enable you to handle file uploads, such as user profile images quickly.

Furthermore, by leveraging Cloudflare R2, you can ensure fast, secure, and reliable storage for your application's assets. Follow the steps below for a smooth integration process.

Why Use Cloudflare R2?

• Cost-Effective: R2 offers generous free usage limits and competitive pricing for larger needs.
• S3 Compatibility: It's fully compatible with the AWS S3 API, so you can easily switch or use existing tools.
• Performance: R2 is backed by Cloudflare's global network, ensuring fast access to your files.
• Security: It includes robust security features like encryption and access controls.

With all these benefits, integrating Cloudflare R2 into your Next.js SaaS boilerplate is a smart move for your storage needs. Let's get started!

Integrating Cloudflare R2

Let's start setting up your Cloudflare R2 bucket – the secure storage foundation for your files. This process is straightforward and involves just a few simple steps.

Create a Cloudflare R2 Bucket

First, we need to set up a Cloudflare R2 bucket. Follow these steps:

1. Log in to your Cloudflare account.

2. Go to R2 -> Create Bucket.

3. Enter a name for your bucket and click on the "Create bucket" button.

Also, update this .env file variable with your Bucket name.

R2_BUCKET_NAME=YOUR_BUCKET_NAME Copy

4. Account ID: Copy the Account ID and save it to the .env file before proceeding.

After that, click on the "Manage R2 API Tokens" button.

It'll redirect you to another page to generate API token.

Generate API token

1. Create API Token: Click the "Create API Token" button on the new page.

2. Now, Assign the token name, then select Object Read & Write permissions, and choose the bucket you created.

3. Scroll down and click "Create API Token".

4. Once you click that button, you'll see the Access Key ID and the Secret Access Key. Copy the Access Key ID and the Secret Access Key, then update your .env file:

R2_ACCESS_KEY_ID=YOUR_ACCESS_KEY_ID
R2_SECRET_ACCESS_KEY=YOUR_SECRET_ACCESS_KEY Copy

Configuring CORS Policy

To enable file uploads from your application, you need to configure the CORS (Cross-Origin Resource Sharing) policy for your bucket:

1. Go to your R2 bucket's -> Settings.

2. Public R2 Bucket URL: Copy the public R2 URL and update it on the .env file for the variable.

NEXT_PUBLIC_IMAGE_URL=Your_Public_URL Copy

3. CORS Policy: Scroll down and click "Add CORS Policy" or "Edit CORS Policy".

4. Update the CORS policy with the following code and save it.

[
  {
    "AllowedOrigins": [
      "*"
    ],
    "AllowedMethods": [
      "PUT",
      "GET"
    ],
    "AllowedHeaders": [
      "*"
    ],
    "ExposeHeaders": [],
    "MaxAgeSeconds": 3000
  }
] Copy

Conclusion

That's it! You've successfully integrated Cloudflare R2 into your Next.js SaaS boilerplate. Now, you can start uploading and retrieving files using the S3 API from your application. This integration is especially useful for efficiently managing file uploads, such as user profile images.