Understanding Next.Js for beginners
Next.Js is a full stack react framework that enables users to build superfast and extremely user-friendly react apps that render the content in advance on the server. In this article, you will learn how to use Next.JS Images .
The first thing a user sees after making a request is a fully rendered HTML page (server-side rendered).
It curbs the issue of client-side rendering in react, where the page starts building only when the user makes a request(client-side rendered) and also the case of search engine optimization for publicly available websites.
Prerequisites
Basic knowledge of HTML and CSS and good background in coding in JavaScript and React are necessary to proceed with the article.
Next.Js Image component
It is common for an application interface to use images, a great use of pictures on an application makes it very attractive, and the quality of your images determines your application’s speed or load time.
To serve images in the most optimized possible way, you should consider factors such as choosing the appropriate format for your photos, resizing the images, and compressing the images to improve the performance of your application.
The Next.Js image component <image> is synonymous with HTML <img/> tag. Still, its difference is that it is an upgrade that improves the performance with built-in automatic image optimization by resizing the uploaded image, compressing it, and maintaining good image quality.
It has a lazy-loading feature that only renders images when it reaches a calculated viewport, automatic sizing across devices, and automatic support for modern image formats. The Image component usage is the same as any other component in NextJS and can be used and re-used depending on the user’s needs.
How to use the Next.js image component
To use the image component, you will need to import the image component from ‘next/image’.
Props used in Next.js <image/> component
Like the HTML <img/> tag, the Next.Js <Image/> component takes in the following required props.
Src –This prop is used to specify the path of the image to be used. It could be a local path or a remote URL.
Alt: It is a prop that describes the image for screen readers and search engines. It also specifies an alternate text for a photo if the picture, for some reason, cannot be displayed.
The width and height – The width and height properties represent the rendered width and height in pixels, affecting how large the image appears on the screen.
Next.Js automatically determines the width and height of local images; however, when working with remote images, you are required to provide the width and height of the image because Next.Js have no access to these images during the build process.
The Next.js `<Image/>` component includes several optional props. Here are some optional props which you should take note of.
Placeholder: This specifies what occupies the image space while the image loads.
It has two possible values of empty and blur, and its default value is empty.
When set to empty, a space that occupies the same width and height as the image is shown until the original image is fully loaded. A blurred image will be displayed as a placeholder when set to blur while the original image loads.
Quality: this specifies the quality of the optimized image. Its value ranges from 0 – 100 and has a default value of 70.
Loading: This indicates the loading behaviour of the image. It has two possible values of eager and lazy and has lazy as its default value.
When loading is set to lazy, the image is rendered only when you scroll to a calculated viewport from the image. When it is set to eager, it loads the images as the image is mounted.
However, setting the loading value as ‘eager’, drastically reduces the application’s performance.
Priority: This prop tells the browser to preload the image as it is considered a high priority; lazy loading is automatically disabled for images whose priority is set to true. Its default value is false.
Conclusion
I recommend beginners to visit here; this will guide you through everything you need to know about Next.js, you can read more on frontend here.
There are also free easy to understand YouTube videos like traversy media next.js crash course and freecodecamp next.js for beginners.
