Plaiceholder with NextJS and Storyblok
Unanswered
Michele posted this in #help-forum
MicheleOP
Hi, does anyone know how to use Plaiceholder to blurDataURL in NextJS with storyblok?
It gave me this error "Error: async/await is not yet supported in Client Components, only Server Components". But I don't understand why and if I use in a correct way the link of dynamic image
import { AnimatePresence } from 'framer-motion'
import Image from 'next/image'
export default async function PreviewImageProject ({ blok, projectOpen, setProjectOpen }) {
const src = project.principal_image.filename
const buffer = await fetch(src).then( async (res) => {
return Buffer.from(await res.arrayBuffer());
})
const { base64 } = await getPlaiceholder(buffer);
return (
<AnimatePresence>
{projectOpen === null && (
<div>
<div>
{blok.projects.map((project, i) => {
return (
<div key={project._uid}>
<div onClick={() => setProjectOpen(project._uid)}>
<Image
src={project.principal_image.filename}
width={200}
height={200}
alt="Fotografia"
placeholder='blur'
blurDataURL={base64}
/>
</div>
</div>
)
})}
</div>
</div>
)}
</AnimatePresence>
)
}It gave me this error "Error: async/await is not yet supported in Client Components, only Server Components". But I don't understand why and if I use in a correct way the link of dynamic image