0

I have a NextJS app that I am working on and I am using the new next/image component for its automatic optimizations. I am trying to set up my local development environment to be able to serve images from a local Minio service. The entire local app is running via docker-compose.

My issue is that I am getting an error from Next when it tries to download the images from Minio and I cannot figure out why.

Here is the error I am getting:

app_1  | FetchError: request to http://s3:9000/app-development/d5fc7f6b2d993e0e0eec8e2a2f4d3a50-image.jpeg failed, reason: connect ECONNREFUSED 127.0.0.1:9000
app_1  |     at ClientRequest.<anonymous> (/usr/src/app/node_modules/node-fetch/lib/index.js:1461:11)
app_1  |     at ClientRequest.emit (events.js:314:20)
app_1  |     at Socket.socketErrorListener (_http_client.js:427:9)
app_1  |     at Socket.emit (events.js:314:20)
app_1  |     at emitErrorNT (internal/streams/destroy.js:92:8)
app_1  |     at emitErrorAndCloseNT (internal/streams/destroy.js:60:3)
app_1  |     at processTicksAndRejections (internal/process/task_queues.js:84:21) {
app_1  |   type: 'system',
app_1  |   errno: 'ECONNREFUSED',
app_1  |   code: 'ECONNREFUSED'
app_1  | }

I know that I have everything set up correctly with Minio because my images display just fine if I open up a simple HTML file in my browser like this:

<!DOCTYPE html>
<html>
  <body>
    <img src="http://s3:9000/app-development/d5fc7f6b2d993e0e0eec8e2a2f4d3a50-image.jpeg" />
  </body>
</html>

I am not sure what to do next here. Any help would be greatly appreciated!

Edit: I just remembered/realized that my NextJS app is running locally via a completely separate docker/docker-compose setup. I wonder if this is an issue with the NextJS app struggling to access localhost or s3 service from within its own container...

gdvander
  • 305
  • 6
  • 15
  • if its server side rendering(ssr), then image url will be pulled from within the container and url might not be reachable. try making it client side rendering, so that image url is pulled form browser. If you are using function component then initialize the url in the useEffects() to make it client side. – Santosh Karanam Feb 01 '22 at 07:29

1 Answers1

0

you probably need to add the image provider domains that you want to be serve from the Next.js Image Optimization API in your next js project.

https://nextjs.org/docs/api-reference/next/image#domains -- To protect your application from malicious users, you must define a list of image provider domains that you want to be served from the Next.js Image Optimization API. This is configured in with the domains property in your next.config.js file, as shown below:

there is a config file in your root directory of next project named 'next.config.js'. update that file and add domains as below:

 module.exports = {
  images: {
    domains: ['s3:9000', '<other_domains>'],
  },
}

also this link could help you: nextjs image docs

Saeed Farhang
  • 1
  • 1