Sitecore Docs - Tech Tips by GS

 The Problem While trying to render an Image field in next js app, I got the below error on - The Solution To fix this, navigate to next.config.js in your next js app in VS Code and add the following entry in highlighted area in snapshot  -   {         protocol: 'https',         hostname: '<your hostname here>',         port: '',       }, Hope it helps you!

 The Problem This can occur to any developer trying to set up their first Sitecore headless next js app on local. I will skip the commands involved in setting up the app on local. When you are done setting up your next js app and execute jss start:connected to run the app, you may face the below error -  Error: Parse Error: Unexpected whitespace after header value The Solution  The whitespace after header value is something added by Feature-Policy setting in HTTP response headers in your local Sitecore instance in IIS. Delete this setting and the error shall go away - Hope it helps you!

 The Problem A friend of mine is working on upgrading Sitecore 9.3 to Sitecore 10.3.1. They are also upgrading to JSS 21.1 module. They wanted to ensure that all our GraphQL api endpoints keep functioning without breaking. When they opened GraphQL playground to test apis, they got the below errors -  SSC API key is required. Pass with 'sc_apikey' query string or HTTP header. Server cannot be reached Below is the snapshot of same -  We connected to solve their problem. The Solution We found that in JSS 16, when we supplied sc_apikey in page URL, it was passed on to GraphQL URL properly. But in JSS 21, which uses newer version of GraphQL, the sc_apikey in page URL query in browser was stripped off as in the snapshot above. To fix it, either you can manually specify the sc_key in the URL section in GraphQL playground or you can set the headers for sc_apikey in JSS 21.1. Check below snapshot for this - Hope it helps you!!