Next/image under proxy

I am using nginx to proxy the deployed next from netlify to my domain,( The reason i’m not using netlify’s custom domain is since i want to deploy a node.js in the same website under a different route (api))

    server {
         listen 80;

    location / {
        proxy_set_header   X-Forwarded-For $remote_addr;
        proxy_set_header   Host $proxy_host;
        proxy_set_header   X-Real-IP $remote_addr;
        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;

The images at work correctly, but during proxying they don’t work, I get an error when i try to visit that url
{"errorType":"TypeError","errorMessage":"Only absolute URLs are supported","trace":["TypeError: Only absolute URLs are supported"," at getNodeRequestOptions (/var/task/src/node_modules/node-fetch/lib/index.js:1305:9)"," at /var/task/src/node_modules/node-fetch/lib/index.js:1410:19"," at new Promise (<anonymous>)"," at fetch (/var/task/src/node_modules/node-fetch/lib/index.js:1407:9)"," at handler (/var/task/src/netlify/functions/next_image.js:16:27)"," at Runtime.handler (/var/task/src/node_modules/@netlify/functions/src/lib/builder.js:34:21)"," at Runtime.handleOnce (/var/runtime/Runtime.js:66:25)"]}

I deployed my app to vercel, and in my server and they work there but not with netlify, any idea why?

@jytesh hey! thanks for opening this! feel free in the future to open an issue on the plugin repo (Issues · netlify/netlify-plugin-nextjs · GitHub); we, the devs who work directly on next stuff, might see it there sooner!

hmm, not sure off this info alone. i do recognize the node-fetch error, though. the pain with diagnosing what’s going on is that we can’t really ask you for a repro of an nginx-configured site setup. the issue definitely lies in whatever this value is here: netlify-plugin-nextjs/imageFunction.js at 088f267120ec1caa04da23491d7b3c3612878a04 · netlify/netlify-plugin-nextjs · GitHub, which (yes!) is unique to our plugin/platform.

what you could do to diagnose this issue (which i know would be a giant pain):

option 1:
(if you’re not already using the CLI to build/deployyou can just run ntl link to find your existing site!)

  1. run ntl build or ntl deploy --build via the CLI
  2. go into your functions dir (defaults to netlify/functions) and find the next_image function
  3. add a log that logs out what imageUrl is
  4. ntl deploy --prod
  5. send us the logs!

option 2:

  1. npm install --save @netlify/plugin-nextjs
  2. use patch-package to patch the plugin package and add in the log of imageUrl
  3. redploy and send us the logs!

option 1 is probably preferable if you ask me :smiley:

apologies there isn’t an easier way i can think of at the moment! definitely complicated with the nginx stuff :confused: let us know!

1 Like