How to make IntelliJ understand the Next.js `public` directory structure?

Question

I am using IntelliJ to edit a Next.js website.

• IntelliJ IDEA 2020.2.1
• Next.js 9.5.3-canary.23

Next.js static file serving uses a /public directory as a container for static assets, but when publishing a Next.js site, the contents of the public directory are hosted at the root of the site.

So, as shown in the linked doco, an image that exists in the codebase at /public/my-image.png is addressed by an URL path of src="/my-image.png".

This confuses IntelliJ and it shows a warning that it can't resolve the directory of the img src:

I tried marking the /public directory as a "Source root" or a "Resources root" - but that didn't make the warning go away. I also tried adding the /public directory as a "Content root", but IntelliJ doesn't want to do that because it overlaps with the root directory of the module, which is already a content root.

Is there any way to tell idea to look in the /public directory for statically referenced assets like this?

Answer 1

I've had the same problem. In my case, "Mark Directory as > Resource Root" worked well.

Before...

Right click ./public. Then Mark Directory as > Resource Root

After...

Image loads.