NextJS: Issues with loading Image

[enoah]

Hello,

I am running into issues with loading next/image components in my deployed NextJS project and was hoping someone could help me debug.

Issue: I am retrieving a number of image URLs from a third-party website (via my API, also deployed on fly) and rendering them client side using next/image component.
(e.g.: https://i.scdn.co/image/ab67616d000048519d1381ade1f4138e70fd4df3).
It seems to only partially work as a few images are usually able to be displayed but others fail to load. I am trying to render at most 30 images. I am also seeing error messages in the logs but unfortunately I am not able to decipher them fully.

Logs: It appears like for each image that fails, I get the following logs. These also appear as 500 internal server errors in the browser console.

2023-08-25T15:41:16Z app[17811eedf94389] yyz [info]- ready started server on [::]:3000, url: http://localhost:3000
2023-08-25T15:43:01Z app[3d8d9250ae9e89] yyz [info]TypeError: fetch failed
2023-08-25T15:43:01Z app[3d8d9250ae9e89] yyz [info]    at Object.fetch (node:internal/deps/undici/undici:11457:11)
2023-08-25T15:43:01Z app[3d8d9250ae9e89] yyz [info]    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
2023-08-25T15:43:01Z app[3d8d9250ae9e89] yyz [info]    at async invokeRequest (/app/node_modules/next/dist/server/lib/server-ipc/invoke-request.js:17:12)
2023-08-25T15:43:01Z app[3d8d9250ae9e89] yyz [info]    at async invokeRender (/app/node_modules/next/dist/server/lib/router-server.js:254:29)
2023-08-25T15:43:01Z app[3d8d9250ae9e89] yyz [info]    at async handleRequest (/app/node_modules/next/dist/server/lib/router-server.js:447:24)
2023-08-25T15:43:01Z app[3d8d9250ae9e89] yyz [info]    at async requestHandler (/app/node_modules/next/dist/server/lib/router-server.js:464:13)
2023-08-25T15:43:01Z app[3d8d9250ae9e89] yyz [info]    at async Server.<anonymous> (/app/node_modules/next/dist/server/lib/start-server.js:117:13) {
2023-08-25T15:43:01Z app[3d8d9250ae9e89] yyz [info]  cause: Error: connect ECONNREFUSED 127.0.0.1:40911        
2023-08-25T15:43:01Z app[3d8d9250ae9e89] yyz [info]      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16) {
2023-08-25T15:43:01Z app[3d8d9250ae9e89] yyz [info]    errno: -111,
2023-08-25T15:43:01Z app[3d8d9250ae9e89] yyz [info]    code: 'ECONNREFUSED',
2023-08-25T15:43:01Z app[3d8d9250ae9e89] yyz [info]    syscall: 'connect',
2023-08-25T15:43:01Z app[3d8d9250ae9e89] yyz [info]    address: '127.0.0.1',
2023-08-25T15:43:01Z app[3d8d9250ae9e89] yyz [info]    port: 40911
2023-08-25T15:43:01Z app[3d8d9250ae9e89] yyz [info]  }
2023-08-25T15:43:01Z app[3d8d9250ae9e89] yyz [info]}

The app also seems to crash often to due OOM error (only when trying to render the images):

2023-08-25T15:51:20.127 app[17811eedf94389] yyz [info] - ready started server on [::]:3000, url: http://localhost:3000

2023-08-25T15:52:20.514 app[17811eedf94389] yyz [info] [ 61.857323] Out of memory: Killed process 272 (next-router-wor) total-vm:42795500kB, anon-rss:62692kB, file-rss:0kB, shmem-rss:0kB, UID:0 pgtables:1264kB oom_score_adj:0

2023-08-25T15:52:20.524 proxy[17811eedf94389] yyz [error] could not make HTTP request to instance: connection closed before message completed

Attempts: I tried to research the issue and so far I have tried the following:

• Install sharp npm package
• Added swap_size_mb = 512 to my fly.toml file. Otherwise default.
• Reduce the quality prop for next/image component
• Ensure the image link directs to the lowest resolution available (64x64px; ~2kb per image)

So far, none of the above have helped. Unfortunately, I am still a novice dev and this is my first project I’ve tried deploying so I am not sure what to look out for. Any help would be much appreciated! If you require additional information or logs, please let me know.

Thank you,

[rubys]

@enoah

• Install sharp npm package
• Added swap_size_mb = 512 to my fly.toml file. Otherwise default.

You are on the right track.

I’m not an expert on Next.js, but I did run through their tutorial recently, hit the problem you are seeing with fetch and installing sharp and redeploying solved the problem for me. I’m not sure why it is not working for you. Perhaps try the tutorial (it shouldn’t take long), and deploy the results. If the tutorial works and your app still doesn’t perhaps you can identify what is different between the two?

As to memory, it seems likely that an image processing library needs to have enough memory to hold at least two copies of the image in memory at once. How big are your images?

[enoah]

First of all, thank you for your help! I was encouraged by your reply to double check that I had installed the sharp package and correctly setup the swap_size_mb. sharp package was indeed there with the latest version but I had misplaced the swap_size_mb. I moved the declaration to the top of my fly.toml file and redeployed. Success! I am assuming that OOM was indeed the culprit.

For testing, I have also deployed the app on Vercel and Render (both on free tier) and did not encounter any issues with loading the images.

Perhaps an improvement for Fly could be to add swap_size_mb = 512 by default in fly.toml file if NextJS is detected, or more prominently recommend adding it in the documentation here when next/image component is used or fails to load images.

Thank you again!