Generate Next.js component

A opinionated file generator for Next.js with TypeScript and CSS Modules.

It will generate 3 or 4 files:

• index.tsx - React component
• interface.ts - Component interface
• styles.module.scss - CSS Modules file with import statement
• prepare.ts [optional] - Prepare function, needed for GRRR
• storybook.ts [optional] - Storybook component
• cms.ts [optional] - Netlify CMS

The setup is based on this article.

Setup

Add script to package.json

"create-component": "node node_modules/@martijnnieuwenhuizen/generate-component" "cc": "node node_modules/@martijnnieuwenhuizen/generate-component"

Add config file

Filename: .componentgenerator.json

{
  "codeStack": "wordpress-nextjs",
  "withInitialData": false,
  "flexiblesPath": "./components/flexibles",
  "modulesPath": "./components/modules",
  "partialsPath": "./components/partials"
}

Options:

• codeStack: "wordpress-nextjs" | "nova-nextjs" | "netlify-cms-nextjs"
• codeStack: true | false
• flexiblesPath: "./components/flexibles"
• modulesPath: "./components/modules"
• partialsPath: "./components/partials

Usage

yarn run create-component or yarn run cc

Generated files

These files will be generated:

Component

import type ComponentNameInterface from "./interface";

import styles from "./styles.module.scss";

export default function ComponentName({ children }: ComponentNameInterface) {
  return (
    <div className={styles["component-name"]}>
      <h1>Hello! ComponentName</h1>
      {children}
    </div>
  );
}

Interface

export default interface ComponentName {
  children: React.ReactNode;
}

Style

@import "../../../styles/base.scss";

.component-name {
  @include block(large);
}

CMS

export default {
  label: "Component name",
  name: "component-name",
  widget: "object",
  summary: "Component name | {{fields.title}}",
  fields: [
    {
      label: "Title",
      name: "title",
      widget: "string",
      required: false,
    },
    {
      label: "Component",
      name: "component",
      widget: "hidden",
      default: "component-name",
    },
  ],
};