A simple CLI tool to scaffold folders and components for Next.js and React projects. Quickly initialize or extend your project structure with ease.
npm install swalih-nextgen-cliA simple, extensible CLI tool to scaffold opinionated Next.js/React project structures, complete with reusable components, hooks, providers, utilities, and demo queries โ all styled with Tailwind CSS and designed for scalability.
This CLI helps you set up your project structure quickly using best practices with tools like React Query, Zustand, Framer Motion, and more.
---
``bash`
npm install -g swalih-nextgen-cli
Once installed, you'll be able to run:
`bash`
nextgen
---
Scaffolds the full project folder structure under src/ and creates .env and .env.local files.
`bash`
nextgen init
๐งฑ It generates:
``
src/
โโโ components/
โโโ hooks/
โโโ lib/
โโโ providers/
โโโ queries/
โโโ services/
โโโ stores/
โโโ styles/
โโโ types/
โโโ utils/
๐ Also adds:
- .env.env.local
-
With the default content:
`env`
NEXT_PUBLIC_BASE_URL=http://localhost:3000/api
---
Scaffolds a single folder (and sample files if available):
`bash`
nextgen add components
nextgen add hooks
nextgen add lib
โ Supported folder types:
- componentshooks
- lib
- providers
- queries
- services
- stores
- styles
- types
- utils
-
---
- ModalWrapper โ Responsive, scroll-locked modal with outside click and ESC key handling using framer-motion and body-scroll-lock
> To use it, install:
`bash`
npm install framer-motion body-scroll-lock
---
- useOutsideClick โ Detects outside clicksuseInView
- โ Detects when an element enters the viewportuseDebounce
- โ Debounces any fast-changing value (e.g., input)
---
- cn โ Utility for conditionally joining class namesaxios
- โ Preconfigured instance with interceptors for token refresh and auth header
---
- TanStackQueryProvider โ Setup for @tanstack/react-query with hydration support
---
- Dummy query examples using React Query for demonstrating structure and usage
---
- Example Zustand store setup with local/global state separation
---
- Tailwind-based globals.css setup and utility-first design ready
---
- Global types file with interfaces and types used in queries, stores, etc.
---
- apiBuilder โ Helper to build endpoints from a base pathapiEndpoints
- โ Define and reuse all endpoint paths from one place
---
This CLI enforces a clean and scalable architecture:
- Modular folder layout
- Clear separation of concerns
- Designed for real-world production usage
All generated folders go inside src/ for clarity and maintainability.
---
`bashScaffold entire project structure + env files
nextgen init
---
Swalih Moosa
๐ LinkedIn
๐ Portfolio
๐ GitHub
---