MERN

⌘K
  1. Home
  2. Docs
  3. MERN
  4. Image

Image

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
Bash

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
Bash

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;
Bash

Step 4: Run your Next.js application

Start your Next.js application:

npm run dev
Bash

Articles

How can we help?