Adding images to Keystatic and Next JS

November 02, 2023

So, this post was literally to test adding images to a blog post in Keystatic.

By default, the admin puts inline images in your posts in /posts/slug-name/content/image.png but Next doesn't know how to resolve these.

All you need to do is tell Keystatic:

  1. Where to upload the images, which is /public/posts/ in our case
  2. Where to find them at runtime, which would be /posts/

And then you can do things like upload an image of your Keystatic config!

Which I'll have to do until I get some syntax highlight working in here!

Follow me on X