DEV Community: Zenith Walls

Why We Ditched the 70MB AWS SDK for Native Web Crypto in Next.js 15 Edge Routes

Zenith Walls — Tue, 18 Aug 2026 11:24:15 +0000

If you're building a modern media platform, handling large uploads is one of the quickest ways to accidentally burn serverless compute budget.

When handling 4K and 8K wallpapers on Zenith Walls, routing 10MB–30MB image files through a Next.js API route was an immediate non-starter. Serverless functions would hit memory caps, execution time would balloon, and we'd pay double the bandwidth bill (once to receive the upload from the client, and again to push it to our storage bucket).

The standard answer is simple: Generate a presigned PUT URL and let the client upload directly to object storage (Cloudflare R2 / AWS S3).

So, like every standard tutorial tells you, we reached for the official AWS SDK:

npm install @aws-sdk/client-s3 @aws-sdk/s3-request-presigner

And immediately regretted it.

The Hidden Cost of `@aws-sdk` on the Edge

If you run your Next.js application on edge runtimes (Cloudflare Workers via OpenNext or Vercel Edge), throwing the AWS SDK into your bundle brings noticeable friction:

Massive Dependency Footprint: The modular @aws-sdk is notorious for pulling in dozens of sub-packages, middleware layers, endpoint resolvers, and XML parsers. Your serverless bundle expands by several megabytes for literally one function call (getSignedUrl).
Cold Start Penalty: Larger bundles mean longer edge initialization times and sluggish cold starts.
Runtime Inconsistencies: Edge environments (like Cloudflare workerd) implement the Web Standards API. Legacy Node.js polyfills bundled inside standard SDKs frequently throw subtle runtime or streaming errors.

We asked ourselves: What is a presigned S3/R2 URL actually doing under the hood?

It’s not magic. It’s just AWS Signature Version 4 (SigV4) — which boils down to:

Creating a canonical HTTP request string.
Hashing it with SHA-256.
Generating a signing key via 4 chained HMAC-SHA256 calculations.
Appending the resulting hex signature as a query parameter.

Browsers and edge runtimes already have a lightning-fast, hardware-accelerated cryptographic engine built into global scope: crypto.subtle (Web Crypto API).

We decided to write the entire SigV4 presigning algorithm in under 45 lines of TypeScript with zero external dependencies.

Building Lightweight AWS SigV4 with Native Web Crypto

Here are the primitive helpers we built using crypto.subtle:

// app/api/upload/presigned/route.ts

async function hmacSha256(key: ArrayBuffer, data: string): Promise<ArrayBuffer> {
  const cryptoKey = await crypto.subtle.importKey(
    "raw",
    key,
    { name: "HMAC", hash: "SHA-256" },
    false,
    ["sign"]
  );
  return crypto.subtle.sign("HMAC", cryptoKey, new TextEncoder().encode(data));
}

async function sha256Hex(data: string): Promise<string> {
  const buf = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(data));
  return [...new Uint8Array(buf)].map(b => b.toString(16).padStart(2, '0')).join('');
}

function toHexString(buf: ArrayBuffer): string {
  return [...new Uint8Array(buf)].map(b => b.toString(16).padStart(2, '0')).join('');
}

No crypto imports, no Node polyfills. Works natively in Node 18+, Bun, Deno, browsers, and Cloudflare Workers.

Crafting the Presigned PUT URL

With the cryptographic primitives in place, generating the presigned PUT URL is straightforward:

async function createPresignedPutUrl(
  key: string,
  contentType: string,
  expiresSeconds = 600
): Promise<string> {
  const host = `${process.env.CLOUDFLARE_ACCOUNT_ID}.r2.cloudflarestorage.com`;
  const region = "auto";
  const service = "s3";
  const now = new Date();

  // Format timestamps: YYYYMMDD & YYYYMMDDTHHMMSSZ
  const dateStamp = now.toISOString().replace(/[-:]/g, '').slice(0, 8);
  const amzDate = now.toISOString().replace(/[-:]/g, '').replace(/\.\d+Z$/, 'Z');
  const credential = `${process.env.R2_ACCESS_KEY_ID}/${dateStamp}/${region}/${service}/aws4_request`;

  const queryParams = new URLSearchParams({
    "X-Amz-Algorithm": "AWS4-HMAC-SHA256",
    "X-Amz-Credential": credential,
    "X-Amz-Date": amzDate,
    "X-Amz-Expires": String(expiresSeconds),
    "X-Amz-SignedHeaders": "content-type;host",
  });

  // 1. SigV4 requires query parameters to be strictly sorted
  const sortedQS = [...queryParams.entries()]
    .sort(([a], [b]) => a.localeCompare(b))
    .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
    .join('&');

  const canonicalHeaders = `content-type:${contentType}\nhost:${host}\n`;
  const encodedKey = key.split('/').map(encodeURIComponent).join('/');

  // 2. Build the Canonical Request
  const canonicalRequest = [
    "PUT",
    `/${process.env.R2_BUCKET_NAME}/${encodedKey}`,
    sortedQS,
    canonicalHeaders,
    "content-type;host",
    "UNSIGNED-PAYLOAD",
  ].join('\n');

  const canonicalRequestHash = await sha256Hex(canonicalRequest);

  // 3. Build the String to Sign
  const stringToSign = [
    "AWS4-HMAC-SHA256",
    amzDate,
    `${dateStamp}/${region}/${service}/aws4_request`,
    canonicalRequestHash,
  ].join('\n');

  // 4. Derive the Signing Key (kSecret -> kDate -> kRegion -> kService -> kSigning)
  let signingKey = await hmacSha256(
    new TextEncoder().encode(`AWS4${process.env.R2_SECRET_ACCESS_KEY}`).buffer as ArrayBuffer,
    dateStamp
  );
  signingKey = await hmacSha256(signingKey, region);
  signingKey = await hmacSha256(signingKey, service);
  signingKey = await hmacSha256(signingKey, "aws4_request");

  // 5. Calculate Final Signature
  const signature = toHexString(await hmacSha256(signingKey, stringToSign));

  return `https://${host}/${process.env.R2_BUCKET_NAME}/${encodedKey}?${sortedQS}&X-Amz-Signature=${signature}`;
}

Production Guardrails: Locking Down the Route

Direct upload endpoints can be dangerous if left unrestricted. In our Next.js API route (app/api/upload/presigned/route.ts), we enforce strict zero-trust rules:

const ALLOWED_CONTENT_TYPES = new Set([
  "image/jpeg",
  "image/png",
  "image/webp",
  "image/avif",
]);

const ALLOWED_PREFIXES = new Set([
  "wallpapers/full",
  "wallpapers/thumbs",
]);

export async function POST(request: NextRequest) {
  // 1. Strict Auth Verification
  const authHeader = request.headers.get("authorization");
  const uploadSecret = process.env.UPLOAD_SECRET;

  if (!uploadSecret || authHeader !== `Bearer ${uploadSecret}`) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }

  const { filename, contentType = "image/webp", prefix = "wallpapers/full" } = await request.json();

  // 2. Prevent SVG/HTML/executable file uploads
  if (!ALLOWED_CONTENT_TYPES.has(contentType)) {
    return NextResponse.json({ error: "Disallowed content type" }, { status: 400 });
  }

  // 3. Enforce directory isolation and sanitize filename
  const targetPrefix = ALLOWED_PREFIXES.has(prefix) ? prefix : "wallpapers/full";
  const cleanFilename = filename.replace(/[^a-zA-Z0-9_.-]/g, "_");
  const key = `${targetPrefix}/${Date.now()}_${cleanFilename}`;

  // 4. Generate a 10-minute expiring URL
  const uploadUrl = await createPresignedPutUrl(key, contentType, 600);
  const publicUrl = `${process.env.R2_PUBLIC_DOMAIN}/${key}`;

  return NextResponse.json({
    uploadUrl,
    key,
    publicUrl,
    method: "PUT",
  });
}

How the Client Performs the Direct Upload

On the client side, uploading a 20MB 4K wallpaper is now completely decoupled from Next.js server resources:

async function uploadWallpaper(file: File) {
  // Step 1: Request presigned URL from Next.js API (takes ~15ms)
  const res = await fetch("/api/upload/presigned", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${ADMIN_TOKEN}`,
    },
    body: JSON.stringify({
      filename: file.name,
      contentType: file.type,
      prefix: "wallpapers/full",
    }),
  });

  const { uploadUrl, publicUrl } = await res.json();

  // Step 2: Stream raw bytes directly to Cloudflare R2
  const uploadRes = await fetch(uploadUrl, {
    method: "PUT",
    headers: {
      "Content-Type": file.type,
    },
    body: file,
  });

  if (!uploadRes.ok) {
    throw new Error("Direct R2 upload failed");
  }

  console.log("Uploaded successfully to:", publicUrl);
  return publicUrl;
}

The Results

By replacing the heavy AWS SDK with native Web Crypto:

Metric	With AWS SDK	Native Web Crypto
Dependencies Added	12+ packages	0
Route Bundle Size	~1.8 MB	< 4 KB
Edge Route Execution Time	~45ms	~2ms
Server Bandwidth Consumed	100% of upload size	0 MB (direct to R2)

Key Takeaway

Before reaching for heavyweight SDKs in modern Next.js edge applications, check what web standards already offer. Standards like crypto.subtle are fast, secure, native to modern runtimes, and keep your production builds lean and blisteringly fast.

Have you replaced heavy SDKs with native web APIs in your stack? Let me know in the comments below!

How We Optimized Next.js 15 for 70,000+ High-Res 4K Wallpapers (Without Melting the Edge)

Zenith Walls — Tue, 18 Aug 2026 11:20:46 +0000

When we set out to build Zenith Walls, we made a promise: we were going to serve pristine, uncompromised 4K and 8K wallpapers — crisp enough for ultra-wide OLED monitors — while keeping the browsing experience buttery smooth on mobile and desktop alike.

Then reality hit.

We were dealing with a catalog of over 70,000 images sourced across multiple external CDNs and our own Cloudflare R2 object storage. If you've ever thrown hundreds of uncompressed 10MB–25MB images into a Next.js grid with infinite scroll, you know exactly what happens:

Browser tabs lock up trying to decode dozens of 4K bitmaps in parallel.
next/image optimizer falls apart when upstream CDNs reject requests missing Referer headers.
Edge function CPU limits (10ms on Cloudflare Workers) choke if you try to dynamically resize raw 8K bitmaps server-side with Sharp/WASM on every request.
Layout shifts (CLS) and awful Largest Contentful Paint (LCP) destroy your Core Web Vitals.

Here is the exact blueprint of how we re-architected our image pipeline in Next.js 15 App Router, slashed our LCP, and eliminated blank-loading flashes without ballooning infrastructure bills.

1. The Trap: Why Default `<Image />` Wasn't Enough

Next.js has one of the best built-in image optimization pipelines in the industry. But once you scale to tens of thousands of high-res assets spread across distributed sources, you run into subtle edge cases.

The Upstream Hotlinking & CORP Problem

Many external image hosts protect their bandwidth by checking the HTTP Referer header. When next/image tries to optimize an image server-side, it makes a bare fetch without the browser's context. The CDN returns a 403 Forbidden or a 0-byte response, leaving the user staring at an empty card.

Even worse: when serving directly from Cloudflare R2 public buckets, direct browser fetches can get blocked by modern browser security policies enforcing Cross-Origin-Resource-Policy: same-origin.

The Edge CPU Budget Reality

In an edge deployment (like Cloudflare Workers via OpenNext or Vercel Edge), you typically have a tiny CPU execution window (10ms–50ms). Running heavyweight image transformation libraries like sharp or WASM libvips inside edge handlers on massive 8K source files will trigger immediate timeout errors.

2. The Solution: A 3-Tier Image Normalization Pipeline

Instead of passing raw database URLs directly into UI components, every single wallpaper URL flows through a strict, deterministic normalization pipeline before hitting the DOM.

Database image_url
  │
  ├── 1. getDisplayUrl(url, source)      → Strips thumbnail artifacts & normalizes CDN hostnames
  │
  ├── 2. getProxiedUrl(displayUrl, opts) → Routes through /api/proxy with source ID & dimensions
  │
  └── 3. Edge Proxy Route (/api/proxy)   → Injects headers, handles R2 bindings & edge caching

Here’s what our client-facing transform looks like:

// lib/utils.ts
export function getProxiedUrl(
  url: string,
  options?: { width?: number; quality?: number; fallback?: string | null; sourceId?: string | null }
) {
  if (!url) return "";

  // Normalize protocol-relative URLs
  if (url.startsWith('//')) url = `https:${url}`;
  if (url.startsWith('/') || url.startsWith('data:')) return url;

  let proxied = `/api/proxy?url=${encodeURIComponent(url)}`;
  if (options?.width) proxied += `&width=${options.width}`;
  if (options?.quality) proxied += `&quality=${options.quality}`;
  if (options?.fallback) proxied += `&fallback=${encodeURIComponent(options.fallback)}`;
  if (options?.sourceId) proxied += `&sid=${encodeURIComponent(options.sourceId)}`;

  return proxied;
}

And for downloads, we deliberately separate the pipeline:

// Grid display (optimized resolution for screen density)
const displaySrc = getProxiedUrl(getDisplayUrl(wallpaper.image_url, wallpaper.source), {
  width: 400,
  quality: 75
});

// Explicit download (always delivers untouched, full-resolution master)
const downloadSrc = getFullResolutionUrl(wallpaper.image_url, wallpaper.source);

3. Streaming at the Edge: 10ms CPU Friendly Proxying

Rather than buffering multi-megabyte images in memory, our /api/proxy route acts as an edge stream coordinator.

SSRF Guard & Hostname Allowlisting: Rejects any non-allowlisted domains before initiating a connection.
Cloudflare R2 Direct Binding: When an R2 URL is detected, the worker fetches the asset directly through the internal R2 bucket binding, bypassing public internet roundtrips and CORP restrictions.
Edge Streaming: The response stream is piped directly to the client with aggressive edge caching headers.

// app/api/proxy/route.ts
const CACHE_HEADERS = {
  'Cache-Control': 'public, max-age=604800, s-maxage=2592000, stale-while-revalidate=86400, immutable',
  'CDN-Cache-Control': 'public, max-age=2592000',
  'Cloudflare-CDN-Cache-Control': 'public, max-age=2592000',
  'Access-Control-Allow-Origin': '*',
  'X-Content-Type-Options': 'nosniff',
};

export async function GET(request: NextRequest) {
  const { searchParams } = new URL(request.url);
  const targetUrl = searchParams.get('url');

  if (!targetUrl || !isAllowedUrl(targetUrl)) {
    return new NextResponse('Invalid or forbidden URL', { status: 403 });
  }

  // 1. Fetch upstream with appropriate Referer to bypass CDN hotlinking
  const upstreamResponse = await fetch(targetUrl, {
    headers: {
      'User-Agent': 'ZenithWalls-ImageWorker/2.0',
      'Referer': new URL(targetUrl).origin,
      'Accept': 'image/avif,image/webp,image/*,*/*',
    },
  });

  if (!upstreamResponse.ok) {
    return getFallbackSvgResponse(upstreamResponse.status);
  }

  // 2. Stream directly back to client with 30-day immutable edge cache
  return new NextResponse(upstreamResponse.body, {
    status: 200,
    headers: {
      'Content-Type': upstreamResponse.headers.get('content-type') || 'image/jpeg',
      ...CACHE_HEADERS,
    },
  });
}

Repeat requests hit Cloudflare’s global edge cache with sub-20ms response times worldwide, completely shielding both our origin servers and upstream CDNs.

4. Zero-Network Blur Placeholders (0ms CLS)

Blur placeholders are essential to prevent jarring layout shifts (CLS), but downloading a low-quality image placeholder (LQIP) over the network for every card in a 40-item grid adds 40 extra roundtrips.

We solved this during our data indexing phase:

When a wallpaper is ingested, we compute and store its dominant_color (e.g. #1e1b4b or #0f172a).
On the client, we generate an inline 1×1 SVG data URI on the fly.

function hexToBlurDataURL(hex: string | null | undefined): string | undefined {
  if (!hex) return undefined;
  const color = hex.startsWith("#") ? hex : `#${hex}`;
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="1" height="1"><rect width="1" height="1" fill="${color}"/></svg>`;
  const b64 = typeof btoa !== "undefined"
    ? btoa(svg)
    : Buffer.from(svg).toString("base64");
  return `data:image/svg+xml;base64,${b64}`;
}

When passing this into Next.js <Image />:

<Image
  src={thumbUrl}
  alt={wallpaper.title}
  fill
  placeholder="blur"
  blurDataURL={hexToBlurDataURL(wallpaper.dominant_color)}
  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
  className="object-cover transition-opacity duration-300"
/>

Result: Zero extra network calls. The instant the card mounts, the background glows with the natural dominant palette of the wallpaper, smoothly crossfading into the crisp high-res WebP once downloaded.

5. Crushing LCP (Largest Contentful Paint)

High-res media sites often struggle with LCP because the browser downloads everything with equal priority or wastes bandwidth on background animations.

Here are the four high-impact tweaks that took our LCP down to sub-1.2s:

A. Strict Priority for Above-The-Fold Cards

We dynamically set priority and fetchPriority="high" only for the first row of visible cards (first 6 items on desktop):

<Image
  src={thumbUrl}
  alt={wallpaper.title}
  priority={index < 6}
  loading={index < 6 ? "eager" : "lazy"}
  // ...
/>

B. Deferring Heavy Background Scripts & Video

If your hero section features an ambient animated preview or canvas effects, don't initialize them on initial parse. We defer heavy libraries like hls.js by 1,500ms after component mount:

useEffect(() => {
  const timer = setTimeout(() => {
    import('hls.js').then((Hls) => {
      // Initialize video background after LCP candidate has rendered
    });
  }, 1500);

  return () => clearTimeout(timer);
}, []);

C. Preconnecting to CDN Origins

In our root layout.tsx, we add explicit <link rel="preconnect"> hints for our primary image domains, avoiding DNS resolution and TLS handshake lag during initial paint:

<link rel="preconnect" href="https://pub-b05fd36ab45911f92a719a54ce416246.r2.dev" />
<link rel="dns-prefetch" href="https://images.alphacoders.com" />

6. Masonry Grid & DOM Memory Management

Rendering hundreds of cards in an infinite masonry grid can quickly trigger memory leaks and jank during scrolling.

The Single IntersectionObserver Pattern

Instead of attaching individual IntersectionObserver instances to every single card component, we use a single shared hook at the grid container level:

function useGridEntranceObserver() {
  const observerRef = useRef<IntersectionObserver | null>(null);

  const getObserver = useCallback(() => {
    if (!observerRef.current) {
      observerRef.current = new IntersectionObserver(
        (entries) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              (entry.target as HTMLElement).classList.add("is-visible");
              observerRef.current?.unobserve(entry.target);
            }
          });
        },
        { rootMargin: "0px 0px -40px 0px", threshold: 0 }
      );
    }
    return observerRef.current;
  }, []);

  return {
    observe: (el: HTMLElement | null) => el && getObserver().observe(el),
    unobserve: (el: HTMLElement | null) => el && observerRef.current?.unobserve(el),
  };
}

On-Demand Category Loading

Instead of querying all 8 categories during server-side rendering on the homepage (which previously required 16 parallel queries fetching 120+ wallpapers), we now render only the active "Anime" tab on initial load. Other categories are fetched dynamically on tab switch with in-memory caching. This cut initial SSR data transfer by 87%.

Summary: The Key Takeaways

If you are building a media-heavy Next.js application in 2025/2026, here is what actually works in production:

Never pass raw third-party URLs directly to the client: Always funnel assets through a normalized proxy pipeline to control headers, caching, and failover behavior.
Keep the Edge lightweight: Avoid heavy WASM / Sharp resizing inside edge routes unless you are on a dedicated plan. Stream responses and let CDN edge caching do the heavy lifting.
Use 1×1 SVG Dominant Color Blur Data URLs: It gives users an immediate visual anchor with zero network overhead and eliminates layout shifts.
Be ruthless with above-the-fold prioritization: Only set priority={true} on the top 4–6 images and defer heavy video/canvas dependencies until after initial paint.
Share observers across grid items: Don't spin up dozens of IntersectionObserver listeners for infinite scroll cards.

You can see the final result live in action at Zenith Walls.

Have questions about our Next.js image architecture or Cloudflare R2 setup? Drop a comment below!