tunderahygen-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-addThen in your Next.js project directory run
hygen-add nextIf you prefer using npx, skip the global install and run
npx hygen-add nextGenerators
Available generators are described in the following sections. Currently supported commands include:
hygen component newfor components in thesrc/componentsdirectoryhygen page [type]:newfor pages wheretypeis one ofbasic,ssg, orssrhygen api newfor API routes in thepagesdirectory
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 initPages
hygen page [type]:new [name]This generator creates a new page in your pages directory, where type is one of the following:
basicfor a generic pagessgfor a page withgetStaticPropsssrfor a page withgetServerSideProps
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.