feat: add `<PrismicNextImage>`

[angeloashmore]

Types of changes

• [ ] Chore (a non-breaking change which is related to package maintenance)
• [ ] Bug fix (a non-breaking change which fixes an issue)
• [x] New feature (a non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)

Description

This PR adds a <PrismicNextImage> component that renders Prismic Image fields using Next.js' next/image component.

import { PrismicNextImage } from "@prismicio/next";

<PrismicNextImage field={doc.data.imageField} />;

It is a light wrapper around next/image designed specifically for Prismic fields. It automatically provides the field's alt text and dimensions to next/image.

Imgix URL loader (or pick your own)

It includes a custom next/image loader to optimize images using the Imgix URL API, which all images uploaded to Prismic support.

To fall back to the Next.js Image Optimization API or use the loader defined in next.config.js, pass loader={undefined}.

<PrismicNextImage field={doc.data.imageField} loader={undefined} />;

Like the base next/image component, a loader can be explicitly passed to the component.

<PrismicNextImage field={doc.data.imageField} loader={customLoader} />;

The source URL will contain any transformations via the Imgix URL (if given), even when using a loader different from the built-in one. See the next section for details.

Editing images with Imgix

Images can be edited through the image's URL parameters. This includes transformations like saturation, cropping, and blurring.

Arbitrary Imgix parameters can be provided using the imgixParams prop. See Imgix's Image URL API Reference for a full list of what's available.

// Renders grayscale images
<PrismicNextImage field={imageField} imgixParams={{ sat: -100 }} />

The src URL and each URL in srcset will contain the sat: -100 URL parameter as a result:

https://images.prismic.io/repo/image.png?width=400&sat=-100

Credit

Thanks to @asyarb for sharing code that <PrismicNextImage> is based on.

Checklist:

• [x] My change requires an update to the official documentation.
• [x] All TSDoc comments are up-to-date and new ones have been added where necessary.
• [x] All new and existing tests are passing.

🖼️

[codecov-commenter]

Codecov Report

Merging #24 (ce393c5) into main (5232b14) will not change coverage. The diff coverage is 100.00%.

@@            Coverage Diff             @@
##              main       #24    +/-   ##
==========================================
  Coverage   100.00%   100.00%            
==========================================
  Files            8        11     +3     
  Lines          528       683   +155     
  Branches        24        34    +10     
==========================================
+ Hits           528       683   +155     

Impacted Files	Coverage Δ
src/PrismicNextImage.tsx	100.00% <100.00%> (ø)
src/index.ts	100.00% <100.00%> (ø)
src/lib/__PRODUCTION__.ts	100.00% <100.00%> (ø)
src/lib/devMsg.ts	100.00% <100.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 5232b14...ce393c5. Read the comment docs.

[github-actions[bot]]

size-limit report 📦

Path	Size
dist/index.js	3.25 KB (+37.19% 🔺)
./dist/index.cjs	7.61 KB (+7.05% 🔺)