<Image> Component?The next/image component enhances the standard <img> tag with built-in optimizations:
Import the component from next/image and use it in your component:
import Image from 'next/image'
export default function Page() {
return <Image src="" alt="" />
}Place your images inside the /public directory. Then reference them using a relative path from the root:
<Image
src="/profile.png"
alt="Picture of the author"
width={500}
height={500}
/>When importing images statically, Next.js automatically infers width, height, and blur placeholder:
import ProfileImage from './profile.png'
<Image
src={ProfileImage}
alt="Picture of the author"
placeholder="blur"
/>You can also use external image URLs:
<Image
src="https://s3.amazonaws.com/my-bucket/profile.png"
alt="Picture of the author"
width={500}
height={500}
/>Since remote images aren’t available at build time, you must manually provide width and height to avoid layout shifts. You can also use fill to make the image fill its parent container.
To safely use remote images, define allowed domains in next.config.ts:
// next.config.ts
import type { NextConfig } from 'next'
const config: NextConfig = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 's3.amazonaws.com',
pathname: '/my-bucket/**',
},
],
},
}
export default configTip: Be specific with remote patterns to avoid security risks.
The <Image> component in Next.js offers a modern, performance-first approach to image handling. Whether you're working with local assets or remote URLs, it ensures fast loading, visual stability, and responsive behavior across devices.