NextDevKit: A Comprehensive CLI Toolkit for Next.js Development

NextDevKit is a powerful and intuitive command-line
interface (CLI) tool designed to streamline and enhance your Next.js
development workflow. It provides a suite of features that help you quickly
set up projects, generate components and pages, manage utilities and hooks,
and enforce code quality standards—all from the comfort of your terminal.

---

🔑 Key Features

🚀 Project Initialization

• 
  Create New Projects: Quickly scaffold new Next.js
  projects with customizable configurations.
  


• 
  Customization Options: Choose TypeScript support, styling
  solutions (CSS, Sass, Tailwind CSS, Styled Components), and more during
  setup.
  

🔧 Project Configuration

• 
  Initialize in Existing Projects: Seamlessly integrate
  NextDevKit into your current Next.js projects to leverage its powerful
  features.
  

📂 File Management

• 
  Add Utilities and Hooks: Easily add pre-built utility
  functions or custom React hooks to your project. Includes commonly used
  utilities like isEmpty, isString, and hooks like
  useAxios.
  


• 
  Remove Files: Effortlessly remove previously added
  utilities or hooks from your project.
  


• 
  List Available Files: View all available utility and hook
  files that can be added to your project.
  

🛠 Component and Page Generation

• 
  Generate Components and Pages: Quickly generate new
  Next.js components or pages using predefined templates.
  


• 
  Support for JS and TS: Works with both JavaScript and
  TypeScript projects.
  


• 
  Customizable Templates: Modify templates to fit your
  project's specific needs.
  

📝 Code Quality Tools Setup

• 
  ESLint and Prettier Integration: Set up ESLint and
  Prettier configurations to maintain consistent code style and quality.
  


• 
  Husky and lint-staged: Initialize Husky to manage Git
  hooks and set up pre-commit hooks with lint-staged. Automatically lint and
  format code before each commit.
  

💻 Interactive Command Line Interface

• 
  User-Friendly Prompts: Guides you through project setup
  and configuration with interactive questions.
  


• 
  Attractive Output: Clear and stylized console output with
  colorized text and banners for an enhanced terminal experience.
  

⚙️ Extensible and Customizable

• 
  Project Customization: Tailor project creation with
  options for TypeScript, styling choices, and more.
  


• 
  Extend Functionality: Add your own templates and
  utilities to expand the toolkit's capabilities.
  

---

📜 Commands Overview

• 
  

  
  create [projectName] >: Create a new Next.js project with NextDevKit initialized.
  

  
  class="!overflow-visible"
  >
  bunx nextdevkit create my-next-app

  
  

  or

  
  class="!overflow-visible"
  >
  npx nextdevkit@latest create my-next-app

  
  


• 
  

  
  init >: Initialize NextDevKit in an existing Next.js project.
  

  
  class="!overflow-visible"
  >
  bunx nextdevkit init

  
  

  or

  
  class="!overflow-visible"
  >
  npx nextdevkit@latest init

  
  


• 
  

  
  add [fileName] >: Add a utility or custom hook file to your project.
  

  
  class="!overflow-visible"
  >
  bunx nextdevkit add useAxios

  
  

  or

  
  class="!overflow-visible"
  >
  npx nextdevkit@latest add useAxios

  
  


• 
  

  
  remove [fileName] >: Remove a utility or custom hook file from your project.
  

  
  class="!overflow-visible"
  >
  bunx nextdevkit remove useAxios

  
  

  or

  
  class="!overflow-visible"
  >
  npx nextdevkit@latest remove useAxios

  
  


• 
  

  
  list >: List all available utility and hook files.
  

  
  class="!overflow-visible"
  >
  bunx nextdevkit list

  
  

  or

  
  class="!overflow-visible"
  >
  npx nextdevkit@latest list

  
  


• 
  

  
  generate <type> <name> >: Generate a new component or page.
  

  
  class="!overflow-visible"
  >
  bunx nextdevkit generate component Navbar

  
  

  or

  
  class="!overflow-visible"
  >
  npx nextdevkit@latest generate component Navbar

  
  


• 
  

  
  setup-linters >: Set up ESLint, Prettier, Husky, and lint-staged in your project.
  

  
  class="!overflow-visible"
  >
  bunx nextdevkit setup-linters

  
  

  or

  
  class="!overflow-visible"
  >
  npx nextdevkit@latest setup-linters

  
  


• 
  

  
  help [command] >: Display detailed help information for commands.
  

  
  class="!overflow-visible"
  >
  bunx nextdevkit help generate

  
  

  or

  
  class="!overflow-visible"
  >
  npx nextdevkit@latest help generate

  
  

---

🌟 Why Use NextDevKit?

• 
  Boost Productivity: Reduce boilerplate code and setup
  time by automating common tasks.
  


• 
  Maintain Code Quality: Enforce consistent coding
  standards with integrated linting and formatting tools.
  


• 
  Simplify Workflow: Manage project files, components, and
  configurations with simple commands.
  


• 
  Adaptable: Suitable for both new and existing Next.js
  projects, supporting JavaScript and TypeScript.
  


• 
  Developer-Friendly: Designed with developers in mind,
  providing helpful prompts and clear documentation.
  

---

📥 Getting Started

Install and Run with NPX

class="!overflow-visible"
>

npx nextdevkit@latest create my-next-app


Initialize in an Existing Project

class="!overflow-visible"
>

npx nextdevkit@latest init


---

👨‍💻 About the Creator

NextDevKit is created and maintained by
Harshal Katakiya.

• 
  GitHub:
  rel="noopener"
  target="_new"
  style="
  --streaming-animation-state: var(--batch-play-state-1);
  --animation-rate: var(--batch-play-rate-1);
  "
  href="https://github.com/Harshalkatakiya"
  > style="
  --animation-count: 4;
  --streaming-animation-state: var(--batch-play-state-2);
  "
  >https > style="
  --animation-count: 5;
  --streaming-animation-state: var(--batch-play-state-2);
  "
  >://github > style="
  --animation-count: 6;
  --streaming-animation-state: var(--batch-play-state-2);
  "
  >.com > style="
  --animation-count: 7;
  --streaming-animation-state: var(--batch-play-state-2);
  "
  >/Harshalkatakiya > >
  


• 
  Website:
  rel="noopener"
  target="_new"
  style="
  --streaming-animation-state: var(--batch-play-state-1);
  --animation-rate: var(--batch-play-rate-1);
  "
  href="https://nextdevkit.vercel.app"
  > style="
  --animation-count: 6;
  --streaming-animation-state: var(--batch-play-state-2);
  "
  >https > style="
  --animation-count: 7;
  --streaming-animation-state: var(--batch-play-state-2);
  "
  >://nextdevkit > style="
  --animation-count: 8;
  --streaming-animation-state: var(--batch-play-state-2);
  "
  >.vercel > style="
  --animation-count: 9;
  --streaming-animation-state: var(--batch-play-state-2);
  "
  >.app > >
  

---

📄 License

This project is licensed under the MIT License.

---

📣 Contribute and Support

Contributions, issues, and feature requests are welcome!

• 
  Repository:
  rel="noopener"
  target="_new"
  style="
  --streaming-animation-state: var(--batch-play-state-1);
  --animation-rate: var(--batch-play-rate-1);
  "
  href="https://github.com/Harshalkatakiya/nextdevkit"
  > style="
  --animation-count: 8;
  --streaming-animation-state: var(--batch-play-state-2);
  "
  >https > style="
  --animation-count: 9;
  --streaming-animation-state: var(--batch-play-state-2);
  "
  >://github > style="
  --animation-count: 10;
  --streaming-animation-state: var(--batch-play-state-2);
  "
  >.com > style="
  --animation-count: 11;
  --streaming-animation-state: var(--batch-play-state-2);
  "
  >/Harshalkatakiya > style="
  --animation-count: 12;
  --streaming-animation-state: var(--batch-play-state-2);
  "
  >/nextdevkit > >
  


• 
  Issues:
  rel="noopener"
  target="_new"
  style="
  --streaming-animation-state: var(--batch-play-state-1);
  --animation-rate: var(--batch-play-rate-1);
  "
  href="https://github.com/Harshalkatakiya/nextdevkit/issues"
  > style="
  --animation-count: 10;
  --streaming-animation-state: var(--batch-play-state-2);
  "
  >https > style="
  --animation-count: 11;
  --streaming-animation-state: var(--batch-play-state-2);
  "
  >://github > style="
  --animation-count: 12;
  --streaming-animation-state: var(--batch-play-state-2);
  "
  >.com > style="
  --animation-count: 13;
  --streaming-animation-state: var(--batch-play-state-2);
  "
  >/Harshalkatakiya > style="
  --animation-count: 14;
  --streaming-animation-state: var(--batch-play-state-2);
  "
  >/nextdevkit > style="
  --animation-count: 15;
  --streaming-animation-state: var(--batch-play-state-2);
  "
  >/issues > >
  

---

NextDevKit is your all-in-one toolkit to supercharge your
Next.js development experience. Get started today and take your projects to
the next level!