Sitecore Docs - Tech Tips by GS

Recently, a fellow Sitecorian connected with me to discuss an interesting performance issue with a Sitecore JSS application running on Next.js and Vercel. The application was working perfectly fine for normal URLs. However, when users accessed the website through marketing or advertising URLs containing multiple query string parameters, the requests started taking significantly longer and eventually failed. The interesting part was that the same page worked perfectly when the query parameters were removed. Let's understand what was happening and how to fix it. The Problem The application was using Sitecore JSS with Next.js and hosted on Vercel. Normal URLs were working as expected: https://www.example.com/ Even URLs with a few query parameters were working: https://www.example.com/?p1=1&p2=2&p3=3&p4=4&p5=5 But when the number of query parameters increased, the request started taking much longer and eventually failed. In some cases, we were seeing errors such as: 504...

 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!