create-aziz-app 2.0.12 → 2.0.14

package/template/docs/NEXTJS-APP-ROUTER.md

@@ -0,0 +1,536 @@
+# Next.js App Router Style API Routes
+
+## Overview
+
+Write API routes **exactly like Next.js App Router** with `NextResponse` and named HTTP method exports!
+
+## Quick Example
+
+```javascript
+// api/getUser.js
+const { NextResponse } = require('../modules/next-response');
+
+export async function GET(request) {
+    const { searchParams } = new URL(request.url);
+    const email = searchParams.get('email');
+    
+    if (!email) {
+        return NextResponse.json(
+            { error: 'Email required' },
+            { status: 400 }
+        );
+    }
+    
+    const user = await findUser(email);
+    return NextResponse.json(user);
+}
+
+module.exports = { GET };
+```
+
+## NextResponse API
+
+### NextResponse.json()
+
+```javascript
+// Success response
+return NextResponse.json({ message: 'Success' });
+
+// With status code
+return NextResponse.json(
+    { error: 'Not found' },
+    { status: 404 }
+);
+
+// With custom headers
+return NextResponse.json(
+    { data: 'value' },
+    { 
+        status: 200,
+        headers: {
+            'X-Custom-Header': 'value'
+        }
+    }
+);
+```
+
+### NextResponse.text()
+
+```javascript
+return NextResponse.text('Hello World');
+
+return NextResponse.text(
+    'Error message',
+    { status: 500 }
+);
+```
+
+### NextResponse.redirect()
+
+```javascript
+return NextResponse.redirect('/login');
+
+return NextResponse.redirect(
+    '/dashboard',
+    { status: 307 }
+);
+```
+
+### NextResponse.error()
+
+```javascript
+return NextResponse.error();
+// Returns 500 with generic error message
+```
+
+## HTTP Method Exports
+
+### Single Method
+
+```javascript
+// api/getUser.js
+const { NextResponse } = require('../modules/next-response');
+
+async function GET(request) {
+    return NextResponse.json({ message: 'GET request' });
+}
+
+module.exports = { GET };
+```
+
+### Multiple Methods
+
+```javascript
+// api/users.js
+const { NextResponse } = require('../modules/next-response');
+
+async function GET(request) {
+    const users = await getAllUsers();
+    return NextResponse.json(users);
+}
+
+async function POST(request) {
+    const body = await request.json();
+    const user = await createUser(body);
+    return NextResponse.json(user, { status: 201 });
+}
+
+async function PUT(request) {
+    const body = await request.json();
+    const user = await updateUser(body);
+    return NextResponse.json(user);
+}
+
+async function DELETE(request) {
+    const { searchParams } = new URL(request.url);
+    const id = searchParams.get('id');
+    await deleteUser(id);
+    return NextResponse.json({ message: 'Deleted' });
+}
+
+module.exports = { GET, POST, PUT, DELETE };
+```
+
+## Request Object
+
+### URL and Search Params
+
+```javascript
+async function GET(request) {
+    // Parse URL
+    const { searchParams } = new URL(request.url);
+    
+    // Get query parameters
+    const email = searchParams.get('email');
+    const id = searchParams.get('id');
+    const page = searchParams.get('page') || '1';
+    
+    return NextResponse.json({ email, id, page });
+}
+```
+
+### Request Body
+
+```javascript
+async function POST(request) {
+    // Parse JSON body
+    const body = await request.json();
+    const { name, email, password } = body;
+    
+    return NextResponse.json({ name, email });
+}
+```
+
+### Headers
+
+```javascript
+async function GET(request) {
+    // Access headers
+    const auth = request.headers.authorization;
+    const contentType = request.headers['content-type'];
+    
+    return NextResponse.json({ auth, contentType });
+}
+```
+
+### Method
+
+```javascript
+async function GET(request) {
+    console.log(request.method); // 'GET'
+    return NextResponse.json({ method: request.method });
+}
+```
+
+## Complete Examples
+
+### Example 1: User Login
+
+```javascript
+// api/loginUser.js
+const { NextResponse } = require('../modules/next-response');
+const connectDB = require('../lib/db');
+const User = require('../models/User');
+
+async function POST(request) {
+    try {
+        await connectDB();
+        
+        const { email, password } = await request.json();
+        
+        // Validation
+        if (!email || !password) {
+            return NextResponse.json(
+                { error: 'Email and password required' },
+                { status: 400 }
+            );
+        }
+        
+        // Find user
+        const user = await User.findOne({ email });
+        if (!user) {
+            return NextResponse.json(
+                { error: 'Invalid credentials' },
+                { status: 401 }
+            );
+        }
+        
+        // Check password (use bcrypt in production!)
+        if (user.password !== password) {
+            return NextResponse.json(
+                { error: 'Invalid credentials' },
+                { status: 401 }
+            );
+        }
+        
+        // Return user data
+        const { password: _, ...userData } = user;
+        return NextResponse.json(userData);
+        
+    } catch (error) {
+        console.error('Login error:', error);
+        return NextResponse.json(
+            { error: 'Failed to login' },
+            { status: 500 }
+        );
+    }
+}
+
+module.exports = { POST };
+```
+
+### Example 2: Create User
+
+```javascript
+// api/createUser.js
+const { NextResponse } = require('../modules/next-response');
+const connectDB = require('../lib/db');
+const User = require('../models/User');
+
+async function POST(request) {
+    try {
+        await connectDB();
+        
+        const body = await request.json();
+        const { name, email, password, role, phone } = body;
+        
+        // Validation
+        if (!name || !email || !password) {
+            return NextResponse.json(
+                { error: 'Name, email, and password required' },
+                { status: 400 }
+            );
+        }
+        
+        // Check if exists
+        const existing = await User.findOne({ email });
+        if (existing) {
+            return NextResponse.json(
+                { error: 'User already exists' },
+                { status: 409 }
+            );
+        }
+        
+        // Create user
+        const user = await User.create({
+            name,
+            email,
+            password, // Hash with bcrypt in production!
+            role: role || 'user',
+            phone
+        });
+        
+        // Return without password
+        const { password: _, ...userData } = user;
+        return NextResponse.json(
+            { message: 'User created', user: userData },
+            { status: 201 }
+        );
+        
+    } catch (error) {
+        console.error('Create user error:', error);
+        return NextResponse.json(
+            { error: 'Failed to create user' },
+            { status: 500 }
+        );
+    }
+}
+
+module.exports = { POST };
+```
+
+### Example 3: Get User
+
+```javascript
+// api/getUser.js
+const { NextResponse } = require('../modules/next-response');
+const connectDB = require('../lib/db');
+const User = require('../models/User');
+
+async function GET(request) {
+    try {
+        await connectDB();
+        
+        const { searchParams } = new URL(request.url);
+        const email = searchParams.get('email');
+        const id = searchParams.get('id');
+        
+        if (email) {
+            const user = await User.findOne({ email });
+            if (!user) {
+                return NextResponse.json(
+                    { error: 'User not found' },
+                    { status: 404 }
+                );
+            }
+            return NextResponse.json(user);
+        }
+        
+        if (id) {
+            const user = await User.findById(id);
+            if (!user) {
+                return NextResponse.json(
+                    { error: 'User not found' },
+                    { status: 404 }
+                );
+            }
+            return NextResponse.json(user);
+        }
+        
+        return NextResponse.json(
+            { error: 'Email or ID required' },
+            { status: 400 }
+        );
+        
+    } catch (error) {
+        console.error('Error:', error);
+        return NextResponse.json(
+            { error: 'Failed to fetch user' },
+            { status: 500 }
+        );
+    }
+}
+
+module.exports = { GET };
+```
+
+## Client-Side Usage
+
+### Basic Fetch
+
+```javascript
+async function LoginUser(email, password) {
+    try {
+        const response = await fetch('/api/loginUser', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ email, password })
+        });
+        
+        const result = await response.json();
+        
+        if (!response.ok) {
+            throw new Error(result.error);
+        }
+        
+        return result;
+    } catch (error) {
+        console.error('Login failed:', error);
+        throw error;
+    }
+}
+```
+
+### With React Hooks
+
+```javascript
+function LoginForm() {
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [error, setError] = useState('');
+    const [loading, setLoading] = useState(false);
+    
+    const handleLogin = async (e) => {
+        e.preventDefault();
+        setLoading(true);
+        setError('');
+        
+        try {
+            const response = await fetch('/api/loginUser', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ email, password })
+            });
+            
+            const result = await response.json();
+            
+            if (!response.ok) {
+                setError(result.error);
+                return;
+            }
+            
+            // Success!
+            localStorage.setItem('user', JSON.stringify(result));
+            window.location.href = '/dashboard';
+            
+        } catch (err) {
+            setError('Failed to login');
+        } finally {
+            setLoading(false);
+        }
+    };
+    
+    return (
+        <form onSubmit={handleLogin}>
+            <input 
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="Email"
+            />
+            <input 
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder="Password"
+            />
+            {error && <p style={{ color: 'red' }}>{error}</p>}
+            <button type="submit" disabled={loading}>
+                {loading ? 'Loading...' : 'Login'}
+            </button>
+        </form>
+    );
+}
+```
+
+## Database Integration
+
+### Setup (MongoDB Example)
+
+```bash
+npm install mongoose
+```
+
+```javascript
+// lib/db.js
+const mongoose = require('mongoose');
+
+async function connectDB() {
+    if (mongoose.connections[0].readyState) {
+        return;
+    }
+    
+    await mongoose.connect(process.env.MONGODB_URI);
+    console.log('✅ MongoDB connected');
+}
+
+module.exports = connectDB;
+```
+
+### Model (Mongoose Example)
+
+```javascript
+// models/User.js
+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);
+```
+
+## Environment Variables
+
+```bash
+# .env.local
+MONGODB_URI=mongodb://localhost:27017/myapp
+DATABASE_URL=postgresql://user:pass@localhost:5432/mydb
+API_KEY=your_secret_key
+```
+
+```javascript
+// Access in API routes
+const dbUrl = process.env.MONGODB_URI;
+const apiKey = process.env.API_KEY;
+```
+
+## Migration from Old Style
+
+### Old Style
+
+```javascript
+export default async function handler(req, res) {
+    if (req.method === 'GET') {
+        return res.status(200).json({ data: 'value' });
+    }
+}
+```
+
+### New Style
+
+```javascript
+const { NextResponse } = require('../modules/next-response');
+
+async function GET(request) {
+    return NextResponse.json({ data: 'value' });
+}
+
+module.exports = { GET };
+```
+
+## Summary
+
+✅ **Identical to Next.js App Router**
+✅ **NextResponse API**
+✅ **Named HTTP method exports**
+✅ **URL and search params**
+✅ **Request body parsing**
+✅ **Database integration ready**
+✅ **Easy migration path**
+
+Write your APIs exactly like Next.js! 🎉