hygen-next

This is a hygen package for Next.js that makes it easier to scaffold out components, pages, and API routes in a Next.js project in a consistent manner. Feel free to adapt the templates to your specific use-case.

By default, the templates included use TypeScript and assume a basic setup of the following tools:

• Storybook using Component Story Format
• Jest with React Testing Library

Quick Start

Install hygen-add globally

yarn global hygen-add

Then in your Next.js project directory run

hygen-add next

If you prefer using npx, skip the global install and run

npx hygen-add next

Generators

Available generators are described in the following sections. Currently supported commands include:

• hygen component new for components in the src/components directory
• hygen page [type]:new for pages where type is one of basic, ssg, or ssr
• hygen api new for API routes in the pages directory

Components

hygen component new [name]

This generator creates a new React component with an accompanying Storybook file and a Jest test using React Testing Library.

If you don't pass any flags, an interactive CLI will prompt you for a name and location (default src/components) of the component you want to generate.

By default the component generators create a Storybook file, so you'll either need to have an instance in your project or create one by running

npx sb init

Pages

hygen page [type]:new [name]

This generator creates a new page in your pages directory, where type is one of the following:

• basic for a generic page
• ssg for a page with getStaticProps
• ssr for a page with getServerSideProps

API Routes

hygen api new [name]

This generator creates a new API route in your pages/api directory. You can skip specifying a name to use the interactive CLI prompt instead.