JAVASCRIPT

next js image

    <Image
      loader={myLoader}
      src="me.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />

how to add img in next.js

yarn add next-images

// add in next.config.js
const withImages = require('next-images')
module.exports = withImages()

//where the image should go
<img src={require('./my-image.jpg')} />
//or
import img from './my-image.jpg';
export default () => <div>
  <img src={img} />
</div>

nextjs link image

// The passHref property is required only If the child of Link 
// is a custom component that wraps an <a> tag. This is necessary 
// if you’re using libraries like styled-components. Without this, 
// the <a> tag will not have the href attribute
<Link href="/"> <!-- <Link href="/" passHref> -->
  <a>
    <Image src="/an_image.png" alt="" />
  </a>
</Link>