How To Dev

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 ...

Introduction In previous articles, I provided guidance on Core Web Vitals and how to optimize metrics such as LCP and INP. Now, we will continue to explore the final metric, which is CLS (Cumulative Layout Shift). Receiving data from multiple API requests at different times can easily cause sudden layout changes. Here are the solutions to address this: Explicit Dimensions : This involves declaring exact width and height for elements (especially images, videos and iframes) in HTML or CSS before they are downloaded. This helps the browser know the element size to build the layout beforehand. Without this, the browser will default to treating the element as 0px X 0px before assets are loaded. Once assets finish loading, they will suddenly expand in size, pushing surrounding content to different positions and c reating Layout Shift errors. Aspect Ratio: Instead of setting hard pixels, using Aspect Ratio is a modern solution to solve Explicit Dimensions by defining the ratio between the wi...