---
title: "Scaffold and auto-register your own components in a Next.JS app"
slug: "scaffold-and-auto-register-your-own-components-in-a-next-js-app"
abstract: "Use your own external components dynamically in your JSS app by registering them directly from your codebase using a bring-your-own-code (BYOC) approach."
---
# Scaffold and auto-register your own components in a Next.JS app

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](https://doc.sitecore.com/sai/en/developers/jss/22/jss-sai/walkthrough--registering-an-external-react-component.html "Walkthrough: Registering an external React component").

## 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:

    ```text
    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](https://doc.sitecore.com/sai/en/developers/jss/22/jss-sai/the-registercomponent-method.html "The registerComponent method"). 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:

```text
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](https://doc.sitecore.com/sai/en/developers/jss/22/jss-sai/walkthrough--registering-an-external-react-component.html "Walkthrough: Registering an external React component").
>
> 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:

1. 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.

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

    ```csharp
    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();
    ```

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