Mahima Patel, Author at Perficient Blogs https://blogs.perficient.com/author/mpatel/ Expert Digital Insights Wed, 19 Nov 2025 15:08:32 +0000 en-US hourly 1 https://blogs.perficient.com/files/favicon-194x194-1-150x150.png Mahima Patel, Author at Perficient Blogs https://blogs.perficient.com/author/mpatel/ 32 32 30508587 Sitecore Content SDK: What It Offers and Why It Matters https://blogs.perficient.com/2025/11/19/sitecore-content-sdk-what-it-offers-and-why-it-matters/ https://blogs.perficient.com/2025/11/19/sitecore-content-sdk-what-it-offers-and-why-it-matters/#respond Wed, 19 Nov 2025 15:08:05 +0000 https://blogs.perficient.com/?p=388367

Sitecore has introduced the Content SDK for XM Cloud-now Sitecore AI to streamline the process of fetching content and rendering it on modern JavaScript front-end applications. If you’re building a website on Sitecore AI, the new Content SDK is the modern, recommended tool for your development team.

Think of it as a specialized, lightweight toolkit built for one specific job: getting content from Sitecore AI and displaying it on your modern frontend application (like a site built with Next.js).

Because it’s purpose-built for Sitecore AI, it’s fast, efficient, and doesn’t include a lot of extra baggage. It focuses purely on the essential “headless” task of fetching and rendering content.

What About the JSS SDK?
This is the original toolkit Sitecore created for headless development.

The key difference is that the JSS SDK was designed to be a one-size-fits-all solution. It had to support both the new, headless Sitecore AI and Sitecore’s older, all-in-one platform, Sitecore XP/XM.

To do this, it had to include extra code and dependencies to support older features, like the “Experience Editor”. This makes the JSS SDK “bulkier” and more complex. If you’re only using Sitecore AI, you’re carrying around a lot of extra weight you simply don’t need.

The Sitecore Content SDK is the modern, purpose-built toolkit for developers using Sitecore AI, providing seamless, out-of-the-box integration with the platform’s most powerful capabilities. This includes seamless visual editing that empowers marketers to build and edit pages in real-time, as well as built-in hooks for personalization and analytics that simplify the delivery and tracking of targeted user experiences. For developers, it provides GraphQL utilities to streamline data fetching and is deeply optimized for Next.js, enabling high-performance features like server-side rendering. Furthermore, with the recent introduction of App Router support (in beta), the SDK is evolving to give developers even more granular control over performance, SEO, bundle sizes, and security through a more modern, modular code structure.

What does the Content SDK offer?

1) App Router support (v1.2)

With version 1.2.0, Sitecore Content SDK introduces App Router support in beta. While the full fledged stable release is expected soon, developers can already start exploring its benefits and work flow with 1.2 version.
This isn’t just a minor update; it’s a huge step toward making your front-end development more flexible and highly optimized.

Why should you care? –
The App Router introduces a fantastic change to your starter application’s code structure and how routing works. Everything becomes more modular and declarative, aligning perfectly with modern architecture practices. This means defining routes and layouts is cleaner, content fetching is neatly separated from rendering, and integrating complex Next.js features like dynamic routes is easier than ever. Ultimately, this shift makes your applications much simpler to scale and maintain as they grow on Sitecore AI.

Performance: Developers can fine-tune route handling with nested layouts and more aggressive and granular caching to seriously boost overall performance, leading to faster load times.

Bundle Size: Smaller bundle size because it uses React Server Components (RSC) to render components. It help fetch and render component from server side without making the static files in bundle.

Security: It helps with security by giving improved control over access to specific routes and content.

With the starter kit applications, this is how app router routing structure looks like:

Approute

 

2) New configs – sitecore.config.ts & sitecore.cli.config.ts

The sitecore.config.ts file, located in the root of your application, acts as the central configuration point for Content SDK projects. It is replacement of the older temp/config file used by the JSS SDK. It contains properties that can be used throughout the application just by importing the file. It contains important properties like sitename, defaultLanguage, edge props like contextid. Starter templates include a very lightweight version containing only the mandatory parameters necessary to get started. Developers can easily extend this file as the project grows and requires more specific settings.

Key Aspects:

Environment Variable Support: This file is designed for deployment flexibility using a layered approach. Any configuration property present in this file can be sourced in three ways, listed in order of priority:

  1. Explicitly defined in the configuration file itself.
  2. Fallback to a corresponding environment variable (ideal for deployment pipelines).
  3. Use a default value if neither of the above is provided.

This layered approach ensures flexibility and simplifies deployment across environments.

 

The sitecore.cli.config.ts file is dedicated to defining and configuring the commands and scripts used during the development and build phases of a Content SDK project.

Key Aspects:

CLI Command Configuration: It dictates the commands that execute as part of the build process, such as generateMetadata() and generateSites(), which are essential for generating Sitecore-related data and metadata for the front-end.

Component Map Generation: This file manages the configuration for the automatic component map generation. This process is crucial for telling Sitecore how your front-end components map to the content structure, allowing you to specify file paths to scan and define any files or folders to exclude. Explored further below.

Customization of Build Process: It allows developers to customize the Content SDK’s standard build process by adding their own custom commands or scripts to be executed during compilation.

While sitecore.config.ts handles the application’s runtime settings (like connection details to Sitecore AI), sitecore.cli.config.ts works in conjunction to handle the development-time configuration required to prepare the application for deployment.

Cli Config

 

3) Component map

In Sitecore Content SDK-based applications, every custom component must be manually registered in the .sitecore/component-map.ts file located in the app’s root. The component map is a registry that explicitly links Sitecore renderings to their corresponding frontend component implementations. The component map tells the Content SDK which frontend component to render for each component receives from Sitecore. When the rendering gets added to any page via presentation, component map tells which frontend rendering should be rendered at the place.

Key Aspects:

Unlike JSS implementations that automatically maps components, the Content SDK’s explicit component map enables better tree-shaking. Your final production bundle will only include the components you have actually registered and use, resulting in smaller, more efficient application sizes.

This is how it looks like: (Once you start creating custom component, you have to add the component name here to register.)

Componentmap

 

4) Import map

The import map is a tool used specifically by the Content SDK’s code generation feature. It manages the import paths of components that are generated or used during the build process. It acts as a guide for the code generation engine, ensuring that any new code it creates correctly references your existing components.
Where it is: It is a generated file, typically found at ./sitecore/import-map.ts, that serves as an internal manifest for the build process. You generally do not need to edit this file manually.
It simplifies the logic of code generation, guaranteeing that any newly created code correctly and consistently references your existing component modules.

The import map generation process is configurable via the sitecore.cli.config.ts file. This allows developers to customize the directories scanned for components.

 

5) defineMiddleware in the Sitecore Content SDK

defineMiddleware is a utility for composing a middleware chain in your Next.js app. It gives you a clean, declarative way to handle cross-cutting concerns like multi-site routing, personalization, redirects, and security all in one place. This centralization aligns perfectly with modern best practices for building scalable, maintainable functions.

The JSS SDK leverages a “middleware plugin” pattern. This system is effective for its time, allowing logic to be separated into distinct files. However, this separation often requires developers to manually manage the ordering and chaining of multiple files, which could become complex and less transparent as the application grew. The Content SDK streamlines this process by moving the composition logic into a single, highly readable utility which can customizable easily by extending Middleware

Middleware

 

6) Debug Logging in Sitecore Content SDK

Debug logging helps you see what the SDK is doing under the hood. Super useful for troubleshooting layout/dictionary fetches, multisite routing, redirects, personalization, and more. The Content SDK uses the standard DEBUG environment variable pattern to enable logging by namespace. You can selectively turn on logging for only the areas you need to troubleshoot, such as: content-sdk:layout (for layout service details) or content-sdk:dictionary (for dictionary service details)
For all available namespaces and parameters, refer to sitecore doc – https://doc.sitecore.com/sai/en/developers/content-sdk/debug-logging-in-content-sdk-apps.html#namespaces 

 

7) Editing & Preview

In the context of Sitecore’s development platform, editing and preview render optimization with the Content SDK involves leveraging middleware, architecture, and framework-specific features to improve the performance of rendering content in editing and preview modes. The primary goal is to provide a fast and responsive editing experience for marketers using tools like Sitecore AI Pages and the Design Library. EditingRenderMiddleware: The Content SDK for Next.js includes optimized middleware for editing scenarios. Instead of a multi-step process involving redirects, the optimized middleware performs an internal, server-side request to return the HTML directly. This reduces overhead and speeds up rendering significantly.
This feature Works out of the box in most environments: Local container, Vercel / Netlify, SitecoreAI (defaults to localhost as configured)

For custom setups, override the internal host with: SITECORE_INTERNAL_EDITING_HOST_URL=https://host
This leverages a Integration with XM Cloud/Sitecore AI Pages for visual editing and testing of components.

 

8) SitecoreClient

The SitecoreClient class in the Sitecore Content SDK is a centralized data-fetching service that simplifies communication with your Sitecore content backend typically with Experience Edge or preview endpoint via GraphQL endpoints.
Instead of calling multiple services separately, SitecoreClient lets you make one organized request to fetch everything needed for a page layout, dictionary, redirects, personalization, and more.

Key Aspect:

Unified API: One client to access layout, dictionary, sitemap, robots.txt, redirects, error pages, multi-site, and personalization.
To understand all key methods supported, please refer to sitecore documentation: https://doc.sitecore.com/sai/en/developers/content-sdk/the-sitecoreclient-api.html#key-methods

Sitecoreclientmethods

9) Built-In Capabilities for Modern Web Experiences

GraphQL Utilities: Easily fetch content, layout, dictionary entries, and site info from Sitecore AI’s Edge and Preview endpoints.
Personalization & A/B/n Testing: Deploy multiple page or component variants to different audience segments (e.g., by time zone or language) with no custom code.
Multi-site Support: Seamlessly manage and serve content across multiple independent sites from a single Sitecore AI instance.
Analytics & Event Tracking: Integrated support via the Sitecore Cloud SDK for capturing user behavior and performance metrics.
Framework-Specific Features: Includes Next.js locale-based routing for internationalization, and supports both SSR and SSG for flexible rendering strategies.

 

10) Cursor for AI development

Starting with Content SDK version 1.1, Sitecore has provided comprehensive “Cursor rules” to facilitate AI-powered development.
The integration provides Cursor with sufficient context about the Content SDK ecosystem and Sitecore development patterns. These set of rules and context helps to accelerate the development. The cursor rules are created for contentsdk with starter application under .cursor folder. This enables the AI to better assist developers with tasks specific to building headless Sitecore components, leading to improved development consistency and speed following same patterns just by providing few commands in generic terms. Example given in below screenshot for Hero component which can act as a pattern to create another similar component by cursor.

Cursorrules

 

11) Starter Templates and Example Applications

To accelerate development and reduce setup time, the Sitecore Content SDK includes a set of starter templates and example applications designed for different use cases and development styles.
The SDK provides a Next.js JavaScript starter template that enables rapid integration with Sitecore AI. This template is optimized for performance, scalability, and best practices in modern front-end development.
Starter Applications in examples

basic-nextjs -A minimal Next.js application showcasing how to fetch and render content from Sitecore AI using the Content SDK. Ideal for SSR/SSG use cases and developers looking to build scalable, production-ready apps.

basic-spa -A single-page application (SPA) example that demonstrates client-side rendering and dynamic content loading. Useful for lightweight apps or scenarios where SSR is not required.

Other demo site to showcase Sitecore AI capabilities using the Content SDK:

kit-nextjs-article-starter

kit-nextjs-location-starter

kit-nextjs-product-starter

kit-nextjs-skate-park

 

Final Thoughts

The Sitecore Content SDK represents a major leap forward for developers building on Sitecore AI. Unlike the older JSS SDK, which carried legacy dependencies, the Content SDK is purpose-built for modern headless architectures—lightweight, efficient, and deeply optimized for frameworks like Next.js. With features like App Router support, runtime and CLI configuration flexibility, and explicit component mapping, it empowers teams to create scalable, high-performance applications while maintaining clean, modular code structures.

]]>
https://blogs.perficient.com/2025/11/19/sitecore-content-sdk-what-it-offers-and-why-it-matters/feed/ 0 388367
Aligning Your Requirements with the Sitecore Ecosystem https://blogs.perficient.com/2025/11/07/sitecore-dxp-products-and-ecosystem/ https://blogs.perficient.com/2025/11/07/sitecore-dxp-products-and-ecosystem/#respond Fri, 07 Nov 2025 19:20:25 +0000 https://blogs.perficient.com/?p=388241

In my previous blogs, I outlined key considerations for planning a Sitecore migration and shared strategies for executing it effectively. The next critical step is to understand how your business and technical requirements align with the broader Sitecore ecosystem.
Before providing careful recommendations to a customer, it’s essential to map your goals—content management, personalization, multi-site delivery, analytics, and future scalability onto Sitecore’s composable and cloud-native offerings. This ensures that migration and implementation decisions are not only feasible but optimized for long-term value.
To revisit the foundational steps and execution strategies, check out these two helpful resources:
•  Planning Sitecore Migration: Things to Consider
•  Executing a Sitecore Migration: Development, Performance, and Beyond

Sitecore is not just a CMS; it’s a comprehensive digital experience platform.
Before making recommendations to a customer, it’s crucial to clearly define what is truly needed and to have a deep understanding of how powerful Sitecore is. Its Digital Experience Platform (DXP) capabilities, including personalization, marketing automation, and analytics—combined with cloud-native SaaS delivery, enable organizations to scale efficiently, innovate rapidly, and deliver highly engaging digital experiences.
By carefully aligning customer requirements with these capabilities, you can design solutions that not only meet technical and business needs but also maximize ROI, streamline operations, and deliver long-term value.

In this blog, I’ll summarize Sitecore’s Digital Experience Platform (DXP) offerings to explore how each can be effectively utilized to meet evolving business and technical needs.

1. Sitecore XM Cloud

Sitecore Experience Manager Cloud (XM Cloud) is a cloud-native, SaaS, hybrid headless CMS designed to help businesses create and deliver personalized, multi-channel digital experiences across websites and applications. It combines the flexibility of modern headless architecture with robust authoring tools, enabling teams to strike a balance between developer agility and marketer control.

Key Capabilities

  • Cloud-native: XM Cloud is built for the cloud, providing a secure, reliable, scalable, and enterprise-ready system. Its architecture ensures high availability and global reach without the complexity of traditional on-premises systems.
  • SaaS Delivery: Sitecore hosts, maintains, and updates XM Cloud regularly. Organizations benefit from automatic updates, new features, and security enhancements without the need for costly installations or manual upgrades. This ensures that teams always work with the latest technologies while reducing operational overhead.
  • Hybrid Headless: XM Cloud separates content and presentation, enabling developers to build custom front-end experiences using modern frameworks, while marketers utilize visual editing tools like the Page Builder to make real-time changes. This allows routine updates to be handled without developer intervention, maintaining speed and agility.
  • Developer Productivity: Developers can model content with data templates, design reusable components, and assign content through data sources. Sitecore offers SDKs like the Content SDK for building personalized Next.js apps, the ASP.NET Core SDK for .NET integrations, and the Cloud SDK for extending DXP capabilities into Content SDK and JSS applications connected to XM Cloud. Starter kits are provided for setting up the code base.
  • Global Content Delivery: With Experience Edge, XM Cloud provides scalable GraphQL endpoints to deliver content rapidly across geographies, ensuring consistent user experiences worldwide.
  • Extensibility & AI Integration: XM Cloud integrates with apps from the Sitecore Marketplace and leverages Sitecore Stream for advanced AI-powered content generation and optimization. This accelerates content creation while maintaining brand consistency.
  • Continuous Updates & Security: XM Cloud includes multiple interfaces, such as Portal, Deploy, Page Builder, Explorer, Forms, and Analytics, which are regularly updated. Deploy app to deploy to XM Cloud projects.

XM Cloud is ideal for organizations seeking a scalable, flexible, and future-proof content platform, allowing teams to focus on delivering compelling digital experiences rather than managing infrastructure.

2. Experience Platform (XP)

Sitecore Experience Platform (XP) is like an all-in-one powerhouse—it’s a complete box packed with everything you need for delivering personalized, data-driven digital experiences. While Experience Management (XM) handles content delivery, XP adds layers of personalization, marketing automation, and deep analytics, ensuring every interaction is contextually relevant and optimized for each visitor.

Key Capabilities

  • Content Creation & Management: The Content Editor and Experience Editor allow marketers and content authors to create, structure, and manage website content efficiently, supporting collaboration across teams.
  • Digital Marketing Tools: Built-in marketing tools enable the creation and management of campaigns, automating triggers and workflows to deliver personalized experiences across multiple channels.
  • Experience Analytics: XP provides detailed insights into website performance, visitor behavior, and campaign effectiveness. This includes metrics like page performance, conversions, and user engagement patterns.
  • Experience Optimization: Using analytics data, XP allows you to refine content and campaigns to achieve better results. A/B testing and multivariate testing help determine the most effective variations.
  • Path Analyzer: This tool enables you to analyze how visitors navigate through your site, helping you identify bottlenecks, drop-offs, and opportunities to enhance the user experience.
    By combining these capabilities, XP bridges content and marketing intelligence, enabling teams to deliver data-driven, personalized experiences while continuously refining and improving digital engagement.

By combining these capabilities, XP bridges content and marketing intelligence, enabling teams to deliver data-driven, personalized experiences while continuously refining and improving digital engagement.

3. Sitecore Content Hub

Sitecore Content Hub unifies content planning, creation, curation, and asset management into a single platform, enabling teams to collaborate efficiently and maintain control across the entire content lifecycle and digital channels.

Key Capabilities

  • Digital Asset Management (DAM): Content Hub organizes and manages images, videos, documents, and other digital assets. Assets can be tagged, annotated, searched, and shared efficiently, supporting teams in building engaging experiences without losing control over asset usage or consistency.
  • Campaign & Content Planning: Teams can plan campaigns, manage editorial calendars, and assign tasks to ensure smooth collaboration between marketing, creative, and operational teams. Structured workflows enforce version control, approvals, and accountability, ensuring that content moves systematically to the end user.
  • AI-Powered Enhancements: Advanced AI capabilities accelerate content operations. These intelligent features reduce manual effort, increase productivity, and help teams maintain brand consistency at scale.
  • Microservice Architecture & Integration & Multi-Channel Delivery: Content Hub is built on a microservice-based architecture, allowing flexible integration with external systems, headless CMS, and cloud development pipelines. Developers can extend capabilities or connect Content Hub to other platforms without disrupting core operations. Content Hub ensures that teams can deliver consistent, high-quality experiences across websites, social media, commerce, and other digital channels.

Sitecore Content Hub empowers organizations to manage content as a strategic asset, streamlining operations, enabling global collaboration, and providing the technical flexibility developers need to build integrated, scalable solutions.

strong>4. Sitecore Customer Data Platform (CDP)

Sitecore Customer Data Platform (CDP) enables organizations to collect customer data across all digital channels, providing a single, unified view of every user. By centralizing behavioral and transactional data, CDP allows businesses to deliver personalized experiences and data-driven marketing at scale.

Key Capabilities

  • Real-Time Data Collection: The Stream API captures live behavioral and transactional data from your applications and sends it to Sitecore CDP in real time. This ensures that customer profiles are always up-to-date and that personalization can be applied dynamically as users interact with your digital properties.
  • Batch Data Upload: For larger datasets, including guest data or offline orders, the Batch API efficiently uploads bulk information into CDP, keeping your customer data repository comprehensive and synchronized.
  • CRUD Operations: Sitecore CDP offers REST APIs for retrieving, creating, updating, and deleting customer data. This enables developers to integrate external systems, enrich profiles, or synchronize data between multiple platforms with ease.
  • Data Lake Export: With the Data Lake Export Service, all organizational data can be accessed from Amazon S3, allowing it to be downloaded locally or transferred to another S3 bucket for analysis, reporting, or integration with external systems.
  • SDK Integrations (Cloud SDK & Engage SDK): Developers can leverage Sitecore’s Cloud SDK and Engage SDK to streamline data collection, manage user information, and integrate CDP capabilities directly into applications. These SDKs simplify the process of connecting applications to XM Cloud and other services to CDP, enabling real-time engagement and seamless data synchronization.

Sitecore CDP captures behavioral and transactional interactions across channels, creating a unified, real-time profile for each customer. These profiles can be used for advanced segmentation, targeting, and personalization, which in turn informs marketing strategies and customer engagement initiatives.
By integrating CDP with other components of the Sitecore ecosystem—such as DXP, XM Cloud, and Content Hub —organizations can efficiently orchestrate personalized, data-driven experiences across websites, apps, and other digital touchpoints.

5. Sitecore Personalize

Sitecore Personalize enables organizations to deliver seamless, consistent, and highly relevant experiences across websites, mobile apps, and other digital channels. By leveraging real-time customer data, predictive insights, and AI-driven decisioning, it ensures that the right content, offers, and messages get delivered to the target customer/audience.

Key Capabilities

  • Personalized Experiences: Deliver tailored content and offers based on real-time user behavior, predictive analytics, and unified customer profiles. Personalization can be applied across web interactions, server-side experiences, and triggered channels, such as email or SMS, ensuring every interaction is timely and relevant.
  • Testing and Optimization: Conduct A/B/n tests and evaluate which variations perform best based on actual customer behavior. This enables continuous optimization of content, campaigns, and personalization strategies.
  • Performance Analytics: Track user interactions and measure campaign outcomes to gain actionable insights. Analytics support data-driven refinement of personalization, ensuring experiences remain effective and relevant.
  • Experiences and Experiments: Helps to create a tailored experience for each user depending on interaction and any other relevant user data.
  • AI-Driven Assistance: The built-in Code Assistant can turn natural language prompts into JavaScript, allowing developers to quickly create custom conditions, session traits, and programmable personalization scenarios without writing code from scratch.

By combining real-time data from CDP, content from XM Cloud and Content Hub, and AI-driven decisioning, Sitecore Personalize allows organizations to orchestrate truly unified, intelligent, and adaptive customer experiences. This empowers marketers and developers to respond dynamically to signals, test strategies, and deliver interactions that drive engagement and value, along with a unique experience for users.

6. Sitecore Send

Sitecore Send is a cloud-based email marketing platform that enables organizations to create, manage, and optimize email campaigns. By combining automation, advanced analytics, and AI-driven capabilities, marketing teams can design, execute, and optimize email campaigns efficiently without relying heavily on IT support.

Key Capabilities

  • Campaign Creation & Management: Sitecore Send offers a no-code campaign editor that enables users to design campaigns through drag-and-drop and pre-built templates. Marketers can create campaigns quickly, trigger messages automatically, and also perform batch sends.
  • A/B Testing & Optimization: Campaigns can be A/B tested to determine which version resonates best with the target audience, helping improve open rates, click-through rates, and overall engagement.
  • AI-Powered Insights: Built-in AI capabilities help optimize send times, segment audiences, and predict engagement trends, ensuring messages are timely, relevant, and impactful.
  • API Integration: The Sitecore Send API enables developers to integrate email marketing functionality directly into applications. It supports tasks such as:
    • Creating and managing email lists
    • Sending campaigns programmatically
    • Retrieving real-time analytics
    • Automating repetitive tasks
    • This API-driven approach allows teams to streamline operations, accelerate campaign delivery, and leverage programmatic control over their marketing initiatives.

Sitecore Send integrates seamlessly with the broader Sitecore ecosystem, using real-time data from CDP and leveraging content from XM Cloud or Content Hub. Combined with personalization capabilities, it ensures that email communications are targeted, dynamic, and aligned with overall customer experience strategies.
By centralizing email marketing and providing programmatic access, Sitecore Send empowers organizations to deliver scalable, data-driven campaigns while maintaining full control over creative execution and performance tracking.

7. Sitecore Search

Sitecore Search is a headless search and discovery platform that delivers fast, relevant, and personalized results across content and products. It enables organizations to create predictive, AI-powered, intent-driven experiences that drive engagement, conversions, and deeper customer insights.

Key Capabilities

  • Personalized Search & Recommendations: Uses visitor interaction tracking and AI/ML algorithms to deliver tailored search results and product/content recommendations in real time.
  • Headless Architecture: Decouples search and discovery from presentation, enabling seamless integration across websites, apps, and other digital channels.
  • Analytics & Optimization: Provides rich insights into visitor behavior, search performance, and business impact, allowing continuous improvement of search relevance and engagement.
  • AI & Machine Learning Core: Sophisticated algorithms analyze large datasets—including visitor location, preferences, interactions, and purchase history to deliver predictive, personalized experiences.

With Sitecore Search, organizations can provide highly relevant, omnichannel experiences powered by AI-driven insights and advanced analytics.

8. Sitecore Discover

Sitecore Discover is an AI-driven product search similar to sitecore search, but this is more product and commerce-centric. It enables merchandisers and marketers to deliver personalized shopping experiences across websites and apps. By tracking user interactions, it generates targeted recommendations using AI recipes, such as similar products and items bought together, which helps increase engagement and conversions. Merchandisers can configure pages and widgets via the Customer Engagement Console (CEC) to create tailored, data-driven experiences without developer intervention.

Search vs. Discover

  • Sitecore Search: Broad content/product discovery, developer-driven, AI/ML-powered relevance, ideal for general omnichannel search. Optimized for content and product discovery.
  • Sitecore Discover: Commerce-focused product recommendations, merchandiser-controlled, AI-driven personalization for buying experiences. Optimized for commerce personalization and merchandising.

9. Sitecore Connect

Sitecore Connect is an integration tool that enables seamless connections between Sitecore products and other applications in your ecosystem, creating end-to-end, connected experiences for websites and users.

Key Capabilities

  • Architecture: Built around recipes and connectors, Sitecore Connect offers a flexible and scalable framework for integrations.
  • Recipes: Automated workflows that define triggers (events occurring in applications) and actions (tasks executed when specific events occur), enabling process automation across systems.
  • Connectors: Manage connectivity and interactivity between applications, enabling seamless data exchange and coordinated workflows without requiring complex custom coding.

With Sitecore Connect, organizations can orchestrate cross-system processes, synchronize data, and deliver seamless experiences across digital touchpoints, all while reducing manual effort and integration complexity.

10. OrderCloud

OrderCloud is a cloud-based, API-first, headless commerce and marketplace platform designed for B2B, B2C, and B2X scenarios. It provides a flexible, scalable, and fully customizable eCommerce architecture that supports complex business models and distributed operations.

Key Capabilities

  • Headless & API-First: Acts as the backbone of commerce operations, allowing businesses to build and connect multiple experiences such as buyer storefronts, supplier portals, or admin dashboards—on top of a single commerce platform.
  • Customizable Commerce Solutions: Supports large and complex workflows beyond traditional shopping carts, enabling tailored solutions for distributed organizations.
  • Marketplace & Supply Chain Support: Facilitates selling across extended networks, including suppliers, franchises, and partners, while centralizing order management and commerce operations.

OrderCloud empowers organizations to scale commerce operations, extend digital selling capabilities, and create fully customized eCommerce experiences, all while leveraging a modern, API-first headless architecture.

Final Thoughts

Sitecore’s composable DXP products and its suite of SDKs empower organizations to build scalable, personalized, and future-ready digital experiences. By understanding how each component fits into your architecture and aligns with your  business goals, you can make informed decisions that drive long-term value. Whether you’re modernizing legacy systems or starting fresh in the cloud, aligning your strategy with Sitecore’s capabilities ensures a smoother migration and a more impactful digital transformation.

]]>
https://blogs.perficient.com/2025/11/07/sitecore-dxp-products-and-ecosystem/feed/ 0 388241
Executing a Sitecore Migration: Development, Performance, and Beyond https://blogs.perficient.com/2025/10/28/executing-a-sitecore-migration-development/ https://blogs.perficient.com/2025/10/28/executing-a-sitecore-migration-development/#comments Tue, 28 Oct 2025 12:23:25 +0000 https://blogs.perficient.com/?p=388061

In previous blog, the strategic and architectural considerations that set the foundation for a successful Sitecore migration is explored. Once the groundwork is ready, it’s time to move from planning to execution, where the real complexity begins. The development phase of a Sitecore migration demands precision, speed, and scalability. From choosing the right development environment and branching strategy to optimizing templates, caching, and performance, every decision directly impacts the stability and maintainability of your new platform.

This blog dives into the practical side of migration, covering setup best practices, developer tooling (IDE and CI/CD), coding standards, content model alignment, and performance tuning techniques to help ensure that your transition to Sitecore’s modern architecture is both seamless and future-ready.Title (suggested): Executing a Successful Sitecore Migration: Development, Performance, and Beyond

 

1. Component and Code Standards Over Blind Reuse

  • In any Sitecore migration, one of the biggest mistakes teams make is lifting and shifting old components into the new environment. While this may feel faster in the short term, it creates long-term problems.
  • Missed product offerings: Old components were often built around constraints of an earlier Sitecore version. Reusing them as-is means you can’t take advantage of new product features like improved personalization, headless capabilities, SaaS integrations, and modern analytics.
  • Outdated standards: Legacy code usually does not meet current coding, security, and performance standards. This can introduce vulnerabilities and inefficiencies into your new platform.
    Accessibility gaps: Many older components don’t align with WCAG and ADA accessibility standards — missing ARIA roles, semantic HTML, or proper alt text. Reusing them will carry accessibility debt into your fresh build.
  • Maintainability issues: Old code often has tight coupling, minimal test coverage, and obsolete dependencies. Keeping it will slow down future upgrades and maintenance.

Best practice: Treat the migration as an opportunity to raise your standards. Audit old components for patterns and ideas, but don’t copy-paste them. Rebuild them using modern frameworks, Sitecore best practices, security guidelines, and accessibility compliance. This ensures the new solution is future-proof and aligned with the latest Sitecore roadmap.

 

2. Template Creation and Best Practices

  • Templates define the foundation of your content structure, so designing them carefully is critical.
  • Analyze before creating: Study existing data models, pages, and business requirements before building templates.
  • Use base templates: Group common fields (e.g., Meta, SEO, audit info) into base templates and reuse them across multiple content types.
  • Leverage branch templates: Standardize complex structures (like a landing page with modules) by creating branch templates for consistency and speed.
  • Follow naming and hierarchy conventions: Clear naming and logical organization make maintenance much easier.

 

3. Development Practices and Tools

A clean, standards-driven development process ensures the migration is efficient, maintainable, and future-proof. It’s not just about using the right IDEs but also about building code that is consistent, compliant, and friendly for content authors.

  • IDEs & Tools
    • Use Visual Studio or VS Code with Sitecore- and frontend-specific extensions for productivity.
    • Set up linting, code analysis, and formatting tools (ESLint, Prettier in case of JSS code, StyleCop) to enforce consistency.
    • Use AI assistance (GitHub Copilot, Codeium, etc.) to speed up development, but always review outputs for compliance and quality. There are many different AI tools available in market that can even change the design/prototypes into specified code language.
  • Coding Standards & Governance
    • Follow SOLID principles and keep components modular and reusable.
    • Ensure secure coding standards: sanitize inputs, validate data, avoid secrets in code.
    • Write accessible code: semantic HTML, proper ARIA roles, alt text, and keyboard navigation.
    • Document best practices and enforce them with pull request reviews and automated checks.
  • Package & Dependency Management
    • Select npm/.NET packages carefully: prefer well-maintained, community-backed, and security-reviewed ones.
    • Avoid large, unnecessary dependencies that bloat the project.
    • Run dependency scanning tools to catch vulnerabilities.
    •  Keep lockfiles for environment consistency.
  • Rendering Variants & Parameters
    • Leverage rendering variants (SXA/headless) to give flexibility without requiring code changes.
    • Add parameters so content authors can adjust layouts, backgrounds, or alignment safely.
    • Always provide sensible defaults to protect design consistency.
  • Content Author Experience

Build with the content author in mind:

    • Use clear, meaningful field names and help text.
    • Avoid unnecessary complexity: fewer, well-designed fields are better.
    • Create modular components that authors can configure and reuse.
    • Validate with content author UAT to ensure the system is intuitive for day-to-day content updates.

Strong development practices not only speed up migration but also set the stage for easier maintenance, happier authors, and a longer-lasting Sitecore solution.

 

4. Data Migration & Validation

Migrating data is not just about “moving items.” It’s about translating old content into a new structure that aligns with modern Sitecore best practices.

  • Migration tools
    Sitecore does provides migration tools to shift data like XM to XM Cloud. Leverage these tools for data that needs to be copied.
  • PowerShell for Migration
    • Use Sitecore PowerShell Extensions (SPE) to script the migration of data from the old system that does not need to be as is but in different places and field from old system.
    • Automate bulk operations like item creation, field population, media linking, and handling of multiple language versions.
    • PowerShell scripts can be run iteratively, making them ideal as content continues to change during development.
    • Always include logging and reporting so migrated items can be tracked, validated, and corrected if needed.
  • Migration Best Practices
    • Field Mapping First: Analyze old templates and decide what maps directly, what needs transformation, and what should be deprecated.
    • Iterative Migration: Run migration scripts in stages, validate results, and refine before final cutover.
    • Content Cleanup: Remove outdated, duplicate, or unused content instead of carrying it forward.
    • SEO Awareness: Ensure titles, descriptions, alt text, and canonical fields are migrated correctly.
    • Audit & Validation:
      • Use PowerShell reports to check item counts, empty fields, or broken links.
      • Crawl both old and new sites with tools like Screaming Frog to compare URLs, metadata, and page structures.

 

5. SEO Data Handling

SEO is one of the most critical success factors in any migration — if it’s missed, rankings and traffic can drop overnight.

  • Metadata: Preserve titles, descriptions, alt text, and Open Graph tags. Missing these leads to immediate SEO losses.
  • Redirects: Map old URLs with 301 redirects (avoid chains). Broken redirects = lost link equity.
  • Structured Data: Add/update schema (FAQ, Product, Article, VideoObject). This improves visibility in SERPs and AI-generated results.
  • Core Web Vitals: Ensure the new site is fast, stable, and mobile-first. Poor performance = lower rankings.
  • Emerging SEO: Optimize for AI/Answer Engine results, focus on E-E-A-T (author, trust, freshness), and create natural Q&A content for voice/conversational search.
  • Validation: Crawl the site before and after migration with tools like Screaming Frog or Siteimprove to confirm nothing is missed.

Strong SEO handling ensures the new Sitecore build doesn’t just look modern — it retains rankings, grows traffic, and is ready for AI-powered search.

 

6. Serialization & Item Deployment

Serialization is at the heart of a smooth migration and ongoing Sitecore development. Without the right approach, environments drift, unexpected items get deployed, or critical templates are missed.

  • ✅ Best Practices
    • Choose the Right Tool: Sitecore Content Serialization (SCS), Unicorn, or TDS — select based on your project needs.
    • Scope Carefully: Serialize only what is required (templates, renderings, branches, base content). Avoid unnecessary content items.
    • Organize by Modules: Structure serialization so items are grouped logically (feature, foundation, project layers). This keeps deployments clean and modular.
    • Version Control: Store serialization files in source control (Git/Azure devops) to track changes and allow safe rollbacks.
    • Environment Consistency: Automate deployment pipelines so serialized items are promoted consistently from dev → QA → UAT → Prod.
    • Validation: Always test deployments in lower environments first to ensure no accidental overwrites or missing dependencies.

Properly managed serialization ensures clean deployments, consistent environments, and fewer surprises during migration and beyond.

 

7. Forms & Submissions

In Sitecore XM Cloud, forms require careful planning to ensure smooth data capture and migration.

  •  XM Cloud Forms (Webhook-based): Submit form data via webhooks to CRM, backend, or marketing platforms. Configure payloads properly and ensure validation, spam protection, and compliance.
  • Third-Party Forms: HubSpot, Marketo, Salesforce, etc., can be integrated via APIs for advanced workflows, analytics, and CRM connectivity.
  • Create New Forms: Rebuild forms with modern UX, accessibility, and responsive design.
  • Migrate Old Submission Data: Extract and import previous form submissions into the new system or CRM, keeping field mapping and timestamps intact.
  • ✅ Best Practices: Track submissions in analytics, test end-to-end, and make forms configurable for content authors.

This approach ensures new forms work seamlessly while historical data is preserved.

 

8. Personalization & Experimentation

Migrating personalization and experimentation requires careful planning to preserve engagement and insights.

  • Export & Rebuild: Export existing rules, personas, and goals. Review them thoroughly and recreate only what aligns with current business requirements.
  • A/B Testing: Identify active experiments, migrate if relevant, and rerun them in the new environment to validate performance.
  • Sitecore Personalize Implementation:
    • Plan data flow into the CDP and configure event tracking.
    • Implement personalization via Sitecore Personalize Cloud or Engage SDK for xm cloud implementation, depending on requirements.

✅Best Practices:

  • Ensure content authors can manage personalization rules and experiments without developer intervention.
  • Test personalized experiences end-to-end and monitor KPIs post-migration.

A structured approach to personalization ensures targeted experiences, actionable insights, and a smooth transition to the new Sitecore environment.

 

9. Accessibility

Ensuring accessibility is essential for compliance, usability, and SEO.

  • Follow WCAG standards: proper color contrast, semantic HTML, ARIA roles, and keyboard navigation.
  • Validate content with accessibility tools and manual checks before migration cutover.
  • Accessible components improve user experience for all audiences and reduce legal risk.

 

10. Performance, Caching & Lazy Loading

Optimizing performance is critical during a migration to ensure fast page loads, better user experience, and improved SEO.

  • Caching Strategies:
    • Use Sitecore output caching and data caching for frequently accessed components.
    • Implement CDN caching for media assets to reduce server load and improve global performance.
    • Apply cache invalidation rules carefully to avoid stale content.
  • Lazy Loading:
    • Load images, videos, and heavy components only when they enter the viewport.
    • Improves perceived page speed and reduces initial payload.
  • Performance Best Practices:
    • Optimize images and media (WebP/AVIF).
    • Minimize JavaScript and CSS bundle size, and use tree-shaking where possible.
    • Monitor Core Web Vitals (LCP, CLS, FID) post-migration.
    • Test performance across devices and regions before go-live.
    • Content Author Consideration:
    • Ensure caching and lazy loading do not break dynamic components or personalization.
    • Provide guidance to authors on content that might impact performance (e.g., large images or embeds).

Proper caching and lazy loading ensure a fast, responsive, and scalable Sitecore experience, preserving SEO and user satisfaction after migration.

 

11. CI/CD, Monitoring & Automated Testing

A well-defined deployment and monitoring strategy ensures reliability, faster releases, and smooth migrations.

  • CI/CD Pipelines:
    • Set up automated builds and deployments according to your hosting platform: Azure, Vercel, Netlify, or on-premise.
    • Ensure deployments promote items consistently across Dev → QA → UAT → Prod.
    • Include code linting, static analysis, and unit/integration tests in the pipeline.
  • Monitoring & Alerts:
    • Track website uptime, server health, and performance metrics.
    • Configure timely alerts for downtime or abnormal behavior to prevent business impact.
  • Automated Testing:
    • Implement end-to-end, regression, and smoke tests for different environments.
    • Include automated validation for content, forms, personalization, and integrations.
    • Integrate testing into CI/CD pipelines to catch issues early.
  • ✅ Best Practices:
    • Ensure environment consistency to prevent drift.
    • Use logs and dashboards for real-time monitoring.
    • Align testing and deployment strategy with business-critical flows.

A robust CI/CD, monitoring, and automated testing strategy ensures reliable deployments, reduced downtime, and faster feedback cycles across all environments.

 

12. Governance, Licensing & Cutover

A successful migration is not just technical — it requires planning, training, and governance to ensure smooth adoption and compliance.

  • License Validation: Compare the current Sitecore license with what the new setup requires. Ensure coverage for all modules, environments. Validate and provide accurate rights to users and roles.
  • Content Author & Marketer Readiness:
    • Train teams on the new workflows, tools, and interface.
    • Provide documentation, demos, and sandbox environments to accelerate adoption.
  • Backup & Disaster Recovery:
    • Plan regular backups and ensure recovery procedures are tested.
    • Define RTO (Recovery Time Objective) and RPO (Recovery Point Objective) for critical data.
  • Workflow, Roles & Permissions:
    • Recreate workflows, roles, and permissions in the new environment.
    • Implement custom workflows if required.
    • Governance gaps can lead to compliance and security risks — audit thoroughly.
  • Cutover & Post-Go-Live Support:
    • Plan the migration cutover carefully to minimize downtime.
    • Prepare a support plan for immediate issue resolution after go-live.
    • Monitor KPIs, SEO, forms, personalization, and integrations to ensure smooth operation.

Proper governance, training, and cutover planning ensures the new Sitecore environment is compliant, adopted by users, and fully operational from day one.

 

13. Training & Documentation

Proper training ensures smooth adoption and reduces post-migration support issues.

  • Content Authors & Marketers: Train on new workflows, forms, personalization, and content editing.
  • Developers & IT Teams: Provide guidance on deployment processes, CI/CD, and monitoring.
  • Documentation: Maintain runbooks, SOPs, and troubleshooting guides for ongoing operations.
  • Encourage hands-on sessions and sandbox practice to accelerate adoption.

 

Summary:

Sitecore migrations are complex, and success often depends on the small decisions made throughout development, performance tuning, SEO handling, and governance. This blog brings together practical approaches and lessons learned from real-world implementations — aiming to help teams build scalable, accessible, and future-ready Sitecore solutions.

While every project is different, the hope is that these shared practices offer a useful starting point for others navigating similar journeys. The Sitecore ecosystem continues to evolve, and so do the ways we build within it.

 

]]>
https://blogs.perficient.com/2025/10/28/executing-a-sitecore-migration-development/feed/ 1 388061
Planning Sitecore Migration: Things to consider https://blogs.perficient.com/2025/08/29/planning-sitecore-migration-things-to-consider/ https://blogs.perficient.com/2025/08/29/planning-sitecore-migration-things-to-consider/#respond Fri, 29 Aug 2025 10:49:31 +0000 https://blogs.perficient.com/?p=386668

Migrating a website or upgrading to a new Sitecore platform is more than a technical lift — it’s a business transformation and an opportunity to align your site and platform with your business goals and take full advantage of Sitecore’s capabilities. A good migration protects functionality, reduces risk, and creates an opportunity to improve user experience, operational efficiency, and measurable business outcomes.

Before jumping to the newest version or the most hyped architecture, pause and assess. Start with a thorough discovery: review current architecture, understand what kind of migration is required, and decide what can realistically be reused versus what should be refactored or rebuilt, along with suitable topology and Sitecore products.

This blog expands the key considerations before committing to a Sitecore-specific migration, translating them into detailed, actionable architecture decisions and migration patterns that guide impactful implementation.

 

1) Clarifying client requirements

Before starting any Sitecore migration or implementation, it’s crucial to clarify client’s requirements thoroughly. This ensures the solution aligns with actual business needs, not just technical requests and helps avoid rework or misaligned outcomes.

Scope goes beyond just features: Don’t settle for “migrate this” as the requirement. Ask deeper questions to shape the right migration strategy:

  • Business goals: Is the aim a redesign, conversion uplift, version upgrade, multi-region rollout, or compliance?
  • Functional scope: Are we redesigning the entire site or specific flows like checkout/login, or making back office changes?
  • Non-functional needs: What are the performance SLAs, uptime expectations, compliance (e.g.: PCI/GDPR), and accessibility standards?
  • Timeline: Is a phased rollout preferred, or a big-bang launch?

Requirements can vary widely, from full redesigns using Sitecore MVC or headless (JSS/Next.js), to performance tuning (caching, CDN, media optimization), security enhancements (role-based access, secure publishing), or integrating new business flows into Sitecore workflows.
Sometimes, the client may not fully know what’s needed, it’s up to us to assess the current setup and recommend improvements. Don’t assume the ask equals the need, A full rewrite isn’t always the best path. A focused pilot or proof of value can deliver better outcomes and helps validate the direction before scaling.

 

2) Architecture of the client’s system

Migration complexity varies significantly based on what the client is currently using. You need to evaluate current system and its uses and reusability.

Key Considerations

  • If the client is already on Sitecore, the version matters. Older versions may require reworking the content model, templates, and custom code to align with modern Sitecore architecture (e.g.: SXA, JSS).
  • If the client is not on Sitecore, evaluate their current system, infrastructure, and architecture. Identify what can be reused—such as existing servers(in case of on-prem), services, or integrations—to reduce effort.
  • Legacy systems often include deprecated APIs, outdated connectors, or unsupported modules, which increase technical risk and require reengineering.
  • Historical content, such as outdated media, excessive versioning, or unused templates, can bloat the migration. It’s important to assess what should be migrated, cleaned, or archived.
  • Map out all customizations, third-party integrations, and deprecated modules to estimate the true scope, effort, and risk involved.
  • Understanding the current system’s age, architecture, and dependencies is essential for planning a realistic and efficient migration path.

 

3) Media Strategy

When planning a Sitecore migration or upgrade, media handling can lead to major performance issues post-launch. These areas are critical for user experience, scalability, and operational efficiency, so they need attention early in the planning phase. Digital Asset Management (DAM) determines how assets are stored, delivered, and governed.

Key Considerations

  • Inventory: Assess media size, formats, CDN references, metadata, and duplicates. Identify unused assets, and plat to adopt modern formats (e.g., WebP).
  • Storage Decisions: Analyze and decide whether assets stay in Sitecore Media Library, move to Content Hub, or use other cloud storage (Azure Blob, S3)?
  • Reference Updates: Plan for content reference updates to avoid broken links.

 

4) Analytics, personalization, A/B testing, and forms

These features often carry stateful data and behavioral dependencies that can easily break during migration if not planned for. Ignoring them can lead to data loss and degraded user experience.

Key Considerations

  • Analytics: Check if xDB, Google Analytics, or other trackers are in use? Decide how historical analytics data will be preserved, validated, and integrated into the new environment?
  • Personalization: Confirm use of Sitecore rules, xConnect collections, or an external personalization engine. Plan to migrate segments, conditions, and audience definitions accurately.
  • A/B Testing & Experiments: Draft a plan to export experiment definitions and results is present.
  • Forms: Analyze which forms collects data, and how do they integrate with CRM or marketing automation?

Above considerations play important role in choosing Sitecore topology, if there is vast use of analytics XP makes a suitable option, forms submission consent flows have different approach in different topologies.

 

5) Search Strategy

Search is critical for user experience, and a migration is the right time to reassess whether your current search approach still makes sense.

Key Considerations

  • Understand how users interact with the site, Is search a primary navigation tool or a secondary feature? Does it significantly impact conversion or engagement?
  • Identify current search engine if any. Access its features, if advanced capabilities like AI recommendations, synonyms, or personalization being used effectively.
  • If the current engine is underutilized, note that maintaining it may add unnecessary cost and complexity. If search is business-critical, ensure feature parity or enhancement in the new architecture.
  • Future Alignment:  Based on requirements, determine whether the roadmap supports:
    • Sitecore Search (SaaS) for composable and cloud-first strategies.
    • Solr for on-prem or PaaS environments.
    • Third-party engines for enterprise-wide search needs.

 

6) Integrations, APIs & Data Flows

Integrations are often the hidden complexity in Sitecore migrations. They connect critical business systems, and any disruption can lead to post-go-live incidents. For small, simple content-based sites with no integrations, migrations tend to be quick and straightforward. However, for more complex environments, it’s essential to analyze all layers of the architecture to understand where and how data flows. This includes:

Key Considerations

  • Integration Inventory: List all synchronous and asynchronous integrations, including APIs, webhooks, and data pipelines. Some integrations may rely on deprecated endpoints or legacy SDKs that need refactoring.
  • Criticality & Dependencies: Identify mission-critical integrations (e.g.: CRM, ERP, payment gateways).
  • Batch & Scheduled Jobs: Audit long-running processes, scheduled exports, and batch jobs. Migration may require re-scheduling or re-platforming these jobs.
  • Security & Compliance: Validate API authentication, token lifecycles, and data encryption. Moving to SaaS or composable may require new security patterns.

 

7) Identify Which Sitecore offerings are in use — and to what extent?

Before migration, it’s essential to document the current Sitecore ecosystem and evaluate what the future state should look like. This determines whether the path is a straight upgrade or a transition to a composable stack.

Key Considerations

  • Current Topology: Is the solution running on XP or XM? Assume that XP features (xDB, personalization) may not be needed if moving to composable.
  • Content Hub: Check if DAM or CMP is in use. If not, consider whether DAM is required for centralized asset management, brand consistency, and omnichannel delivery.
  • Sitecore Personalize & CDP: Assess if personalization is currently rule-based or if advanced testing and segmentation are required.
  • OrderCloud: If commerce capabilities exist today or are planned in the near future.

 

Target Topologies

This is one of the most critical decisions is choosing the target architecture. This choice impacts infrastructure, licensing, compliance, authoring experience, and long-term scalability. It’s not just a technical decision—it’s a business decision that shapes your future operating model.

Key Considerations

  • Business Needs & Compliance: Does your organization require on-prem hosting for regulatory reasons, or can you move to SaaS for agility?
  • Authoring Experience: Will content authors need Experience Editor, or is a headless-first approach acceptable?
  • Operational Overhead: How much infrastructure management can team handle post-migration?
  • Integration Landscape: Are there tight integrations with legacy systems that require full control over infrastructure?

Architecture Options & Assumptions

Option Best For Pros Cons Assumptions
XM (on-prem/PaaS) CMS-only needs, multilingual content, custom integrations Visual authoring via Experience Editor

Hosting control

Limited marketing features Teams want hosting flexibility and basic CMS capabilities but analytics is not needed
Classic XP (on-prem/PaaS) Advanced personalization, xDB, marketing automation Full control

Deep analytics

Advanced marketing Personalization

Complex infrastructure, high resource demand Marketing features are critical; infra-heavy setup is acceptable
XM Cloud (SaaS) Agility, fast time-to-market, composable DXP Reduced overhead

Automatic updates

Headless-ready

Limited low-level customization SaaS regions meet compliance, Needs easy upgrades

 

Along with topology its important to consider hosting and frontend delivery platform. Lets look at available hosting options with their pros and cons:

  • On-Prem(XM/XP): You can build the type of machine that you want.
    • Pros: Maximum control, full compliance for regulated industries, and ability to integrate with legacy systems.
    • Cons: High infrastructure cost, slower innovation, and manual upgrades, difficult to scale.
    • Best For: Organizations with strict data residency, air-gapped environments, or regulatory mandates.
    • Future roadmap may require migration to cloud, so plan for portability.
  • PaaS (Azure App Services, Managed Cloud – XM/XP)
    • Pros: Minimal up-front costs and you do not need to be concerned about the maintenance of the underlying machine.
    • Cons: Limited choice of computing options and functionality.
    • Best For: Organizations expecting to scale vertically and horizontally, often and quickly
  • IaaS (Infrastructure as a service – XM/XP)
    • This is same as on-premise, but with VMs you can tailor servers to meet your exact requirements.
  • SaaS (XM Cloud)
    • Pros: Zero infrastructure overhead, automatic upgrades, global scalability.
    • Cons: Limited deep customization at infra level.
    • Best For: Organizations aiming for composable DXP and agility.
    • Fully managed by Sitecore (SaaS).

For development, you have different options for example: .Net MVC, .Net Core, Next JS, React. Depending on topology suggested, selection of frontend delivery can be hybrid or headless:

.NET MVC → For traditional, web-only application.
Headless → For multi-channel, composable, SaaS-first strategy.
.NET Core Rendering → For hybrid modernization with .NET.

 

8) Security, Compliance & Data Residency

Security is non-negotiable during any Sitecore migration or upgrade. These factors influence architecture, hosting choices and operational processes.

Key Considerations

  • Authentication & Access: Validate SSO, SAML/OAuth configurations, API security, and secrets management. Assume that identity providers or token lifecycles may need reconfiguration in the new environment.
  • Compliance Requirements: Confirm obligations like PCI, HIPAA, GDPR, Accessibility and regional privacy laws. Assume these will impact data storage, encryption, and as AI is in picture now a days it will even have impact on development workflow.
  • Security Testing: Plan for automated vulnerability scans(decide tools you going to use for the scans) and manual penetration testing as part of discovery and pre go-live validation.

 

9) Performance

A migration is the perfect opportunity to identify and fix structural performance bottlenecks, but only if you know your starting point. Without a baseline, it’s impossible to measure improvement or detect regressions.

Key Considerations

  • Baseline Metrics: Capture current performance indicators like TTFB (Time to First Byte), LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift), throughput, and error rates. These metrics will guide post-migration validation and SLA commitments.
  • Caching & Delivery: Document existing caching strategies, CDN usage, and image delivery methods. Current caching patterns may need reconfiguration in the new architecture.
  • Load & Stress Testing: Define peak traffic scenarios and plan load testing tools with Concurrent Users and Requests per Second.

 

10) Migration Strategies

Choosing the right migration strategy is critical to balance risk, cost, and business continuity. There’s no one size fits all approach—your suggestion/choice depends on timeline, technical debt and operational constraints.

Common Approaches

    • Lift & Shift
      Move the existing solution as is with minimal changes.
      This is low-risk migrations where speed is the priority. When the current solution is stable and technical debt is manageable.
      However with this approach the existing issues and inefficiencies stays as is which can be harmful.

 

    • Phased (Module-by-Module)
      Migrate critical areas first (e.g.: product pages, checkout) and roll out iteratively.
      This can be opted for large, complex sites where risk needs to be minimized, when business continuity is critical.
      With this approach, timelines are longer and requires dual maintenance during transition.

 

    • Rewrite & Cutover
      Rebuild the solution from scratch and switch over at once.
      This is can be chosen when the current system doesn’t align with future architecture. When business wants a clean slate for modernization.

 

 

Above options can be suggested based on several factors whether business tolerate downtime or dual maintenance. What are the Timelines, What’s the budget. If the current solution worth preserving, or is a rewrite inevitable? Does the strategy align with future goals?

 

Final Thoughts

Migrating to Sitecore is a strategic move that can unlock powerful capabilities for content management, personalization, and scalability. However, success lies in the preparation. By carefully evaluating your current architecture, integration needs and team readiness, you can avoid common pitfalls and ensure a smoother transition. Taking the time to plan thoroughly today will save time, cost, and effort tomorrow setting the stage for a future-proof digital experience platform.

 

]]>
https://blogs.perficient.com/2025/08/29/planning-sitecore-migration-things-to-consider/feed/ 0 386668
Managing Projects in Sitecore Stream: From Brainstorm to Delivery https://blogs.perficient.com/2025/08/11/sitecore-stream-project-management/ https://blogs.perficient.com/2025/08/11/sitecore-stream-project-management/#respond Mon, 11 Aug 2025 17:17:41 +0000 https://blogs.perficient.com/?p=385960

In earlier blogs – Why AI-Led Experiences Are the Future — And How Sitecore Stream Delivers Them and Creating a Brand Kit in Stream: Why It Matters and How It helps Organizations, I tried to explore what Sitecore Stream is, how it powers AI-led content management, and how features like Brand Kit and Assist streamline your creative process. Those were all about content creation and brand consistency.

But here’s the next big leap:

Imagine this: You’re enhancing your website, launching a new campaign, or rolling out a promotional activity — and you can plan, manage, and execute it all without ever leaving Sitecore portal. No switching between tools. No messy integrations. No lost time.

With AI seamlessly integrated into project creation and management, Sitecore Stream becomes more than just a workspace — it becomes your smart workspace. From automatically generating project outlines, suggesting tasks, and assigning responsibilities, to tracking progress and flagging risks, AI acts as your proactive co-pilot every step of the way.

Here’s what that means for you:
  • One Unified Platform – Content, creative assets, AI planning, project tracking — all in one place.
  • Smarter, Faster Execution – AI recommendations help you plan and launch in record time.
  • Team Alignment Without the Chaos – Everyone works in the same environment, with instant visibility into priorities and progress.
  • Eliminate Context Switching – Stay focused by keeping everything connected inside Sitecore Stream.
From the very first spark of an idea, through collaboration, task assignment, progress tracking, and final delivery, Sitecore Stream is the complete command center for your digital initiatives.
Whether it’s a small content update or a large-scale global campaign, you get everything you need — and AI ensures you’re always moving faster, smarter, and more efficiently.
Why settle for just project management, when you can have intelligent project management, fully integrated into your digital experience platform?

 

Why Manage Projects in Sitecore Stream?

Traditional workflows often mean hopping between:

  • A PM tool for scheduling and tasks
  • A content platform for asset creation
  • A chat app for collaboration

With Sitecore Stream, you get:

  • A centralized workspace to create and manage projects
  • Built-in AI to help suggest deliverables and tasks
  • Direct Sitecore product actions (e.g., linking straight into XM Cloud or Personalize or CDP)
  • Multiple visual views (List, Kanban, Timeline, Funnel) for different working styles
  • Integrated file storage for creative assets and documents

 

Let’s walk through the steps to create and manage your first project in Sitecore Stream.

Creating Your First Project — Step-by-Step

1. Check Permissions

To create projects, you need:

  • Admin app role in Stream, or
  • Org Admin / Owner in Sitecore Cloud Portal

If you don’t have these permissions, request them from your Sitecore Cloud admin.

 

2. Create the Project

  • Navigate to Projects → Create project
  • Fill in:
    • Project name
    • Start and End dates (the UI will calculate total days)
    • Brand Kit – link directly to your approved assets
    • Labels – for easy filtering
    • Thumbnail – for quick visual recognition
  • Click Save to open your Project Details page

Tip: If you have a Brand Kit, always link it when creating a campaign — it keeps every deliverable aligned with approved brand standards.

New Project

 

3. Add Team Members

  • Admins can invite members directly or approve/reject access requests.
  • Keep project access restricted to relevant stakeholders to reduce noise and maintain focus.
  • Click on +(Plus) icon on top right corner to add new team member

Add Members

 

Add Deliverables – Turning Ideas into Action:

Deliverables are the big-ticket outputs your project needs – the stepping stones between concept and execution.

Manual Creation

From the Project Details -> List tab:

  • Click Add deliverable
  • Enter:
    • Name
    • Due date
    • Funnel stage (Top, Middle, Bottom)
    • Funnel tactic (predefined or custom)
    • Labels (optional)
  • Save

AI-Powered Creation

As Sitecore stream is AI packed, its helps you in every step from brainstorming to executions, Use Suggest deliverables with AI:

  • Stream analyzes your project name and description
  • Add a prompt for more context for creating deliverable. Ex: In below screenshot, I have given context to create deliverable to add campaign and stream has generated deliverables.
  • AI proposes deliverables across funnel stages
    – Pick, refine, or regenerate until it fits your plan

Deliverables

Breaking It Down Further: Tasks

Tasks are the day-to-day actions needed to complete each deliverable.

Manual Task Creation

Under a deliverable in the List tab:

  • Click Add task
  • Give it a name and save
  • Open the task pane to set:
    • Labels
    • Status (Not started / In progress / Done)
    • Start & end dates (Stream shows remaining days)
    • Assignee
    • Priority (High / Medium / Low)
    • Description
    • Attachments (DOCX, PDF, PNG, JPG)
    • Dependencies
    • Actions (predefined calls into Sitecore products)

AI-Powered Task Suggestions

  • Click Suggest tasks with AI under a deliverable
  • AI proposes tasks — you can save, edit, or remove as needed

Tasks

Linking Sitecore Actions

You can add Sitecore actions to a task — e.g., a button to create an specific item in XM Cloud. This bridges planning and doing in one click.  You can add action for sitecore products like Personalize, CDP, XMcloud, once you choose resource, you can select action to be performed in the products.

Actions To Diff Product

Actions

Working Your Way: Multiple Views

Different teams prefer different ways of visualizing work. Sitecore Stream gives you five interactive views:

1. List View (Default)

  • Hierarchical view of deliverables and tasks
  • Best for editing, filtering, and using AI suggestions

2. Kanban View

  • Drag task cards between statuses
  • Perfect for daily standups and quick progress tracking
  • Expand/collapse deliverables for focus

3. Timeline View (Gantt-Style)

  • Visualize start/end dates, durations, and dependencies
  • Drag-and-drop to adjust schedules
  • Switch between Day/Week/Month/Quarter for planning at different levels

Timeline

4. Funnel View

  • Organize deliverables into Top, Middle, Bottom stages
  • See funnel coverage at a glance
  • Drag between stages to reassign

Funnel

5. Attachments View

  • Centralized file repository for your project
  • Search, preview, filter, and download creative assets

 

The Value of Stream’s Orchestration

Sitecore Stream doesn’t just bolt project management onto a content tool — it blends them into a single marketing execution hub. The benefits are tangible:

  • No context switching between PM tools and content platforms
  • AI assistance for faster planning
  • Visual views for different work styles
  • Integrated Sitecore actions to reduce clicks and friction
  • Built-in asset management for projects

When your campaign planning, creative production, and execution all live in one system, your team can move faster and with more confidence that nothing is falling through the cracks.

Sitecore Stream moves marketing orchestration into the same ecosystem as content and product tools. You’ll gain a unified space for ideation, execution, and optimization — keeping strategy, tasks, and assets aligned from start to finish.

That combination cuts down context switches, lesser dependencies, AI help for ideation, speeds campaigns, and makes funnel coverage and task ownership visible at a glance. If you already use Sitecore products, the integrated actions are particularly time-saving.

]]>
https://blogs.perficient.com/2025/08/11/sitecore-stream-project-management/feed/ 0 385960
Creating a Brand Kit in Stream: Why It Matters and How It helps Organizations https://blogs.perficient.com/2025/07/15/brandkit-sitecore-stream/ https://blogs.perficient.com/2025/07/15/brandkit-sitecore-stream/#respond Tue, 15 Jul 2025 09:24:10 +0000 https://blogs.perficient.com/?p=384493

In today’s digital-first world, brand consistency is more than a visual guideline, it’s a strategic asset. As teams scale and content demands grow, having a centralized Brand Kit becomes essential. If you’re using Sitecore Stream, building a Brand Kit is not just useful, it’s transformational.

In my previous post, I tried to explore Sitecore Stream, highlighting how it reimagines modern marketing by bringing together copilots, agentic AI, and real-time brand intelligence to supercharge content operations. We explored how Stream doesn’t just assist it acts with purpose, context, and alignment to your brand.

Now, we take a deeper dive into one of the most foundational elements that makes that possible: Brand Kit.

In this post, we’ll cover:

  • What a Brand Kit is inside Stream, and why it matters
  • How to build one – from brand documents to structured sections
  • How AI copilots use it to drive consistent, on-brand content creation

Let’s get into how your brand knowledge can become your brand’s superpower.

 

What Is a Brand Kit?

A Brand Kit is a centralized collection of brand-defining assets, guidelines, tone, messaging rules.

Brand kit sections represent a subset of your brand knowledge.
It includes information about your brands like:

  • Logo files and usage rules
  • Typography and color palettes
  • Brand voice and tone guidelines
  • Brand specific imagery or templates
  • Do’s and Don’ts of brand usage
  • Compliance or legal notes

Think of it as your brand’s source of truth, accessible by all stakeholders – designers, marketers, writers, developers, and AI assistants.

 

Why Stream Needs a Brand Kit

Stream is a platform where content flows – from ideas to execution. Without a Brand Kit:

  • Writers may use inconsistent tone or terminology as per their knowledge or considerations about brand.
  • Designers may reinvent the wheel with each new visual.
  • Copilots might generate off-brand content.
  • Cross-functional teams lose time clarifying brand basics.

With a Brand Kit in place, Stream becomes smarter, faster, and more aligned with your organization’s identity.

 

How a Brand Kit Helps the Organization

Here’s how Stream and your Brand Kit work together to elevate content workflows:

  •  Faster onboarding: New team members instantly understand brand expectations.
  •  Accurate content creation: Content writers, designers, and strategists reference guidelines directly from the platform.
  •  AI-assisted content stays on-brand: Stream uses your brand data to personalize AI responses for content creation and editing.
  •  Content reuse and updates become seamless with analysis: Brand messaging is consistent across landing pages, emails, and campaigns. You can also perform A/B testing with brandkit generated content vs manually added content.

Now that we understand what a Brand Kit is and why it’s essential, let’s walk through how to create one effectively within Sitecore Stream.

 

Uploading Brand Documents = Creating Brand Knowledge

To create a Brand Kit, you begin by uploading and organizing your brand data this includes documents, guidelines, assets, and other foundational materials that define your brand identity.

Below screenshot displays the screen of uploaded brand document, button to process the document and an option to upload another document.

Upload Doc

 

In Stream, when you upload brand-specific documents, they don’t just sit there. The process:

  • Analyses the data
  • Transforms them into AI-usable data by Creating brand knowledge
  • Makes this knowledge accessible across brainstorming, content creation, and AI prompts

Process

In short, Here’s how the process works:

  • Create a Brand Kit – Start with a blank template containing key sections like Brand Context, Tone of Voice, and Global Goals.
  • Upload Brand Documents – Add materials like brand books, visual and style guides to serve as the source of your brand knowledge.
  • Process Content – Click Process changes to begin ingestion. Stream analyzes the documents, breaks them into knowledge chunks, and stores them.
  • Auto-Fill Sections – Stream uses built-in AI prompts to populate each section with relevant content from your documents.

 

Brand Kit Sections: Structured for Versatility

Once your Brand Kit is created and the uploaded documents are processed, Stream automatically generates key sections. Each section serves a specific purpose and is built from well-structured content extracted from your brand documents. These are essentially organized chunks of brand knowledge, formatted for easy use across your content workflows. Default sections that gets created are as follows:

  • Global Goals – Your brand’s core mission and values.
  • Brand Context – Purpose, positioning, and brand values.
  • Dos and Don’ts – Content rules to stay on-brand.
  • Tone of Voice – Defines your brand’s personality.
  • Checklist – Quick reference for brand alignment.
  • Grammar Guidelines – Writing style and tone rules.
  • Visual Guidelines – Imagery, icons, and layout specs.
  • Image Style – Color, emotion, and visual feel.

Each section holds detailed, structured brand information that can be updated manually or enriched using your existing brand knowledge. If you prefer to control the content manually and prevent it from being overwritten during document processing, you can mark the section as Non-AI Editable.

Stream allows you to add new subsections or customize existing ones to adapt to your evolving brand needs. For example, you might add a “Localization Rules” section when expanding to global markets, or a “Crisis Communication” section to support PR strategies.

When creating a new subsection, you’ll provide a name and an intent a background prompt that guides the AI to extract relevant information from your uploaded brand documents to populate the section accurately.

Below screenshot of sections created after brand document process and subsections for example:

Brand Kit Sections

Section Details

AI + Brand Kit = Smarter Content, Automatically

Now we have created brand kit, lets see how AI in Stream uses your Brand Kit to:

Suggest on-brand headlines or social posts

  • Flag content that strays from brand guidelines
  • Assist in repurposing older content using updated brand tone

It’s like having a brand-savvy assistant embedded in your workflow.

 

Brand assist in Sitecore Stream

Once you have Brand Kit ready, you can use the Brand Assistant to generate and manage content aligned with your brand using simple prompts.

Key uses:

  • Ask brand-related questions
  • Access brand guidelines
  • Generate on-brand content
  • Draft briefs and long-form content
  • Explore ideas and marketing insights

It uses agentic AI, with specialized agents that ensure every output reflects your brand accurately.

When a user enters a prompt in the Brand Assistant, whether it’s a question or an instruction the copilots automatically includes information from the Brand Context section of the Brand Kit. It then evaluates whether this context alone is enough to generate a response. If it is, a direct reply is provided. If not, specialized AI agents are activated to gather and organize additional information.

These include a Search Agent (to pull data from brand knowledge or the web), a Brief Agent (for campaign or creative brief requests), and a Summary Agent (to condense information into a clear, relevant response).

I clicked on Brand Assistant tab, selected my Brand Kit, asked a question, and the response I got was spot on! It perfectly aligned with the brand documents I had uploaded and even suggested target consumer based on that information. Super impressed with how well it worked!

Brandkit Selection In Assist

Brainstorm

 

Now it’s time to see how the Brand Kit helps me generate content on XM Cloud or Experience Platform. To do that, connect XM Cloud website with Sitecore Stream so the copilots can access the Brand Kit.

I simply went to Site Settings, found the Stream section, selected my Stream instance and that’s it. I was all set to use brandkit.

Brandkit Setting In Site

Now, when I open the page editor and click on Optimize, I see an additional option with my Brand Kit name. Once selected, I can either draft new text or optimize existing content.

The copilot leverages the Brand Kit sections to generate content that’s consistent, aligned with our brand voice, and ready to use.

For example, I asked the brand kit to suggest campaign content ideas and it provided exactly the kind of guidance I needed.

Campaign Page

 

Conclusion

Building and maintaining a Brand Kit in Stream isn’t just about visual consistency, it’s about scaling brand intelligence across the entire content lifecycle. When your Brand Kit is connected to the tools where work happens, everyone from AI to human collaborators works with the same understanding of what your brand stands for.

]]>
https://blogs.perficient.com/2025/07/15/brandkit-sitecore-stream/feed/ 0 384493
Why AI-Led Experiences Are the Future — And How Sitecore Stream Delivers Them https://blogs.perficient.com/2025/06/12/why-ai-led-experiences-are-the-future-and-how-sitecore-stream-delivers-them/ https://blogs.perficient.com/2025/06/12/why-ai-led-experiences-are-the-future-and-how-sitecore-stream-delivers-them/#respond Thu, 12 Jun 2025 11:08:30 +0000 https://blogs.perficient.com/?p=382748

In a world that’s moving at lightning speed, customers expect brands to keep up — to understand them instantly, respond to their behavior in real-time, and offer relevant, helpful experiences wherever they are. This is where Artificial Intelligence (AI) has become not just useful, but absolutely essential.

The Growing Power of AI in Today’s World

AI is revolutionizing how businesses operate and how brands engage with customers. What started as automation is now intelligent orchestration:

  • Recommending the right product at the right time
  • Automatically generating content in your brand voice
  • Detecting patterns in real-time behavior
  • Personalizing experiences across every channel

From e-commerce to healthcare, entertainment to education, AI is making every industry smarter, faster, and more responsive. And customer expectations are rising accordingly.

Why Sitecore Has Embraced AI

As a leader in digital experience platforms, Sitecore understands that personalization, content delivery, and customer journey orchestration can’t rely on manual processes.

That’s why Sitecore has integrated AI deeply into its product ecosystem — not just to enhance content workflows, but to transform how real-time experiences are built and delivered.

At the heart of this transformation is Sitecore Stream.

Introducing Sitecore Stream

Sitecore Stream introduces AI capabilities to Sitecore products, specifically tailored for marketers. It empowers smarter, faster end-to-end content creation and distribution at scale, unlocking remarkable efficiency gains. Featuring brand-aware AI, intelligent copilots, autonomous agents, and streamlined agentic workflows, Sitecore Stream transforms marketing effectiveness by helping you speed up time-to-market, lower costs, and deliver compelling, consistent digital experiences across all channels.

But Sitecore Stream doesn’t just work fast — it works intelligently and brand-safely.

Sitecore Stream automates all tasks and deliverables in a marketing workflow, utilizing AI to make them faster, easier, and more consistent. Through copilots, agents, content ideation and creation, and then optimizing the customer experience.

Stream is built on the Microsoft Azure OpenAI Service, utilizing advanced large language model (LLM) technology to help teams of all sizes ideate, create, and refine on-brand content more strategically and securely.

What is an LLM?

A large language model (LLM) is a type of machine learning model designed for natural language processing tasks such as language generation. LLMs are language models with many parameters and are trained with self-supervised learning on a vast amount of text.

Large Language Models (LLMs) are a cornerstone of generative AI, powering a wide array of natural language processing tasks, including:

  • Searching, translating, and summarizing text
  • Answering questions with contextual understanding
  • Creating new content—ranging from written text and images to music and software code

What truly sets LLMs apart is their ability to synthesize information, analyze complex data, and identify patterns and trends. This enables them to go beyond simple text generation and adapt seamlessly to diverse, specialized use cases across industries

Core Concepts & Capabilities of Sitecore Stream

Sitecore Stream transforms your marketing stack by combining:

  • Brand intelligence
  • AI automation
  • Real-time decisioning

It’s designed to help marketers do more, faster, with less manual effort—while maintaining creative control and brand integrity. Let’s look at how Sitecore Stream makes it possible with the following capabilities:

  1. Brand-Aware AI

Unlike generic AI tools, Stream uses RAG to anchor every response in the organization’s brand knowledge.

Retrieval-augmented generation (RAG) grounds AI outputs by pulling brand-specific information directly from documents uploaded by the organization. This ensures that content generation is informed by accurate, contextual brand knowledge.

Brand-aware AI is an advanced capability designed to maintain brand consistency across all Sitecore products. It leverages large language models (LLMs) and retrieves relevant information from brand resources to ensure alignment with the brand’s identity.

When brand documents are uploaded—detailing brand values, messaging, tone, visual identity, and the intended customer experience—brand knowledge is created through a process known as brand ingestion. This process organizes and optimizes the uploaded information, making it readily accessible to AI copilots across the platform.

As a result, AI-powered tools within Sitecore Stream consistently generate or suggest content that reflects the brand’s voice, tone, and guidelines. This enables marketers to scale content creation confidently, knowing all output remains true to the brand.

  1. Copilots and Agents

Stream introduces AI copilots that assist marketers in real-time, offering intelligent suggestions for content, layout, targeting, and workflows. Agents go further, autonomously executing tasks like campaign personalization, journey orchestration, or data segmentation.

Copilots provide intelligent guidance to support strategic decisions, while agents handle routine actions autonomously, freeing marketers to focus on high-value strategy and creative execution.

Both copilots and agents understand natural language and predefined prompts, seamlessly assisting throughout the content creation process and minimizing repetitive work. Marketers can effortlessly request content drafts, campaign ideas, or personalized experiences, all with simple, intuitive commands.

Fully integrated into Sitecore products, these tools deliver chat-based interactions, one-click workflows, and autonomous operations, making marketing smarter, faster, and more efficient.

Sitecore Stream currently offers 3 copilots

  • Brand Copilot – Helps marketers create content that matches the brand using tools for brand-aware chat, idea generation, and content briefs.
  • Content Copilot – Supports content tasks like writing, refining, translating, generating content with AI in Experience Platform, and optimizing/personalizing content in Sitecore.
  • Experience Copilot – Improves search with features like visual search in Content Hub and Q&A generation in Sitecore Search.
  1. Agentic Workflows

What is Agentic AI?

Agentic AI refers to artificial intelligence systems that can act autonomously, pursue goals, and make decisions proactively, almost like an “agent” with a mission.

In simple terms:

Agentic AI is AI that doesn’t just respond to commands—it plans, decides, and takes initiative to achieve a goal on its own. AI that doesn’t just assist—it acts.

Stream enables agentic workflows, where AI agents execute actions (e.g., publish content, trigger campaigns) based on real-time customer behavior or campaign goals.

Successful project management starts with a clear, organized plan that prioritizes tasks and involves the right team members at the right time. By setting defined goals, monitoring progress, and fostering collaboration, teams can ensure projects stay aligned and deliver desired outcomes.

Sitecore Stream’s orchestration capability takes project management to the next level by integrating AI-driven automation tailored for marketing teams. Whether managing campaigns, product launches, or digital advertising strategies, this feature helps coordinate efforts seamlessly across teams and Sitecore products.

By introducing early-stage AI agents, orchestration supports smarter task execution and informed decision-making. This paves the way for advanced agentic workflows within Sitecore, where AI systems can autonomously drive actions, make decisions, and dynamically respond to evolving project demands.

Conclusion

AI is no longer a future investment — it’s a present necessity. Customers demand relevance, speed, and brand coherence. Sitecore Stream is Sitecore’s answer to that demand: A real-time, AI-powered platform that combines behavioral insight, brand knowledge, and automation to help brands engage customers intelligently and instantly.

This is the future of digital experience. And with Sitecore Stream, it’s already here.

]]>
https://blogs.perficient.com/2025/06/12/why-ai-led-experiences-are-the-future-and-how-sitecore-stream-delivers-them/feed/ 0 382748
Using Sitecore Connect and OpenAI: A Practical Example for Page Metadata Enhancement https://blogs.perficient.com/2025/04/29/using-sitecore-connect-and-openai-a-practical-example-for-page-metadata-enhancement/ https://blogs.perficient.com/2025/04/29/using-sitecore-connect-and-openai-a-practical-example-for-page-metadata-enhancement/#respond Tue, 29 Apr 2025 10:09:44 +0000 https://blogs.perficient.com/?p=380646

Sitecore Connect is Sitecore’s low-code integration platform designed to easily automate workflows between Sitecore and external systems, without heavy custom coding. If you’re new to Sitecore Connect or want a deeper understanding of when and how to use it, check out these helpful resources:

In this practical example, we’ll demonstrate how to use Sitecore Connect together with OpenAI to send a page URL and fetch AI-generated meta tags (like meta title and meta description) to enrich the page’s SEO.

We will walk through:

  • Setting up a connection to OpenAI using Sitecore Connect’s HTTP app
  • Building a recipe that:
    • Triggers when a page is created or updated
    • Sends the page URL to OpenAI with a prompt asking for meta tags
    • Receives and processes AI-generated meta title and meta description

This approach enhances your content creation workflows by generating smart SEO metadata at scale, using minimal manual effort and maximum AI power.

Step 1: Creating a Connection with OpenAI

To start integrating OpenAI with Sitecore Connect, the first step is to create a connection using your OpenAI API key.

Follow these steps:

  1. Obtain the API Key:
    • Login to your OpenAI account (such as through OpenAI portal).
    • Navigate to your account settings and generate an API key.
      (Keep this key safe as you will need it for authentication.)
  2. Create a New Connection:
    • In Sitecore Connect, click on the Create Connection button.
  3. Choose OpenAI from the App Library:
    • A list of available apps will be displayed.
    • Use the search bar to find “OpenAI” and select it.
    • Click on Create Connection.
  4. Configure the Connection:
    • Enter the following details:
      • Name: Provide a meaningful name for your connection (e.g., “OpenAI Meta Tag Generator”).
      • Location: Select the workspace or folder where you want the connection saved.
      • API Key: Paste the API key you copied from your OpenAI account.Create A Connection
  5. Authenticate and Test:
    • Click on the Connect button.
    • Sitecore Connect will attempt to authenticate with OpenAI using the provided API key.
    • If the authentication is successful, your connection will be created and ready to use.

With the OpenAI connection established, we can now move on to building a recipe to send page URLs and retrieve meta tag suggestions!

Step 2: Building the Recipe Function to Send Page URL and Fetch Meta Tags

Now that the connection to OpenAI is ready, let’s create a Recipe Function in Sitecore Connect.
This allows you to call the function from anywhere (like another recipe or an external system) by passing the page URL dynamically.

Follow these updated steps:

  1. Create a New Recipe Function:
    • In Sitecore Connect, go to the Recipes section.
    • Click on Create Recipe.
    • In the trigger selection screen, choose Build a Recipe Function.
      (This creates a callable function, not a direct event-based recipe.)
  2. Add Input Parameter for Page URL:
    • After creating the function, Sitecore Connect will prompt you to define input parameters.
    • Add a new parameter:
      • Name: Page URL
      • Type: Text / String
    • This parameter will allow the function to receive any page URL dynamically.
  3. Select App and Action:
    • Once the function is ready, click on Add an Action.
    • The App Library will open.
    • Using the connection you created earlier,select OpenAI from the available apps.Select App
  4. Choose the Action Type:
    • After selecting OpenAI, you will see a list of available actions.
    • Select the Send a Message action.Action Creation
    • It provides 2 options Single message and Chat transcript.
    • I chose Single Message as the message type for this case.
    • Message Type

Now, in the Message Content to OpenAI, configure it carefully:

Prompt to OpenAI:

Message

  • Here, {Page URL} dynamically uses the Page URL input parameter you defined in Step 2.

This ensures that OpenAI receives the correct URL, understands the task, and responds in a structured JSON output ready for further processing.

After setting this message, you will be ready to handle and use the response in the next steps!

Step 3: Handling the OpenAI Response

Once OpenAI processes the URL and sends back a response, we need to parse the result and map it to usable fields inside Sitecore Connect.
This step ensures the meta title and meta description are correctly extracted and available for further use.

Follow these steps:

  1. Parse the JSON Response:
    • After the OpenAI action, add a Parse JSON step.
    • Configure it to parse the body of the response you get from OpenAI.
    • Define the expected schema based on the format you instructed OpenAI to return:
    • {
    •   “meta_title”: “string”,
    •   “meta_description”: “string”
    • }
    • Sitecore Connect will now recognize meta_title and meta_description as separate variables you can use.
  2. Use the Parsed Data:
    • After parsing, you can now:
      • Return the meta title and meta description as the output of the Recipe Function.
      • OR, if part of a larger automation, map these fields directly into your Sitecore items.
  3. Test the Flow:
    • Use the Test function inside Sitecore Connect.
    • Provide a sample Page URL as input.
    • Run the recipe function and validate that:
      • OpenAI is called correctly.
      • The JSON response contains the expected meta title and meta description.
      • The fields are parsed and mapped properly.

 

Final

Conclusion

By using Sitecore Connect and OpenAI together, you can create powerful, scalable automations that enhance your content operations.
In this example, it is showed how to send a page URL to OpenAI, fetch SEO metadata, and integrate it seamlessly into Sitecore workflows — all without writing heavy custom code.

This type of automation opens new possibilities for smarter, faster content management at enterprise scale.

]]>
https://blogs.perficient.com/2025/04/29/using-sitecore-connect-and-openai-a-practical-example-for-page-metadata-enhancement/feed/ 0 380646
Understanding Sitecore Connect https://blogs.perficient.com/2025/03/25/understanding-sitecore-connect-building-integrations-with-recipes/ Tue, 25 Mar 2025 13:44:16 +0000 https://blogs.perficient.com/?p=379156

While I have shared when to choose Connect in my previous blog, When to Choose Sitecore Connect, this post dives into understanding Sitecore Connect and leveraging its powerful automation capabilities.

Sitecore Connect helps you to integrate Sitecore products easily with thousands of applications. Some of the key features and capabilities of Sitecore Connect include:

  • Seamless Connectivity– Maximum integration flexibility with minimal complexity, ensuring compatibility across different authentication methods, data formats, and connection protocols.
  • Automated Workflows – Marketers can easily automate processes across their digital ecosystem using an intuitive visual builder with drag-and-drop components, conditional logic, loops, and more.
  • Versatile Data Transfer – Initiate data transfers through various mechanisms, including event-based triggers, scheduled intervals, webhooks, API calls, or Slack bots.
  • Intelligent Data Mapping– Smart entity mapping suggestions with manual drag-and-drop field adjustments for customization.
  • Comprehensive Monitoring– Real-time dashboards provide visibility into all workflows, allowing proactive issue resolution before they impact operations.

 

In this blog, I will explore Sitecore Connect’s capabilities for building integrations, including its support for seamless connectivity, automated workflows, and intelligent data mapping. I will also discuss how Sitecore Connect enables efficient data transfer, provides pre-built recipes, and ensures comprehensive monitoring for integration processes.

Getting Started with Sitecore Connect

The Sitecore Cloud Portal provides users with a centralized interface featuring the Dashboard, Projects, and Community Library:

  • Dashboard – Provides an overview of your integration projects and system performance.
  • Projects– Navigate to your projects to create and manage integration recipes.
  • Community Library– Explore the pre-built apps, recipes, and connectors available.

Connecting Applications

Sitecore provides the capability to create projects, enabling users to organize and manage their integrations efficiently. Additionally, Sitecore facilitates seamless connectivity between its platform and other applications, ensuring smooth data exchange and interoperability. >Sitecore Connect provides a variety of pre-built connectors, allowing integration with systems such as Sitecore OrderCloud, Sitecore CDP, SQL Server, Salesforce, OpenAI, Slack, Jira, and many more.

Upon creating a connection, users can access a list of available connectors, select the desired application, and configure the necessary credentials and settings. Once connected, Sitecore enables users to listen for events or transmit data to the integrated application.

Sc Connection
Recipe: Automating Actions

A recipe is an automated workflow that executes a series of steps to integrate and process data across multiple applications.

Recipes use connectors to integrate with different apps, enabling seamless data flow and process automation.

There are different types of recipes, including standard recipes, API recipes, and data pipeline recipes for various automation needs.

A recipe in Sitecore Connect is a sequence of automated steps that perform an integration workflow. Every recipe consists of:

  1. A Trigger – Defines what starts the recipe.
  2. Actions– A series of steps executed based on the trigger.

Leveraging Pre-Built Recipes

The Community Library contains a collection of pre-built recipes that can help accelerate your integration efforts. Before creating a new recipe, you can check if a similar one exists. If a suitable recipe is available, you can use it as-is or copy it into your project and modify it to fit your specific requirements. This approach saves time, reduces development effort, and ensures that best practices are followed.

Sc Library

Triggers

Triggers determine how and when the recipe begins execution. Sitecore Connect offers various triggers to initiate the recipe based on specific conditions or events.

Sc Recipe

Different Types of Triggers

  • Trigger from an App— This starts when an event occurs in an application (e.g., a new product is created in OrderCloud).
  • Run On a Schedule– As the name suggests, it runs at a defined time interval (e.g., sync customer data every 24 hours).
  • Trigger from Webhooks— Webhooks are notifications an application sends to a target URL as soon as an event occurs.
  • Manage Other Recipes– Controls other recipes (e.g., a parent recipe triggers dependent workflows).
  • Build recipe function– Allows modular execution by breaking large workflows into smaller callable recipes.
  • Build an API endpoint– Enables external apps to call an API endpoint to trigger a recipe.

Adding Actions to a Recipe

Sitecore Connect enables automated workflows by executing actions once a trigger starts a recipe. Actions define the subsequent steps in the process and can involve various operations such as data processing, transformations, and interactions with integrated applications.

 

Sc Actions

  • App-Specific Actions– Choose an app and define an action, such as updating a record or sending data.
  • Logical Operators
    • If Conditions– Executes actions based on specific data conditions.
    • Repeat for Each– Loops through lists of data items.
    • Repeat While– Continues execution based on a condition.
  • Stop Job– Halts execution with success or failure status, with failure status you can also add error message.
  • Handle Errors– Defines error handling strategies in case of failures.

Additionally, every action allows options to mask sensitive data for security purposes.

Sc Trigger

Conclusion

Sitecore Connect simplifies integrations by providing a structured approach to connecting applications, triggering workflows, and executing automated actions. Organizations can optimize their data workflows, reduce manual effort, and create seamless digital experiences by leveraging pre-built connectors, triggers, and logical actions.

Stay tuned for more insights into leveraging Sitecore Connect!

]]>
379156
When to Choose Sitecore Connect: Solving Integration Challenges https://blogs.perficient.com/2025/02/20/when-to-choose-sitecore-connect-solving-integration-challenges/ https://blogs.perficient.com/2025/02/20/when-to-choose-sitecore-connect-solving-integration-challenges/#comments Thu, 20 Feb 2025 09:57:30 +0000 https://blogs.perficient.com/?p=377521

In one of the recent projects I worked on, there was a major challenge in integrating multiple digital systems effectively. The client had a complex technology stack comprising a CMS, an e-commerce platform, a search engine, and a personalization system, all of which needed to work together seamlessly. However, we ran into several roadblocks that made this integration far from straightforward:

  • Legacy Infrastructure – The client’s existing monolithic systems were outdated and rigid, making it extremely difficult to introduce new integrations or modifications.
  • Data Silos – Information was trapped in separate systems with no efficient way to sync data across platforms, leading to inconsistent customer experiences and operational inefficiencies.
  • High Development Costs – Custom integrations required significant effort, as each system had its own APIs, data formats, and integration requirements, affecting both the time and cost of development.
  • Scalability Issues – Without a unified architecture, expanding the solution across different channels and touchpoints became increasingly challenging as business needs grew.

Example Problem Scenario: E-Commerce (Product information management Integration)

Imagine a company that stores its product data in a Product Information Management (PIM) system but also wants to showcase featured products dynamically on its website’s homepage. Without proper integration, marketers would have to manually update product listings, leading to inconsistencies and delays in showcasing the latest promotions or inventory updates.

Many organizations struggle same kind if issues to bridge the gap between their current tech stack and modern, cloud-native solutions. This is where Sitecore Connect comes in.

Sitecore’s Composable Offerings

Sitecore has transitioned into a composable digital experience platform (DXP), providing best-in-class products such as:

  • Sitecore XM Cloud – Headless CMS for dynamic content management.
  • Sitecore OrderCloud – Cloud-native e-commerce solution.
  • Sitecore Discover – AI-powered search and personalized recommendations.
  • Sitecore CDP & Personalize – Customer data platform for real-time segmentation and targeting.

To ensure seamless integration between these products and external platforms, Sitecore Connect acts as the integration hub.

What is Sitecore Connect?

Sitecore Connect is a low-code/no-code integration platform designed to connect Sitecore products with third-party applications, services, and legacy systems. It enables businesses to:

  • Automate Workflows – Synchronize data between Sitecore and external systems without manual intervention.
  • Reduce Integration Complexity – Utilize pre-built connectors and workflows to eliminate custom development effort.
  • Ensure Data Consistency – Maintain a unified experience across content, commerce, and marketing platforms.
  • Scale Efficiently – Adapt quickly to new technologies and business needs.

When to Choose Sitecore Connect?

Organizations should consider Sitecore Connect when they:

✅ Need to integrate Sitecore products (XM Cloud, OrderCloud, Discover, CDP) with existing systems.

✅ Want to connect legacy system or CMS platforms with modern Sitecore solutions.

✅ Require seamless data synchronization between Sitecore and third-party tools (ex: Salesforce, SAP, Shopify, etc.).

✅ Aim to reduce integration costs and implementation time using low-code/no-code solutions.

✅ Seek to future-proof their digital architecture with a scalable, composable ecosystem.

 

Key Advantages of Sitecore Connect

Faster Time-to-Market – Reduces development time with pre-built connectors.

Seamless Interoperability – Ensures smooth communication between different systems.  Better Data Management – Eliminates data silos for a unified customer experience.

Business Agility – Enables organizations to pivot quickly to new digital strategies.

Cost Efficiency – Minimizes the need for extensive custom development.

 

Basic Keywords in Sitecore Connect & Their Descriptions

  • Connector – A pre-built integration component that facilitates data exchange between different systems.
  • Workflow – A set of automated actions that execute integration processes between systems.
  • Trigger – An event-based mechanism that initiates a workflow when certain conditions are met.
  • Action – A predefined operation that modifies, transfers, or updates data across connected platforms.
  • Mapping – The process of aligning data fields between different systems to ensure proper synchronization.
  • API Integration – The use of REST or GraphQL APIs to enable seamless data exchange between applications.
  • Event-Based Processing – A method where integration workflows are executed based on real-time events rather than scheduled intervals.

 

Some Real-Time Implementation Examples

Example 1: Healthcare Website Integration

A healthcare provider has an Electronic Health Record (EHR) system to manage patient data but wants to offer an online appointment booking system while also providing personalized health content based on patient history.

With Sitecore Connect, they can:

  1. Integrate the EHR system with Sitecore XM Cloud to pull in relevant patient details securely.
  2. Sync patient appointment data with a scheduling system and display available time slots dynamically.
  3. Use Sitecore Personalize and CDP to tailor content, such as recommending relevant health articles based on a patient’s medical history.
  4. Ensure compliance with data security standards while maintaining seamless integration between systems.

By leveraging Sitecore Connect, the healthcare provider can offer a more personalized, automated, and efficient patient experience while reducing manual data handling.

Example 2: Integration with E-Commerce system

Returning to our PIM system example, Sitecore Connect can be configured to:

  1. Automatically sync product data from the PIM system to Sitecore XM Cloud.
  2. Trigger real-time updates when new products are marked as “featured” or “promoted.”
  3. Ensure accurate and dynamic content updates on the homepage, removing the need for manual updates.
  4. Integrate with Sitecore Discover if present to provide AI-driven personalized recommendations based on PIM data.

By using Sitecore Connect, the company can ensure that its PIM system, content management, and personalization efforts work in harmony without the need for complex custom development.

 

Conclusion

For organizations looking to modernize their digital experiences integrating all existing systems to share interrelated data, Sitecore Connect is the ideal solution. By enabling seamless integration between Sitecore’s composable products and external platforms, businesses can create scalable, future-proof digital experiences.

]]>
https://blogs.perficient.com/2025/02/20/when-to-choose-sitecore-connect-solving-integration-challenges/feed/ 1 377521
Sitecore JSS Experience Editor Rendering Wrappers https://blogs.perficient.com/2024/10/22/experience-editor-rendering-wrappers-for-sitecore-jss/ https://blogs.perficient.com/2024/10/22/experience-editor-rendering-wrappers-for-sitecore-jss/#comments Tue, 22 Oct 2024 14:03:28 +0000 https://blogs.perficient.com/?p=322285

Sitecore’s Experience Editor aids Content Author/Editor in creating pages effortlessly, however, it can be bewildering at the same time for authors who are creating new pages with minimal knowledge about the website’s placeholders and renderings.

Experience Editor by default does not provide details about which rendering is present and what data source it is using, you may have to check rendering properties to get some of this information.

Adding Rendering Wrappers in Experience editor is a way to help Content Authors to build and edit pages more efficiently by highlighting each rendering’s hierarchical details making page structure distinguishable and less confusing if multiple child components are present.

Lets see how it can be done in Sitecore and Sitecore JSS.

To achieve this, we need to create a processor that implements RenderRenderingProcessor and patch it after AddWrapper Pipeline.

Below is snippet of Class extending RenderRenderingProcessor:

public class AddPageEditorMetadata : RenderRenderingProcessor
   {
       private readonly List<Regex> _parentNameMatcher = new List<Regex>();
       private readonly List<Regex> _itemNameMatcher = new List<Regex>();

       // checks the immediate parent folder of the rendering against each pattern in the list.  If any pattern matches, the rendering is wrapped.
       public void AddParentNamePattern(string pattern)
       {
           _parentNameMatcher.Add(new Regex(pattern));
       }
       
       //checks the name of the rendering itself against each regular expression in the list.  If any pattern is matched, the rendering is wrapped.
       public void AddItemNamePattern(string pattern)
       {
           _itemNameMatcher.Add(new Regex(pattern));
       }

       public override void Process(RenderRenderingArgs args)
       {
           if (args.Rendered || Context.Site == null || !Context.PageMode.IsExperienceEditorEditing)
           {
               return;
           }

           RenderingContext renderingContext = RenderingContext.CurrentOrNull;

           Rendering rendering = renderingContext?.Rendering;

           // rendering.RenderingItem is null when presentation details points to a rendering that is no longer in Sitecore 
           // RenderingXml property is only set on renderings that were bound to a placeholder via presentation details
           if (rendering?.RenderingItem == null || rendering.Properties["RenderingXml"].IsWhiteSpaceOrNull())
           {
               return;
           }

           DoProcess(rendering, args);
       }

       protected virtual void DoProcess(Rendering rendering, RenderRenderingArgs args)
       {
           Assert.ArgumentCondition(args.Disposables.Count > 0, "args.Disposables", "expect to be more than zero");
           
           RenderingItem renderingItem = rendering.RenderingItem;

           // do we need to wrap component with meta data to make it visible within EE, usually it is necessary for a structural component. 
           bool isMetaReq = _parentNameMatcher.Count > 0 && _parentNameMatcher.Any(x => x.IsMatch(renderingItem.InnerItem.Parent.Name))
                            || _itemNameMatcher.Count > 0 && _itemNameMatcher.Any(x => x.IsMatch(renderingItem.InnerItem.Name));

           int index = args.Disposables.FindIndex(x => x.GetType() == typeof(Wrapper));
           if (index < 0)
           {
               Log.Warn($"Cannot find rendering chrome wrapper and will not insert metadata wrapper for [{rendering}]", this);
               return;
           }

           IMarker marker = isMetaReq ? new MetadataMarker(rendering, string.Empty) as IMarker : null;

           if (marker == null) return;
           args.Disposables.Insert(index, new Wrapper(args.Writer, marker));
       }

       
   }

Then create a class that implements IMarker and actually insert the HTML markup in wrapper to display the details of rendering.

public class MetadataMarker : IMarker
        {
            private readonly Rendering _rendering;
            private readonly string _xprIconHtml;

            public MetadataMarker(Rendering rendering, string xprIconHtml)
            {
                Assert.ArgumentNotNull(rendering, "_rendering");

                _rendering = rendering;
                _xprIconHtml = xprIconHtml;
            }

            public virtual string GetStart()
            {
                var result = new StringBuilder();

                RenderingItem renderingItem = _rendering.RenderingItem;

                string folderName = renderingItem.InnerItem.Parent.Name;
                string componentName = renderingItem.DisplayName;
                var datasourceIcon = string.Empty;
                if (!string.IsNullOrEmpty(_rendering.DataSource))
                {
                    datasourceIcon = $"<span class=\"glyphicon glyphicon-list-alt\"></span>{(_rendering.Item != null ? _rendering.Item.DisplayName : string.Empty)}";
                }

                var title = $"<span class=\"panel-title\"><span>{folderName}:</span>{componentName} {datasourceIcon} {_xprIconHtml}</span>";

                result.AppendFormat("{0}", title);
                return result.ToString();
            }
        }

Finally, patch the new processors after Sitecore.Mvc.ExperienceEditor.Pipelines.Response.RenderRendering.AddWrapper

<mvc.renderRendering>
                <processor
                    patch:after="processor[@type='Sitecore.Mvc.ExperienceEditor.Pipelines.Response.RenderRendering.AddWrapper, Sitecore.Mvc.ExperienceEditor']"
                    type=".............AddPageEditorMetadata, ProjectName">

                    <parentNamePatterns hint="list:AddParentNamePattern">
                        <pattern>(Product)|(Page Content)|(Structure)</pattern>
                    </parentNamePatterns>

                    <itemNamePatterns hint="list:AddItemNamePattern">
                        <pattern>(Full Width Container)|(Three Column Container)|(Three Column Large Middle)</pattern>
                    </itemNamePatterns>

                </processor>
            </mvc.renderRendering>

 

It renders something like below:

Ee

I hope you find this piece of information helpful.

]]>
https://blogs.perficient.com/2024/10/22/experience-editor-rendering-wrappers-for-sitecore-jss/feed/ 1 322285
Sitecore JSS Development Essentials: Create new component in Sitecore Next.js app https://blogs.perficient.com/2024/08/17/sitecore-jss-development-essentials-create-new-component-in-sitecore-next-js-app/ https://blogs.perficient.com/2024/08/17/sitecore-jss-development-essentials-create-new-component-in-sitecore-next-js-app/#respond Sat, 17 Aug 2024 09:10:10 +0000 https://blogs.perficient.com/?p=340302

As Sitecore has started supporting Headless CMS architecture, from my working experience on headless JSS projects, I thought of putting together a series of blogs demonstrating the basics that one has to do in Sitecore Next.js project.

In my first blog, I will explain about creating new component in sitecore and frontend project.

The prerequisite to practically perform these steps is to have project setup.

If project setup is not done, please refer to this informative blog from Martin Miles : Creating a containerized Sitecore Headless StarterKit with the latest Next.js SDK and Headless SXA

Assuming that everything is setup, let’s get started with creating a component:

  • Create sitecore template

As the first step of creating any component, create a template to define a structure and behavior of item created from that template, create a template in sitecore for required fields. Here I have added 2 fields – Image and Content for example.

 

Template

  • Create sitecore component

    1. Create JSON rendering with appropriate name under folder “/sitecore/layout/Renderings/Project/<Project-Name>”
    2. Add datasource template and datasource location so that when content editor adds a rendering to any item, defined template will be used to create datasource item and datasource item will be created on specified location.

Rendering

 

  • Make sure to add newly created component rendering to allowed controls in “Main placeholder” item to leverage the option for content editor to add respective component to item using experience editor.

Placeholder

 

  • Create component in Next.js App

Now that component in Sitecore is created, create component in Next.js App.

    1. Go to /src/components folder, right click and select “New file”, Create file with .tsx extension.
    2. Define component with same name as JSON rendering created as Sitecore
    3. Add fields same as sitecore template as props.
    4. Render the field props value in Sitecore tags as below.

Tsx

  • Add data for component

Open experience editor and add component to placeholder and update data for fields and the data will get rendered as expected

Ee

  • Once everything is done, publish the content and validate the page.
    1. I generally use Chrome React developer tool to check what and how data is coming from Layout service
    2. You can also check same on https://<your site host>/sitecore/api/layout/render/jss?item=/&sc_apikey=<API key>&sc_site=<YOUR SITE NAME>&sc_mode=normal
    3. API key can be fetched from 2 places:
      • scjssconfig.json file under src/rendering folder
      • /sitecore/system/Settings/Services/API Keys/<api key item name>

Component Data

__PRESENT

__PRESENT

__PRESENT

__PRESENT__PRESENT__PRESENT

__PRESENT

__PRESENT__PRESENT__PRESENT

__PRESENT

__PRESENT

__PRESENT

__PRESENT__PRESENT__PRESENT

__PRESENT

__PRESENT

__PRESENT

__PRESENT

__PRESENT

]]>
https://blogs.perficient.com/2024/08/17/sitecore-jss-development-essentials-create-new-component-in-sitecore-next-js-app/feed/ 0 340302