Components are the building blocks in React-based applications, and Next.js provides a powerful way to work with them. It is reusable and it contains (HTML and JSX) and behavior (JavaScript logic) of a UI element, making it easier to manage and reusable code across different parts of an application.
- Components are modular pieces of UI that can be combined to build pages in Next.js.
- They help in separating concerns by keeping structure (JSX), style (CSS), and logic organized.
- Both function components and class components can be used, but functional components with hooks are most common.
- Components can be shared across multiple pages, ensuring consistency and reducing code duplication.
Syntax:
<Component_Name />Image Component
In Next.js, There is an Image component that is an evolved from of <img/> element in HTML. It is used for performance optimization which helps in achieving the good core web vitals. It helps to boost Google ranking algorithm, hence improving the ranking of our website.
Features:
- Page Loading Faster: It supports various configuration such as resizing the Image component via props.
- Improved Performance of Website: It serves different image sizes for each device, which reduces size for smaller devices and thus improves performance.
Props of Image Component: There are the some required props
- src(required): This prop accept the path string, an URL of the image.
- width(required): This prop defines the width size of the image.
- height(required): This prop defines the height size of the image
Example: In this example, we will import the simple image in our page using the Image Component.
import Image from "next/image";
export default function ShowImage() {
return (
<div>
<Image
src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210420155809/gfg-new-logo.png"
height="100"
width="400"
alt="GFG logo served from external URL"
/>
</div>
);
}