Next.js Discord

Discord Forum

Plaiceholder with NextJS and Storyblok

Unanswered
Michele posted this in #help-forum
Open in Discord
Avatar
Hi, does anyone know how to use Plaiceholder to blurDataURL in NextJS with storyblok?
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

0 Replies