CODEWITHSUNDEEP
imagenext.jssharp
Uhney
Uhney

Reputation: 473

Next.js: how to apply sharp lib in Next.js

next/image changes too slow, so I see the old images and then new images appear. For this issue, I have referred below:

Next/Image's components are too slow to appear

Install sharp by running yarn add sharp in your project directory and then reboot the server by running next start again

All of them say I should use sharp.

So I have added sharp. My question is should I just install sharp and restart server? Do I not need to import sharp and do some code?

I actually tried this way below:

import Link from 'next/link';
import Image from 'next/image';

const sharp = require('sharp');

const CustomImage = ({ src, href}) => {

  const rotateImage = () => {
    sharp(src)
  }
  
useEffect(() => {
  rotateImage()
}, [])

  return (
    <Link href={href} passHref>
        <span >
          <Image src={rotateImage}/>
        </span>
    </Link>
  );
};

export default CustomImage;

But it gives me this error:

Module not found: Can't resolve 'child_process'

How do I apply sharp in Next.js?

Upvotes: 6

Views: 14689

Answers (1)

Bigyan Paudel
Bigyan Paudel

Reputation: 185

You just need to follow these two steps.

npm install sharp 

NEXT_SHARP_PATH: "/tmp/node_modules/sharp"

Worked pretty well for me.

Upvotes: 9

Related Questions