create-next-mui 0.0.3 โ 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +108 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
# create-next-mui ๐
|
|
2
|
+
|
|
3
|
+
A blazing-fast, interactive CLI tool to instantly scaffold production-ready **Next.js** applications pre-configured with **Material UI (MUI)**, robust theme providers, and an elite architectural linting layout.
|
|
4
|
+
|
|
5
|
+
Stop wasting time wiring up Emotion caches, Next.js App Router layout configs, or sorting your imports manually. Launch your next project perfectly in under 10 seconds.
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## ๐ Quick Start
|
|
10
|
+
|
|
11
|
+
You don't need to install anything globally. Just run the following command in your terminal:
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npx create-next-mui
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
The interactive prompt engine (powered by `@clack/prompts`) will guide you through naming your project and selecting your preferred flavor.
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
## โจ Key Features
|
|
22
|
+
|
|
23
|
+
- **โก Modern Architecture:** Built natively on top of the Next.js App Router structure.
|
|
24
|
+
- **๐จ Material UI Ready:** Seamless compilation of MUI components inside Server and Client Components with pre-configured UI themes.
|
|
25
|
+
- **๐งฉ Dual-Template Architecture:** Full support for both **TypeScript** and **JavaScript** boilerplates.
|
|
26
|
+
- **๐งผ Perfectionist Linting Config:** Pre-packaged with **ESLint v9 Flat Config** (`eslint.config.mjs`) utilizing `eslint-plugin-perfectionist` and `eslint-plugin-unused-imports`.
|
|
27
|
+
- **๐ฆ Pure & Lightweight:** Zero bloat. Template files are automatically stripped of development artifacts (`node_modules`, caches) before build deployment.
|
|
28
|
+
|
|
29
|
+
---
|
|
30
|
+
|
|
31
|
+
## ๐ฆ Choice of Flavors
|
|
32
|
+
|
|
33
|
+
During the prompt sequence, you can choose between two completely separate architectures, both fine-tuned for high-performance builds:
|
|
34
|
+
|
|
35
|
+
1. **TypeScript Template (`next-mui-template-ts`)** โ Out-of-the-box strong typing, custom theme module augmentations, and strict `@typescript-eslint` checking.
|
|
36
|
+
2. **JavaScript Template (`next-mui-template-js`)** โ Lightweight, clean vanilla ES modern syntax with optimized configuration overhead.
|
|
37
|
+
|
|
38
|
+
---
|
|
39
|
+
|
|
40
|
+
## ๐ Generated Project Structure
|
|
41
|
+
|
|
42
|
+
No matter which path you choose, `create-next-mui` prints out an organized, production-grade layout optimized for scalability:
|
|
43
|
+
|
|
44
|
+
```text
|
|
45
|
+
my-awesome-app/
|
|
46
|
+
โโโ src/
|
|
47
|
+
โ โโโ app/
|
|
48
|
+
โ โ โโโ layout.js/ts # Handles App Router initialization & MUI Cache Provider
|
|
49
|
+
โ โ โโโ page.js/ts # Pre-built home view utilizing responsive MUI layouts
|
|
50
|
+
โ โโโ components/ # Reusable global presentation components
|
|
51
|
+
โ โโโ theme/
|
|
52
|
+
โ โโโ index.js/ts # Deep theme customization (palette, typography, overrides)
|
|
53
|
+
โ โโโ theme-provider.js # Keeps layout tree hydrations isolated and performant
|
|
54
|
+
โโโ eslint.config.mjs # Elite natural line-length linting layout
|
|
55
|
+
โโโ next.config.js # Configured optimization vectors
|
|
56
|
+
โโโ package.json
|
|
57
|
+
โโโ README.md
|
|
58
|
+
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
---
|
|
62
|
+
|
|
63
|
+
## ๐จ Elite Linting Layout (Perfectionist Grouping)
|
|
64
|
+
|
|
65
|
+
Both boilerplate environments contain a fine-tuned, strict importing arrangement rule framework using `line-length` natural alpha sorting. Your files are automatically linted and organized cleanly on save down this architectural chain:
|
|
66
|
+
|
|
67
|
+
1. **React Core APIs** (`react`)
|
|
68
|
+
2. **Next.js Framework Hooks & Context** (`next/*`)
|
|
69
|
+
3. **Material UI Design Tokens & Engine** (`@mui/*`, `@emotion/*`)
|
|
70
|
+
4. **External Third-Party Libraries**
|
|
71
|
+
5. **Internal Layer Architectures** (`@/types`, `@/lib`, `@/components`, `@/theme`)
|
|
72
|
+
|
|
73
|
+
Say goodbye to disorganized, messy blocks of import statements!
|
|
74
|
+
|
|
75
|
+
---
|
|
76
|
+
|
|
77
|
+
## โ๏ธ Development Scripts
|
|
78
|
+
|
|
79
|
+
Once your scaffolding finishes generating, step inside your directory and run the standard lifecycle workflows:
|
|
80
|
+
|
|
81
|
+
```bash
|
|
82
|
+
# Install dependencies
|
|
83
|
+
npm install
|
|
84
|
+
|
|
85
|
+
# Boot up local development server
|
|
86
|
+
npm run dev
|
|
87
|
+
|
|
88
|
+
# Run ESLint validation checks with automated file ordering adjustment
|
|
89
|
+
npm run lint
|
|
90
|
+
|
|
91
|
+
# Compile production-ready code bundles
|
|
92
|
+
npm run build
|
|
93
|
+
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
---
|
|
97
|
+
|
|
98
|
+
## ๐ค Contributing & Feedback
|
|
99
|
+
|
|
100
|
+
Issues and pull requests are highly welcome! If you want to expand the templates or suggest additional components, feel free to open an issue or submit a pull request on the official repository.
|
|
101
|
+
|
|
102
|
+
Maintained with ๐ป by [thatonevikash](https://github.com/thatonevikash).
|
|
103
|
+
|
|
104
|
+
---
|
|
105
|
+
|
|
106
|
+
## ๐ License
|
|
107
|
+
|
|
108
|
+
This project is licensed under the MIT License - see the LICENSE file for details.
|