Menambahkan Header di Image Next.js: Panduan Lengkap

Di dunia web modern, kita sering banget ketemu gambar-gambar yang rada "pelit" - maksudnya gambar yang cuma bisa diakses kalo punya token rahasia. Misal, di sistem manajemen konten pribadi atau perpustakaan file yang super aman.

Waduh, Kenapa Sih Gabisa Langsung Muat Gambar?

Biasanya, cara muat gambar konvensional itu rada bingung kalo ketemu gambar yang butuh header khusus atau token rahasia. Next.js emang punya komponen Image keren, tapi belum tentu bisa Handle urusan autentikasi rumit gini.

Solusi Keren: Komponen Image Super Aman

Gini caranya bikin komponen yang bisa muat gambar super aman:

import Image from "next/image";
import { useState, useEffect } from "react";

const SecureImage = ({ src, token, alt, width, height }) => {
    const [secureImageSrc, setSecureImageSrc] = useState(null);

    useEffect(() => {
        const fetchSecureImage = async () => {
            try {
                const response = await fetch(src, {
                    headers: {
                        "X-Secure-File-Token": token,
                    },
                });

                if (!response.ok) {
                    throw new Error("Failed to fetch secure image");
                }

                const blob = await response.blob();
                const imageUrl = URL.createObjectURL(blob);
                setSecureImageSrc(imageUrl);

                // Clean up the object URL when the component unmounts
                return () => URL.revokeObjectURL(imageUrl);
            } catch (error) {
                console.error("Error loading secure image:", error);
            }
        };

        fetchSecureImage();
    }, [src, token]);

    if (!secureImageSrc) {
        return <div>Loading...</div>;
    }

    return (
        <Image
            src={secureImageSrc}
            alt={alt}
            width={width}
            height={height}
            unoptimized
        />
    );
};

export default SecureImage;

Gimana Cara Kerjanya?

1. Kirim Request Pake Token: Komponen ini bakal ngirim request gambar sambil bawa token rahasia.
2. Convert Gambar: Ubah gambar jadi format yang bisa ditampilkan.
3. Render Gambar: Pake Next.js Image buat ngeluarin gambarnya.

Contoh Penggunaan

Gini cara pakenya di project Next.js:

function SecureContentPage() {
    return (
        <SecureImage
            src="https://your-secure-image-url.com/image.jpg"
            token="your-secure-authentication-token"
            alt="Secure Content"
            width={500}
            height={300}
        />
    );
}

Hal-hal Penting yang Perlu Diperhatikan

• Performa: Metode ini bikin URL object temporary, jadi pake seperlunya aja.
• Error Handling: Siap-siap handle kalo jaringan lagi error atau tokennya salah.
• Keamanan: Selalu validasi token di sisi server biar gak sembarangan diakses.

Yang Bisa Ditingkatin Lagi

• Tambahin loading skeleton biar makin kece
• Bikin error state yang informatif
• Bikin interceptor autentikasi yang lebih general

Kesimpulan

Memuat gambar yang aman tuh gak perlu ribet! Dengan komponen kustom ini, lo bisa muat gambar yang butuh autentikasi tanpa ngurangin performa Next.js.

Pro Tip

Buat keamanan ekstra, pertimbangkan bikin manajemen token di sisi server yang bisa generate dan validasi token secara dinamis.