Careeroza

Remote Images

remotePatterns

Product photos usually live on a CDN. For safety, next/image only optimises remote images from hosts you allow in next.config.ts:

next.config.ts

next.config.ts

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
      { protocol: 'https', hostname: 'cdn.shopease.in', pathname: '/products/**' },
      { protocol: 'https', hostname: 'res.cloudinary.com' },
    ],
  },
};

export default nextConfig;
<Image
  src="https://cdn.shopease.in/products/42/front.jpg"
  alt="Redmi Note 14, front view"
  width={400}
  height={400}
/>

Unknown Host Error

Example

If a host is missing, the dev server shows an error like this:

npm run dev

Example output

Error: Invalid src prop (https://images.example.com/a.jpg) on `next/image`,
hostname "images.example.com" is not configured under images in your `next.config.ts`

Note: Never allow hostname: '**'. Anyone could then use your server to resize any image on the internet.