wexts 2.0.7 → 2.0.8

package/templates/nextjs-web/features/auth/RegisterForm.tsx

@@ -0,0 +1,159 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { register } from './api';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import Link from 'next/link';
+import { Zap, Mail, Lock, ArrowRight, Loader2, UserPlus } from 'lucide-react';
+
+export function RegisterForm() {
+    const router = useRouter();
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState('');
+
+    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        setLoading(true);
+        setError('');
+
+        const formData = new FormData(e.currentTarget);
+        const data = Object.fromEntries(formData.entries());
+
+        // Validate passwords match
+        if (data.password !== data.confirmPassword) {
+            setError('Passwords do not match');
+            setLoading(false);
+            return;
+        }
+
+        try {
+            await register(data);
+            router.push('/login?registered=true');
+        } catch (err: any) {
+            console.error(err);
+            setError(err.response?.data?.message || 'Registration failed. Please try again.');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className="min-h-screen flex items-center justify-center relative overflow-hidden bg-background">
+            {/* Animated Background Elements */}
+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
+                <div className="absolute -top-[20%] -left-[10%] w-[50%] h-[50%] rounded-full bg-primary/20 blur-[100px] animate-float" />
+                <div className="absolute top-[40%] -right-[10%] w-[40%] h-[40%] rounded-full bg-indigo-500/20 blur-[100px] animate-float" style={{ animationDelay: '2s' }} />
+                <div className="absolute -bottom-[10%] left-[20%] w-[30%] h-[30%] rounded-full bg-violet-500/20 blur-[100px] animate-float" style={{ animationDelay: '4s' }} />
+            </div>
+
+            <div className="w-full max-w-md p-8 relative z-10">
+                <Card className="glass border-white/20 shadow-2xl backdrop-blur-xl">
+                    <CardHeader className="text-center">
+                        <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-primary/10 mb-6 mx-auto text-primary">
+                            <UserPlus className="w-8 h-8" />
+                        </div>
+                        <CardTitle className="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-indigo-600">
+                            Create Account
+                        </CardTitle>
+                        <CardDescription>
+                            Join wexts today
+                        </CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                        <form onSubmit={handleSubmit} className="space-y-6">
+                            {error && (
+                                <div className="p-4 rounded-xl bg-destructive/10 text-destructive text-sm font-medium border border-destructive/20 animate-pulse-slow flex items-center gap-2">
+                                    <span className="text-lg">⚠️</span>
+                                    {error}
+                                </div>
+                            )}
+
+                            <div className="space-y-4">
+                                <div className="space-y-2">
+                                    <Label htmlFor="email">Email Address</Label>
+                                    <div className="relative">
+                                        <Mail className="absolute left-3 top-3 w-4 h-4 text-muted-foreground" />
+                                        <Input
+                                            id="email"
+                                            name="email"
+                                            type="email"
+                                            placeholder="name@example.com"
+                                            required
+                                            className="pl-10 bg-secondary/50 border-transparent focus:border-primary/50 focus:bg-background transition-all"
+                                        />
+                                    </div>
+                                </div>
+
+                                <div className="space-y-2">
+                                    <Label htmlFor="password">Password</Label>
+                                    <div className="relative">
+                                        <Lock className="absolute left-3 top-3 w-4 h-4 text-muted-foreground" />
+                                        <Input
+                                            id="password"
+                                            name="password"
+                                            type="password"
+                                            placeholder="••••••••"
+                                            required
+                                            minLength={6}
+                                            className="pl-10 bg-secondary/50 border-transparent focus:border-primary/50 focus:bg-background transition-all"
+                                        />
+                                    </div>
+                                </div>
+
+                                <div className="space-y-2">
+                                    <Label htmlFor="confirmPassword">Confirm Password</Label>
+                                    <div className="relative">
+                                        <Lock className="absolute left-3 top-3 w-4 h-4 text-muted-foreground" />
+                                        <Input
+                                            id="confirmPassword"
+                                            name="confirmPassword"
+                                            type="password"
+                                            placeholder="••••••••"
+                                            required
+                                            minLength={6}
+                                            className="pl-10 bg-secondary/50 border-transparent focus:border-primary/50 focus:bg-background transition-all"
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+
+                            <Button
+                                type="submit"
+                                disabled={loading}
+                                className="w-full bg-gradient-to-r from-primary to-indigo-600 hover:from-primary/90 hover:to-indigo-600/90 shadow-lg shadow-primary/25 group"
+                            >
+                                {loading ? (
+                                    <>
+                                        <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                                        Creating account...
+                                    </>
+                                ) : (
+                                    <>
+                                        Create account
+                                        <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
+                                    </>
+                                )}
+                            </Button>
+                        </form>
+                    </CardContent>
+                    <CardFooter className="justify-center">
+                        <div className="text-center text-sm text-muted-foreground">
+                            Already have an account?{' '}
+                            <Link href="/login" className="font-semibold text-primary hover:text-primary/80 transition-colors">
+                                Sign in
+                            </Link>
+                        </div>
+                    </CardFooter>
+                </Card>
+
+                <p className="text-center mt-8 text-xs text-muted-foreground/60">
+                    &copy; 2025 wexts Inc. All rights reserved.
+                </p>
+            </div>
+        </div>
+    );
+}

package/templates/nextjs-web/features/auth/api.ts

@@ -0,0 +1,35 @@
+import { postData, applyLogin, applyLogout } from '@/lib/api-client';
+import { toast } from 'react-hot-toast';
+
+export const login = async (data: any) => {
+    try {
+        const response = await postData('/auth/login', data, false);
+        if (response.token) {
+            applyLogin(response.token);
+            toast.success('Logged in successfully! 🚀');
+            return response;
+        }
+    } catch (error: any) {
+        toast.error(error.response?.data?.message || 'Login failed');
+        throw error;
+    }
+};
+
+export const register = async (data: any) => {
+    try {
+        const response = await postData('/auth/register', data, false);
+        if (response.token) {
+            applyLogin(response.token);
+            toast.success('Account created successfully! 🎉');
+            return response;
+        }
+    } catch (error: any) {
+        toast.error(error.response?.data?.message || 'Registration failed');
+        throw error;
+    }
+};
+
+export const logout = async () => {
+    await applyLogout();
+    toast.success('Logged out');
+};

package/templates/nextjs-web/features/auth/index.ts

@@ -0,0 +1,3 @@
+export * from './api';
+export * from './LoginForm';
+export * from './RegisterForm';

package/templates/nextjs-web/features/dashboard/DashboardView.tsx

@@ -0,0 +1,204 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { logout } from '@/features/auth';
+import { toast } from 'react-hot-toast';
+import {
+    DollarSign,
+    Users,
+    ShoppingBag,
+    Activity,
+    ClipboardList,
+    CheckCircle2,
+    Clock,
+    Hourglass,
+    Bell,
+    LogOut
+} from 'lucide-react';
+
+// Mock Data for Demo
+const MOCK_STATS = [
+    { title: 'Total Revenue', value: '$45,231.89', change: '+20.1% from last month', icon: DollarSign, color: 'from-green-500/20 to-emerald-500/20', iconColor: 'text-green-500' },
+    { title: 'Subscriptions', value: '+2350', change: '+180.1% from last month', icon: Users, color: 'from-blue-500/20 to-indigo-500/20', iconColor: 'text-blue-500' },
+    { title: 'Sales', value: '+12,234', change: '+19% from last month', icon: ShoppingBag, color: 'from-orange-500/20 to-red-500/20', iconColor: 'text-orange-500' },
+    { title: 'Active Now', value: '+573', change: '+201 since last hour', icon: Activity, color: 'from-purple-500/20 to-pink-500/20', iconColor: 'text-purple-500' },
+];
+
+const MOCK_TODOS = [
+    { id: 1, title: 'Review project proposal', status: 'completed', date: 'Today, 10:00 AM' },
+    { id: 2, title: 'Team meeting with design team', status: 'pending', date: 'Today, 2:00 PM' },
+    { id: 3, title: 'Update documentation', status: 'in-progress', date: 'Tomorrow, 11:00 AM' },
+    { id: 4, title: 'Deploy to production', status: 'pending', date: 'Wed, 4:00 PM' },
+];
+
+const MOCK_ACTIVITIES = [
+    { id: 1, user: 'Alice Smith', action: 'created a new project', time: '2 min ago' },
+    { id: 2, user: 'Bob Johnson', action: 'commented on task #123', time: '15 min ago' },
+    { id: 3, user: 'Charlie Brown', action: 'completed onboarding', time: '1 hour ago' },
+];
+
+export function DashboardView() {
+    const handleLogout = async () => {
+        await logout();
+        toast.success('Logged out successfully');
+    };
+
+    const container = {
+        hidden: { opacity: 0 },
+        show: {
+            opacity: 1,
+            transition: {
+                staggerChildren: 0.1
+            }
+        }
+    };
+
+    const item = {
+        hidden: { y: 20, opacity: 0 },
+        show: { y: 0, opacity: 1 }
+    };
+
+    return (
+        <div className="min-h-screen bg-background p-8 relative overflow-hidden">
+            {/* Animated Background */}
+            <div className="fixed inset-0 overflow-hidden pointer-events-none -z-10">
+                <div className="absolute -top-[40%] -right-[30%] w-[70%] h-[70%] rounded-full bg-primary/10 blur-[120px] animate-float" />
+                <div className="absolute top-[60%] -left-[20%] w-[50%] h-[50%] rounded-full bg-indigo-500/10 blur-[100px] animate-float" style={{ animationDelay: '3s' }} />
+            </div>
+
+            <div className="max-w-7xl mx-auto space-y-8">
+                {/* Header */}
+                <motion.div
+                    initial={{ opacity: 0, y: -20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    className="flex items-center justify-between"
+                >
+                    <div>
+                        <h1 className="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-indigo-600 mb-2">
+                            Dashboard Overview
+                        </h1>
+                        <p className="text-muted-foreground">Welcome back, Ziad! Here's what's happening today.</p>
+                    </div>
+                    <Button onClick={handleLogout} variant="outline" className="border-primary/20 hover:bg-primary/10 hover:text-primary transition-colors gap-2">
+                        <LogOut className="w-4 h-4" />
+                        Sign out
+                    </Button>
+                </motion.div>
+
+                {/* Stats Grid */}
+                <motion.div
+                    variants={container}
+                    initial="hidden"
+                    animate="show"
+                    className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"
+                >
+                    {MOCK_STATS.map((stat, index) => (
+                        <motion.div key={index} variants={item}>
+                            <Card className={`glass border-white/10 hover:border-primary/20 transition-all duration-300 hover:shadow-lg hover:shadow-primary/5 group overflow-hidden relative`}>
+                                <div className={`absolute inset-0 bg-gradient-to-br ${stat.color} opacity-0 group-hover:opacity-100 transition-opacity duration-500`} />
+                                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 relative z-10">
+                                    <CardTitle className="text-sm font-medium">{stat.title}</CardTitle>
+                                    <div className={`p-2 rounded-lg bg-background/50 ${stat.iconColor}`}>
+                                        <stat.icon className="w-5 h-5" />
+                                    </div>
+                                </CardHeader>
+                                <CardContent className="relative z-10">
+                                    <div className="text-2xl font-bold">{stat.value}</div>
+                                    <p className="text-xs text-muted-foreground mt-1">{stat.change}</p>
+                                </CardContent>
+                            </Card>
+                        </motion.div>
+                    ))}
+                </motion.div>
+
+                {/* Main Content Grid */}
+                <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                    {/* Recent Tasks */}
+                    <motion.div
+                        initial={{ opacity: 0, x: -20 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        transition={{ delay: 0.4 }}
+                        className="lg:col-span-2"
+                    >
+                        <Card className="glass border-white/10 h-full">
+                            <CardHeader>
+                                <CardTitle className="flex items-center gap-2">
+                                    <ClipboardList className="w-5 h-5 text-primary" />
+                                    Recent Tasks
+                                </CardTitle>
+                            </CardHeader>
+                            <CardContent>
+                                <div className="space-y-4">
+                                    {MOCK_TODOS.map((todo) => (
+                                        <div key={todo.id} className="flex items-center justify-between p-4 rounded-xl bg-secondary/30 hover:bg-secondary/50 transition-colors group cursor-pointer border border-transparent hover:border-primary/10">
+                                            <div className="flex items-center gap-4">
+                                                <div className={`h-10 w-10 rounded-full flex items-center justify-center ${todo.status === 'completed' ? 'bg-green-500/10 text-green-500' :
+                                                        todo.status === 'in-progress' ? 'bg-blue-500/10 text-blue-500' :
+                                                            'bg-orange-500/10 text-orange-500'
+                                                    }`}>
+                                                    {todo.status === 'completed' ? <CheckCircle2 className="w-5 h-5" /> :
+                                                        todo.status === 'in-progress' ? <Activity className="w-5 h-5" /> :
+                                                            <Hourglass className="w-5 h-5" />}
+                                                </div>
+                                                <div>
+                                                    <p className="font-medium group-hover:text-primary transition-colors">{todo.title}</p>
+                                                    <p className="text-xs text-muted-foreground flex items-center gap-1">
+                                                        <Clock className="w-3 h-3" /> {todo.date}
+                                                    </p>
+                                                </div>
+                                            </div>
+                                            <span className={`text-xs px-2 py-1 rounded-full capitalize ${todo.status === 'completed' ? 'bg-green-500/10 text-green-500' :
+                                                    todo.status === 'in-progress' ? 'bg-blue-500/10 text-blue-500' :
+                                                        'bg-orange-500/10 text-orange-500'
+                                                }`}>
+                                                {todo.status.replace('-', ' ')}
+                                            </span>
+                                        </div>
+                                    ))}
+                                </div>
+                            </CardContent>
+                        </Card>
+                    </motion.div>
+
+                    {/* Recent Activity */}
+                    <motion.div
+                        initial={{ opacity: 0, x: 20 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        transition={{ delay: 0.5 }}
+                    >
+                        <Card className="glass border-white/10 h-full">
+                            <CardHeader>
+                                <CardTitle className="flex items-center gap-2">
+                                    <Bell className="w-5 h-5 text-primary" />
+                                    Recent Activity
+                                </CardTitle>
+                            </CardHeader>
+                            <CardContent>
+                                <div className="space-y-6">
+                                    {MOCK_ACTIVITIES.map((activity, index) => (
+                                        <div key={activity.id} className="flex gap-4 relative">
+                                            {index !== MOCK_ACTIVITIES.length - 1 && (
+                                                <div className="absolute left-[19px] top-10 bottom-[-24px] w-[2px] bg-secondary" />
+                                            )}
+                                            <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center shrink-0 text-sm font-bold text-primary">
+                                                {activity.user[0]}
+                                            </div>
+                                            <div>
+                                                <p className="text-sm">
+                                                    <span className="font-semibold">{activity.user}</span> {activity.action}
+                                                </p>
+                                                <p className="text-xs text-muted-foreground mt-1">{activity.time}</p>
+                                            </div>
+                                        </div>
+                                    ))}
+                                </div>
+                            </CardContent>
+                        </Card>
+                    </motion.div>
+                </div>
+            </div>
+        </div>
+    );
+}

package/templates/nextjs-web/features/dashboard/api.ts

@@ -0,0 +1,9 @@
+import { getData } from '@/lib/api-client';
+
+export const getTodos = async () => {
+    return await getData('/todos');
+};
+
+export const getUser = async () => {
+    return await getData('/auth/me');
+};

package/templates/nextjs-web/features/dashboard/components.tsx

@@ -0,0 +1,74 @@
+import { connection } from 'next/server';
+import { Suspense } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { getTodos, getUser } from './api';
+
+export async function UserProfile() {
+    await connection();
+    try {
+        const user = await getUser();
+        if (!user) return null;
+
+        return (
+            <div className="space-y-2">
+                <div className="h-20 w-20 rounded-full bg-gradient-to-br from-primary to-indigo-600 flex items-center justify-center text-3xl text-white font-bold mx-auto mb-4 shadow-lg shadow-primary/25">
+                    {user.email?.[0]?.toUpperCase() || 'U'}
+                </div>
+                <div className="text-center">
+                    <h3 className="text-xl font-semibold">User ID: {user.id}</h3>
+                    <p className="text-sm text-muted-foreground">{user.email}</p>
+                </div>
+            </div>
+        );
+    } catch (e) {
+        return null;
+    }
+}
+
+export async function TodoList() {
+    await connection();
+    try {
+        const todos = await getTodos();
+
+        return (
+            <div className="space-y-4">
+                {todos.length === 0 ? (
+                    <p className="text-center text-muted-foreground py-4">No todos found.</p>
+                ) : (
+                    todos.map((todo: any) => (
+                        <div key={todo.id} className="flex items-center gap-4 p-3 rounded-lg bg-secondary/50 hover:bg-secondary transition-colors">
+                            <div className={`h-10 w-10 rounded-full flex items-center justify-center ${todo.completed ? 'bg-green-100 text-green-600' : 'bg-primary/10 text-primary'}`}>
+                                {todo.completed ? '✓' : '⚡'}
+                            </div>
+                            <div>
+                                <p className={`font-medium ${todo.completed ? 'line-through text-muted-foreground' : ''}`}>{todo.title}</p>
+                                <p className="text-xs text-muted-foreground">{new Date(todo.createdAt).toLocaleDateString()}</p>
+                            </div>
+                        </div>
+                    ))
+                )}
+            </div>
+        );
+    } catch (e) {
+        return <p className="text-center text-destructive py-4">Failed to load todos.</p>;
+    }
+}
+
+export function UserProfileSkeleton() {
+    return (
+        <div className="animate-pulse space-y-4">
+            <div className="h-20 w-20 rounded-full bg-secondary mx-auto" />
+            <div className="h-4 w-32 bg-secondary mx-auto rounded" />
+        </div>
+    );
+}
+
+export function TodoListSkeleton() {
+    return (
+        <div className="space-y-4">
+            {[1, 2, 3].map(i => (
+                <div key={i} className="h-16 w-full bg-secondary rounded-lg animate-pulse" />
+            ))}
+        </div>
+    );
+}

package/templates/nextjs-web/features/dashboard/index.ts

@@ -0,0 +1,3 @@
+export * from './api';
+export * from './components';
+export * from './DashboardView';

package/templates/nextjs-web/hooks/index.ts

@@ -0,0 +1,4 @@
+// Global hooks folder
+// Add your custom hooks here
+
+export { };

package/templates/nextjs-web/lib/api-client.ts

@@ -0,0 +1,89 @@
+import { axiosInstance } from './axios-global-config';
+import { deleteCookie, getCookie, setCookie } from 'cookies-next';
+
+// <======================== axios main configurations ======================>
+export const axios_config = (
+    useToken = true,
+    isFormData = false,
+    method = "GET"
+) => {
+    const headers: Record<string, string> = {
+        Accept: "application/json",
+    };
+
+    if (!isFormData) {
+        headers["Content-Type"] = "application/json";
+    }
+
+    // Add specific headers for PATCH requests to handle CORS
+    if (method === "PATCH") {
+        headers["Access-Control-Request-Method"] = "PATCH";
+        headers["Access-Control-Request-Headers"] = "Content-Type, Authorization";
+    }
+
+    if (useToken) {
+        const token = getCookie("wexts_token");
+        if (token) headers.Authorization = `Bearer ${token}`;
+    }
+
+    return { headers };
+};
+
+// <========================= get data in client side ======================>
+export const getData = async (endpoint: string) => {
+    const response = await axiosInstance.get(endpoint, axios_config());
+    return response.data;
+};
+
+// <========================= post data in client side ======================>
+export const postData = async (
+    endpoint: string,
+    data: any,
+    useToken = true
+) => {
+    const isFormData = data instanceof FormData;
+    const response = await axiosInstance.post(endpoint, data, axios_config(useToken, isFormData, "POST"));
+    return response.data;
+};
+
+// <========================= put data in client side ======================>
+export const putData = async (endpoint: string, data: any) => {
+    const response = await axiosInstance.put(endpoint, data, axios_config(true, false, "PUT"));
+    return response.data;
+};
+
+// <========================= patch data in client side ======================>
+export const patchData = async (
+    endpoint: string,
+    data: any,
+    useToken = true
+) => {
+    const isFormData = data instanceof FormData;
+    const response = await axiosInstance.patch(endpoint, data, axios_config(useToken, isFormData, "PATCH"));
+    return response.data;
+};
+
+// <========================= delete data in client side ======================>
+export const deleteData = async (endpoint: string, data?: any) => {
+    const config = axios_config(true, false, "DELETE");
+    const response = await axiosInstance.delete(endpoint, {
+        ...config,
+        data: data
+    });
+    return response.data;
+};
+
+// ======= Auth helpers to integrate with login/logout =======
+export function applyLogin(accessToken: string) {
+    setCookie('wexts_token', accessToken, {
+        maxAge: 60 * 60 * 24 * 7, // 1 week
+        path: '/',
+        secure: process.env.NODE_ENV === 'production',
+        sameSite: 'lax'
+    });
+}
+
+export async function applyLogout() {
+    deleteCookie('wexts_token');
+    if (typeof window !== 'undefined') window.location.replace('/login');
+}

package/templates/nextjs-web/lib/axios-global-config.ts

@@ -0,0 +1,17 @@
+import axios from 'axios';
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:5050';
+
+export const axiosInstance = axios.create({
+    baseURL: API_URL,
+    timeout: 10000,
+});
+
+// Add response interceptor for error handling
+axiosInstance.interceptors.response.use(
+    (response) => response,
+    (error) => {
+        // Handle global errors here if needed
+        return Promise.reject(error);
+    }
+);

package/templates/nextjs-web/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs))
+}

package/templates/nextjs-web/lib/wexts-client.ts

@@ -0,0 +1,4 @@
+'use client';
+
+export { FusionProvider as WextsProvider, useFusion as useWexts } from 'wexts/next';
+export { useAuth } from 'wexts/next';

package/templates/nextjs-web/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/templates/nextjs-web/next.config.ts

@@ -0,0 +1,20 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+    experimental: {
+        // Enable authentication interrupts for forbidden() and unauthorized()
+        authInterrupts: true,
+    },
+    // Enable component-level caching
+    cacheComponents: true,
+    cacheLife: {
+        // Define custom cache profiles
+        default: {
+            stale: 300, // 5 minutes
+            revalidate: 900, // 15 minutes
+            expire: 3600, // 1 hour
+        },
+    },
+};
+
+export default nextConfig;