Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

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

Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7b028f6
docs: clarify that Sanity Client instance is not required
marcusforsberg Aug 1, 2023
66963e4
docs: add note regarding server/client components and bundle size
marcusforsberg Aug 1, 2023
036640e
Merge branch 'main' into sanity-client-like-docs
lorenzodejong Jul 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 42 additions & 8 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,7 @@ Utility for using images hosted on the [Sanity.io CDN](https://sanity.io) with t
npm install --save next-sanity-image
```

This library also expects you to pass in a [SanityClient instance](https://www.npmjs.com/package/@sanity/client), if you haven't installed this already:

```
npm install --save @sanity/client
```

Finally configure your next.config.js to allow loading images from the Sanity.io CDN
Configure your next.config.js to allow loading images from the Sanity.io CDN

```javascript
// next.config.js
Expand Down Expand Up @@ -165,16 +159,56 @@ const Page = ({ mySanityData }) => {
// ... see "Responsive layout"
```

## App Router / Server Components

In order to use the custom image loader with the Next.js image component, you must use client component since the loader function cannot be passed from a server component into the Image component (which is a client component). For example:

```
'use client'

const MySanityImage = ({ mySanityData }) => {
const imageProps = useNextSanityImage(configuredSanityClient, mySanityData.image);

return (
<Img {...imageProps} />
);
};
```

Note that this will cause the entire @sanity/client package to be included in your client side bundle. You can avoid this by opting to pass your project ID and dataset as a config object rather than passing in an entire Sanity Client instance:

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

As long as the Sanity Client isn't being included somewhere else in your project, this will significantly reduce the size of your client bundle compared to when providing the entire Sanity Client instance.

## API

### useNextSanityImage

React hook which handles generating a URL for each of the defined sizes in the [image sizes](https://nextjs.org/docs/basic-features/image-optimization#image-sizes) and [device sizes](https://nextjs.org/docs/basic-features/image-optimization#device-sizes) Next.js options.

#### sanityClient: [`SanityClient`](https://www.npmjs.com/package/@sanity/client)
#### sanityClient: [`SanityClient | SanityModernClientLike`](https://www.npmjs.com/package/@sanity/client)

Pass in a configured instance of the SanityClient, used for building the URL using the [@sanity/image-url builder](https://www.npmjs.com/package/@sanity/image-url).

Alternatively, you can skip passing an instance of the Sanity client and instead pass a SanityModernClientLike object containing your dataset and project ID:

```
{
config: () => ({
projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
dataset: process.env.NEXT_PUBLIC_SANITY_DATASET
})
}
```

#### image: [`SanityImageSource` | `null`](https://www.npmjs.com/package/@sanity/image-url#imagesource)

A reference to a Sanity image asset, can be retrieved by using the Sanity API. You can pass in any asset that is also supported by the [image() method of @sanity/image-url](https://www.npmjs.com/package/@sanity/image-url#imagesource). This parameter can be set to `null` in order to not load any image.
Expand Down