Mengapa Perlu Proxy Gambar?
Saat menggunakan layanan penyimpanan objek seperti Cloudflare R2 atau AWS S3, Anda mendapatkan URL publik untuk setiap file. Namun, menampilkannya langsung di frontend memiliki beberapa kekurangan: URL asli terekspos, sulit untuk mengubah provider di masa depan, dan sulit mengontrol caching. Solusinya adalah membuat proxy di aplikasi Next.js kita.
Di portofolio ini, semua gambar proyek (seperti yang Anda lihat di halaman Projects) disajikan melalui proxy. URL-nya terlihat seperti /cdn/v1/..., bukan URL R2 yang sebenarnya.
Langkah 1: Setup Route Handler
Di Next.js App Router, kita bisa membuat endpoint API dinamis dengan mudah. Buat struktur file berikut: app/cdn/v1/[...path]/route.ts. Ini akan menangkap semua permintaan ke /cdn/v1/.
Langkah 2: Kode untuk Mengambil dari R2
Di dalam route.ts, kita akan menggunakan AWS SDK (yang kompatibel dengan R2) untuk mengambil file dari bucket kita dan men-stream-nya kembali ke pengguna.
// app/cdn/v1/[...path]/route.ts
import { NextResponse } from 'next/server';
import { S3Client, GetObjectCommand } from '@aws-sdk/client-s3';
// ... (konfigurasi S3 Client)
export async function GET(req, { params }) {
const imageKey = params.path.join('/');
// Ambil objek dari R2
const s3Response = await s3Client.send(
new GetObjectCommand({ Bucket: ..., Key: imageKey })
);
// Ubah body menjadi stream dan kirim sebagai respons
const stream = s3Response.Body.transformToWebStream();
return new NextResponse(stream, {
headers: { 'Content-Type': s3Response.ContentType },
});
}
(Catatan: Kode di atas disederhanakan. Kode penuhnya juga harus menangani error dan caching headers.)
Langkah 3: Menampilkan Gambar
Sekarang, di komponen React Anda, alih-alih menggunakan URL R2, Anda cukup menggunakan path proxy:
<Image src={`/cdn/v1/${project.imageKey}`} alt="..." />
Kesimpulan
Hanya dengan satu file Route Handler, kita berhasil membuat proxy gambar yang kuat. Ini memberikan keamanan, fleksibilitas, dan kontrol penuh atas bagaimana aset kita disajikan, sebuah praktik penting untuk aplikasi web profesional mana pun.