please post whole image URL here

probably you are using unsplash page url instread of image 😉

also check the output of that function with fetch - maybe it's returning object and inside object you have base64 data

Example possible output:

{
"base64": "base64:..."
}

Sou you will need to get prop or destructure getBlurData output

Here is Image URL :- https://images.unsplash.com/photo-1698338956399-bf6a91f44de5?q=80&w=1924&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"

so that's fine, now we need to check the function output 😄

I did console for fetch data which i am getting as a 'res'. I got this in console .

for this complete fetch method. For below

const buffer = await fetch(imageUrl).then(async (res) =>{
console.log('RES',res);
Buffer.from(await res.arrayBuffer())
});

I am getting undefined for buffer in console

If I'm not wrong, you should not recieve buffer, but ready base64 data 😄

try to log await res.body

For res.body , I am getting this in console

{ locked: false, state: 'readable', supportsBYOB: false }

ok

I will get to that back in a while as I got few tasks to do now

sure, will wait for response. Thanks

OK, can you share an repository URL (if it's public), or make an minimal reproduction?

https://nextjs-faq.com/minimal-reproduction-repository

Sharing github link :- https://github.com/Shivayshiva/Plaiceholder_Implement.git

Please have a look

Diving into it 😄

Ok, you forgot to return buffer from fetch 😉

Anyways I was able only to get base64 working fine, as this example is tyring to fetch data like app router in pages router 😄

also there was missing packages in this reproduction

Working package.json:

{
  "name": "shivayapp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "serve-json": "json-server --watch db.json --port 4000"
  },
  "dependencies": {
    "@plaiceholder/next": "^3.0.0",
    "json-server": "^0.17.4",
    "next": "14.0.2",
    "plaiceholder": "^3.0.0",
    "react": "^18",
    "react-dom": "^18",
    "sharp": "^0.32.6"
  },
  "devDependencies": {
    "eslint": "^8",
    "eslint-config-next": "14.0.2"
  }
}

sharp, plaiceholder and @plaiceholder/next was missing

Fixed getBlurData function:

import { getPlaiceholder } from "plaiceholder";

export default async function getBlurData(imageUrl){
  try {
    const buffer = await fetch(imageUrl).then(async (res) => { return Buffer.from(await res.arrayBuffer()) });
    const { base64 } = await getPlaiceholder(buffer);

    return base64
  } catch (err) {
    err;
  }
}

buffer was not returned

now after executing:

const imageUrl= "https://images.unsplash.com/photo-1698338956399-bf6a91f44de5?q=80&w=1924&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D";
  const base64 = await getBlurData(imageUrl);

We are getting:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAECAIAAADETxJQAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAMElEQVR4nGP48Pt/T9+EyspKBm//4Jj4FD09bQZhYWE2ZgYtDWUGAW5mQSFBUWE+ACSECdKE6sbkAAAAAElFTkSuQmCC

So our mission is completed now 😄

Hope that helps, If you will need I can make a PR with working example as you put app router code inside pages in your repository which will not work 😄

Still getting same issue. I have pushed changed code in repository. can you please check it and its working fine from your side , then please raise PR .

Did you make any changes in next.config.js

can you try using page router. I think problem is coming because of this

as far as I know this package need to be executed server-side, if you need it in pages router you should be using getServerSideProps or getStaticProps 😄

I would check your current code and fix that in anyway, but it’s up to you to make it fit your idea and project fully ;p

you created currently same route in ap and pages router - this will not work

just as error says:

you want to be using app router or pages?

oh, my bad sorry, old files 😄

ok, the biggest mistake is that you are still trying to define pages router routes like app router... I'm preparing PR to fix /home

Great, Its working now. Thanks alot. I did one mistake that i haven't used getStaticProps and was trying to write code like react code. My bad .
Anyway, it working now .

Thanks alot

no problem! happy coding 😉

You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)