Next.js Image Component Not Displaying SVGs Correctly in SSR with Dynamic Imports
I need help solving I keep running into Quick question that's been bugging me - I'm using the Next.js Image component to render SVG images dynamically imported in my project... However, when these SVGs are rendered on the server side (SSR), they appear as blank spaces instead of displaying the SVG content. I've tried checking the console for errors but there’s nothing that indicates a rendering scenario. My current implementation looks something like this: ```javascript import dynamic from 'next/dynamic'; const DynamicSVG = dynamic(() => import('./path/to/SVGComponent')); export default function MyComponent() { return ( <div> <Image src="/path/to/image.png" alt="Some image" width={500} height={300} /> <DynamicSVG /> </div> ); } ``` Initially, I thought the scenario might be due to how I'm importing the SVG, so I verified that the path is correct. Additionally, the SVG file itself works fine when rendered statically. I also checked to ensure that the Next.js version is the latest (13.2.4) and that I have the proper loader configurations in `next.config.js` for handling SVG files: ```javascript const withImages = require('next-images'); module.exports = withImages({ fileExtensions: ['jpg', 'jpeg', 'png', 'gif', 'svg'], }); ``` Even with these checks, I still see the SVG not rendering after building for production, and I get no console errors. Is there something I'm missing regarding the SSR process with dynamic imports or how Next.js handles SVGs? Any help would be appreciated! Thanks in advance! Am I missing something obvious? Any examples would be super helpful.