How to solve image rending problems in Next.js

Nextjs is a popular framework, and yes, its optimized image rendering capabilities allow ease in image rendering, improve loading time for pages, and reduce bandwidth usage, storage space, and costs incurred in projects. But, yes, there’s a big but, yes, it has some buts... It can really be confusing and can cause a headache for developers, and even cost you some cash if you’re not careful, so let's talk about how to go about rendering images in Nextjs.

Here's how to avoid errors and images not rendering in Nextjs:

The declaration and importation

Make sure your declarations are right. Don’t use "image" where you need to use an "Image" tag. To use the image tag, you need to import this:

 //import like this 
import Image from "next/Image";

<>
//declear like this 
//Note the casing
     <Image
        src="/path/to/image.jpg"
        alt="Image description"
        width={500}
        height={500}
      />

//not like this
       <image
         src="/path/to/image.jpg"
        alt="Image description"
        width=500
        height=500
        />
   </>

Note how the props and value are passed into the tag also be mindful of the casing of the tag.

The next.config file

You can use the "img" tag, but it might not render your image unless you edit your next.config.js file. If your image is not rendering, you should create a next.config.js file and put this inside:

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  /* config options here */
  reactStrictMode: true,
  images: {
    loader: "akamai",
    path: "/", 
  },
}

module.exports = nextConfig

That should fix the problem, but another issue is:

Using two different tags in a file

Using the "img" and "Image" tags will cause confusion I learned this the hard way and paid with a headache, so decided and use only one pattern of image tags for your rendering.

Location and importation of your image

When using the "img" tag, these are the required props:

<img
        src="/path/to/image.jpg"
        alt="Image description"
        width={500}
        height={500}
      />

When using the "Image" tag, these are the required props:

<Image
        src="/profile.png"
        width={500}
        height={500}
        alt="Picture of the author"
      />

The "/" goes to the public folder but you can import your images too like:

import Image from "next/image"
import myphoto from "../public/myphoto.png"
//NOte how it is imported

//this is how it should be implimented
<Image
        src={myphoto}
        width={500}
        height={500}
        alt="Picture of the author"
      />

Conclusion

You should note that the optimized image rending is nice, but it comes at a cost because when building large projects with quite a large number of pictures you might get charged when you reach a rending threshold.

For more information and an in-depth explanation of how the Image tag works or how as a double-edged sword it also can cost you to watch this: https://youtu.be/ZKG8JBdgSos