create-aziz-app 2.0.13 → 2.0.15
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 +227 -0
- package/package.json +1 -1
- package/template/README.md +862 -138
- package/template/_framework/boot.js +36 -0
- package/template/_framework/hooks.js +207 -0
- package/template/_framework/router.js +279 -0
- package/template/_framework/runtime.js +86 -0
- package/template/api/createUser.js +69 -0
- package/template/api/getUser.js +60 -0
- package/template/api/getUserWithDB.js +65 -0
- package/template/api/hello.js +8 -17
- package/template/api/loginUser.js +61 -0
- package/template/api/users.js +38 -134
- package/template/app/about/page.js +45 -0
- package/template/app/layout.js +23 -0
- package/template/app/page.js +54 -0
- package/template/app/test/page.js +55 -0
- package/template/components/Footer.js +10 -0
- package/template/components/Navbar.js +30 -0
- package/template/docs/NEXTJS-APP-ROUTER.md +536 -0
- package/template/index.html +24 -0
- package/template/lib/db.js +67 -0
- package/template/models/User.js +102 -0
- package/template/modules/next-response.js +58 -0
- package/template/package.json +4 -10
- package/template/scripts/dev-server.js +357 -268
- package/template/scripts/live-reload-client.js +0 -1
package/README.md
ADDED
|
@@ -0,0 +1,227 @@
|
|
|
1
|
+
# ⚡ create-aziz-app
|
|
2
|
+
|
|
3
|
+
> A lightweight Next.js clone — file-based routing, React hooks, server-side API routes, ES module imports. **Zero dependencies. Instant startup.**
|
|
4
|
+
|
|
5
|
+
```bash
|
|
6
|
+
npx create-aziz-app my-app
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
## What is this?
|
|
12
|
+
|
|
13
|
+
AzizApp gives you the Next.js developer experience without the weight:
|
|
14
|
+
|
|
15
|
+
| | AzizApp | Next.js |
|
|
16
|
+
|--|---------|---------|
|
|
17
|
+
| Bundle size | **~50KB** | ~400KB+ |
|
|
18
|
+
| Dependencies | **0** | 20+ |
|
|
19
|
+
| Startup time | **< 1s** | 10–30s |
|
|
20
|
+
| `page.js` routing | ✅ | ✅ |
|
|
21
|
+
| `layout.js` | ✅ | ✅ |
|
|
22
|
+
| API routes | ✅ | ✅ |
|
|
23
|
+
| `NextResponse` | ✅ | ✅ |
|
|
24
|
+
| React hooks | ✅ | ✅ |
|
|
25
|
+
| ES module imports | ✅ | ✅ |
|
|
26
|
+
| `@/` alias | ✅ | ✅ |
|
|
27
|
+
| Live reload | ✅ | ✅ |
|
|
28
|
+
| SSR / SSG | ❌ | ✅ |
|
|
29
|
+
|
|
30
|
+
---
|
|
31
|
+
|
|
32
|
+
## Getting Started
|
|
33
|
+
|
|
34
|
+
```bash
|
|
35
|
+
npx create-aziz-app my-app
|
|
36
|
+
cd my-app
|
|
37
|
+
npm run dev
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
The CLI will ask you:
|
|
41
|
+
- **Project name**
|
|
42
|
+
- **Port** (default: 3000)
|
|
43
|
+
- **CSS framework** — None / Bootstrap / Tailwind
|
|
44
|
+
- **Include examples?**
|
|
45
|
+
- **Include docs?**
|
|
46
|
+
|
|
47
|
+
---
|
|
48
|
+
|
|
49
|
+
## Project Structure
|
|
50
|
+
|
|
51
|
+
```
|
|
52
|
+
my-app/
|
|
53
|
+
├── index.html ← entry point
|
|
54
|
+
├── app/
|
|
55
|
+
│ ├── layout.js ← root layout
|
|
56
|
+
│ ├── page.js ← route: /
|
|
57
|
+
│ ├── about/
|
|
58
|
+
│ │ └── page.js ← route: /about
|
|
59
|
+
│ └── blog/
|
|
60
|
+
│ └── [slug]/
|
|
61
|
+
│ └── page.js ← route: /blog/:slug
|
|
62
|
+
├── api/
|
|
63
|
+
│ └── users.js ← /api/users (server-side)
|
|
64
|
+
├── components/
|
|
65
|
+
│ ├── Navbar.js
|
|
66
|
+
│ └── Footer.js
|
|
67
|
+
├── lib/
|
|
68
|
+
│ └── db.js
|
|
69
|
+
├── models/
|
|
70
|
+
│ └── User.js
|
|
71
|
+
└── styles/
|
|
72
|
+
└── globals.css
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
---
|
|
76
|
+
|
|
77
|
+
## Pages
|
|
78
|
+
|
|
79
|
+
```js
|
|
80
|
+
// app/about/page.js → /about
|
|
81
|
+
/** @jsx h */
|
|
82
|
+
import { h } from '/_framework/runtime.js';
|
|
83
|
+
|
|
84
|
+
export default function Page() {
|
|
85
|
+
const [count, setCount] = useState(0);
|
|
86
|
+
|
|
87
|
+
return (
|
|
88
|
+
<div>
|
|
89
|
+
<h1>About</h1>
|
|
90
|
+
<p>Count: {count}</p>
|
|
91
|
+
<button onClick={() => setCount(c => c + 1)}>+</button>
|
|
92
|
+
</div>
|
|
93
|
+
);
|
|
94
|
+
}
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
---
|
|
98
|
+
|
|
99
|
+
## Layouts
|
|
100
|
+
|
|
101
|
+
```js
|
|
102
|
+
// app/layout.js → wraps every page
|
|
103
|
+
/** @jsx h */
|
|
104
|
+
import { h } from '/_framework/runtime.js';
|
|
105
|
+
import Navbar from '/components/Navbar.js';
|
|
106
|
+
|
|
107
|
+
export default function Layout({ children }) {
|
|
108
|
+
return (
|
|
109
|
+
<div>
|
|
110
|
+
<Navbar />
|
|
111
|
+
<main>{children}</main>
|
|
112
|
+
</div>
|
|
113
|
+
);
|
|
114
|
+
}
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
---
|
|
118
|
+
|
|
119
|
+
## API Routes
|
|
120
|
+
|
|
121
|
+
```js
|
|
122
|
+
// api/users.js → /api/users
|
|
123
|
+
const { NextResponse } = require('../modules/next-response');
|
|
124
|
+
|
|
125
|
+
async function GET(request) {
|
|
126
|
+
const { searchParams } = new URL(request.url);
|
|
127
|
+
const id = searchParams.get('id');
|
|
128
|
+
// fetch from DB...
|
|
129
|
+
return NextResponse.json({ users: [] });
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
async function POST(request) {
|
|
133
|
+
const { name, email } = await request.json();
|
|
134
|
+
// save to DB...
|
|
135
|
+
return NextResponse.json({ created: true }, { status: 201 });
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
module.exports = { GET, POST };
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
---
|
|
142
|
+
|
|
143
|
+
## Imports
|
|
144
|
+
|
|
145
|
+
```js
|
|
146
|
+
// Framework
|
|
147
|
+
import { h } from '/_framework/runtime.js';
|
|
148
|
+
import { navigate } from '/_framework/router.js';
|
|
149
|
+
|
|
150
|
+
// Absolute paths
|
|
151
|
+
import Navbar from '/components/Navbar.js';
|
|
152
|
+
|
|
153
|
+
// @/ alias
|
|
154
|
+
import connectDB from '@/lib/db';
|
|
155
|
+
import User from '@/models/User';
|
|
156
|
+
|
|
157
|
+
// npm packages (install first, then import)
|
|
158
|
+
import mongoose from 'mongoose';
|
|
159
|
+
import bcrypt from 'bcryptjs';
|
|
160
|
+
import jwt from 'jsonwebtoken';
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
---
|
|
164
|
+
|
|
165
|
+
## React Hooks
|
|
166
|
+
|
|
167
|
+
All hooks work exactly like React — no imports needed in pages:
|
|
168
|
+
|
|
169
|
+
```js
|
|
170
|
+
const [count, setCount] = useState(0);
|
|
171
|
+
const [user, setUser] = useState(null);
|
|
172
|
+
|
|
173
|
+
useEffect(() => {
|
|
174
|
+
fetchUser().then(setUser);
|
|
175
|
+
}, []);
|
|
176
|
+
|
|
177
|
+
const doubled = useMemo(() => count * 2, [count]);
|
|
178
|
+
const ref = useRef(null);
|
|
179
|
+
|
|
180
|
+
const [state, dispatch] = useReducer(reducer, initialState);
|
|
181
|
+
|
|
182
|
+
const theme = useContext(ThemeContext);
|
|
183
|
+
|
|
184
|
+
const [name, setName] = useLocalStorage('name', '');
|
|
185
|
+
|
|
186
|
+
const { data, loading, error } = useFetch('/api/users');
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
---
|
|
190
|
+
|
|
191
|
+
## Navigation
|
|
192
|
+
|
|
193
|
+
```js
|
|
194
|
+
import { navigate, Link, useRouter, useParams, useSearchParams } from '/_framework/router.js';
|
|
195
|
+
|
|
196
|
+
// Programmatic
|
|
197
|
+
navigate('/about');
|
|
198
|
+
|
|
199
|
+
// Component
|
|
200
|
+
<Link href="/about">About</Link>
|
|
201
|
+
|
|
202
|
+
// Hook
|
|
203
|
+
const { pathname, push, back } = useRouter();
|
|
204
|
+
|
|
205
|
+
// Dynamic route params (/blog/[slug])
|
|
206
|
+
const { slug } = useParams();
|
|
207
|
+
|
|
208
|
+
// Query string (/search?q=hello)
|
|
209
|
+
const searchParams = useSearchParams();
|
|
210
|
+
const q = searchParams.get('q');
|
|
211
|
+
```
|
|
212
|
+
|
|
213
|
+
---
|
|
214
|
+
|
|
215
|
+
## Full docs
|
|
216
|
+
|
|
217
|
+
See [README.md](template/README.md) inside your generated project for the complete guide.
|
|
218
|
+
|
|
219
|
+
---
|
|
220
|
+
|
|
221
|
+
## Author
|
|
222
|
+
|
|
223
|
+
**Syed Muhammad Aziz Ahmed**
|
|
224
|
+
|
|
225
|
+
## License
|
|
226
|
+
|
|
227
|
+
AZIZ
|
package/package.json
CHANGED