🧱 nextjs-structure-cli (alias nsc)

⚙️ Generate and manage Next.js App Router project structures effortlessly — pages, services, components, and Redux slices — all from your terminal.

✨ Features

• 📄 Generate: page, component, service, redux slice
• ⚙️ Custom paths via --dir flag
• ⚡ TypeScript or JavaScript output (--lang flag)
• 🧩 Config file support (nextjs-structure.config.json)
• 💻 Cross-platform (Windows, macOS, Linux)

📦 Installation

Install using your package manager like npm, yarn, etc:

npm install nextjs-structure-cli

after that, you can see the available CLI:

npx nextjs-structure-cli --help
# or
npx nsc --help

🪄 Initialize Configuration (Optional)

If you want to customize your default paths or language, you can generate a config file:

npx nsc init

This will create a nextjs-structure.config.json file in your project root:

{
  "language": "tsx",
  "paths": {
    "components": "src/components",
    "services": "src/services",
    "pages": "src/app",
    "slices": "src/redux/features"
  }
}

🧰 CLI Commands

1️⃣ Create a Service

Generate an API service boilerplate.

npx nsc create:service --name=user

Options: | Flag | Description | Default | |------|--------------|----------| | --name | Service name (required) | — | | --dir | Custom directory | src/services | | --lang | Output language (ts / js) | ts |

Example output:

src/services/UserService.ts

Generated file:

import { api } from "@/lib/apiClient";

export const UserService = {
  async getAll() { return api.get("/user"); },
  async getById(id) { return api.get(`/user/${id}`); },
  async create(data) { return api.post("/user", data); },
  async update(id, data) { return api.put(`/user/${id}`, data); },
  async delete(id) { return api.delete(`/user/${id}`); }
};

2️⃣ Create a Component

Generate a reusable React component.

npx nsc create:component --name=Button --lang=jsx

Options: | Flag | Description | Default | |------|--------------|----------| | --name | Component name (required) | — | | --dir | Custom directory | src/components | | --lang | Output language (tsx / jsx) | tsx |

Example output:

src/components/Button.jsx

Generated file:

"use client";
import React from "react";

export default function Button({ children, ...props }) {
  return <button {...props}>{children}</button>;
}

3️⃣ Create a Page

Generate a Next.js App Router page file.

npx nsc create:page --path='(dashboard)/users/[id]'

⚠️ Note: Always wrap the path in quotes '...' when using special folders like (group) or [dynamic] — especially in Windows PowerShell.

Options: | Flag | Description | Default | |------|--------------|----------| | --path | Route path for page (required) | — | | --dir | Custom directory | src/app | | --lang | Output language (tsx / jsx) | tsx |

Example output:

src/app/(dashboard)/users/[id]/page.tsx

Generated file:

"use client";

export default function Page({ params }) {
  return (
    <div>
      <h1>(dashboard)/users/[id] page</h1>
      {params?.id && <p>ID: {params.id}</p>}
    </div>
  );
}

4️⃣ Create a Redux Slice

Generate a preconfigured Redux Toolkit slice.

npx nsc create:slice --name=auth

Options: | Flag | Description | Default | |------|--------------|----------| | --name | Slice name (required) | — | | --dir | Custom directory | src/redux/features | | --lang | Output language (ts / js) | ts |

Example output:

src/redux/features/auth/authSlice.ts

Generated file:

import { createSlice } from "@reduxjs/toolkit";

const initialState = { user: null, isAuthenticated: false };

const authSlice = createSlice({
  name: "auth",
  initialState,
  reducers: {
    setUser: (state, action) => {
      state.user = action.payload;
      state.isAuthenticated = true;
    },
    logout: (state) => {
      state.user = null;
      state.isAuthenticated = false;
    },
  },
});

export const { setUser, logout } = authSlice.actions;
export default authSlice.reducer;

⚙️ Config File Support

You can override CLI defaults by creating a nextjs-structure.config.json file in your project root:

{
  "language": "tsx",
  "paths": {
    "components": "src/shared/ui",
    "services": "src/lib/api",
    "pages": "src/app",
    "slices": "src/redux/features"
  }
}

The CLI automatically reads this configuration — no additional flags required.

💡 Examples

| Command | Description | Output | |----------|--------------|--------| | npx nsc create:service --name=user | Create UserService.ts | src/services/UserService.ts | | npx nsc create:component --name=Card --dir=src/ui | Create custom component | src/ui/Card.tsx | | npx nsc create:page --path='(dashboard)/users/[id]' | Create dynamic page route | src/app/(dashboard)/users/[id]/page.tsx | | npx nsc create:slice --name=auth --lang=js | Create Redux slice (JavaScript) | src/redux/features/auth/authSlice.js |

🧠 CLI Flags Summary

| Flag | Applies To | Description | |------|-------------|-------------| | --name | component, service, slice | File name or entity name | | --path | page | Route path (e.g. 'dashboard/settings' or '(dashboard)/users/[id]') | | --dir | all | Custom output directory | | --lang | all | Choose file language (tsx / jsx / ts / js) |

🧱 Folder Structure Example

src/
 ┣ app/
 ┃ ┗ (dashboard)/
 ┃   ┗ users/
 ┃     ┗ [id]/
 ┃       ┗ page.tsx
 ┣ components/
 ┃ ┣ Button.tsx
 ┃ ┗ Card.tsx
 ┣ services/
 ┃ ┗ UserService.ts
 ┗ redux/
   ┗ features/
     ┗ auth/
       ┗ authSlice.ts

🧩 Roadmap

• [ ] create:feature command for modular folders
• [ ] setup:redux and setup:tailwind scaffolding
• [ ] doctor command to validate Next.js setup
• [ ] Interactive CLI mode with inquirer

🧑‍💻 Author

Created with ❤️ by Ilham Muhamad S

“Generate smarter. Structure faster.”

⭐️ If you find this useful, please star the repo or share it with your team!