making image editable in experience editor in sitecore jss with nextjs

Question

I'm using Sitecore 10.2 in my local as headless and nextjs for FrontEnd. I'm able to open the home page on the experience editor and able to update content on Text/RichText html elements.

I'm using GraphQL in rendering.

How can I fetch image in nextjs component and at the same time should be editable from experience editor.

Thanks.

Answer 1

The JSS NextImage component is a field rendering helper component that you use to display images configured in Sitecore fields with a Next.js Image component.

The JSS NextImage component uses a custom loader that passes the src property to the next/image component, but you can provide your own loader if required with the help of the loader property. The following table contains the properties you can use to configure the NextImage component:

shows how to display a responsive, optimized, editable image: -

<NextImage field={props.fields.image} height="51" width="204" />

below example shows how to display a non-editable image where you control the resizing and editing:

<NextImage
  field={props.fields.image}
  editable={false}
  unoptimized={true}
  imageParams={{ mw: 100, mh: 50 }}
  height="50"
  width="94"/>

reference- https://doc.sitecore.com/xp/en/developers/hd/201/sitecore-headless-development/configuring-the-jss-nextimage-component.html

Answer 2

This is what I'm using, and I am able to edit my images:

interface Fields {
    data: {
        item: {
            pageTitle: {
                jsonValue: string
            },
            Text: {
                jsonValue: string
            },
            children: {
                results: RecentNewsResults[]
            }
        }
    }
}

interface RecentNewsResults {
    pageTitle: {
        jsonValue: string
    },
    Intro: {
        jsonValue: string
    },
    Date: {
        jsonValue: string
    }
    Image: {
        jsonValue: ImageField
    },
    url: {
        path: string
    }
}

export type RecentNewsProps = {
    params: { [key: string]: string };
    fields: Fields;
};

export const Default = (props: RecentNewsProps): JSX.Element => {
    ...
    {props.fields.data.item.children.results.map((child, index) => (
        <Image field={child.Image.jsonValue} />
    ))}
    ...
};

The above does not use GraphQL but that should work exactly the same in terms of rendering it out - just grab the jsonValue and use that in your Image field.

edit
Just as the NextImage component mentioned in Mahendra's answer, the Image component does also have properties to be able to resize, make editable true/false etc.