nginxnext.jsnextjs-image

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

Solution

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