I have site at xmcloud and trying to deploy same to vercel. However, I noticed that images and some of the styles are not loading.
Images are not loading in vercel and xmc rendering host. Url looks something like
/_next/image?url=https://cm/-media/.........
How to fix it?
There should be no need to patch the IncludeServerUrlInMediaUrls when deploying on to Vercel. The url you are showing clearly shows the server url from the docker container https://cm/-/media, this would not be the url coming from your XM Cloud CM instance.
Also, the correct config name to patch for XM Cloud would be sxa-jss, not default or jss.
Your issue looks to be created by the PUBLIC_URL environment variable, locally, this PUBLIC_URL would be set to either http://localhost:3000 or https://www.sxastarter.localhost (or whatever your web application url is in docker). This value is set for editing only.
For Vercel deployments, this environment variable must be set to a blank or empty string, then your JS, CSS and Images paths will be relative.
If you are using the Preview Edge endpoint on for your site, the Next.config.js contains a redirect for your images to point at your Sitecore Api Host url - so make sure you set that environment variable, if you are using the production Edge endpoint, all media urls are rewritten to an edge.sitecorecloud.io CDN url. You will need to make sure that this is configured in your next.config.js for image optimization.
When I had the same issue in my local rendering host, it was for the Resolver configurations, I removed the "Include Server URL in Media URLs" check and it works. In this blog, I explain why my images don't appear in my local rendering host.
When deploying your XM Cloud application on Vercel you should protect your CMS URL. To prevent this, it’s recommended to use relative paths within your application. Create a Sitecore patch that modifies Sitecore’s configuration to ensure that the server URL is not included in media URLs for rendering content resolution, both for the default configuration and specifically for the JSS configuration.
<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/" xmlns:set="http://www.sitecore.net/xmlconfig/set/">
<sitecore>
<layoutService>
<configurations>
<config name="default">
<rendering>
<renderingContentsResolver>
<IncludeServerUrlInMediaUrls>false</IncludeServerUrlInMediaUrls>
</renderingContentsResolver>
</rendering>
</config>
<config name="jss">
<rendering>
<renderingContentsResolver>
<!-- Set the desired values for the JSS configuration -->
<IncludeServerUrlInMediaUrls>false</IncludeServerUrlInMediaUrls>
</renderingContentsResolver>
</rendering>
</config>
</configurations>
</layoutService>
</sitecore>
</configuration>
Refer to this for more details.
Hope this helps.
sxa-jss. But I've never needed this patch on XM Cloud with Vercel, something else is the problem.
When you are deploying the app on Next.js through Vercel in XMCloud environment, you will need to deploy below config patch on the XMCloud environment. This eliminates exposing the Sitecore server publicly and to not to include the Sitecore server URL as part of the media requests.
<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
<sitecore>
<layoutService>
<configurations>
<config name="default">
<rendering>
<renderingContentsResolver>
<IncludeServerUrlInMediaUrls>false</IncludeServerUrlInMediaUrls>
</renderingContentsResolver>
</rendering>
</config>
<config name="jss">
<rendering>
<renderingContentsResolver>
<IncludeServerUrlInMediaUrls>false</IncludeServerUrlInMediaUrls>
</renderingContentsResolver>
</rendering>
</config>
</configurations>
</layoutService>
</sitecore>
</configuration>
Hope this helps. Let me know in case you face any issues.
sxa-jss. But I've never needed this patch on XM Cloud with Vercel, something else is the problem.