-
Notifications
You must be signed in to change notification settings - Fork 26.8k
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.
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
Fix cms-kontent
example Next/Image
domain error
#37188
Fix cms-kontent
example Next/Image
domain error
#37188
Conversation
* 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/
Note:
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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']
}
}
@styfle is adding the image host domains to the If so, I can update, but the Kontent delivery API does support image transformation directly. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Using a custom loader here seems good since the upstream provider has built-in image transformation, thanks!
import NextImage from 'next/image' | ||
import { transformImageUrl } from '@kentico/kontent-delivery' | ||
|
||
const KONTENT_ASSET_HOSTNAME_REGEX = /.kc-usercontent.com$/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should the .
be escaped? Perhaps you should use hostname.endsWith('.kc-usercontent.com')
instead of a regexp
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
endsWith
would be simpler, thanks 👍
I'll open another PR to update this.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Updated in #37206
} | ||
} | ||
|
||
const kontentImageLoader = ({ src, width, quality = 100 }) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
How about quality 75 as default? Usually 100 is much larger than necessary.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Updated in #37206
* 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
* 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
* 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
* 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
* 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
cms-kontent
example by implementingan
Image
component to wrapNext/Image
with a custom loader.pages/index.js
andpages/posts/[slug].js
routes.next.config.js
as we can transform the images using the KontentDelivery API directly rather than delegating this to the Next app web
server.
Ref:
Documentation / Examples
yarn lint