Next JS solve URL parameter is not allowed - loading external images

In this article, we are going to cover how you could make use of Next Image component to optimize your images.

How to use Image component

First, you need to import the Image component as below:

import Image from "next/image"

To use this in your code, you use the Image component as shown below:

<Image fill={true} src="https://livesoftwaredeveloper.com/images/hosting.png" alt={'Software Development'} style={{ objectFit: 'contain' }} />

How to configure the Image component to work well

When using Next Image component, you will need to pass in width and height or use fill=True as I have done for the image dimensions.

In this case you will notice I did not pass in the width and height attributes to the Image component. This is because I used the fill property and then using style tag I set the objectFit to contain. This is because I did not have the exact dimensions of the remote image file.

How to add remote host to next.config.js

From the above code you will notice I have used https://livesoftwaredeveloper.com as my remote image src. To help solve any errors concerning remote image sources you need to edit next.config.js file as below.

module.exports = withBundleAnalyzer({
    .
    .
    .
  images: {
    remotePatterns: [
      {
        hostname: 'livesoftwaredeveloper.com'
      },
    ],
  },
});

In the above settings, I have added livesoftwaredeveloper.com as a host of my external image source.

What causes the url parameter not allowed error

Once you have build your project and deployed to your favourite host ie vercel or netlify or cpanel like Live Software Developer Hosting, you will notice your images might not be loading and they are presenting the error below.

"url" parameter is not allowed

The main cause of this is that, whenever you deploy, you don't need to use all the files, you just need your .next folder and you will be good to go.

What happens is that, you missed to deploy the next js config file too in this case, meaning whenever next is serving your project, it is missing its settings.

How to solve the error

To solve this error you need to upload next.config.js file to the root folder of your project and then restart your project.