Improve Development Using Sitecore JSS Component Scaffolding in Next.js Projects

Automating Component Development in Sitecore

In each development cycle, we're tasked with creating a standard set of files and foundational code for new components. Over time, we recognize that many of these steps are repetitive, leading us to wish for automated solutions to streamline this process. Fortunately, Sitecore has provided a set of initial scripts that address this efficiency issue, aiding us in streamlining our workflow. In our JSS project utilizing Next.js, an Out Of The Box (OOTB) command is provided to expedite component setup. This command, named scaffold proves particularly helpful in accelerating the development of new components. You can check the package.json file of your frontend folder and under the scripts object you will see this line. I’ve traced and analyzed its functionality to comprehensively understand how it works.

"scripts": {
    ...
    "scaffold": "ts-node --project tsconfig.scripts.json scripts/scaffold-component/index.ts",
    ...
  },

JSS Component Scaffolding

We can test this out by running the command in our terminal, make sure to be on the right folder when running the command or else it might not work.

npm run scaffold NewComponent

Your terminal will show you these which will tell you where the generated component is added on your project.

> ts-node --project tsconfig.scripts.json scripts/scaffold-component/index.ts NewComponent

File src\components\NewComponent.tsx has been scaffolded.

Scaffolding of NewComponent complete.
Next steps:
* Implement the React component in src\components\NewComponent.tsx

When developing components for our Sitecore renderings we know that the component files must be under the components folder but the script does not limit you to only adding it directly under the components folder. We can actually put in a path instead of just the component name.

npm run scaffold main/NewComponent

This will instead generate a component under the path src/components/main/NewComponent.tsx . Next let us see what code this script has actually generated on the new file.

import React from 'react';
import { ComponentParams, ComponentRendering } from '@sitecore-jss/sitecore-jss-nextjs';

interface NewComponentProps {
  rendering: ComponentRendering & { params: ComponentParams };
  params: ComponentParams;
}

export const Default = (props: NewComponentProps): JSX.Element => {
  const id = props.params.RenderingIdentifier;

  return (
    <div className={`component ${props.params.styles}`} id={id ? id : undefined}>
      <div className="component-content">
        <p>NewComponent Component</p>
      </div>
    </div>
  );
};

It’s pretty straightforward and maybe a bit too simple. But it’s simple enough for any team or developer to work on. They would have to generate an OOTB generic component than anyone can actually use. Still useful for anyone, regardless of complexity since this eliminates the need to create a file, open an existing component, copy the code and paste it then start deleting any useless code. That’s probably 5-10 minutes of your time and do that for more than 5 components, it’ll be a lot of time wasted once we add it all up.

Sitecore Documentation

You can read more about this here.

---