nextdevkit/README.md

A Comprehensive CLI Toolkit for Next.js Development

<div class="markdown prose w-full break-words dark:prose-invert dark">
  <h1>NextDevKit: A Comprehensive CLI Toolkit for Next.js Development</h1>
  <p>
    <strong>NextDevKit</strong> 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.
  </p>
  <hr />
  <h2>🔑 <strong>Key Features</strong></h2>
  <h3>🚀 <strong>Project Initialization</strong></h3>
  <ul>
    <li>
      <strong>Create New Projects</strong>: Quickly scaffold new Next.js
      projects with customizable configurations.
    </li>
    <li>
      <strong>Customization Options</strong>: Choose TypeScript support, styling
      solutions (CSS, Sass, Tailwind CSS, Styled Components), and more during
      setup.
    </li>
  </ul>
  <h3>🔧 <strong>Project Configuration</strong></h3>
  <ul>
    <li>
      <strong>Initialize in Existing Projects</strong>: Seamlessly integrate
      NextDevKit into your current Next.js projects to leverage its powerful
      features.
    </li>
  </ul>
  <h3>📂 <strong>File Management</strong></h3>
  <ul>
    <li>
      <strong>Add Utilities and Hooks</strong>: Easily add pre-built utility
      functions or custom React hooks to your project. Includes commonly used
      utilities like <code>isEmpty</code>, <code>isString</code>, and hooks like
      <code>useAxios</code>.
    </li>
    <li>
      <strong>Remove Files</strong>: Effortlessly remove previously added
      utilities or hooks from your project.
    </li>
    <li>
      <strong>List Available Files</strong>: View all available utility and hook
      files that can be added to your project.
    </li>
  </ul>
  <h3>🛠 <strong>Component and Page Generation</strong></h3>
  <ul>
    <li>
      <strong>Generate Components and Pages</strong>: Quickly generate new
      Next.js components or pages using predefined templates.
    </li>
    <li>
      <strong>Support for JS and TS</strong>: Works with both JavaScript and
      TypeScript projects.
    </li>
    <li>
      <strong>Customizable Templates</strong>: Modify templates to fit your
      project's specific needs.
    </li>
  </ul>
  <h3>📝 <strong>Code Quality Tools Setup</strong></h3>
  <ul>
    <li>
      <strong>ESLint and Prettier Integration</strong>: Set up ESLint and
      Prettier configurations to maintain consistent code style and quality.
    </li>
    <li>
      <strong>Husky and lint-staged</strong>: Initialize Husky to manage Git
      hooks and set up pre-commit hooks with lint-staged. Automatically lint and
      format code before each commit.
    </li>
  </ul>
  <h3>💻 <strong>Interactive Command Line Interface</strong></h3>
  <ul>
    <li>
      <strong>User-Friendly Prompts</strong>: Guides you through project setup
      and configuration with interactive questions.
    </li>
    <li>
      <strong>Attractive Output</strong>: Clear and stylized console output with
      colorized text and banners for an enhanced terminal experience.
    </li>
  </ul>
  <h3>⚙️ <strong>Extensible and Customizable</strong></h3>
  <ul>
    <li>
      <strong>Project Customization</strong>: Tailor project creation with
      options for TypeScript, styling choices, and more.
    </li>
    <li>
      <strong>Extend Functionality</strong>: Add your own templates and
      utilities to expand the toolkit's capabilities.
    </li>
  </ul>
  <hr />
  <h2>📜 <strong>Commands Overview</strong></h2>
  <ul>
    <li>
      <p>
        <strong><code>create [projectName]</code></strong
        >: Create a new Next.js project with NextDevKit initialized.
      </p>
      <pre
        class="!overflow-visible"
      ><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"><code class="!whitespace-pre hljs language-bash">bunx nextdevkit create my-next-app
</code></div></pre>
<p align="left">or</p>
<pre
        class="!overflow-visible"
      ><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"><code class="!whitespace-pre hljs language-bash">npx nextdevkit@latest create my-next-app
</code></div></pre>
    </li>
    <li>
      <p>
        <strong><code>init</code></strong
        >: Initialize NextDevKit in an existing Next.js project.
      </p>
      <pre
        class="!overflow-visible"
      ><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"><code class="!whitespace-pre hljs language-bash">bunx nextdevkit init
</code></div></pre>
<p align="left">or</p>
<pre
        class="!overflow-visible"
      ><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"><code class="!whitespace-pre hljs language-bash">npx nextdevkit@latest init
</code></div></pre>
    </li>
    <li>
      <p>
        <strong><code>add [fileName]</code></strong
        >: Add a utility or custom hook file to your project.
      </p>
      <pre
        class="!overflow-visible"
      ><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"><code class="!whitespace-pre hljs language-bash">bunx nextdevkit add useAxios
</code></div></pre>
<p align="left">or</p>
      <pre
        class="!overflow-visible"
      ><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"><code class="!whitespace-pre hljs language-bash">npx nextdevkit@latest add useAxios
</code></div></pre>
    </li>
    <li>
      <p>
        <strong><code>remove [fileName]</code></strong
        >: Remove a utility or custom hook file from your project.
      </p>
      <pre
        class="!overflow-visible"
      ><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"><code class="!whitespace-pre hljs language-bash">bunx nextdevkit remove useAxios
</code></div></pre>
<p align="left">or</p>
      <pre
        class="!overflow-visible"
      ><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"><code class="!whitespace-pre hljs language-bash">npx nextdevkit@latest remove useAxios
</code></div></pre>
    </li>
    <li>
      <p>
        <strong><code>list</code></strong
        >: List all available utility and hook files.
      </p>
      <pre
        class="!overflow-visible"
      ><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"><code class="!whitespace-pre hljs language-bash">bunx nextdevkit list
</code></div></pre>
<p align="left">or</p>
      <pre
        class="!overflow-visible"
      ><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"><code class="!whitespace-pre hljs language-bash">npx nextdevkit@latest list
</code></div></pre>
    </li>
    <li>
      <p>
        <strong><code>generate &lt;type&gt; &lt;name&gt;</code></strong
        >: Generate a new component or page.
      </p>
      <pre
        class="!overflow-visible"
      ><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"><code class="!whitespace-pre hljs language-bash">bunx nextdevkit generate component Navbar
</code></div></pre>
<p align="left">or</p>
      <pre
        class="!overflow-visible"
      ><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"><code class="!whitespace-pre hljs language-bash">npx nextdevkit@latest generate component Navbar
</code></div></pre>
    </li>
    <li>
      <p>
        <strong><code>setup-linters</code></strong
        >: Set up ESLint, Prettier, Husky, and lint-staged in your project.
      </p>
      <pre
        class="!overflow-visible"
      ><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"><code class="!whitespace-pre hljs language-bash">bunx nextdevkit setup-linters
</code></div></pre>
<p align="left">or</p>
      <pre
        class="!overflow-visible"
      ><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"><code class="!whitespace-pre hljs language-bash">npx nextdevkit@latest setup-linters
</code></div></pre>
    </li>
    <li>
      <p>
        <strong><code>help [command]</code></strong
        >: Display detailed help information for commands.
      </p>
      <pre
        class="!overflow-visible"
      ><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"><code class="!whitespace-pre hljs language-bash">bunx nextdevkit help generate
</code></div></pre>
<p align="left">or</p>
      <pre
        class="!overflow-visible"
      ><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"><code class="!whitespace-pre hljs language-bash">npx nextdevkit@latest help generate
</code></div></pre>
    </li>
  </ul>
  <hr />
  <h2>🌟 <strong>Why Use NextDevKit?</strong></h2>
  <ul>
    <li>
      <strong>Boost Productivity</strong>: Reduce boilerplate code and setup
      time by automating common tasks.
    </li>
    <li>
      <strong>Maintain Code Quality</strong>: Enforce consistent coding
      standards with integrated linting and formatting tools.
    </li>
    <li>
      <strong>Simplify Workflow</strong>: Manage project files, components, and
      configurations with simple commands.
    </li>
    <li>
      <strong>Adaptable</strong>: Suitable for both new and existing Next.js
      projects, supporting JavaScript and TypeScript.
    </li>
    <li>
      <strong>Developer-Friendly</strong>: Designed with developers in mind,
      providing helpful prompts and clear documentation.
    </li>
  </ul>
  <hr />
  <h2>📥 <strong>Getting Started</strong></h2>
  <h3><strong>Install and Run with NPX</strong></h3>
  <pre
        class="!overflow-visible"
      ><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"><code class="!whitespace-pre hljs language-bash">npx nextdevkit@latest create my-next-app
</code></div></pre>
  <h3><strong>Initialize in an Existing Project</strong></h3>
  <pre
        class="!overflow-visible"
      ><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"><code class="!whitespace-pre hljs language-bash">npx nextdevkit@latest init
</code></div></pre>
  <hr />
  <h2>👨‍💻 <strong>About the Creator</strong></h2>
  <p>
    <strong>NextDevKit</strong> is created and maintained by
    <strong>Harshal Katakiya</strong>.
  </p>
  <ul>
    <li>
      <strong>GitHub</strong>:
      <a
        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"
        ><span
          style="
            --animation-count: 4;
            --streaming-animation-state: var(--batch-play-state-2);
          "
          >https</span
        ><span
          style="
            --animation-count: 5;
            --streaming-animation-state: var(--batch-play-state-2);
          "
          >://github</span
        ><span
          style="
            --animation-count: 6;
            --streaming-animation-state: var(--batch-play-state-2);
          "
          >.com</span
        ><span
          style="
            --animation-count: 7;
            --streaming-animation-state: var(--batch-play-state-2);
          "
          >/Harshalkatakiya</span
        ></a
      >
    </li>
    <li>
      <strong>Website</strong>:
      <a
        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"
        ><span
          style="
            --animation-count: 6;
            --streaming-animation-state: var(--batch-play-state-2);
          "
          >https</span
        ><span
          style="
            --animation-count: 7;
            --streaming-animation-state: var(--batch-play-state-2);
          "
          >://nextdevkit</span
        ><span
          style="
            --animation-count: 8;
            --streaming-animation-state: var(--batch-play-state-2);
          "
          >.vercel</span
        ><span
          style="
            --animation-count: 9;
            --streaming-animation-state: var(--batch-play-state-2);
          "
          >.app</span
        ></a
      >
    </li>
  </ul>
  <hr />
  <h2>📄 <strong>License</strong></h2>
  <p>This project is licensed under the <strong>MIT License</strong>.</p>
  <hr />
  <h2>📣 <strong>Contribute and Support</strong></h2>
  <p>Contributions, issues, and feature requests are welcome!</p>
  <ul>
    <li>
      <strong>Repository</strong>:
      <a
        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"
        ><span
          style="
            --animation-count: 8;
            --streaming-animation-state: var(--batch-play-state-2);
          "
          >https</span
        ><span
          style="
            --animation-count: 9;
            --streaming-animation-state: var(--batch-play-state-2);
          "
          >://github</span
        ><span
          style="
            --animation-count: 10;
            --streaming-animation-state: var(--batch-play-state-2);
          "
          >.com</span
        ><span
          style="
            --animation-count: 11;
            --streaming-animation-state: var(--batch-play-state-2);
          "
          >/Harshalkatakiya</span
        ><span
          style="
            --animation-count: 12;
            --streaming-animation-state: var(--batch-play-state-2);
          "
          >/nextdevkit</span
        ></a
      >
    </li>
    <li>
      <strong>Issues</strong>:
      <a
        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"
        ><span
          style="
            --animation-count: 10;
            --streaming-animation-state: var(--batch-play-state-2);
          "
          >https</span
        ><span
          style="
            --animation-count: 11;
            --streaming-animation-state: var(--batch-play-state-2);
          "
          >://github</span
        ><span
          style="
            --animation-count: 12;
            --streaming-animation-state: var(--batch-play-state-2);
          "
          >.com</span
        ><span
          style="
            --animation-count: 13;
            --streaming-animation-state: var(--batch-play-state-2);
          "
          >/Harshalkatakiya</span
        ><span
          style="
            --animation-count: 14;
            --streaming-animation-state: var(--batch-play-state-2);
          "
          >/nextdevkit</span
        ><span
          style="
            --animation-count: 15;
            --streaming-animation-state: var(--batch-play-state-2);
          "
          >/issues</span
        ></a
      >
    </li>
  </ul>
  <hr />
  <p>
    <strong>NextDevKit</strong> is your all-in-one toolkit to supercharge your
    Next.js development experience. Get started today and take your projects to
    the next level!
  </p>
</div>