The docs on Next.js Image Optimization is outdated

[Svish]

In the docs on [Working with DAM Assets](https://github.com/episerver/content-js-sdk/blob/main/docs/11-dam-assets.md] there's a section on Next.js Image Optimization that needs to be updated.

It currently has the following code sample:

import Image from 'next/image';
import { damAssets } from '@optimizely/cms-sdk';

export default function OptimizedImage({ content }) {
  const { src } = getPreviewUtils(content);
  const { getSrcset, getAlt } = damAssets(content);

  return (
    <Image
      src={src(content.image)}
      alt={getAlt(content.image, 'Default alt text')}
      width={800}
      height={600}
      srcSet={getSrcset(content.image)}
      sizes="(max-width: 768px) 100vw, 50vw"
    />
  );
}

But if you look at the current docs on the Image component, there is no srcSet attribute. Seems the srcSet attribute is generated based on sizes now, so I'm guessing that you need to rethink how the damAssets helper works? Maybe there should be a getSizes helper that can be used instead of/in addition to the current getSrcset?

It would be helpful if the nextjs-template sample in this repo actually used the Image component.

There's also this code sample of Next.js configuration:

const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '*.cms.optimizely.com',
      },
      {
        protocol: 'https',
        hostname: '*.cmstest.optimizely.com',
      },
      {
        protocol: 'https',
        hostname: 'your-dam-instance.optimizely.com', // Replace with your hostname
      },
    ],
  },
};

It would be helpful if there was some information on where to actually find that hostname for "your-dam-instance". Is there an environment variable with this hostname, or where do we get it? When I try to open the DAM via the CMS, we just get to cmp.optimizely.com, and I doubt that cmp is "our-dam-instance"?

When looking at the nextjs-template sample, it actually has a different config:

const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '**.optimizely.com', // or add cms.optimizely.com, cmp.optimizely.com, *.cmstest.optimizely.com
        port: '',
        pathname: '/**',
      },
    ],
  },
};

This config seem to cover all the three hostnames specified in the docs with one single hostname? Is that good or bad? The Next.js docs on remotePatterns seem to say it's better to be more specific? 🤷

[marin-karamihalev]

For the component you are correct that it would be best if the example did not use srcSet and only used sizes, that will be changed soon.

Adding a getSizes helper is out of scope for this repo as it involves making styling decisions.

Providing an example of using in the nextjs-template is a great idea, one will be present in the release.

For the DAM hostname in remotePatterns, no standard pattern exists. Generally, you can find the actual hostname from your GraphQL API image URLs or ask your CMS admin.

**.optimizely.com vs specific patterns: The broad wildcard is less secure. It is best to follow the docs recommendation to list specific subdomains.