A few days ago we have been hit by an Experience Editor issue with Next.js. It was already working and configured locally before. So the investigation began, where (Sitecore repository or Next.js repository) and which commit is causing the issue. On the Sitecore side we started to check with simple and low data components and in this case all was working as expected – Experience Editor rendered and worked. Alright, this means something is probably going on on the frontend side. I started to check which commit introduced the bug, by using git bisect – which I never heard of, until Bálint Csák talked about it.
On one of our current project we have a close deadline, therefore we need to simplify implementation and cut from the scope as much as possible to roll out the MVP with the full functionality but without Experience Editor support – as it’s not priority for now. We had a long discussion about this, the main reason of cutting scope is to keep the frontend simple as possible and focus on business logic functionality instead of editing experience. Therefore on the Sitecore side we are providing a few APIs for the frontend and not creating any layout, rendering and placeholders; only pure templates and content.
In my previous posts I showed how you can extend the Layout Service and implement your own custom Contents Resolvers. Until now I simply wanted to serialize all non-standard Sitecore fields with its values. Although there could be a case where you need to include or exclude fields from the Layout Service response.
Contents Resolver question: with Context.HttpContext.Request.Params["item"] I can read the url of the item. But when for example we have a url like /news?page=1, how would I read the page querystring prop in a contents resolver? Somehow I can’t find it, since the request is like /sitecore/api/layout/render/default
This is a fair question, if you would like to process custom parameters in your custom Contents Resolver.
When you create a Sitecore Next.js project you will notice there is a configuration file generated, called next.config.js. This config holds different Sitecore related config entries, but in this post I would like to focus on the async rewrites() method. This is a Next.js feature, to handle rewrites in the app. Rewrites can be useful for several things. By default Sitecore uses rewrites to proxy the media and some Sitecore API requests.
Since Sitecore Headless and Composable DXP jumped in to our life, designing and architecting Sitecore solutions are changing. The integration layer is moving to the frontend layer and stays decoupled from Sitecore.
On the current project we are working on, almost all Sitecore components have to call different API routes to enrich the Sitecore component with data coming from these external sources. As it’s a requirement to almost all of our components, it makes sense to design a generic solution for serving the merged data to the frontend. I want to thank Richárd Palkó, we designed and implemented this generic solution together and thank you for guiding me on getting familiar with TypeScript, Next.js and React 🙏.
On one of my first Sitecore Headless project I got a requirement to implement a dynamic URL resolving to display product data from a different root of the Sitecore tree. If it would have been a traditional Sitecore solution I could implement a custom item resolver but in the headless world we need a different kind of mindset to solve problems like this.