Author: M Abo Bakar Aslam

Image in NextJS

Before continue this lesson, you can download starting code by using below button. in the code, you can easily run examples of this lesson.

In Next.js, images can be displayed using two common methods:

  1. Using the standard HTML <img /> element
  2. Using the Next.js <Image /> component

The <img /> element works like normal HTML, while the Next.js <Image /> component provides built-in image optimization and is generally recommended for Next.js applications.

Method 1: Using the <img /> Element

The standard HTML <img /> element can be used directly inside a Next.js component.

Step 1: Place the Image in the public Folder

Image that need to be referenced directly by a URL, should be save in public folder. Best pracice is to use public/images/

Do not include public in the image URL

Example 1

// File: page.tsx located in app/ directory
 
export default function page() {
  return (
    <div>
      <h1 className="red-heading stylish-heading" style={{ textAlign: "center", margin: "50px", padding: "20px" }}>Hello World</h1>
 
      
      <div> {/* Outer container */}
        
        {/* Image container */}
        <div 
          style={{
            width: "107px",
            height: "142px",
            border: "1px solid black",
          }}
        >
          <img src="/images/hero.png" alt="A sample logo"
            style={{
              maxWidth: "100%",
              height: "auto",
            }}
          />
        </div>
      </div>
 
    </div>
  );
}

Best Practices

Method 2: Using the Next.js <Image /> Component

Next.js provides a built-in Image component through next/image.

The Image component provides features such as image optimization, responsive image loading, lazy loading, and improved performance.

Example 2

// File: page.tsx located in app/ directory
import Image from "next/image";
 
export default function page() {
  return (
    <div>
      <h1 className="red-heading stylish-heading" style={{ textAlign: "center", margin: "50px", padding: "20px" }}>Hello World</h1>
 
      <div> {/* Outer container */}
 
        {/* Image container will control actual display area */}
        <div
          style={{
            width: "300px",
            border: "1px solid black",
          }}
        >
          <Image
            src="/images/hero.png"
            alt="Hero"
            width={107 /* just specify ratio */}
            height={142 /* just specify ratio */}
            style={{
              width: "100%",
              height: "auto",
            }}
          />
        </div>
      </div>
    </div>
  );
}

The width and height properties tell Next.js the intrinsic dimensions of the image. They also help the browser reserve appropriate space before the image loads.

Method 3: Recommended Method using <Image />

Next.js also allows local images (not PUBLIC) to be imported directly into a TypeScript file.

For example, suppose the image is stored inside src/assets/images/hero.png

You can import and display the image as follows:

// File: page.tsx located in app/ directory
import Image from "next/image";
import heroImage from "@/src/assets/images/hero.png"
 
export default function page() {
  return (
    <div>
      <h1 className="red-heading stylish-heading" style={{ textAlign: "center", margin: "50px", padding: "20px" }}>Hello World</h1>
 
      <div> {/* Outer container */}
 
        {/* Image container will control actual display area */}
        <div
          style={{
            width: "300px",
            border: "1px solid black",
          }}
        >
          <Image
            src={heroImage}
            alt="Hero"
            style={{
              width: "100%",
              height: "auto",
            }}
          />
        </div>
      </div>
    </div>
  );
}

When a local image is imported this way, Next.js can automatically determine its intrinsic width and height.