Responsive image loading with custom image loader for strapi images

[DanielPantle]

Hi there,

first of all thanks for your work in this repo, its a great place to find good practices to make Next.js and Strapi work together!

Regarding image loading I have a suggestion for this starter: afaik Strapi does not support loading images by a width parameter (e.g. "?w=1024") as used in the Next.js docs, but provides different urls for each breakpoint (see example). I implemented a custom image loader for Next.js to get the best fitting image for the current screen size.
I don't know much yet about the Next.js image loader and Strapi. I just want to share my current code to give you the opportunity to implement it in this starter if the implementation makes sense. Maybe there is a much better and easier solution, then I am happy to learn and adapt :)

I created a gist with my current code.

How it works: The component StrapiImage.tsx implements a custom loader. The loader returns the best fitting breakpoint image url according to the current screen size. The breakpoints can either be stored statically or in a json file that can be generated with a script from the Strapi config file.
For the placeholders to work, the Strapi extension strapi-plugin-placeholder must be installed.

Looking forward to hear your feedback!

[PaulBratslavsky]

@DanielPantle thank you I will take a look. 🙂