Step 1: Set up a Next.js project
If you haven’t already set up a Next.js project, you can create one using the following command:
npx create-next-app my-nextjs-project
cd my-nextjs-project
Step 2: Prepare your image
Place your image in the public directory of your Next.js project. For example, create an images folder inside public and add your image there
public/
└── images/
└── my-image.jpg
Step 3: Create a new component
Create a new React component in the pages directory. For example, let’s create ImagePage.js:
// pages/ImagePage.js
import Image from 'next/image';
function ImagePage() {
return (
<div>
<h1>My Image</h1>
<Image
src="/images/my-image.jpg" // Path to the image file
alt="My Image" // Alternative text for accessibility
width={500} // Width of the image
height={300} // Height of the image
layout="responsive" // Responsive layout
objectFit="cover" // Cover the container
priority={true} // Load the image immediately
loading="eager" // Load the image eagerly
quality={75} // Quality of the optimized image
placeholder="blur" // Use a blurred placeholder
/>
</div>
);
}
export default ImagePage;
Step 4: Run your Next.js application
Start your Next.js application:
npm run dev