Migrate AirtableAsset component to use Next.js 10 Image component

[Vadorequest]

Goal

Use the newer next/Image component instead of a simple img tag within the AirtableAsset component.

The goal is to leverage the new capabilities from the Image component, such as image optimization.

Affects v2-mst-aptd-at-lcz-sty preset only.
Similar to #196

Status

On-hold until the below issues are fixed.

Issues

Awaiting real use-cases. Lack real-use feedback.

The new next/Image component relies on new properties that need to update the CMS data schema.

• width
• height
• sizes? Might not be useful in the CMS but rather in the app source code directly?
• loading? Might not be useful in the CMS but rather in the app source code directly?
• priority? Might not be useful in the CMS but rather in the app source code directly?
  ... more from https://nextjs.org/docs/api-reference/next/image

I'm concerned about the usage of the AirtableAsset component. I'm wondering if it isn't too complicated.

The main goal of this component is to display an image that's defined on the CMS (Airtable here) and to wrap it into a link to make the image clickable. Then, because the asset might not be defined on the CMS, the component had to handle default values. Then, to fit more use-cases, it had to handle overrides of asset and link.

Now, the CMS must be updated to add the required width/height properties, and other properties like sizes, loading, etc. It's becoming much more complicated and I lack feedback experience for real use-case.

The goal of this component has grown and became unclear. I wonder if it should be updated, removed or left as-it.

PR

#193

References:

• https://nextjs.org/docs/basic-features/image-optimization
• https://nextjs.org/docs/api-reference/next/image

[Vadorequest]

I won't have time to work on this until 1-3 months. But PR are welcome!

[Vadorequest]

Ideas: Use different components

• AirtableAsset: Display an image, uses next/image
• AirtableAssetLink: Display an AirtableAsset wrapped in a link

Might help simplify things a bit

[Vadorequest]

Small experience feedback, next/image is not a drop-in replacement for the <img> element at all.

It works very differently, it might break styling, the API is different and will likely confuse integrators/developers. I feel like in v10, it was still a beta component. It's gotten better in v11, but I haven't had the chance to play around with it, yet.

We used it on one of new products, and we encountered quite a few difficulties regarding background images, how to size/resize while keeping the image ratio, and more.