Skip to main content

Posts

Showing posts with the label nextjs

Custom Media URLs in Sitecore AI: A Simple Guide to Serving Media From Your Own Domain

The Problem If you have ever built a site on Sitecore AI, you have probably seen image URLs that look like this: https://edge.sitecorecloud.io/yourcompany1-yourcompanyltd-p49d-fb1a/media/images/HeroBanner.png That works fine while you are prototyping or testing. But when real customers visit your site, a URL that says "sitecorecloud.io" can cause real problems: Your images are not showing up in Google Image search. Sitecore adds an X-Robots-Tag: noindex header to every media request served from the default Edge domain. Search engines see that and skip your assets. It looks unprofessional. Brand teams hate sharing links that point to someone else's domain. Analytics and cookies get messy. Browsers are blocking third-party cookies, and a "shared" domain makes it harder to track your own traffic correctly. You lose domain authority. Search engines don't credit your brand for content hosted on a shared, multi-tenant domain. In this p...

Vercel Microfrontends with SitecoreAI : Split a Multi-Site SitecoreAI Platform Across Apps

The Problem Let's say your company has one website for the whole world, but inside it there are actually three separate divisions . Each division has its own team, its own products, and its own pages on the same domain. Something like: www.yourcompany.com ├── /clothing/* → the clothing division ├── /sanitation/* → the sanitation division └── /healthcare/* → the healthcare division Now think about how a team would usually build this. One big application for the whole site. Every division team commits into the same codebase, and every small change rebuilds and redeploys the entire site. Fast teams slow down, and the build waits become painful. There is another way to build it, and this tutorial will walk you through it step by step: Vercel Microfrontends , working with a Sitecore AI (headless) setup. Instead of one big app, you build several small apps. Vercel joins them into one website for the visitor. What you will learn How to split one domain into several separ...

Sitecore JSS SDK Middleware Issue with Large Query Parameters

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...

Sitecore headless Error: Invalid src prop on `next/image`, hostname is not configured under images in your `next.config.js`

 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!

Sitecore Headless Error: Parse Error: Unexpected whitespace after header value

 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!