Goal

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

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

Affects v2-mst-aptd-gcms-lcz-sty preset only.
Similar to #195

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 GraphCMSAsset 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 (GraphCMS 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.

References:

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