How to Define Base Image Properties in Markup In NextJS

With NextJS SDK, in order to render Image, first we need to import the ImageField & Image interfaces from sitecore-jss npm package :

import { Image, ImageField} from '@sitecore-jss/sitecore-jss-nextjs';

Next we will need to bind the ImageField interface with our local variable in the component :

export type TestProps = { fields: { Image: ImageField } };

Kindly Note that the value of local variable should be the same as that of the value of Sitecore field.

Next we will need to destructure this local variable inside our React component using object destructuring syntax in JS :

const Test = ({ fields }: TestProps): JSX.Element => {};

Next to render the image without any params, we just have to render the Image Component :

<Image field={ fields?.Image } />

If we want to pass some parameters like mw, mh, we can add them as props to the component :

<Image field={fields?.Image} srcSet={[{ mw: 1152 , mh: 768 }]} />

We can also keep Images as non-editable in experience editor, by default they are editable:

<Image field={fields?.Image} editable={false} srcSet={[{ mw: 1152 , mh: 768 }]} />

That's it, this way we can use different image properties in NextJS.