4

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?

Uhney
  • 379
  • 1
  • 6
  • 23
  • 2
    You simply install `sharp`, Next.js will use it in production mode if installed. No need to import it anywhere in your codebase. – juliomalves Aug 20 '22 at 16:24

1 Answers1

4

You just need to follow these two steps.

npm install sharp 

NEXT_SHARP_PATH: "/tmp/node_modules/sharp"

Worked pretty well for me.

Bigyan Paudel
  • 125
  • 1
  • 5
  • Where are we meant to put the variable, `NEXT_SHARP_PATH`? – Osinachi Feb 05 '23 at 05:11
  • 1
    It's an environmental variable. You can use a library like `dotenv` to keep it in a file,or you can just add it before the `next` command (eg. in your `package.json` script) ... for instance: `"start": "NEXT_SHARP_PATH=\"YOUR_PATH_TO_SHARP\" next start"`. – machineghost Mar 20 '23 at 17:32
  • I tried it, but still im getting - Module not found: Can't resolve 'child_process' What could be the reason? – holla Jul 04 '23 at 15:03