Adding Images in Next.js | Updated 2024

67

Integrating images into a Next.js application can enhance its visual appeal and user engagement. Next.js provides efficient ways to handle images, ensuring optimal performance and ease of use. Below is a step-by-step guide on how to include images in your Next.js project, using both static assets and dynamic sources.

Step-by-Step Guide for Adding Images in Next.js

Step 1: Setting Up Your Next.js Project

First, ensure you have a Next.js project set up. If you need to create a new project, you can do so by running:

npx create-next-app my-next-project
cd my-next-project

Step 2: Adding Static Images

Next.js can automatically optimize static images placed in the public directory. Here’s how to add a static image:

1. Place your image in the public/images folder. For example, public/images/logo.png.
2. Use the <Image> component from next/image to include the image in your component:

import Image from 'next/image';

function Home() {
  return (
    <div>
      <h1>Welcome to My Next.js App</h1>
      <Image
        src="/images/logo.png" // Route to the image file
        alt="Logo"
        width={500}  // Desired width
        height={300} // Desired height
        layout="responsive" // Maintains aspect ratio
      />
    </div>
  );
}

export default Home;

Step 3: Using Images from External URLs

For images hosted externally, you can also use the <Image> component but need to add the domain to the next.config.js file to allow Next.js to optimize the image:

// next.config.js
module.exports = {
  images: {
    domains: ['example.com'],
  },
}

Then, you can reference the image as follows:

import Image from 'next/image';

function Profile() {
  return (
    <div>
      <h1>Profile Page</h1>
      <Image
        src="https://example.com/profile-pic.jpg"
        alt="Profile Picture"
        width={200}
        height={200}
      />
    </div>
  );
}

export default Profile;

Step 4: Responsive and Adaptive Images

Next.js’s Image component supports various properties to make images responsive and adaptive to different screen sizes. You can use properties like layout, sizes, and srcSet to control how images are delivered based on the client’s device:

import Image from 'next/image';

function Gallery() {
  return (
    <div>
      <h1>Gallery</h1>
      <Image
        src="/images/artwork.png"
        alt="Artwork"
        layout="fill" // Uses the parent's dimensions
        objectFit="cover" // Covers the area without stretching
      />
    </div>
  );
}

export default Gallery;

Conclusion

Adding images in Next.js is straightforward, especially with the optimized <Image> component, which ensures your images are loaded efficiently and adapted to various device constraints. By following these steps, you can effectively enhance your Next.js application with visual content.

Adding Images in Next.js – FAQs