Nextjs-boilerplate-cli NPM

🚀 nextjs-boilerplate-cli (beta)

A CLI tool to enhance and structure your TypeScript-based Next.js projects.
📌 Currently, this CLI only supports TypeScript Next.js projects.
📌 You may need to adjust the structure or code based on your project requirements.

📦 Installation

You can use nextjs-boilerplate-cli directly via npx or install it globally.

Option 1: Quick Start with `npx` (Recommended)

Run the CLI directly using npx without any installation:

npx nextjs-boilerplate-cli

This ensures you always use the latest version of the CLI. No installation required!

Usage:

Navigate to your Next.js project directory:
```
cd your-nextjs-project
```
Execute the CLI:
```
npx nextjs-boilerplate-cli add
```

Option 2: Install Globally

If you prefer to install the CLI globally for repeated use:

npm install -g nextjs-boilerplate-cli

Once installed globally, you can run the CLI using:

nextjs-boilerplate add

Note:
If you've previously installed nextjs-boilerplate-cli globally and want to switch to using npx, you can uninstall the global version using:

npm uninstall -g nextjs-boilerplate-cli

🚀 Quick Start

Follow these steps to get started quickly:

Navigate to your existing Next.js project:
```
cd your-nextjs-project
```

Run the CLI:

Using npx:
```
npx nextjs-boilerplate-cli add
```
Or, if installed globally:
```
nextjs-boilerplate add
```

Follow the interactive prompts.
Start coding with the enhanced structure! 🚀

🛠️ Commands

1. Add Boilerplate

Enhance an existing Next.js project with a basic boilerplate structure:

npx nextjs-boilerplate-cli add
# or, if installed globally
nextjs-boilerplate add

What it does:

Creates a modular folder structure based on your router type (App Router or Pages Router).
Includes templates for:
- Layout (layout.tsx) or _app.tsx
- Error pages (error.tsx or _error.tsx)
- API setup (api.ts)
- Global constants (constants.ts)

Example Output:

src/
  components/ui
  hooks/
  lib/
    api.ts
    constants.ts
  services/
  styles/
  types/
  utils/

2. Add Redux Toolkit

Add Redux Toolkit setup to your Next.js project:

npx nextjs-boilerplate-cli add-redux

What it does:

Sets up a Redux store with a default generalSlice.
Prompts you to add custom slices (optional).
Updates the store dynamically to include all reducers.
Outputs a helpful note for wrapping your app with the Provider.

Example Output:

src/
  store/
    slices/
      generalSlice.ts
      customSlice.ts (optional)
    index.ts

Note:
Don't forget to wrap your app with the Provider!

For App Router:

import { Provider } from "react-redux";
import { store } from "../store";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <Provider store={store}>{children}</Provider>
      </body>
    </html>
  );
}

For Pages Router:

import { Provider } from "react-redux";
import { store } from "../store";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
}

export default MyApp;

3. Add Module

Add a new module with sub-routes:

npx nextjs-boilerplate-cli add-module <moduleNames>

Options:

--with-api: Generate API routes for the modules.
--with-redux: Generate Redux slices for the modules.

What it does:

Prompts for the module name (e.g., auth, dashboard).
Auto-generates predefined templates for auth (e.g., login and register).
Allows you to define custom sub-routes for other modules.

Example Output for auth:

src/
  app/
    (auth)/
      login/
        page.tsx
      register/
        page.tsx

4. Add Environment Variables

Manage environment variables for different environments:

npx nextjs-boilerplate-cli add-env

What it does:

Prompts to select or create an environment file (e.g., .env, .env.production).
Allows you to append or create environment variables dynamically.

5. Add Component

Generate a modular React component:

npx nextjs-boilerplate-cli add-component --name <name> [--dir <dir>] [--with-tests]

What it does:

Creates a new React component in the specified or selected directory.
Optionally generates a CSS module and a test file.

Example Output:

src/
  components/
    MyComponent/
      MyComponent.tsx
      MyComponent.module.css
      MyComponent.test.tsx (optional)

6. Add Tailwind CSS

Set up Tailwind CSS for your Next.js project:

npx nextjs-boilerplate-cli add-tailwind

What it does:

Installs Tailwind CSS, PostCSS, and Autoprefixer.
Configures Tailwind CSS with the appropriate content paths.
Updates or creates globals.css with Tailwind directives.
Optionally installs prettier-plugin-tailwindcss for class sorting.

Example Output:

src/
  styles/
    globals.css
tailwind.config.js
postcss.config.js

📦 Features

Automatic folder structure creation for both App Router and Pages Router.
Supports Redux Toolkit setup with customizable slices.
Flexible module creation with predefined templates (e.g., auth with login and register).
Installs required dependencies like axios, react-redux, and @reduxjs/toolkit.
Adds Tailwind CSS setup with optional Prettier plugin for class sorting.

🛠️ Example Project Structure

Here's an example of the folder structure created by this CLI:

src/
  components/ui
  hooks/
  lib/
    api.ts
    constants.ts
  services/
  styles/
  types/
  utils/
  store/
    slices/
      generalSlice.ts
      customSlice.ts (if added)
    index.ts
  app/
    (auth)/
      login/
        page.tsx
      register/
        page.tsx
  pages/ (if using Pages Router)
    _app.tsx
    _error.tsx

📝 Notes

This CLI is specifically designed for TypeScript Next.js projects.
You may need to adjust the generated structure or files according to your specific requirements.