Image component and optimization in NextJS - Mini Project: Build & Apply

Image Component and Optimization in Next.js

📖 Scenario: You are building a simple Next.js webpage to display a profile picture. You want to use Next.js's built-in Image component to optimize loading and improve performance.

🎯 Goal: Create a Next.js component that shows a profile image using the Image component with proper width, height, and alt text for accessibility. Then add a configuration variable to control the image size, apply it, and finally add a layout property for responsive behavior.

📋 What You'll Learn

Use Next.js Image component from next/image

Set image src to /profile.jpg

Add alt text as Profile picture

Use a configuration variable imageSize to set width and height

Add layout="responsive" property to the Image component

💡 Why This Matters

🌍 Real World

Optimizing images is important for fast-loading websites and better user experience, especially on mobile devices.

💼 Career

Many web developer roles require knowledge of Next.js image optimization to build performant React applications.

1

Setup basic Next.js Image component

Import the Image component from next/image and create a functional component called ProfileImage that returns an Image with src="/profile.jpg", width={200}, height={200}, and alt="Profile picture".

NextJS

import Image from 'next/image'

export default function ProfileImage() {
  // Your code here
}

Need a hint?

Remember to import Image from next/image and use it inside your component with the exact props.

2

Add image size configuration variable

Inside the ProfileImage component, create a constant called imageSize and set it to 150. Then update the width and height props of the Image component to use imageSize.

NextJS

import Image from 'next/image'

export default function ProfileImage() {
  // Your code here
  return 
}

Need a hint?

Create a constant imageSize and use it for both width and height props.

3

Add responsive layout to Image component

Add the layout="responsive" property to the Image component inside ProfileImage to make the image scale responsively.

NextJS

import Image from 'next/image'

export default function ProfileImage() {
  const imageSize = 150
  // Your code here
  return 
}

Need a hint?

Add layout="responsive" inside the Image component tag.

4

Complete the ProfileImage component with optimization

Ensure the ProfileImage component uses the Image component with src="/profile.jpg", alt="Profile picture", width and height set to imageSize, and layout="responsive". This completes the optimized image setup.

NextJS

import Image from 'next/image'

export default function ProfileImage() {
  const imageSize = 150
  // Finalize the component here
  return 
}

Need a hint?

Check that all required props and the configuration variable are correctly used in the Image component.