https://github.com/Sitecore/feaas-nextjs-example

An example repository to showcase best practices on using feaas components in a nextjs app
https://github.com/Sitecore/feaas-nextjs-example

Last synced: 3 months ago
JSON representation

An example repository to showcase best practices on using feaas components in a nextjs app

• Host: GitHub
• URL: https://github.com/Sitecore/feaas-nextjs-example
• Owner: Sitecore
• License: mit
• Created: 2023-08-16T07:23:43.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-10-19T07:42:08.000Z (about 1 year ago)
• Last Synced: 2024-04-25T00:11:11.752Z (7 months ago)
• Language: TypeScript
• Size: 51.8 KB
• Stars: 3
• Watchers: 3
• Forks: 7
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• Awesome-Sitecore - FEaaS BYOC Example - A repo that demonstrates an example of BYOC components using best practices. (XM Cloud)

README

        
This is a repo that demonstrates an example of BYOC components using best practices.

## Getting Started

1. To run the NextJS server just execute the following command:

   ```bash

   npm run dev

   ```

2. Then visit demo page in the browser:

   [http://localhost:3000](http://localhost:3000)

## Enabling BYOC in your existing app

### XMC JSS app:

If your app uses JSS (for xmc next.js), BYOC will be already pre-configured upon the app generation. Simply add the components you want in `byoc/index.client.tsx` and `index.server.tsx`. Be mindful that at the time being, **jss does not support async components**

### Regular Next.js app

1.  Copy `byoc` folder from this repo to your `app` directory

2.  In `layout.tsx` add to the top of the file:

    ```typescript:

            import * as FEAAS from "@sitecore-feaas/clientside/react";

            import "./byoc";

    ```

    And inside the layout tree itself:

    ```typescript:

    

    ```

3.  Render the component directly or as a part of FEAAS component as in `demo/page.tsx`

## Integrating Rendering Host for Sitecore Components

1. Copy `preview-component` folder into your `app`

2. In Sitecore Components app, go to Settings/Rendering Host and put in the url to that page, e.g. `https://my-website.com/preview-component`

3. Now in the component Builder you will be able to use BYOC components and use Preview feature to see what they look like inside Sitecore components.