Next-cli-toolkit — Next.js Page Generator

A fast and minimal CLI tool to generate Next.js routes and components with .tsx, .jsx and .css files in one command — (inspired from nest-cli)

Watch Tutorial on Youtube

Features

• ✅ Instantly create route folders like user/[id]
• ✅ Generates page.tsx, page.jsx and page.css files
• ✅ Comes with boilerplate code
• ✅ Perfect for Next.js 13+ with App Router projects
• ✅ supports component templates too (version ^1.0.11)

⚙️ Usage

step 01: install the package as dev depedency

npm i -D next-cli-toolkit

step 02: In their package.json, add:

"scripts": {
  "nextcli": "nextcli"
}

step 03: Now you can run:

npm run nextcli home/[id]

This will generate page.tsx and page.css at:

/src/app/home/[id]/page.tsx
/src/app/home/[id]/page.css

The generated page.tsx will look like this:

"use client";
import "./page.css"

const Page = () => {
  return (
    <>
    this is home/[id]
    </>
  );
};

export default Page;

Available commands: | Command | Output | | ------------------------------------ | -------------------------------------------------------------- | | nextcli your/route | Generates page.tsx and page.css | | nextcli your/route-no-css | Generates page.tsx only | | nextcli your/route-interface | Generates page.tsx with interface boilerplate and page.css | | nextcli your/route-interface-no-css | Generates page.tsx with interface only | | nextcli your/route-jsx | Generates page.jsx and page.css | | nextcli your/route-jsx-no-css | Generates page.jsx only | | new | | | nextcli componentName-comp | Generates Component.jsx and Component.css at src/components |

Additionally you can download it globally:

npm install -g next-cli-toolkit

and you can use nextcli in any directory. Just use the command:

nextcli your/route

👨‍💻 Author

Built with 💙 by Saumya Sarma

• Instagram
• LinkedIn
• X
• GitHub
• NPM Package
• Project Repository

MIT License — Free for personal and commercial use.