Alasan Kamu Harus Menggunakan Next.js Image Component

Photo by Erik Mclean on Unsplash

Pada Oktober 2020, Next.js merilis versi 10.0.0. Fitur yang paling Saya tunggu adalah Next.js Image Component. Kenapa? Karena gambar acap kali menjadi penghambat sebuah website mencapai performa maksimalnya. Dan solusi yang ada antara berbayar, rumit, atau kombinasi keduanya, sudah bayar rumit pula.

Bisa apa sih Next.js Image Component?

• Secara otomatis memuat gambar secara lazy-loading

Mudahnya, gambar hanya akan dirender ketika area yang dilihat pengguna/viewport sudah mendekati gambar.

• Preloading gambar penting

Kita bisa memprioritaskan request gambar yang dianggap penting diawal sebelum browser melakukan render hal lain.

• Mengkoreksi ukuran gambar

Komponen ini juga secara otomatis merubah gambar menjadi ukuran yang lebih kecil sesuai dengan layar pengguna.

• Secara otomatis merubah gambar menjadi format modern

Ini yang tak kalah penting, komponen ini secara otomatis merubah file JPEG menjadi WebP secara on-the-fly, dimana bisa menurunkan ukuran gambar sekitar 30% jika browser yang digunakan pengguna sudah mendukung format WebP tentunya.

• Mendukung gambar dari berbagai sumber

Semua fitur yang disebutkan, bisa digunakan baik untuk gambar dari local server maupun dari sumber lain.

Images take up 50% of the total bytes on web pages.- Next.js

Bagaimana Penerapannya?

Ini adalah hal yang menjadi daya pikat utama Next.js bagi pengembang perangkat lunak, yaitu developer experience. Mari Kita lihat cara penerapan Next.js Image Component dibawah ini.

Berikut adalah html element untuk menampilkan gambar.

<img src="/logo.jpg" width="160" height="160" alt="Hyperjump Logo">

Kita cukup melakukan import komponennya, lalu mengganti html <img> element menjadi Image komponen seperti dibawah.

import Image from 'next/image'

<Image src="/logo.jpg" width={160} height={160} alt="Hyperjump Logo">

Bagaimana? Mudah bukan? Hanya dengan sedikit perubahan, Kita bisa mendapatkan semua fitur yang ditawarkan komponen ini. Bukan hanya itu, komponen ini juga dapat digunakan baik untuk Static Generation maupun Server-side Rendering.

Note: Sebelum ini, solusi yang dapat digunakan diantaranya Cloudinary, Akamai, dan imgix. Dan jika Anda sudah menggunakan solusi ini Anda dapat menggunakannya bersamaan dengan Next.js Image Component.

Peringatan

Untuk gambar dari eksternal URL, Anda harus memasukkan URLnya pada file next.config.js, seperti dibawah ini.

module.exports = {
  images: {
    domains: ['example.com'],
  },
}

Apa sih yang terjadi dibalik layar?

Mudahnya, Next.js Image Component mengirim request ke backend Next.js dengan mengirimkan value dari src props dan value lain yang dibutuhkan. Lalu dilakukan image processing pada backend, seperti merubah format, ukuran, kualitas, dll.

Image processing ini dilakukan dengan menggunakan modul bernama Sharp. Kemudian dikembalikan ke client untuk ditampilkan sesuai dengan kebutuhan.

Sharp High performance image processing

Kesimpulan

Next.js sungguh menyuguhkan pengalaman terbaik dalam membangun website. Masalah pengoptimalan gambar yang sebelumnya kadang membuat pengembang perangkat lunak ingin berganti profesi, dapat diselesaikan dengan sedikit merubah HTML element menjadi React Component.

Terima kasih Next.js

Hyperjump is an open-source-first company providing engineering excellence service. We aim to build and commercialize open-source tools to help companies streamline, simplify, and secure the most important aspects of its modern DevOps practices.

Hyperjump