Excised snippets showcasing the use of Next Image as a ReactMarkdown renderer

about-posts.tsx

// ...

import ReactMarkdown from 'react-markdown/with-html';
import Image, { ImageLoaderProps, ImageProps } from 'next/image';
import ReactMarkdown from 'react-markdown/with-html';

// ...

// option A (a safe bet)
const renderers = {
	image: (image: ImageLoaderProps & ImageProps) => {
		return (
			<Image
				src={image.src}
				alt={image.alt}
				height={image.height}
				width={image.width}
			/>
		);
	}
};

// option B -- pass many next/image props (but will this parse...tbd)
const renderers = {
	image: (image: ImageLoaderProps & ImageProps) => {
		return (
			<Image
				src={image.src}
				alt={image.alt}
				height={image.height}
				width={image.width}
				quality={image.quality}
				loading={image.loading}
				objectFit={image.objectFit}
				priority={image.priority}
				layout={image.layout}
				objectPosition={image.objectPosition}
			/>
		);
	}
};

// Pass the renderer to the ReactMarkdown renderer (dynamic headless content via headless WordPress)
const AboutPosts = () => {
	const { query } = useRouter();
	const targetSlug = query.slug as string;
	const AboutBySlugQueryVars: AboutBySlugVariables = {
		idType: SLUG,
		id: targetSlug
	};
	const { data, loading, error } = useQuery<AboutBySlug, AboutBySlugVariables>(
		ABOUT_BY_SLUG,
		{
			variables: AboutBySlugQueryVars,
			notifyOnNetworkStatusChange: true
		}
	);

// null-checking ...

	const content =
		data && data.aboutPost !== null && data.aboutPost.content !== null
			? data.aboutPost.content
			: 'AboutPost Content returned null';
// ...
	return error ? (
		<>
			<ApolloErrorMessage
				message={error.message}
				graphQLErrors={error.graphQLErrors}
				networkError={error.networkError}
				extraInfo={error.extraInfo}
				stack={error.stack}
				name={error.name}
			/>
		</>
	) : loading && !error ? (
		<Loading />
	) : (
		<>
			{/* returned tsx ... */}
					<ReactMarkdown
						allowDangerousHtml={true}
						className={cn(
							css['tableMd'],
							' pt-8 pb-16 prose-xl max-w-2xl sm:max-w-3xl md:max-w-5xl lg:max-w-6xl text-primary-0 text-left sm:text-justify content-center mx-auto flex-row'
						)}
						renderers={renderers}
						children={content}
					/>
			{/* returned tsx cont... */}
		</>
	);
};

// passed into a dynamic pages/about/[slug].tsx file
export default AboutPosts;