Nextjs: Unable to load images from static folder

Question

How can I load images in a component in Next.js? Do I have to build the project first? If yes, is there a way to load the images without building first? I cannot get this to work, no matter what I try.

Answer 1

from the docs:

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 (/).

So, first add an image to public/my-image.png and then you can reference it:

<img src="/my-image.png" /> 

I think next.js will have a watch on this directory so you won't need to restart your server every time you put something in there.