prismicio/prismic-next

Make Prismic Preview work with `next export`

Opened this issue · 1 comments

Is your feature request related to a problem? Please describe.

When using the <PrismicPreview /> component in a NextJS application, the application can no longer be exported using next export. This is due to the usage of NextJS' <Image /> component inside the <PrismicPreview /> component. Next's image component is not compatible with exporting, see: https://nextjs.org/docs/messages/export-image-api

Describe the solution you'd like

Maybe a possible solution would be to allow passing a custom image loader to the PrismicPreview component, or even better just a simple boolean prop to opt-out of the image optimization.

Describe alternatives you've considered

  • Disabling the image optimization globally for the whole next application is not possible unfortunately.
  • Of course not exporting the application would be an option, but that would require us to change our hosting provider

Additional context

Versions used:

@prismicio/next@^0.1.3
next@^12.1.5

The error message of nextjs when exporting an application that uses <PrismicPreview />:

# next export
# ... build logs

Error: Image Optimization using Next.js' default loader is not compatible with `next export`.
  Possible solutions:
    - Use `next start` to run a server, which includes the Image Optimization API.
    - Use any provider which supports Image Optimization (like Vercel).
    - Configure a third-party loader in `next.config.js`.
    - Use the `loader` prop for `next/image`.
  Read more: https://nextjs.org/docs/messages/export-image-api
    at /Users/rvoellmy/nobank/frontend/node_modules/next/dist/export/index.js:156:23
    at async Span.traceAsyncFn (/Users/rvoellmy/nobank/frontend/node_modules/next/dist/trace/trace.js:79:20)

This issue has been labeled as a feature request since it was created using the 🙋‍♀️ Feature Request Template.

Hi there, thank you so much for your request!

Following our Maintenance Process, we will review your request and get back to you soon. If we decide to implement it, will proceed to implement the feature during the last week of the month. In the meantime, feel free to provide any details to help us better understand your request, such as:

  • The context that made you think of this feature request
  • As many details about the solution you'd like to see implemented, how it should behave, etc.
  • Any alternative solution you have considered

If you think you can implement the proposed change yourself, you're more than welcome to open a pull request implementing the new feature. Check out our quick start guide for a simple contribution process. Please note that submitting a pull request does not guarantee the feature will be merged.

- The Prismic Open-Source Team