Nextjs Built In Image Optimization Complete Guide

Step 1: Setting Up a Next.js Project

First, you need to create a Next.js project. You can do this using either Create Next App or by cloning a starter repository. Here, we'll use the Create Next App method.

1. Open your terminal.
2. Run the following command to create a new Next.js project:

   npx create-next-app@latest nextjs-image-optimization
   

3. Navigate into your project directory:

   cd nextjs-image-optimization
   

Step 2: Understanding the Next.js Image Component

Next.js includes a built-in Image component that provides optimized image loading and lazy loading out of the box. To start, you need to know how to use this component.

Step 3: Adding Your First Image

Let's add an image to your project using the Next.js Image component.

1. Add an image to your public directory. For example, download any image from the internet and save it as my-image.png in the public/images folder.

   Your project structure should look something like this:

   nextjs-image-optimization/
   ├── public/
   │   └── images/
   │       └── my-image.png
   ├── styles/
   ├── pages/
   └── ...
   

2. Now, open the pages/index.js file and import the Image component from next/image.

3. Use the Image component to add and display your image:

   import Image from 'next/image';
   
   export default function Home() {
     return (
       <div>
         <h1>Welcome to My Next.js Project!</h1>
         <Image
           src="/images/my-image.png" // Path to your image
           width={500}                  // Specify width
           height={500}                 // Specify height
           alt="Descriptive alt text"   // Alt tag for accessibility
         />
       </div>
     );
   }
   

4. Run your development server:

   npm run dev
   

5. Open your browser and go to http://localhost:3000. You should see your image displayed on the page.

Step 4: Image Optimization with URLs

Next.js also optimizes images from URLs. Let's see how to do this.

1. Use an external URL for the src attribute in the Image component.

2. Modify your pages/index.js:

   import Image from 'next/image';
   
   export default function Home() {
     return (
       <div>
         <h1>Welcome to My Next.js Project!</h1>
         <Image
           src="https://example.com/my-image.jpg" // External URL
           width={500}                            // Specify width
           height={500}                           // Specify height
           alt="Descriptive alt text"             // Alt tag for accessibility
         />
       </div>
     );
   }
   

3. Note that when using URLs, you need to add the domain to the next.config.js file to allow fetching from that domain:

   // next.config.js
   module.exports = {
     images: {
       domains: ['example.com'], // Add your external image domain here
     },
   };
   

Step 5: Using Layout 'fill' for Dynamic Images

Next.js provides flexibility in how images are displayed with different layout options, one of which is 'fill'.

1. Modify your pages/index.js to use the 'fill' layout:

   import Image from 'next/image';
   import styles from '../styles/Home.module.css'; // Import your CSS file
   
   export default function Home() {
     return (
       <div className={styles.container}>
         <h1>Welcome to My Next.js Project!</h1>
         <div className={styles.imageContainer}>
           <Image
             src="/images/my-image.png" // Use local image or external URL
             layout="fill"                // Use 'fill' layout
             objectFit="cover"            // Optional: cover, contain, none
             alt="Descriptive alt text"   // Alt tag for accessibility
           />
         </div>
       </div>
     );
   }
   

2. Add some CSS to your styles/Home.module.css file to define the size of your container:

   .container {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     height: 100vh;
   }
   
   .imageContainer {
     position: relative;
     width: 500px; /* Set your container width */
     height: 500px; /* Set your container height */
   }
   

3. Refresh your browser. You should see the image filling the container as per your CSS specifications.

Step 6: Lazy Loading Images

One of the benefits of using the Next.js Image component is automatic lazy loading.

1. When the Image component is not in the viewport, it doesn’t load until the user scrolls down.
2. No additional configuration is needed for this feature.

Conclusion

You've now seen a complete example of how to use Next.js built-in Image Optimization. From adding local and external images, using different layouts, to lazy loading, Next.js makes it easy to optimize images for performance. Experiment with different layouts and configurations to see how they affect your images and performance.