Making next/image component work with chakra's responsive syntax

[coodoo]

Next v10 came with a new next/image component which provides a lot of image optimization features.

However, it doesn't work well with chakra's responsive syntax, because it requires width/height property to have no unit, let alone accepting something like ['400px', '800px', '1200px'].

Here's a quick wrapper component so that you could enjoy the best of both worlds ♥️

import { useBreakpointValue } from '@chakra-ui/core'
import Image from 'next/image'

const Comp = props => {
 const width = useBreakpointValue(props.width)?.replace('px', '') || 0
 const height = useBreakpointValue(props.height)?.replace('px', '') || 0
 return (
  <Image
   {...props}
   width={width}
   height={height}
   border='4px solid silver'
  />
 )
}

[oahmaro]

What about other BoxProps, let's say we want to add a borderRadius to the image, any idea on how to achieve that ?

[pawelphilipczyk]

I've managed to make it work using chakra factory function like this:

const ProductImage = chakra(NextImage, {
  baseStyle: { maxH: 120, maxW: 120 },
  shouldForwardProp: (prop) => ['width', 'height', 'src', 'alt'].includes(prop),
})

And use it like this for example to add border but most importantly constrain image size without distortion (overriding width with w and height with h):

<ProductImage
  src={url}
  width={120}
  height={120}
  w="auto"
  h="auto"
  borderWidth={5}
  borderStyle="solid"
/>

[selbekk]

So I spent a good minute on figuring out your code example is missing an ' after alt 😄 Anyways, great approach!

[pawelphilipczyk]

Updated, thanks for pointing it out!

[MustaphaAlioglou]

the h and w doesnt override it for some reason.

[ahmadxgani]

does nextjs with version 13 no longer support chakra factory? it is mentioned here

[rheng001]

@coodoo

When I try this I get this error

Error: Image with src "/images/logo_black.png" must use "width" and "height" properties or "layout='fill'" property.

When I have this code

<Image {...props} src="/images/logo_black.png" width={width} height={height} />

Is this the only way to make next/image have chakra responsiveness?

[marctuscher]

For me, wrapping the next Image component inside a Chakra Box worked quite well so far. You might also need position="relative" in some cases.

import { Box } from '@chakra-ui/react'
import * as React from 'react'
import NextImage from 'next/image'

export const ChakraNextImage = (props) => {
    const { src, alt, ...rest } = props
    return (
        <Box
            position="relative"
            {...rest}
        >
            <NextImage
                objectFit="cover"
                layout="fill"
                src={src}
                alt={alt}
            />
        </Box>
    )
}

I found that using <ChakraNextImage h="lg"/> produces nice full width banner components.

[vinicius507]

Tried using this solution with TypeScript and I'm getting a weird error. Here's the component:

import { Box, BoxProps } from '@chakra-ui/react'
import NextImage, { ImageProps } from 'next/image'

export type NextChakraImageProps = Omit<BoxProps, 'as'> & ImageProps

export function NextChakraImage({ src, alt, ...rest }: NextChakraImageProps) {
	return (
		<Box {...rest}>
			<NextImage objectFit="cover" layout="fill" src={src} alt={alt} />
		</Box>
	)
}

The error:

Type '{ objectFit: "cover"; layout: "fill"; src: string | StaticImport; alt: string | undefined; }' is not assignable to type 'IntrinsicAttributes & ImageProps'.

Any help would be appreciated.

[amosbastian]

You could do something like

import type { BoxProps } from "@chakra-ui/react";
import Image from "next/image";

export const ChakraNextImage = ({ src, alt, ...rest }: { src: string; alt: string } & Omit<BoxProps, "as">) => {
  return (
    <Box position="relative" {...rest}>
      <Image objectFit="cover" layout="fill" src={src} alt={alt} />
    </Box>
  );
};

[vinicius507]

You could do something like

import type { BoxProps } from "@chakra-ui/react";
import Image from "next/image";

export const ChakraNextImage = ({ src, alt, ...rest }: { src: string; alt: string } & Omit<BoxProps, "as">) => {
  return (
    <Box position="relative" {...rest}>
      <Image objectFit="cover" layout="fill" src={src} alt={alt} />
    </Box>
  );
};

It was a problem with next.js types. It was fixed not long after my question here! But thanks :)

[aspraveen]

For me, wrapping the next Image component inside a Chakra Box worked quite well so far. You might also need position="relative" in some cases.

import { Box } from '@chakra-ui/react'
import * as React from 'react'
import NextImage from 'next/image'

export const ChakraNextImage = (props) => {
    const { src, alt, ...rest } = props
    return (
        <Box
            position="relative"
            {...rest}
        >
            <NextImage
                objectFit="cover"
                layout="fill"
                src={src}
                alt={alt}
            />
        </Box>
    )
}

I found that using <ChakraNextImage h="lg"/> produces nice full width banner components.

I was able to achieve the same placing the NextImage inside

[leerob]

Related: Just saw this example of using Chakra with next/image

import { Box,chakra  } from '@chakra-ui/react'
import { shimmer } from '@/components/shimmer';
import { toBase64 } from '@/lib/toBase64';
import NextImage from "next/image";

const CoverImg = chakra(NextImage, {
    shouldForwardProp: (prop) => ['width', 'height', 'src', 'alt','quality','placeholder','blurDataURL','loader '].includes(prop),
  })

const myLoader = ({ src, width, quality }) => {
    return `${src}?w=${width}&q=${quality}`;
  };

export const BlogMedia = (props) => {
  const { src, alt, ...rest } = props
  return (
    <Box pos="relative" cursor="pointer" className="group"  {...rest}>
    <CoverImg
        w="auto"
        h="auto"  
        loader={myLoader}
        width={600}
        quality={50}
        height={384}
        placeholder="blur"
            blurDataURL={`data:image/svg+xml;base64,${toBase64(
              shimmer(60, 60),
            )}`}
        src={src}
        alt={alt}
        transition="all 0.2s"
        _groupHover={{
          transform: 'scale(1.05)',
        }}
      />
    </Box>
  )
}

Source: https://github.com/perkinsjr/jamesperkins_dev/blob/main/components/blogmedia.js

[bayswaterpc]

For all of the Typescript oriented folks Here is my stab at this. Thanks all to the thread for their contributions :)

import { Box, chakra } from "@chakra-ui/react";
import NextImage, { ImageProps, ImageLoaderProps } from "next/image";

const ChakraNextUnwrappedImage = chakra(NextImage, {
    shouldForwardProp: (prop) =>
        [
            "width",
            "height",
            "src",
            "alt",
            "quality",
            "placeholder",
            "blurDataURL",
            "loader ",
        ].includes(prop),
});

const myLoader = (resolverProps: ImageLoaderProps): string => {
    return `${resolverProps.src}?w=${resolverProps.width}&q=${resolverProps.quality}`;
};

const shimmer = (w: number, h: number) => `
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="g">
      <stop stop-color="#333" offset="20%" />
      <stop stop-color="#222" offset="50%" />
      <stop stop-color="#333" offset="70%" />
    </linearGradient>
  </defs>
  <rect width="${w}" height="${h}" fill="#333" />
  <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
  <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
</svg>`;

const toBase64 = (str: string) =>
    typeof window === "undefined"
        ? Buffer.from(str).toString("base64")
        : window.btoa(str);

export const ChakraNextImage = (props: ImageProps) => {
    const { src, alt, width, quality, height, ...rest } = props;
    return (
        <Box pos="relative" cursor="pointer" className="group" {...rest}>
            <ChakraNextUnwrappedImage
                w="auto"
                h="auto"
                loader={myLoader}
                width={width}
                quality={quality}
                height={height}
                placeholder="blur"
                blurDataURL={`data:image/svg+xml;base64,${toBase64(
                    shimmer(700, 475),
                )}`}
                src={src}
                alt={alt}
                transition="all 0.2s"
            />
        </Box>
    );
};

[emmanuelchucks]

@bayswaterpc I'll add the BoxProps also to get IntelliSense, what do you think?

function ChakraNextImage(props: ImageProps & BoxProps) {
  ...
}

[oncet]

Hoped that I could do something like <Image as={NextImage} /> but doesn't work at the moment. Wonder if would be possible to add such feature.

[raulWTW]

import { Box, BoxProps, chakra } from '@chakra-ui/react';
import NextImage, { ImageProps, ImageLoaderProps } from 'next/image';

const ChakraNextUnwrappedImage = chakra(NextImage, {
    shouldForwardProp: (prop) =>
        ['width', 'height', 'src', 'alt', 'layout', 'quality', 'placeholder', 'blurDataURL', 'loader '].includes(prop),
});

const myLoader = (resolverProps: ImageLoaderProps): string => {
    return `${resolverProps.src}?w=${resolverProps.width}&q=${resolverProps.quality}`;
};

const shimmer = (w: number, h: number) => `
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="g">
      <stop stop-color="#333" offset="20%" />
      <stop stop-color="#222" offset="50%" />
      <stop stop-color="#333" offset="70%" />
    </linearGradient>
  </defs>
  <rect width="${w}" height="${h}" fill="#333" />
  <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
  <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
</svg>`;

const toBase64 = (str: string) =>
    typeof window === 'undefined' ? Buffer.from(str).toString('base64') : window.btoa(str);

export const ChakraNextImage = (props: ImageProps & BoxProps) => {
    const { src, alt, width, quality, height, layout, objectFit, ...rest } = props;
    return (
        <Box pos="relative" cursor="pointer" className="group" {...rest}>
            <ChakraNextUnwrappedImage
                w="auto"
                h="auto"
                loader={myLoader}
                layout={layout}
                width={width}
                quality={quality}
                height={height}
                placeholder="blur"
                objectFit={objectFit}
                blurDataURL={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
                src={src}
                alt={alt}
                transition="all 0.2s"
            />
        </Box>
    );
};

I added objectfit and layout to use the different types of layout that nextjs/image offer

[Alex-ScoopTix]

This works great thanks.

It does seem like there is 7px of padding at the bottom of every image though I'm not quite sure where it comes from. Does anyone else experience that as well?

[TheThirdRace]

I went for a full rewrite of next/image component.
https://gist.github.com/TheThirdRace/7f270a786629f119b57d1b2227a4b113

• It supports pretty much everything you'd want from next/image without any of the shackles the original component suffers
• There's a big list of pros & cons at the start to explain the differences between my take and next/image
• The base styling is done through variants, but you have full control over the styles
  • You can use inline styles, but the API is not exposed (by personal choice, see below for details)
    • You could add them back by replacing forwardRef from react to forwardRef from @chakra-ui/react
• I update it every time I update NextJs (which is relatively often)
• Since it's a gist, you can simply copy/paste the code and modify it if you need (like adding inline styling for example)

Why the inline styles API is NOT exposed:

• I hate when there's a billion props I'm never gonna use that pop in intelli-sense...
• Architecture choice, an inline style makes whatever you built with it NOT reusable between project, which is a huge no-no for me
• inline styles are like using styles directly on your HTML element, it adds an atrocious amount of noise to the HTML, there's a reason most web developers have been using classnames (which is the equivalent of variant)
• While inline styles are incredibly useful for quick prototyping, I use them all the time for that, they'll become a liability over long term because they're horrible for theming, changing your whole site's look, maintenance, reusability, flexibility, etc.
  • It's true inline styles are incredibly efficient at keeping your CSS small, Tailwind being a perfect example for that, but then again, 25 KB of CSS is nothing compared to 25 KB of JS... and we ship 150+ KB of JS so the CSS is really infinitely negligible in reality...

[belkocik]

I followed ptim reply:
https://stackoverflow.com/questions/68773088/how-can-i-make-chakra-ui-components-use-next-image-to-optimize-the-photos-automa
and it doesn't work if there are breakpoints e.g.

   height={{ base: "full", lg: "720" }}
   width={{ base: "full", lg: "100%" }}

my Image component

<Image
                    src={src}
                    alt={altText}
                    height={{ base: "full", lg: "720" }}
                    width={{ base: "full", lg: "100%" }}
                    objectFit="cover"
                    border="1px"
                    borderColor={imageBorderColor}
                    placeholder="blur"
                    blurDataURL={src}
                    layout="fill"
                  />

Error

Error: Image with src "https://media.graphcms.com/output=format:webp/output=format:jpg/resize=width:1920,height:1080/xxxxxxxx" must use "width" and "height" properties or "layout='fill'" property. 

is there a way to make it work?

[samuliasmala]

EDIT: I don't recommend this approach for the reasons below. I ended up using @marctuscher's solution.

I created a component to handle breakpoints using useBreakpointValue, hope this helps:

import NextImage, { ImageProps as NextImageProps } from 'next/image';
import { chakra, Box, ImageProps, useBreakpointValue } from '@chakra-ui/react';

// Properties which are forwarded to the underlying next/image component
const FORWARDED_PROPS = [
  'width',
  'height',
  'src',
  'alt',
  'quality',
  'placeholder',
  'blurDataURL',
  'loader',
] as const;

type ForwardedProps = typeof FORWARDED_PROPS[number];

// Width and height types which may contain Chakra's responsive array or object
type Width = NonNullable<ImageProps['width']>;
type Height = NonNullable<ImageProps['height']>;
// Width and height types containing only Chakra's responsive array or object
type OnlyResponsiveWidth = Exclude<Width, string | number>;
type OnlyResponsiveHeight = Exclude<Height, string | number>;

// Combine props by taking forwarded property types from next/image and rest
// from Chakra
type CombinedImageProps = Pick<NextImageProps, ForwardedProps> &
  Omit<ImageProps, ForwardedProps>;

// Replace width and height with Chakra's responsive width/height which is
// mandatory here due to next/image requirement
type ChakraNextImageProps = Omit<CombinedImageProps, 'width' | 'height'> & {
  width: Width;
  height: Height;
};

const ChakraNextImage = chakra(NextImage, {
  baseStyle: {},
  shouldForwardProp: (prop) =>
    (FORWARDED_PROPS as ReadonlyArray<string>).includes(prop),
});

export const Image: React.FC<ChakraNextImageProps> = (props) => {
  const { width, height } = props;

  const responsiveWidth = useBreakpointValue(getResponsive(width));
  const responsiveHeight = useBreakpointValue(getResponsive(height));

  // Split properties to those for Box and for those which are forwarded
  const boxProps = { ...props };
  const imageProps = { ...props };
  for (const prop of Object.keys(props) as Array<keyof typeof props>) {
    if ((FORWARDED_PROPS as ReadonlyArray<string>).includes(prop))
      delete boxProps[prop];
    else delete imageProps[prop];
  }

  return (
    <Box {...boxProps}>
      <ChakraNextImage
        {...imageProps}
        width={isResponsive(width) ? responsiveWidth ?? width : width}
        height={isResponsive(height) ? responsiveHeight ?? height : height}
      />
    </Box>
  );
};

function isResponsive(
  val: Width | Height
): val is OnlyResponsiveWidth | OnlyResponsiveHeight {
  return typeof val == 'object' && val != null;
}

function getResponsive(val: Width | Height) {
  return isResponsive(val) ? val : [];
}

[TheThirdRace]

I might be wrong, but I don't think useBreakpointValue works in SSG or SSR because you actually don't know the client's viewport size.

Meaning, this would only work client side. If you'd use SSG or SSR, you'd get mismatch on hydratation, which forces the client to recalculate everything and negates pretty much the benefits of hydratations.

Again, I might be wrong...

[samuliasmala]

You're right, the implementation above doesn't know the client's viewport so SSG and SSR will use the base value from the responsive object or the first element from the responsive array.

There's nothing you can do for that when using SSG but when using SSR one option is to use a package like is-mobile (as prosed in the function's JSDoc) to determine the correct breakpoint and pass it as the second argument for the useBreakpointValue.

Now when thinking over this, it's probably better to apply the responsive sizing to the Box element to enable next/image optimizations.

[stardvst]

hi. for some reason some images don't work with my next + chakra image, the image is shown as broken, and alt text is displayed.

import NextImage from 'next/image'
import { chakra } from '@chakra-ui/react'

const Image = chakra(NextImage, {
	baseStyle: { maxH: 120, maxW: 120 },
	shouldForwardProp: prop =>
		['width', 'height', 'src', 'alt', 'quality', 'placeholder', 'blurDataURL', 'loader'].includes(
			prop
		)
})

export default Image

i'm creating this image with image from discogs:

<Image
    src="https://i.discogs.com/PkPElsIREfipgh2CtaUAk_baJcq2EMwCtj5gmtDcnzo/rs:fit/g:sm/q:90/h:589/w:600/czM6Ly9kaXNjb2dz/LWRhdGFiYXNlLWlt/YWdlcy9SLTkwNjc2/NTktMTU5MjY2NTk4/NS01Mzc3LmpwZWc.jpeg"
    alt={'alt'}
    width={50}
    height={50}
    title={'title'}
/>

i also tried using only next/image, but i get the same issue. using only chakra image works fine, image is displayed. i think the problem is using both together.
this is my next.config.js:

module.exports = {
    reactStrictMode: true,
    ignoreDuringBuilds: true,
    swcMinify: true,
    images: {
        domains: ['i.discogs.com'],
        formats: ['image/avif', 'image/webp']
    }
}

next & chakra versions:

"@chakra-ui/react": "^1.7.2",
"next": "12.0.4",

[princ3od]

The short version is for those who just want some basic styling (border-radius, gradient...).
I also add some more functionalites:

• Shimmer loading (skeleton)
• Fallback Url on fail to load image

import { useState } from 'react';

import NextImage, { ImageProps } from 'next/image';

import { Skeleton, Box, BoxProps } from '@chakra-ui/react';

type Props = ImageProps &
  BoxProps & {
    alt: string;
    fallbackSrc?: string;
  };

const ShimmerImage: React.FC<Props> = (props) => {
  const {
    src,
    alt,
    width,
    height,
    fallbackSrc = 'https://storage.googleapis.com/proudcity/mebanenc/uploads/2021/03/placeholder-image.png',
    bgGradient,
    priority,
    quality,
    ...rest
  } = props;
  const [isLoaded, setIsLoaded] = useState(false);
  const [isError, setIsError] = useState(false);
  const handleLoad = (result: { naturalWidth: number; naturalHeight: number }) => {
    if (result.naturalWidth === 0) setIsError(true);
    else setIsLoaded(true);
  };
  const handleError = () => setIsError(true);
  return (
    <Box width={width} height={height} position="relative" overflow="hidden" {...rest}>
      <Skeleton position="absolute" top="0" left="0" width="100%" height="100%" isLoaded={isLoaded}>
        <NextImage
          src={isError ? fallbackSrc : src}
          alt={alt}
          layout="fill"
          objectFit="cover"
          onLoadingComplete={handleLoad}
          onError={handleError}
          priority={priority}
          quality={quality}
        />
        <Box position="absolute" top="0" left="0" width="100%" height="100%" bgGradient={bgGradient} />
      </Skeleton>
    </Box>
  );
};

export default ShimmerImage;

[mountainash]

The update of @chakra-ui/next-js@2.1.5 allow you to just use import { Image } from '@chakra-ui/react' directly without a wrapper and the props listed will all be passed to the NextImage component as expected.

[moiri-gamboni]

Am I correct in thinking that I should do <Image as={NextImage} />? It does seem to take advantage of NextJS' image optimization.
The docs got me confused, because they list two different methods to make the next/link component working, once by passing to the as prop and once by importing from @chakra-ui/next-js. The latter doesn't seem to work with images though, I got React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object

[Mood93]

What did you find out?

[moiri-gamboni]

In the end I used:

import { Image } from '@chakra-ui/next-js'
import NextImage from 'next/image'
<Image as={NextImage}/>

I didn't import from @chakra-ui/react but from @chakra-ui/next-js, as the former did not accept the StaticImageData type.

[jordiup]

For anyone still looking for a solution this is what I'm doing.

/**
 * Returns the avatar URL with specified width and quality.
 *
 * This is used to gain the benefits of next/image, but allow you to pass it in directly to other elements like Chakra's Avatar
 *
 * To see a list of valid width values, see here:
 * https://github.com/vercel/next.js/blob/b9d0d6c2554bd39d74577c91a68e8723cbe77a80/packages/next/src/shared/lib/image-config.ts#L105
 *
 * @param url - The URL of the avatar image.
 * @returns The formatted avatar URL or undefined if the URL is not provided.
 */
const getAvatarURL = (url?: string) => {
	return url
		? `${
				process.env.NEXT_PUBLIC_ENV_ORIGIN
		  }/_next/image?url=${encodeURIComponent(url)}&w=${96}&q=95`
		: undefined;
};

export default getAvatarURL;

Basically, reverse engineer how NextImage works, pass it the url directly and return an optimised image URL. This can then be passed straight to your <Avatar/> component :-)