I can't reference an image in Next.js

Please see https://nextjs.org/docs/basic-features/static-file-serving

Next.js can serve static files, like images, under a folder called public in the root directory. Files inside public can then be referenced by your code starting from the base URL (/).

At least in our project, we use require for images instead of import. Our next config looks similar to yours.

Try the following and see if it helps:

const macbookIphone = require('../../assets/images/mac-iphone.jpg');

You can then use your image as the src like this:

<img src={macbookIphone}/>