How To Dev

Introduction imgproxy is an efficient image processing and optimization service, featuring fast processing speeds, high security and low memory footprints because it is written in Go. The prominent advantages of imgproxy include the ability to resize, crop, compress and flexibly convert image formats (such as to WebP, AVIF) via URL. Notably, this service supports secure URL signing using HMAC encryption, which prevents DDoS attacks or unauthorized modifications of image size parameters from the client side. Although the NextJS Image component already supports automatic image resizing, it presents several limitations if you choose it for large-scale deployment Resized images stored in the cache of the .next folder only exist within a single NextJS server instance, making it difficult to share the cache when scaling up to multiple instances After building the project, the cache data is lost, or if you find a way to persist these resized images, a large dataset will still consume too much...

Introduction The NextJS Image component is a powerful solution that helps automatically optimize images in web applications. The Image component has been implemented by NextJS with many superior functions that support displaying images more effectively than a standard HTML image tag, such as Automatically resizing images to fit the device Supporting modern image formats (like WebP and AVIF) Preventing Cumulative Layout Shift (CLS) by holding space for images Integrating a built-in lazy loading mechanism to speed up initial page load speeds. Detail In this article, I will provide an example of loading a product list in ecommerce pages so you can see the advantages of NextJS Image in automatic image optimization. Create file app/image/types.ts export interface Product { id : number title : string description : string price : number thumbnail : string category : string } export interface ProductResponse { products : Product [] total : number skip : number ...