How can i use Image with suspense correctly?

[grave pumice]

Hi @coarse holly. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Hmm, I don't know enough to give you a confident answer yet. However, I can provide you with some information on how to use Suspense with Next.js.

Suspense works by wrapping a component that performs an asynchronous action (e.g., fetching data), showing fallback UI (e.g., skeleton, spinner) while it's happening, and then swapping in your component once the action completes. Here's an example from the Next.js documentation (https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming):

import { Suspense } from 'react';
import { PostFeed, Weather } from './Components';

export default function Posts() {
  return (
    <section>
      <Suspense fallback={<p>Loading feed...</p>}>
        <PostFeed />
      </Suspense>
      <Suspense fallback={<p>Loading weather...</p>}>
        <Weather />
      </Suspense>
    </section>
  );
}

For more information on Suspense and its usage, you can refer to the React Documentation (https://react.dev/reference/react/Suspense).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: