
**Only Export Components that are used by content authors**

```typescript
import React from 'react';
import { Image as JssImage, Link as JssLink, RichText as JssRichText, ImageField, Field, LinkField } from '@sitecore-jss/sitecore-jss-nextjs';

interface Fields {
  PromoIcon: ImageField;
  PromoText: Field<string>;
  PromoLink: LinkField;
  PromoText2: Field<string>;
}

type PromoProps = {
  params: { [key: string]: string };
  fields: Fields;
};

const PromoDefaultComponent = (props: PromoProps): JSX.Element => (
  <div className={`component promo ${props.params.styles}`}>
    <div className="component-content">
      <span className="is-empty-hint">Promo</span>
    </div>
  </div>
);

const LinkButton = (props: PromoProps): JSX.Element => {
  return (
    <div className="field-promolink">
      <JssLink field={props.fields.PromoLink} />
    </div>
  );
};

export const Default = (props: PromoProps): React.JSX.Element => {
  const id = props.params.RenderingIdentifier;
  if (props.fields) {
    return (
      <div className={`component promo ${props.params.styles}`} id={id ? id : undefined}>
        <div className="component-content">
          <div className="field-promoicon">
            <JssImage field={props.fields.PromoIcon} />
          </div>
          <div className="promo-text">
            <div>
              <div className="field-promotext">
                <JssRichText field={props.fields.PromoText} />
              </div>
            </div>
            <LinkButton {...props} />
          </div>
        </div>
      </div>
    );
  }

  return <PromoDefaultComponent {...props} />;
};

export const WithText = (props: PromoProps): JSX.Element => {
  const id = props.params.RenderingIdentifier;
  if (props.fields) {
    return (
      <div className={`component promo ${props.params.styles}`} id={id ? id : undefined}>
        <div className="component-content">
          <div className="field-promoicon">
            <JssImage field={props.fields.PromoIcon} />
          </div>
          <div className="promo-text">
            <div>
              <div className="field-promotext">
                <JssRichText className="promo-text" field={props.fields.PromoText} />
              </div>
            </div>
            <div className="field-promotext">
              <JssRichText className="promo-text" field={props.fields.PromoText2} />
            </div>
            <LinkButton {...props} />
          </div>
        </div>
      </div>
    );
  }

  return <PromoDefaultComponent {...props} />;
};
```


Code example showing exported components that are used by content authors

"use strict";
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
const {useMDXComponents: _provideComponents} = arguments[0];
function _createMdxContent(props) {
  const _components = {
    code: "code",
    p: "p",
    pre: "pre",
    strong: "strong",
    ..._provideComponents(),
    ...props.components
  };
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Only Export Components that are used by content authors"
      })
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        className: "language-typescript",
        children: "import React from 'react';\nimport { Image as JssImage, Link as JssLink, RichText as JssRichText, ImageField, Field, LinkField } from '@sitecore-jss/sitecore-jss-nextjs';\n\ninterface Fields {\n  PromoIcon: ImageField;\n  PromoText: Field<string>;\n  PromoLink: LinkField;\n  PromoText2: Field<string>;\n}\n\ntype PromoProps = {\n  params: { [key: string]: string };\n  fields: Fields;\n};\n\nconst PromoDefaultComponent = (props: PromoProps): JSX.Element => (\n  <div className={`component promo ${props.params.styles}`}>\n    <div className=\"component-content\">\n      <span className=\"is-empty-hint\">Promo</span>\n    </div>\n  </div>\n);\n\nconst LinkButton = (props: PromoProps): JSX.Element => {\n  return (\n    <div className=\"field-promolink\">\n      <JssLink field={props.fields.PromoLink} />\n    </div>\n  );\n};\n\nexport const Default = (props: PromoProps): React.JSX.Element => {\n  const id = props.params.RenderingIdentifier;\n  if (props.fields) {\n    return (\n      <div className={`component promo ${props.params.styles}`} id={id ? id : undefined}>\n        <div className=\"component-content\">\n          <div className=\"field-promoicon\">\n            <JssImage field={props.fields.PromoIcon} />\n          </div>\n          <div className=\"promo-text\">\n            <div>\n              <div className=\"field-promotext\">\n                <JssRichText field={props.fields.PromoText} />\n              </div>\n            </div>\n            <LinkButton {...props} />\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  return <PromoDefaultComponent {...props} />;\n};\n\nexport const WithText = (props: PromoProps): JSX.Element => {\n  const id = props.params.RenderingIdentifier;\n  if (props.fields) {\n    return (\n      <div className={`component promo ${props.params.styles}`} id={id ? id : undefined}>\n        <div className=\"component-content\">\n          <div className=\"field-promoicon\">\n            <JssImage field={props.fields.PromoIcon} />\n          </div>\n          <div className=\"promo-text\">\n            <div>\n              <div className=\"field-promotext\">\n                <JssRichText className=\"promo-text\" field={props.fields.PromoText} />\n              </div>\n            </div>\n            <div className=\"field-promotext\">\n              <JssRichText className=\"promo-text\" field={props.fields.PromoText2} />\n            </div>\n            <LinkButton {...props} />\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  return <PromoDefaultComponent {...props} />;\n};\n"
      })
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = {
    ..._provideComponents(),
    ...props.components
  };
  return MDXLayout ? _jsx(MDXLayout, {
    ...props,
    children: _jsx(_createMdxContent, {
      ...props
    })
  }) : _createMdxContent(props);
}
return {
  default: MDXContent
};


Only Export Components that are used by content authors

This Cookbook provides a set of recipes to help implementing XM Cloud through setup, configuration and implementation.

Moving to SaaS

Transition from XM/XP to XM Cloud

Requirements Gathering

Scope & Governance Framework

Page builder readiness

Discovery

Preparing for an XM Cloud Project

Project Estimation

Planning test strategy

Project Planning

Hosting Web Application

Hosting Next.js on Azure App Services

Hosting ASP.NET Core App

Hosting Applications

Branching Strategy

Components Design Best Practices

Development Workflow

Next.js App Router Preparation

Web Developer Experience

Developer Considerations

Head Application Security

Security

Content Audit

Multisite Strategy

Publishing to Edge

Information Architecture

Layout Routing

Multisite Architecture

Rate Limits and Caching

Site management

Project Architecture

Creating a Site

DevOps

Project Solution Setup

Setup Content Serialization

Testing foundations

Sprint Zero

Pre-development

CMS Error Monitoring

Creating New Components

Creating Branch Templates

Creating a Component Gallery

Custom Next.js Image Loader for SSG

Using Placeholders

Troubleshooting Docker

Web Application Error Monitoring

Developer Experience

Localization

Page Listing

Preview Website

Scheduled Publishing

Redirect

Sitemap

Wildcard Pages

Workflows

Retrieving Data from 3rd Party

Custom Editing UX for 3rd Party

Getting Component Specific Data

External Data Integration

Deployment Dashboard

Embedding content from DAM

Icon picker

In-Page Analytics

Extensions

Middleware Invocations

Integrating Sitecore Search

Incrementally updating Search

Enhancing search with documents

Sitecore Search

Implementation

Content Migration

Testing Framework

Go-Live Checklist

Final Steps

AI Agents

Data Fetching Optimizaton

On-page SEO optimization

Optimizing content for AI

Operational Governance

Performance Optimizaton

Publishing Optimizaton

Page personalization

Testing experiences

Moving to Sitecore Personalize

User Experience Optimization

Optimization

XM Cloud Glossary

Appendix I

ASP.NET Core examples

Exported components example

template.module.json

xmcloud.build.json

Example Code

Appendix II

Accelerate Cookbook for XM Cloud