[Next.js] Serve Optimized Images Using the Next.js Image Component

The image component from Next.js comes with excellent performance optimizations that make it worth using. It comes with improved performance, better visual stability, faster page loads, and more!

In this lesson you’ll learn how to use this component to serve both local and remote images in your Next.js app.

 

import Image from "next/image";
// You don't need to put image into `public` directory but reocmmended
// you can put images anywhere you like
// import dog.png statically
import dog from '../dog.png';
// You can load image from remote server
// but you need to config domain in next.config.js
const TWITTER_IMG_URL = "https://pbs.twing.com/profile_iamges/xxxxxxx_400x400.jpg";

const Home = () => {
    return (
        <>
            <Image src={dog} lat="cute dog" />
            <Image src={TWITTER_IMG_URL} lat="Leader" alt="profile image" width={550} height={650} />
        </>    
    )
}

 

next.config.js

module.exports = {
    images: {
        domains: ['pbs.twimg.com']
    }
}