Migrate GraphCMSAsset component to use Next.js 10 Image component

[Vadorequest]

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

[Vadorequest]

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

I may even not work on it at all, considering I don't use this preset anymore and can't afford to spend the time optimizing something I don't use.

[samuelcastro]

Hey @Vadorequest are you still planning to work on this? It'd be super helpful to have it.

[Vadorequest]

I don't have time those days,not sure when

…

On Tue, Mar 2, 2021, 20:40 Samuel Castro ***@***.***> wrote: Hey @Vadorequest <https://github.com/Vadorequest> are you still planning to work on this? It'd be super helpful to have it. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#196 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA5BRYULTY5S5KQY7TXVIJLTBU5J3ANCNFSM4TGNDKGA> .

[Vadorequest]

For the record, the official Nextjs + GraphCMS example has been updated and might be a good starting point.

vercel/next.js#20772

[samuelcastro]

This is definitely a good start.