🛠️ Swalih NextGen CLI

A 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.

📦 Installation

npm install -g swalih-nextgen-cli

Once installed, you'll be able to run:

nextgen

⚙️ Commands

🔧 nextgen init

Scaffolds the full project folder structure under src/ and creates .env and .env.local files.

nextgen init

🧱 It generates:

src/
├── components/
├── hooks/
├── lib/
├── providers/
├── queries/
├── services/
├── stores/
├── styles/
├── types/
├── utils/

📄 Also adds:

• .env
• .env.local

With the default content:

NEXT_PUBLIC_BASE_URL=http://localhost:3000/api

➕ nextgen add <type>

Scaffolds a single folder (and sample files if available):

nextgen add components
nextgen add hooks
nextgen add lib

✅ Supported folder types:

• components
• hooks
• lib
• providers
• queries
• services
• stores
• styles
• types
• utils

📚 What's Included

🧩 Components

• ModalWrapper – Responsive, scroll-locked modal with outside click and ESC key handling using framer-motion and body-scroll-lock

To use it, install:

npm install framer-motion body-scroll-lock

🧠 Custom Hooks

• useOutsideClick – Detects outside clicks
• useInView – Detects when an element enters the viewport
• useDebounce – Debounces any fast-changing value (e.g., input)

🔗 Lib

• cn – Utility for conditionally joining class names
• axios – Preconfigured instance with interceptors for token refresh and auth header

🧰 Providers

• TanStackQueryProvider – Setup for @tanstack/react-query with hydration support

🔍 Queries

• Dummy query examples using React Query for demonstrating structure and usage

📦 Stores

• Example Zustand store setup with local/global state separation

🎨 Styles

• Tailwind-based globals.css setup and utility-first design ready

🧾 Types

• Global types file with interfaces and types used in queries, stores, etc.

⚒️ Utils

• apiBuilder – Helper to build endpoints from a base path
• apiEndpoints – Define and reuse all endpoint paths from one place

🧠 Project Structure Philosophy

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.

💡 Example Usage

# Scaffold entire project structure + env files
nextgen init

# Add just the hooks folder
nextgen add hooks

# Add only Zustand store files
nextgen add stores

✍️ Author

Swalih Moosa
🔗 LinkedIn
🌐 Portfolio
🐙 GitHub