Scaffold and auto-register your own components in a Next.JS app

Version: 22.x

JSS lets you skip the whole workflow for deploying external components to Sitecore and instead provides a more dynamic method. The JSS app lets you register components directly from your codebase, using a bring-your-own-code (BYOC) approach.

For instructions about how to create and register your external components from scratch, use this walkthrough instead.

Perform scaffolding to create a boilerplate component

As an alternative to the default approach for creating and registering external components, JSS simplifies the registration flow by letting you scaffold them.

Note

JSS does not currently support scaffolding pure client-side or server-side external components.

To create a boilerplate component:

Run the jss scaffold command with the --byoc parameter. For example:
RequestResponse
```
jss scaffold MyComponent --byoc
```
This command creates the MyComponent.tsx file in the src/components folder. The file contains a simple implementation and a base registration logic that you can extend as needed. The component builder automatically imports all components from the src/components directory into the JSS app as part of an automated registration flow.

JSS also lets you scaffold a component to another folder. To achieve this, you provide a path relative to src in the scaffold command, for example:

RequestResponse

jss scaffold src/other/OtherComponent --byoc

In this example, the command will scaffold OtherComponent.tsx under the src/other folder. While the logic provided by scaffolding remains the same, the component builder does not auto-register components located outside of the src/components by default.

Note

For better control over your app, we recommend registering external components as described in this walkthrough.

Alternatively, there’s a way to register them through a component builder, as described in the following section.

Add an extra components source for auto-registration using the component builder

By default, JSS registers components located in the src/components folder. If you want to register additional external components, you can do so by adding more component source paths.

To add extra component sources for auto-registration using a component builder:

Go to scripts/generate-component-builder/plugins, and either modify the existing /components.ts file or create a new plugin class, for example, called extra-components.ts.

Note

In this example, we implement a new plugin.

Implement a plugin to retrieve more components for registration, for example:

RequestResponse

import { getComponentList } from '@sitecore-jss/sitecore-jss-dev-tools'
import { ComponentBuilderPlugin, ComponentBuilderPluginConfig } from '..';

class ExtraComponentPlugin implements ComponentBuilderPlugin {
  order = 0;

  exec(config: ComponentBuilderPluginConfig) {
    const extraPath = 'src/other';
    config.components = getComponentList(extraPath);

    return config;
  }
}

export const extraComponentPlugin = new ExtraComponentPlugin();

Save your changes and run the npm bootstrap command to register additional components.

Do you have some feedback for us?

If you have suggestions for improving this article,