Allow useNextSanityImage to receive a client or a config

[lime]

This brings the type in line with @sanity/image-url, which accepts a plain config, or either type of client (from which it then extracts the config).

https://github.com/sanity-io/image-url/blob/v1.0.2/src/builder.ts#L44-L46

I noticed that the type was flip-flopping a bit when upgrading between next-sanity-image 4.0 → 5.0 → 6.0. This should hopefully stabilize it, so that people upgrading can keep passing whichever client argument they already have in place. :)

Related:

• 53

• 54

[lime]

Also related:

• 61

As mentioned in that PR, passing just the config can reduce bundle size, since @sanity/client gets tree-shaken out unless it's used elsewhere.

This PR would make that simpler to write. Instead of

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

you would just pass

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

[martinkz]

Will this PR be merged in at some point? I also would like to use next-sanity-image without bundling in Sanity Client.

[joshmeads]

@martinkz You don't need to, simply return SanityModernClientLike

export const sanityConfig: SanityModernClientLike = {
  config() {
    return {
      projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
      dataset: process.env.NEXT_PUBLIC_SANITY_DATASET,
    };
  },
};

const imageProps = useNextSanityImage(sanityConfig, image);

Though I agree with the PR as a whole to allow any style of client config Sanity support.

[lorenzodejong]

Thanks for the PR and sorry for the late reply! I've gotten around testing the changes, and this seems to be in line with the accepted types for the @sanity/image-url. Integrated and will release this in the next version.

[github-actions[bot]]

:tada: This PR is included in version 6.1.1 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: