web-developmentOctober 12, 20267 min

Next.js Image Storage on R2/Arvan: Custom Loader and Edge Cache

By Arash Latifi

Move shop images to R2/Arvan and serve via custom Next.js loader — 70% less VPS traffic and half LCP.

TL;DR: Don't keep images local — put them on R2/Arvan and use a custom loader so /_next/image comes from edge.

Why R2?

Iran VPS burns CPU for every /_next/image. R2 serves from edge.

Implementation

Checklist

[ ] R2/Arvan bucket + CDN domain
[ ] loaderFile + remotePatterns for CDN
[ ] Verify avif in Network

FAQ

Cost? R2: 10GB free, then $0.015/GB. Arvan similar.

SEO? Canonical URL stays /products/p1.jpg — only loader changes.

Diff from image optimization? This is the next step — storage + edge.

TypeScript

// src/lib/image-loader.ts
export default function loader({ src, width, quality }: { src: string; width: number; quality?: number }) {
  const q = quality || 75;
  return `https://cdn.thedevart.ir/cdn-cgi/image/width=${width},quality=${q},format=avif/${src}`;
}

The DevArt | Arash Latifi

Corporate & Personal

Medical & Real Estate

E-commerce

Cities

Next.js Image Storage on R2/Arvan: Custom Loader and Edge Cache

Why R2?

Implementation

Checklist

FAQ

Next.js Image Storage on R2/Arvan: Custom Loader and Edge Cache

Why R2?

Implementation

Checklist

FAQ