create-aziz-app 2.0.12 → 2.0.14

package/template/docs/NEXTJS-COMPARISON.md

@@ -0,0 +1,473 @@
+# Next.js Comparison
+
+## Overview
+
+Aziz App is a **lightweight Next.js clone** with all the core benefits but zero dependencies and minimal complexity.
+
+## Feature Comparison
+
+| Feature | Aziz App | Next.js | Notes |
+|---------|----------|---------|-------|
+| **React Hooks** | ✅ | ✅ | useState, useEffect, useMemo, useCallback, useRef, useReducer |
+| **File-based Routing** | ✅ | ✅ | pages/ folder → routes |
+| **API Routes** | ✅ | ✅ | api/ folder → endpoints |
+| **Server-side API** | ✅ | ✅ | Real Node.js backend |
+| **Hot Reload** | ✅ | ✅ | WebSocket-based |
+| **Auto Import** | ✅ | ✅ | No manual imports needed |
+| **Zero Config** | ✅ | ❌ | No config files needed |
+| **Bundle Size** | **~50KB** | ~300KB+ | 6x smaller! |
+| **Dependencies** | **0** | 20+ | No node_modules bloat |
+| **Build Time** | **Instant** | Slow | No build step |
+| **SSR** | ❌ | ✅ | Client-side only |
+| **SSG** | ❌ | ✅ | Client-side only |
+| **Image Optimization** | ❌ | ✅ | Use CDN instead |
+| **TypeScript** | ❌ | ✅ | Pure JavaScript |
+| **Middleware** | ❌ | ✅ | Keep it simple |
+
+## React Hooks - Identical API
+
+### useState
+
+```javascript
+// Next.js
+import { useState } from 'react';
+const [count, setCount] = useState(0);
+
+// Aziz App - EXACTLY THE SAME!
+const [count, setCount] = useState(0);
+```
+
+### useEffect
+
+```javascript
+// Next.js
+import { useEffect } from 'react';
+useEffect(() => {
+    console.log('Mounted!');
+    return () => console.log('Cleanup!');
+}, [dependency]);
+
+// Aziz App - EXACTLY THE SAME!
+useEffect(() => {
+    console.log('Mounted!');
+    return () => console.log('Cleanup!');
+}, [dependency]);
+```
+
+### useMemo
+
+```javascript
+// Next.js
+import { useMemo } from 'react';
+const value = useMemo(() => expensiveCalc(), [dep]);
+
+// Aziz App - EXACTLY THE SAME!
+const value = useMemo(() => expensiveCalc(), [dep]);
+```
+
+### useCallback
+
+```javascript
+// Next.js
+import { useCallback } from 'react';
+const callback = useCallback(() => doSomething(), [dep]);
+
+// Aziz App - EXACTLY THE SAME!
+const callback = useCallback(() => doSomething(), [dep]);
+```
+
+### useRef
+
+```javascript
+// Next.js
+import { useRef } from 'react';
+const ref = useRef(null);
+
+// Aziz App - EXACTLY THE SAME!
+const ref = useRef(null);
+```
+
+### useReducer
+
+```javascript
+// Next.js
+import { useReducer } from 'react';
+const [state, dispatch] = useReducer(reducer, initialState);
+
+// Aziz App - EXACTLY THE SAME!
+const [state, dispatch] = useReducer(reducer, initialState);
+```
+
+## API Routes - Identical API
+
+### Basic Route
+
+```javascript
+// Next.js (pages/api/hello.js)
+export default async function handler(req, res) {
+    res.status(200).json({ message: 'Hello' });
+}
+
+// Aziz App (api/hello.js) - EXACTLY THE SAME!
+export default async function handler(req, res) {
+    res.status(200).json({ message: 'Hello' });
+}
+```
+
+### Request Object
+
+```javascript
+// Both Next.js and Aziz App
+{
+    method: 'GET' | 'POST' | 'PUT' | 'DELETE',
+    body: {},      // Parsed JSON
+    query: {},     // URL parameters
+    headers: {},   // Request headers
+    url: string    // Full URL
+}
+```
+
+### Response Methods
+
+```javascript
+// Both Next.js and Aziz App
+res.status(200)                    // Set status
+res.json({ data: 'value' })        // Send JSON
+res.send('text')                   // Send text
+res.setHeader('X-Custom', 'value') // Set header
+```
+
+### CRUD Example
+
+```javascript
+// Works identically in both!
+export default async function handler(req, res) {
+    switch (req.method) {
+        case 'GET':
+            return res.status(200).json({ users: [] });
+        case 'POST':
+            return res.status(201).json({ created: true });
+        case 'PUT':
+            return res.status(200).json({ updated: true });
+        case 'DELETE':
+            return res.status(200).json({ deleted: true });
+        default:
+            return res.status(405).json({ error: 'Method not allowed' });
+    }
+}
+```
+
+## File-based Routing
+
+### Pages
+
+```
+// Next.js
+pages/
+├── index.js      → /
+├── about.js      → /about
+└── contact.js    → /contact
+
+// Aziz App - Same concept!
+pages/
+├── Home.jsx      → #/home
+├── About.jsx     → #/about
+└── Contact.jsx   → #/contact
+```
+
+### Auto-Registration
+
+```javascript
+// Next.js - Automatic
+// Just create the file
+
+// Aziz App - Automatic too!
+// Just name your function: AboutPage()
+function AboutPage() {
+    return <div><h1>About</h1></div>;
+}
+```
+
+## Data Fetching
+
+### Client-side Fetching
+
+```javascript
+// Next.js
+import { useState, useEffect } from 'react';
+
+function Page() {
+    const [data, setData] = useState(null);
+    
+    useEffect(() => {
+        fetch('/api/users')
+            .then(res => res.json())
+            .then(setData);
+    }, []);
+    
+    return <div>{data?.message}</div>;
+}
+
+// Aziz App - EXACTLY THE SAME!
+function Page() {
+    const [data, setData] = useState(null);
+    
+    useEffect(() => {
+        fetch('/api/users')
+            .then(res => res.json())
+            .then(setData);
+    }, []);
+    
+    return <div>{data?.message}</div>;
+}
+```
+
+### Custom Hook
+
+```javascript
+// Both Next.js and Aziz App
+function useFetch(url) {
+    const [data, setData] = useState(null);
+    const [loading, setLoading] = useState(true);
+    
+    useEffect(() => {
+        fetch(url)
+            .then(res => res.json())
+            .then(data => {
+                setData(data);
+                setLoading(false);
+            });
+    }, [url]);
+    
+    return { data, loading };
+}
+```
+
+## JSX Syntax
+
+### Components
+
+```jsx
+// Next.js
+export default function Button({ onClick, children }) {
+    return <button onClick={onClick}>{children}</button>;
+}
+
+// Aziz App - Same JSX!
+function Button({ onClick, children }) {
+    return <button onClick={onClick}>{children}</button>;
+}
+```
+
+### Props
+
+```jsx
+// Both support the same props
+<div 
+    class="container"
+    style={{ color: 'red' }}
+    onClick={() => alert('Hi')}
+>
+    Content
+</div>
+```
+
+## Development Experience
+
+### Hot Reload
+
+```
+// Next.js
+1. Save file
+2. Fast Refresh
+3. State preserved
+
+// Aziz App
+1. Save file
+2. WebSocket reload
+3. Full page reload (state reset)
+```
+
+### Error Messages
+
+```
+// Next.js
+- Detailed error overlay
+- Stack traces
+- Suggestions
+
+// Aziz App
+- Browser console errors
+- Simpler debugging
+- Less magic
+```
+
+## When to Use Each
+
+### Use Aziz App When:
+
+✅ Building simple SPAs
+✅ Learning React concepts
+✅ Prototyping quickly
+✅ Want zero dependencies
+✅ Don't need SSR/SSG
+✅ Want instant startup
+✅ Prefer simplicity
+
+### Use Next.js When:
+
+✅ Need SEO (SSR/SSG)
+✅ Building large apps
+✅ Need image optimization
+✅ Want TypeScript
+✅ Need middleware
+✅ Want edge functions
+✅ Building production apps
+
+## Migration Path
+
+### From Aziz App to Next.js
+
+1. **Pages** - Rename files, adjust exports
+2. **API Routes** - Copy as-is (same API!)
+3. **Hooks** - No changes needed (same API!)
+4. **Components** - Minor adjustments
+5. **Styling** - Add CSS modules if needed
+
+### From Next.js to Aziz App
+
+1. **Remove SSR/SSG** - Convert to client-side
+2. **Pages** - Adjust file names
+3. **API Routes** - Copy as-is (same API!)
+4. **Hooks** - No changes needed (same API!)
+5. **Remove dependencies** - Delete node_modules
+
+## Performance
+
+### Bundle Size
+
+```
+Next.js Production Build:
+- Framework: ~300KB
+- Runtime: ~100KB
+- Total: ~400KB+
+
+Aziz App:
+- Framework: ~50KB
+- Runtime: 0KB (browser native)
+- Total: ~50KB
+```
+
+### Startup Time
+
+```
+Next.js:
+- npm install: 2-5 minutes
+- npm run dev: 10-30 seconds
+- First load: 2-5 seconds
+
+Aziz App:
+- npm install: 5 seconds
+- npm run dev: <1 second
+- First load: <1 second
+```
+
+### Build Time
+
+```
+Next.js:
+- Development: 10-30 seconds
+- Production: 1-5 minutes
+
+Aziz App:
+- Development: Instant
+- Production: No build needed
+```
+
+## Code Examples
+
+### Counter Component
+
+```jsx
+// Works identically in both!
+function Counter() {
+    const [count, setCount] = useState(0);
+    
+    return (
+        <div>
+            <p>Count: {count}</p>
+            <button onClick={() => setCount(count + 1)}>
+                Increment
+            </button>
+        </div>
+    );
+}
+```
+
+### Form with Validation
+
+```jsx
+// Works identically in both!
+function ContactForm() {
+    const [name, setName] = useState('');
+    const [email, setEmail] = useState('');
+    const [error, setError] = useState('');
+    
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        
+        if (!name || !email) {
+            setError('All fields required');
+            return;
+        }
+        
+        const res = await fetch('/api/contact', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ name, email })
+        });
+        
+        if (res.ok) {
+            alert('Sent!');
+        }
+    };
+    
+    return (
+        <form onSubmit={handleSubmit}>
+            <input 
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="Name"
+            />
+            <input 
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="Email"
+            />
+            {error && <p>{error}</p>}
+            <button type="submit">Submit</button>
+        </form>
+    );
+}
+```
+
+## Summary
+
+Aziz App is a **lightweight Next.js clone** that provides:
+
+- ✅ **Same React Hooks API** - useState, useEffect, etc.
+- ✅ **Same API Routes** - Identical req/res objects
+- ✅ **Same JSX Syntax** - Write components the same way
+- ✅ **Same Development Flow** - File-based routing, hot reload
+- ✅ **Zero Dependencies** - No node_modules bloat
+- ✅ **Instant Startup** - No build step
+- ✅ **6x Smaller** - Minimal bundle size
+
+Perfect for:
+- 🎓 Learning React/Next.js concepts
+- 🚀 Rapid prototyping
+- 📱 Simple SPAs
+- 🎨 Portfolio sites
+- 🧪 Experiments
+
+**It's Next.js, but lightweight!** 🎉

package/template/lib/db.js

@@ -0,0 +1,67 @@
+// Database connection helper
+// This is a mock - replace with real database connection
+
+let isConnected = false;
+
+async function connectDB() {
+    if (isConnected) {
+        console.log('✅ Using existing database connection');
+        return;
+    }
+
+    try {
+        // In production, connect to real database here:
+        // await mongoose.connect(process.env.MONGODB_URI);
+        // or
+        // db = await new Database(process.env.DATABASE_URL);
+        
+        console.log('✅ Database connected (mock)');
+        isConnected = true;
+    } catch (error) {
+        console.error('❌ Database connection failed:', error);
+        throw error;
+    }
+}
+
+module.exports = connectDB;
+
+// Example usage with MongoDB:
+/*
+const mongoose = require('mongoose');
+
+async function connectDB() {
+    if (mongoose.connections[0].readyState) {
+        return;
+    }
+
+    await mongoose.connect(process.env.MONGODB_URI, {
+        useNewUrlParser: true,
+        useUnifiedTopology: true,
+    });
+    
+    console.log('✅ MongoDB connected');
+}
+
+module.exports = connectDB;
+*/
+
+// Example usage with PostgreSQL:
+/*
+const { Pool } = require('pg');
+
+const pool = new Pool({
+    connectionString: process.env.DATABASE_URL,
+});
+
+async function connectDB() {
+    try {
+        await pool.query('SELECT NOW()');
+        console.log('✅ PostgreSQL connected');
+    } catch (error) {
+        console.error('❌ PostgreSQL connection failed:', error);
+        throw error;
+    }
+}
+
+module.exports = connectDB;
+*/

package/template/models/User.js

@@ -0,0 +1,102 @@
+// User Model
+// This is a mock - replace with real database model
+
+// Mock in-memory database
+let users = [
+    { _id: '1', name: 'Aziz Ahmed', email: 'aziz@example.com', role: 'admin', phone: '123-456-7890' },
+    { _id: '2', name: 'John Doe', email: 'john@example.com', role: 'user', phone: '098-765-4321' }
+];
+
+class User {
+    // Find one user
+    static async findOne(query) {
+        const user = users.find(u => {
+            return Object.keys(query).every(key => u[key] === query[key]);
+        });
+        return user || null;
+    }
+
+    // Find by ID
+    static async findById(id) {
+        return users.find(u => u._id === id) || null;
+    }
+
+    // Find all users
+    static async find(query = {}) {
+        if (Object.keys(query).length === 0) {
+            return users;
+        }
+        return users.filter(u => {
+            return Object.keys(query).every(key => u[key] === query[key]);
+        });
+    }
+
+    // Create new user
+    static async create(userData) {
+        const newUser = {
+            _id: String(users.length + 1),
+            ...userData,
+            createdAt: new Date().toISOString()
+        };
+        users.push(newUser);
+        return newUser;
+    }
+
+    // Update user
+    static async findByIdAndUpdate(id, updates) {
+        const index = users.findIndex(u => u._id === id);
+        if (index === -1) return null;
+        
+        users[index] = { ...users[index], ...updates, updatedAt: new Date().toISOString() };
+        return users[index];
+    }
+
+    // Delete user
+    static async findByIdAndDelete(id) {
+        const index = users.findIndex(u => u._id === id);
+        if (index === -1) return null;
+        
+        const deleted = users.splice(index, 1)[0];
+        return deleted;
+    }
+
+    // Select specific fields
+    select(fields) {
+        // This is a chainable method for field selection
+        // In real Mongoose, this would be: User.findOne().select('name email')
+        return this;
+    }
+}
+
+module.exports = User;
+
+// Example usage with Mongoose:
+/*
+const mongoose = require('mongoose');
+
+const userSchema = new mongoose.Schema({
+    name: {
+        type: String,
+        required: true
+    },
+    email: {
+        type: String,
+        required: true,
+        unique: true
+    },
+    password: {
+        type: String,
+        required: true
+    },
+    role: {
+        type: String,
+        enum: ['user', 'admin'],
+        default: 'user'
+    },
+    phone: String
+}, {
+    timestamps: true
+});
+
+module.exports = mongoose.models.User || mongoose.model('User', userSchema);
+*/

package/template/modules/next-response.js

@@ -0,0 +1,58 @@
+// NextResponse - Next.js-compatible response helper
+class NextResponse {
+    constructor(body, init = {}) {
+        this.body = body;
+        this.status = init.status || 200;
+        this.headers = new Map(Object.entries(init.headers || {}));
+    }
+
+    static json(data, init = {}) {
+        return new NextResponse(JSON.stringify(data), {
+            ...init,
+            headers: {
+                'Content-Type': 'application/json',
+                ...(init.headers || {})
+            }
+        });
+    }
+
+    static text(text, init = {}) {
+        return new NextResponse(text, {
+            ...init,
+            headers: {
+                'Content-Type': 'text/plain',
+                ...(init.headers || {})
+            }
+        });
+    }
+
+    static redirect(url, init = {}) {
+        return new NextResponse(null, {
+            ...init,
+            status: init.status || 307,
+            headers: {
+                'Location': url,
+                ...(init.headers || {})
+            }
+        });
+    }
+
+    static error() {
+        return new NextResponse(JSON.stringify({ error: 'Internal Server Error' }), {
+            status: 500,
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        });
+    }
+}
+
+// Export for Node.js (server-side)
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = { NextResponse };
+}
+
+// Export for browser (if needed)
+if (typeof window !== 'undefined') {
+    window.NextResponse = NextResponse;
+}