Images within client-side-only loaded components aren’t optimized

[psirenny]

Images within client-side-only loaded components aren’t optimized. For example:

✅ This works

import dynamic from 'next/dynamic';
import type { NextPage } from 'next';
import ComponentWithImage from './ComponentWithImage';

export const Page: NextPage = () => (
  <main>
    <h1>Title</h1>
    <ComponentWithImage />
  </main>
);

❌ This doesn't work

import dynamic from 'next/dynamic';
import type { NextPage } from 'next';

const ClientSideComponentWithImage = dynamic(
  async () => await import('./ComponentWithImage'),
  { ssr: false }, // The problem
);

export const Page: NextPage = () => (
  <main>
    <h1>Title</h1>
    <ClientSideComponentWithImage />
  </main>
);

The .next/custom-optimized-images.nd.json manifest isn't populated with the dynamic images during next build.

[psirenny]

Sorry, I posted this issue in the wrong repository.