CODEWITHSUNDEEP
nginxnext.jsnextjs-image
Xaarth
Xaarth

Reputation: 1151

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

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} />

Upvotes: 1

Views: 3072

Answers (2)

stonelar
stonelar

Reputation: 49

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.

Upvotes: 0

juliomalves
juliomalves

Reputation: 50228

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} />

Upvotes: 1

Related Questions