basePath issue with next/image on Netlify

Support
1

Hi,

We have a website build using Next.js 10.x and hosting it on Netlify. It’s a public repo https://github.com/livechat/livechat-public-docs and a netlify url is https://livechat-public-docs.netlify.app.

Our website has basePath: /docs in the next.config.js.

One of my component is using:

<Image
  src="/docs/images/livechat-platform-messaging.jpg"
  width="782"
  height="682"
/>

I added the /docs as suggested by Next.js docs. This is working locally.
However on netlify it doesn’t. I was trying to find some solutions on this forum but couldn’t.

This is the PR I created to test it: Image next testing by jakubsikora · Pull Request #1017 · livechat/livechat-public-docs · GitHub.

Test url: https://612544f120aecb0008118c5c--livechat-public-docs.netlify.app/
There is the request for the image:
https://612544f120aecb0008118c5c--livechat-public-docs.netlify.app/_next/image?url=%2Fdocs%2Fimages%2Flivechat-platform-messaging.jpg&w=1920&q=75 (404)

Could you please advise if there is a workaround for it or something I’m missing?

Thank you.

2

Hi @JakubSikoraJS

This doesn’t work because the site is published at the domain root (/) and not in /docs (noted that is where you documentation live https://developers.livechat.com/docs/.)

You might look at deploy contexts as CONTEXT is one of the built-in variables at build time, then in next.config.js you might have

basePath: process.env.CONTEXT === "production" ? "/docs" : "/",

or in netlify.toml define a variable NEXT_BASE_PATH

[context.production]
  [context.production.environment]
    NEXT_BASE_PATH = "/doc"

[context.deploy-preview.environment]
  [context.deploy-preview.environment]
    NEXT_BASE_PATH = "/"

then in next.config.js

basePath: process.env.NEXT_BASE_PATH

(Note: I haven’t tested this per se.)