Issue with NextJS Image Optimization in Vercel's production environment

As of now, I am developing a NextJS application that will eventually be deployed with multiple domains on Vercel. One of the key features of my application is the dynamic rendering of images. While all images display correctly in the preview environment on Vercel, upon deployment to the production environment, I encounter an issue with optimized image responses:

When attempting to load the optimized image, I receive the following error message: Bad request INVALID_IMAGE_OPTIMIZE_REQUEST

Interestingly, if I request the original (unoptimized) image, everything functions as intended. It's worth noting that I am utilizing the latest version of NextJS (14.0.4).

In an effort to troubleshoot this issue, I've experimented with various configurations for NextJS (config.nextjs.mjs), and have also made manual requests for different images (both original and optimized).

Here is a snippet from my current next.config.mjs file:

images: {
    dangerouslyAllowSVG: true,
    remotePatterns: [
        {
            hostname: 'domain1.example.com',
        },
        {
            hostname: 'domain2.example.com',
        },
    ],
},

For example, my image URL follows this format: /api/images/some-image-uuid. To render optimized images, I make use of the Image component from next/image.

typescriptnext.jsvercelnext.js13

Answer №1

Your current configuration may need some adjustments. I recommend including the protocol and port, as well as any other necessary properties. You can refer to the documentation for more details.

You might also consider adding the domain in the images object. For further information, check out this forum post.

images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "openweathermap.org",
        port: "",
      },
    ],
  },

Answer №2

After moving my images to a different s3 bucket, I made the mistake of not updating the production environment variables to reflect that change.

It was a frustrating process to figure out the issue, but once I corrected the environment variable, my images began appearing as expected.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to utilize req.query, req.params, or req.* beyond its original scope without the need to store it in a database?

Looking to streamline my code and apply the DRY pattern, I've been working on creating a helper function for my express http methods. The structure of each method is similar, but the req.params format varies between them. Here's how I attempted t ...

javascriptmysqlnode.jstypescriptexpress

Include form data into an array of objects within an Angular data source

I am struggling to add the edited form data from edit-customers-dialog.ts into an array of objects in my datasource. The form.data.value is returning correctly, but I'm facing issues with inserting it properly into the array. As a beginner in Angular ...

javascriptangulartypescriptangular-materialangular-reactive-forms

When iterating through a table, an error occurs stating that the property "rows" is not available on type HTMLElement (

Issue Error TS2339 - Property 'rows' does not exist on type HTMLElement when looping through table in Angular 7 Encountering error when trying to loop through HTML table in Angular 7 Currently working with Angular 7 and facing an error while ...

javascripttypescriptangular7

TypeScript failing to recognize dependency for LitElement

Currently, I am encountering an issue with importing two lit elements in my project, namely RootElement and CustomElement. The problem arises when trying to import CustomElement, which unlike RootElement does not show up properly on the UI. My attempt to i ...

typescriptwebpacklit

Using multiple MaterialUI components in a JavaScript page with React can pose challenges

Incorporating multiple MaterialUI Cards in my project, I encountered an issue where all the cards would expand or the select values would change simultaneously. Despite using unique key values and mapped components with distinct keys, the problem persisted ...

javascriptreactjstypescriptmaterial-uifrontend

Effortless Tree Grid Demonstration for Hilla

As someone who is just starting out with TypeScript and has minimal experience with Hilla, I kindly ask for a simple example of a Tree Grid. Please bear with me as I navigate through this learning process. I had hoped to create something as straightforwar ...

typescriptvaadinhilla

"Exploring the depths of Webpack's module

This is my first venture into creating an Angular 2 application within MVC Core, utilizing TypeScript 2.2, Angular2, and Webpack. I have been closely following the Angular Documentation, but despite referencing the latest NPM Modules, I encounter errors w ...

angulartypescriptwebpack

Error: Request to play the media was disrupted due to a pause() call

Can't seem to figure out how to resolve this error showing up in the chrome dev tools. Any thoughts on a solution? Here's the snippet of my code: const [playing, setPlaying] = useState<boolean>(false); const musicPlayers = use ...

reactjsnext.js

What is the best way to access values from dynamically added components in Svelte when using data from a REST API in a loop?

Previously, I posted this query but now I've made changes to utilize a REST service for retrieving the item list. Everything functions as expected when the data is hardcoded, however, I encounter undefined values when using data from the REST service. ...

typescriptfrontendsvelte

What is the function return type in a NextJS function?

In my project using NextJS 13, I've come across a layout.tsx file and found the following code snippet: export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html> <head /> <body&g ...

typescriptnext.js

Declaring a custom Angular Pipe

I've created a custom Pipe to filter a list of items and integrate it into my Angular/Ionic application. // pipes/my-custom-filter/my-custom-filter.ts import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'myCustomFilt ...

angulartypescriptionic-frameworkangular-pipe

Extracting data from response body in Angular after encountering 403 error during HTTP Post request

I am currently working on an Angular 9 project where I handle login functionality using HTTP post and HttpClient. In case of a failed login attempt, the server responds with HTTP status code 403 and a JSON object containing the error message that needs to ...

angulartypescriptpost

Using `publishReplay()` and `refCount()` in Angular does not behave as anticipated when dealing with subscriptions across multiple components

I am currently investigating the functionality of publishReplay in rxjs. I have encountered an example where it behaves as expected: const source = new Subject() const sourceWrapper = source.pipe( publishReplay(1), refCount() ) const subscribeTest1 = ...

angulartypescriptrxjs

The login process in Next-auth is currently halted on the /api/auth/providers endpoint when attempting to log in with the

My Next-auth logIn() function appears to be stuck endlessly on /api/auth/providers, as shown in this image. It seems that the async authorize(credentials) part is not being executed at all, as none of the console.log statements are working. /pages/api/au ...

javascriptnext.jsfrontendnext-auth

A guide on assigning a state variable to a dynamically generated component within a React application

I need to display user data from an array and have a button for each watchlist that deletes it. Although the backend is set up with a function deleteWatchlist, I am facing an issue in setting the state of the watchlistName for each watchlist after mapping ...

javascriptreactjsnext.jsstate

Having trouble getting Tailwindcss to work with Next.js - what could be causing the configuration issue?

Why is tailwind not displaying correctly in my next.js project? I'm concerned that there might be a problem with my settings. In the styles folder, I have a file called tailwind.css @tailwind base; /* Write your own custom base styles here */ /* S ...

javascriptreactjsnext.jstailwind-csscss-purge

Using the keyof operator to determine the data type of a property within a TypeScript class

According to TypeScript's documentation on the keyof operator, you can access a property of an object instance using this function below. function getProperty<T, K extends keyof T>(o: T, name: K) { return o[name]; } If you want to obtain th ...

typescript

Developed a customized checkbox component using React

I encountered an issue while creating a custom checkbox in React. I was able to successfully create it, but faced difficulty in reverting it back to its original state once checked. The values for checked and unchecked are being fetched from a JSON data. ...

reactjstypescriptreact-forms

Is there a way I can configure the map to show just four items before moving onto a second row?

I am currently working on mapping items from my mongodb cluster using tailwind CSS. The goal is to have just 4 items displayed in one row. However, I am struggling to make it start a new row for every set of 4 items. Right now, they are all getting pushed ...

next.jstailwind-css

The server configuration is experiencing issues. For additional details, refer to the server logs

After configuring Google as an authentication provider with Next Auth and setting all the necessary environment variables for both production and development modes, everything works perfectly in development. However, when trying to sign in on the productio ...

next.jsnext-auth