I need to render images on my statically built Next.js website and I would like to do it according to today's best practices.
I have seen that Next.js includes next/Image which takes care of most optimisation out of the box. Given I won't have images saved in multiple sizes, I was looking at imgix to do this for me.
How I envisioned this setup is, I dump all images in an S3 bucket (I only know the filename) which will be used by imgix. Given the filename and a width requirement, I would then leave it to next/Image to resize and render the images via its imgix loader.
Where I get confused is, the Next.js docs mention both the width and height should be known prior. How would I know the height if I only provide the width to imgix and let it do its resize magic?
I am sure I am missing something obvious here, but a pointer would be highly appreciated.
I ended up uploading to imgix at build time, which would also return me the image's dimensions. Based on those I calculated the ratio, and based on that and the desired width, I could compute the height as well.