next.config.js file -
/ @type {import('next').NextConfig} */
const nextConfig = {
images: {
domains: ['tailwindui.com'],
remotePatterns: [
{
protocol: 'https',
hostname: 'unsplash.com',
// port: '',
// pathname: '/',
},
],
},
};

module.exports = nextConfig;


page.tsx file -
import Image from 'next/image'
import React from 'react'

function page() {
return (
<div className="container">
<div className="menu">
<div className="menu_item">
<div className="menu_item-image_wrapper">
<div className="menu_item-image_inner">
<Image
src="https://unsplash.com/photos/a-woman-sitting-on-the-floor-with-her-legs-crossed-EzaNI5SrUj4?utm_content=creditShareLink&utm_medium=referral&utm_source=unsplash"
width={100}
height={100}
alt="model"
/>
Page
</div>
</div>
</div>
</div>
</div>
);
}

export default page