next-right-now
next-right-now copied to clipboard
Migrate `AirtableAsset` component to use Next.js 10 `Image` component
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 https://github.com/UnlyEd/next-right-now/issues/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
https://github.com/UnlyEd/next-right-now/pull/193
References:
- https://nextjs.org/docs/basic-features/image-optimization
- https://nextjs.org/docs/api-reference/next/image
I won't have time to work on this until 1-3 months. But PR are welcome!
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
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.