Fix `cms-kontent` example `Next/Image` domain error #37188

tommarshall · 2022-05-25T14:51:19Z

Fixes the following error in the cms-kontent example by implementing
an Image component to wrap Next/Image with a custom loader.

Invalid src prop ... hostname "assets-eu-01.kc-usercontent.com" is not configured under images in your `next.config.js`

This error is affecting both the pages/index.js and
pages/posts/[slug].js routes.
Uses a custom loader rather than adding the Kontent asset domains to
next.config.js as we can transform the images using the Kontent
Delivery API directly rather than delegating this to the Next app web
server.

Ref:

Documentation / Examples

Make sure the linting passes by running yarn lint

* Fixes the following error in the `cms-kontent` example by implementing an `Image` component to wrap `Next/Image` with a custom loader. ``` Invalid src prop ... hostname "assets-eu-01.kc-usercontent.com" is not configured under images in your `next.config.js` ``` * This error is affecting both the `pages/index.js` and `pages/posts/[slug].js` routes. * Uses a custom loader rather than adding the Kontent asset domains to `next.config.js` as we can transform the images using the Kontent Delivery API directly rather than delegating this to the Next app web server. Ref: * https://nextjs.org/docs/messages/next-image-unconfigured-host * https://nextjs.org/docs/basic-features/image-optimization * https://meeg.dev/blog/using-the-next-image-component-with-kentico-kontent-assets * https://github.com/Kentico/kontent-starter-corporate-next-js/blob/b7c9ef588c2e316557095e3160e712a1220601f5/components/Image.js * https://kontent.ai/learn/reference/image-transformation/

tommarshall · 2022-05-25T14:52:24Z

Note:

This implementation of the Image component assumes the latest v11
Kontent Delivery SDK, so should not be merged until the v11 upgrade
has been, ref: Update cms-kontent example SDK package to v11 #37187
If the v11 upgrade gets stalled then updating this for v9 is
straightforward. We just need to replace transformImageUrl with
new ImageUrlBuilder and use ImageCompressionEnum.Lossless as the
withCompression arg in the Image component, ref:
https://meeg.dev/blog/using-the-next-image-component-with-kentico-kontent-assets

styfle

hostname "assets-eu-01.kc-usercontent.com" is not configured under images

This means that next.config.js should add

module.exports = {
  images: {
    domains: ['assets-eu-01.kc-usercontent.com']
  }
}

tommarshall · 2022-05-25T14:57:15Z

@styfle is adding the image host domains to the next.config.js to transform via the default loader the preferred approach for the examples?

If so, I can update, but the Kontent delivery API does support image transformation directly.

ijjk

Using a custom loader here seems good since the upstream provider has built-in image transformation, thanks!

styfle · 2022-05-25T16:39:59Z

examples/cms-kontent/components/image.js

+import NextImage from 'next/image'
+import { transformImageUrl } from '@kentico/kontent-delivery'
+
+const KONTENT_ASSET_HOSTNAME_REGEX = /.kc-usercontent.com$/


Should the . be escaped? Perhaps you should use hostname.endsWith('.kc-usercontent.com') instead of a regexp

endsWith would be simpler, thanks 👍

I'll open another PR to update this.

Updated in #37206

styfle · 2022-05-25T16:41:00Z

examples/cms-kontent/components/image.js

+  }
+}
+
+const kontentImageLoader = ({ src, width, quality = 100 }) => {


How about quality 75 as default? Usually 100 is much larger than necessary.

Updated in #37206

@styfle

* Updates the `cms-kontent` example `Image` component to implement the suggested improvements from @styfle in vercel#37188. * Simplifies the Kontent loader host checking. * Reduces the default image quality to from `100` to `75`. vercel#37188

@styfle

* Updates the `cms-kontent` example `Image` component to implement the suggested improvements from @styfle in vercel#37188. * Simplifies the Kontent loader host checking. * Reduces the default image quality to from `100` to `75`. * Add `tslib` dependency to fix `Module not found: Can't resolve 'tslib'` error when importing `transformImageUrl` in the `Image` component. It looks like this might be a bug in v11 of the Kontent Delivery SDK, as it appears `tslib` needs to be included as dependency, rather than dev dependency. I missed this originally as the example runs fine in the Next repo as the root `yarn.lock` has `tslib`. It's only when the example is used via `yarn create next-app` that the issue occurs. We can likely remove this in future alongside an upgrade to the SDK package once this issue has been fixed and released there. vercel#37188

@styfle

* Updates the `cms-kontent` example `Image` component to implement the suggested improvements from @styfle in vercel#37188. * Simplifies the Kontent loader host checking. * Reduces the default image quality to from `100` to `75`. * Add `tslib` dependency to fix `Module not found: Can't resolve 'tslib'` error when importing `transformImageUrl` in the `Image` component. It looks like this might be a bug in v11 of the Kontent Delivery SDK, as it appears `tslib` needs to be included as dependency, rather than dev dependency. I missed this originally as the example runs fine in the Next repo as the root `yarn.lock` has `tslib`. It's only when the example is used via `yarn create next-app` that the issue occurs. We can likely remove this in future alongside an upgrade to the SDK package once this issue has been fixed and released there. vercel#37188

@styfle

* Updates the `cms-kontent` example `Image` component to implement the suggested improvements from @styfle in vercel#37188. * Simplifies the Kontent loader host checking. * Reduces the default image quality to from `100` to `75`. * Add `tslib` dependency to fix `Module not found: Can't resolve 'tslib'` error when importing `transformImageUrl` in the `Image` component. It looks like this might be a bug in v11 of the Kontent Delivery SDK, as it appears `tslib` needs to be included as dependency, rather than dev dependency. I missed this originally as the example runs fine in the Next repo as the root `yarn.lock` has `tslib`. It's only when the example is used via `yarn create next-app` that the issue occurs. We can likely remove this in future alongside an upgrade to the SDK package once this issue has been fixed and released there. vercel#37188

@styfle

* Updates the `cms-kontent` example `Image` component to implement the suggested improvements from @styfle in #37188. * Simplifies the Kontent loader host checking. * Reduces the default image quality to from `100` to `75`. * Add `tslib` dependency to fix `Module not found: Can't resolve 'tslib'` error when importing `transformImageUrl` in the `Image` component. It looks like this might be a bug in v11 of the Kontent Delivery SDK, as it appears `tslib` needs to be included as dependency, rather than dev dependency. I missed this originally as the example runs fine in the Next repo as the root `yarn.lock` has `tslib`. It's only when the example is used via `yarn create next-app` that the issue occurs. We can likely remove this in future alongside an upgrade to the SDK package once this issue has been fixed and released there. #37188

tommarshall requested review from timneutkens, ijjk, shuding, styfle, leerob, steven-tey and balazsorban44 as code owners May 25, 2022 14:51

ijjk added the examples Issue/PR related to examples label May 25, 2022

styfle reviewed May 25, 2022

View reviewed changes

ijjk approved these changes May 25, 2022

View reviewed changes

ijjk merged commit 82a9d21 into vercel:canary May 25, 2022

tommarshall deleted the fix-cms-kontent-example-image-loading-error branch May 25, 2022 15:45

styfle reviewed May 25, 2022

View reviewed changes

tommarshall mentioned this pull request May 26, 2022

Update cms-kontent example to action PR feedback #37206

Merged

1 task

github-actions bot locked as resolved and limited conversation to collaborators Jun 25, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix `cms-kontent` example `Next/Image` domain error #37188

Fix `cms-kontent` example `Next/Image` domain error #37188

tommarshall commented May 25, 2022

tommarshall commented May 25, 2022

styfle left a comment

tommarshall commented May 25, 2022 •

edited

Loading

ijjk left a comment

styfle May 25, 2022 •

edited

Loading

tommarshall May 26, 2022

tommarshall May 26, 2022

styfle May 25, 2022 •

edited

Loading

tommarshall May 26, 2022

Fix cms-kontent example Next/Image domain error #37188

Fix cms-kontent example Next/Image domain error #37188

Conversation

tommarshall commented May 25, 2022

Documentation / Examples

tommarshall commented May 25, 2022

Note:

styfle left a comment

Choose a reason for hiding this comment

tommarshall commented May 25, 2022 • edited Loading

ijjk left a comment

Choose a reason for hiding this comment

styfle May 25, 2022 • edited Loading

Choose a reason for hiding this comment

tommarshall May 26, 2022

Choose a reason for hiding this comment

tommarshall May 26, 2022

Choose a reason for hiding this comment

styfle May 25, 2022 • edited Loading

Choose a reason for hiding this comment

tommarshall May 26, 2022

Choose a reason for hiding this comment

Fix `cms-kontent` example `Next/Image` domain error #37188

Fix `cms-kontent` example `Next/Image` domain error #37188

tommarshall commented May 25, 2022 •

edited

Loading

styfle May 25, 2022 •

edited

Loading

styfle May 25, 2022 •

edited

Loading