Image optimization with next/image in NextJS - Mini Project: Build & Apply

Image optimization with next/image

📖 Scenario: You are building a simple Next.js website that shows a product image. You want to use Next.js's built-in image optimization to make the page load faster and look good on all devices.

🎯 Goal: Create a Next.js component that displays an optimized image using the next/image component with proper width, height, and alt text.

📋 What You'll Learn

Import the Image component from next/image

Use the Image component to display an image from the public folder

Set the image src to /product.jpg

Set the image width to 400 and height to 300

Add an alt attribute with the text Product image

💡 Why This Matters

🌍 Real World

Optimizing images on websites improves loading speed and user experience, especially on mobile devices and slow networks.

💼 Career

Knowing how to use Next.js's image optimization is valuable for frontend developers working on performance-focused React applications.

1

Setup the Next.js component

Create a new React functional component called ProductImage that returns an empty fragment <></>.

NextJS

function ProductImage() {
  return ;
  // Your code here
}

Need a hint?

Start by writing a simple React function that returns an empty fragment.

2

Import the Image component

Add an import statement at the top to import Image from next/image.

NextJS

import Image from 'next/image';

function ProductImage() {
  return ;
  // Your code here
}

Need a hint?

Use import Image from 'next/image' to get the optimized image component.

3

Add the Image component with src, width, height, and alt

Inside the ProductImage component's return, replace the empty fragment with the Image component. Set src to "/product.jpg", width to 400, height to 300, and alt to "Product image".

NextJS

import Image from 'next/image';

function ProductImage() {
  return (
    
  );
}

Need a hint?

Use the Image component with the exact props for source, size, and alt text.

4

Export the component as default

Add a default export statement for the ProductImage component at the end of the file.

NextJS

import Image from 'next/image';

function ProductImage() {
  return (
    
  );
}

// Your code here

Need a hint?

Use export default ProductImage; to make the component usable in other files.