Images within client-side-only loaded components aren’t optimized
psirenny opened this issue · comments
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
.
Sorry, I posted this issue in the wrong repository.