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} />
From the Next.js Base Path docs:
When using the
next/image
component, you will need to add thebasePath
in front ofsrc
.
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} />