Next.js with basePath not rendering the images with nginx deployment

Question

I have deployed my Next.js app on Ubuntu 16.0.4 with nginx.

I already have an app deployed on the root mywebsite.com which is working fine. I'm trying deploy this app with a basePath at mywebsite.com/some-keyword.

The app seems to work fine but not rendering the images.

How can I fix this?

Nginx updates:

location /some-keyword {
  proxy_pass http://localhost:8000;
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection 'upgrade';
  proxy_set_header Host $host;
  proxy_cache_bypass $http_upgrade;

  # First attempt to serve request as file, then
  # as directory, then fall back to displaying a 404.
  # try_files $uri $uri/ =404;
}

next.config.js

module.exports = {
  basePath: '/some-keyword'
};

Using next/image like so:

<Image src='/img/alert-down.png' width={550} height={320} />

What do you see in the Network tab in dev tools for the images requests? Are they 404ing? — juliomalves
– juliomalves, Commented Jun 13, 2021 at 9:58
I have also tried https://mywebsite.com/_next/image?url=params but it also didn't work — Xaarth
– Xaarth, Commented Jun 13, 2021 at 22:03
Are you using next/image component by any chance? Can you share some code of how you're setting an image? — juliomalves
– juliomalves, Commented Jun 13, 2021 at 22:05
Yeah using next/image like so <Image src='/img/alert-down.png' width={550} height={320} /> — Xaarth
– Xaarth, Commented Jun 13, 2021 at 22:07

juliomalves · Accepted Answer · 2021-06-13 22:39:13Z

1

From the Next.js Base Path docs:

When using the next/image component, you will need to add the basePath in front of src.

In your case, assuming your basePath is /some-keyword your code should look like:

<Image src='/some-keyword/img/alert-down.png' width={550} height={320} />

answered Jun 13, 2021 at 22:39

juliomalves

51.1k23 gold badges180 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

stonelar · Accepted Answer · 2023-12-08 10:45:47Z

0

In your next.config.js add the following:

images: {
    domains: ['yourdomain.com'],
    unoptimized: true,
},

This helped me resole some of my image loading problems on Ubuntu 20.04 running NGINX server.

answered Dec 8, 2023 at 10:45

stonelar

591 silver badge9 bronze badges

Collectives™ on Stack Overflow

Next.js with basePath not rendering the images with nginx deployment

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related