lorenzodejong / next-sanity-image

Utility for using responsive images hosted on the Sanity.io CDN with the Next.js image component.
MIT License
149 stars 20 forks source link

docs: add note on how to use without Sanity Client instance and how to use with RSC #61

Open marcusforsberg opened 1 year ago

marcusforsberg commented 1 year ago

See #42.

Not passing in the entire Sanity Client actually significantly reduced the bundle size, in my case from 131kB to 102kB for First Load JS. IMO this should probably be the default recommendation.

I went ahead and removed the npm install --save @sanity/client part from the readme since it actually isn't strictly needed and many projects will probably already have it.

This PR also adds a note on how to use with Server Components in the App Router. The default example in the readme won't work in a Server Component since the loader cannot be set in a Server Component:

Unhandled Runtime Error Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server"

The Image component, being a Client Component, needs to be wrapped in another Client component in order to pass a custom loader to it.

Thanks for your work on this package!

lime commented 11 months ago

👍 to having this explained in the readme!

Now that #62 was merged, this could be simplified further into just passing the project details, without having to wrap them in a client-like:

const imageProps = useNextSanityImage({
  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
  dataset: process.env.NEXT_PUBLIC_SANITY_DATASET
}, mySanityData.image);