بناء مشروع SaaS متكامل باستخدام Next.js 15 و Stripe و Auth.js v5

npx create-next-app@latest saas-starter --typescript --tailwind --eslint --app --src-dir
cd saas-starter

npm install next-auth@beta @auth/drizzle-adapter drizzle-orm @neondatabase/serverless stripe
npm install -D drizzle-kit dotenv

# قاعدة البيانات
DATABASE_URL="postgresql://user:password@localhost:5432/saas_starter"
 
# Auth.js
AUTH_SECRET="run-npx-auth-secret-to-generate"
AUTH_GITHUB_ID="your-github-client-id"
AUTH_GITHUB_SECRET="your-github-client-secret"
AUTH_GOOGLE_ID="your-google-client-id"
AUTH_GOOGLE_SECRET="your-google-client-secret"
 
# Stripe
STRIPE_SECRET_KEY="sk_test_..."
STRIPE_PUBLISHABLE_KEY="pk_test_..."
STRIPE_WEBHOOK_SECRET="whsec_..."
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="pk_test_..."
 
# التطبيق
NEXT_PUBLIC_APP_URL="http://localhost:3000"

import {
  pgTable,
  text,
  timestamp,
  integer,
  primaryKey,
  boolean,
} from "drizzle-orm/pg-core";
import type { AdapterAccountType } from "next-auth/adapters";
 
// جداول Auth.js المطلوبة
export const users = pgTable("users", {
  id: text("id")
    .primaryKey()
    .$defaultFn(() => crypto.randomUUID()),
  name: text("name"),
  email: text("email").unique(),
  emailVerified: timestamp("emailVerified", { mode: "date" }),
  image: text("image"),
  stripeCustomerId: text("stripe_customer_id").unique(),
  stripePriceId: text("stripe_price_id"),
  stripeSubscriptionId: text("stripe_subscription_id").unique(),
  stripeSubscriptionStatus: text("stripe_subscription_status"),
  createdAt: timestamp("created_at", { mode: "date" }).defaultNow(),
});
 
export const accounts = pgTable(
  "accounts",
  {
    userId: text("userId")
      .notNull()
      .references(() => users.id, { onDelete: "cascade" }),
    type: text("type").$type<AdapterAccountType>().notNull(),
    provider: text("provider").notNull(),
    providerAccountId: text("providerAccountId").notNull(),
    refresh_token: text("refresh_token"),
    access_token: text("access_token"),
    expires_at: integer("expires_at"),
    token_type: text("token_type"),
    scope: text("scope"),
    id_token: text("id_token"),
    session_state: text("session_state"),
  },
  (account) => [
    primaryKey({
      columns: [account.provider, account.providerAccountId],
    }),
  ]
);
 
export const sessions = pgTable("sessions", {
  sessionToken: text("sessionToken").primaryKey(),
  userId: text("userId")
    .notNull()
    .references(() => users.id, { onDelete: "cascade" }),
  expires: timestamp("expires", { mode: "date" }).notNull(),
});
 
export const verificationTokens = pgTable(
  "verificationTokens",
  {
    identifier: text("identifier").notNull(),
    token: text("token").notNull(),
    expires: timestamp("expires", { mode: "date" }).notNull(),
  },
  (verificationToken) => [
    primaryKey({
      columns: [verificationToken.identifier, verificationToken.token],
    }),
  ]
);

import { neon } from "@neondatabase/serverless";
import { drizzle } from "drizzle-orm/neon-http";
import * as schema from "./schema";
 
const sql = neon(process.env.DATABASE_URL!);
export const db = drizzle(sql, { schema });

import { defineConfig } from "drizzle-kit";
import dotenv from "dotenv";
 
dotenv.config({ path: ".env.local" });
 
export default defineConfig({
  schema: "./src/db/schema.ts",
  out: "./drizzle",
  dialect: "postgresql",
  dbCredentials: {
    url: process.env.DATABASE_URL!,
  },
});

npx drizzle-kit push

import NextAuth from "next-auth";
import GitHub from "next-auth/providers/github";
import Google from "next-auth/providers/google";
import { DrizzleAdapter } from "@auth/drizzle-adapter";
import { db } from "@/db";
 
export const { handlers, auth, signIn, signOut } = NextAuth({
  adapter: DrizzleAdapter(db),
  providers: [GitHub, Google],
  callbacks: {
    session({ session, user }) {
      session.user.id = user.id;
      return session;
    },
  },
  pages: {
    signIn: "/login",
  },
});

import { handlers } from "@/auth";
 
export const { GET, POST } = handlers;

import { signIn } from "@/auth";
 
export default function LoginPage() {
  return (
    <div className="flex min-h-screen items-center justify-center">
      <div className="w-full max-w-sm space-y-6 rounded-xl border p-8 shadow-sm">
        <div className="text-center">
          <h1 className="text-2xl font-bold">مرحباً بعودتك</h1>
          <p className="mt-2 text-sm text-gray-500">
            سجّل دخولك لحسابك للمتابعة
          </p>
        </div>
 
        <form
          action={async () => {
            "use server";
            await signIn("github", { redirectTo: "/dashboard" });
          }}
        >
          <button
            type="submit"
            className="flex w-full items-center justify-center gap-2 rounded-lg bg-gray-900 px-4 py-2.5 text-sm font-medium text-white hover:bg-gray-800"
          >
            المتابعة عبر GitHub
          </button>
        </form>
 
        <form
          action={async () => {
            "use server";
            await signIn("google", { redirectTo: "/dashboard" });
          }}
        >
          <button
            type="submit"
            className="flex w-full items-center justify-center gap-2 rounded-lg border px-4 py-2.5 text-sm font-medium hover:bg-gray-50"
          >
            المتابعة عبر Google
          </button>
        </form>
      </div>
    </div>
  );
}

import { auth } from "@/auth";
 
export default auth((req) => {
  const isLoggedIn = !!req.auth;
  const isOnDashboard = req.nextUrl.pathname.startsWith("/dashboard");
  const isOnLogin = req.nextUrl.pathname === "/login";
 
  if (isOnDashboard && !isLoggedIn) {
    return Response.redirect(new URL("/login", req.nextUrl));
  }
 
  if (isOnLogin && isLoggedIn) {
    return Response.redirect(new URL("/dashboard", req.nextUrl));
  }
});
 
export const config = {
  matcher: ["/dashboard/:path*", "/login"],
};

# تثبيت Stripe CLI
brew install stripe/stripe-cli/stripe
 
# تسجيل الدخول لحساب Stripe
stripe login
 
# إنشاء المنتجات والأسعار
stripe products create --name="Starter" --description="للأفراد والمشاريع الصغيرة"
stripe prices create --product=prod_xxx --unit-amount=900 --currency=usd --recurring[interval]=month
 
stripe products create --name="Pro" --description="للفرق والأعمال المتنامية"
stripe prices create --product=prod_yyy --unit-amount=2900 --currency=usd --recurring[interval]=month
 
stripe products create --name="Enterprise" --description="للمؤسسات الكبيرة"
stripe prices create --product=prod_zzz --unit-amount=9900 --currency=usd --recurring[interval]=month

import Stripe from "stripe";
 
export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
  apiVersion: "2025-12-18.acacia",
  typescript: true,
});
 
export const PLANS = [
  {
    name: "Starter",
    description: "للأفراد والمشاريع الصغيرة",
    price: "$9",
    priceId: process.env.STRIPE_STARTER_PRICE_ID!,
    features: [
      "حتى 3 مشاريع",
      "تحليلات أساسية",
      "دعم عبر البريد",
      "1 جيجابايت تخزين",
    ],
  },
  {
    name: "Pro",
    description: "للفرق والأعمال المتنامية",
    price: "$29",
    priceId: process.env.STRIPE_PRO_PRICE_ID!,
    popular: true,
    features: [
      "مشاريع غير محدودة",
      "تحليلات متقدمة",
      "دعم أولوية",
      "10 جيجابايت تخزين",
      "تعاون الفريق",
      "تكاملات مخصصة",
    ],
  },
  {
    name: "Enterprise",
    description: "للمؤسسات الكبيرة",
    price: "$99",
    priceId: process.env.STRIPE_ENTERPRISE_PRICE_ID!,
    features: [
      "كل ميزات Pro",
      "تخزين غير محدود",
      "دعم مخصص",
      "SSO و SAML",
      "عقود مخصصة",
      "ضمانات SLA",
    ],
  },
] as const;

import { auth } from "@/auth";
import { PLANS } from "@/lib/stripe";
import { CheckoutButton } from "./checkout-button";
 
export default async function PricingPage() {
  const session = await auth();
 
  return (
    <div className="mx-auto max-w-5xl px-4 py-16">
      <div className="text-center">
        <h1 className="text-4xl font-bold tracking-tight">
          أسعار بسيطة وشفافة
        </h1>
        <p className="mt-4 text-lg text-gray-500">
          اختر الخطة التي تناسب احتياجاتك. يمكنك الترقية أو التخفيض في أي وقت.
        </p>
      </div>
 
      <div className="mt-16 grid gap-8 md:grid-cols-3">
        {PLANS.map((plan) => (
          <div
            key={plan.name}
            className={`relative rounded-2xl border p-8 shadow-sm ${
              plan.popular
                ? "border-blue-600 ring-2 ring-blue-600"
                : "border-gray-200"
            }`}
          >
            {plan.popular && (
              <span className="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-blue-600 px-3 py-1 text-xs font-semibold text-white">
                الأكثر شيوعاً
              </span>
            )}
 
            <h3 className="text-lg font-semibold">{plan.name}</h3>
            <p className="mt-1 text-sm text-gray-500">{plan.description}</p>
 
            <p className="mt-6">
              <span className="text-4xl font-bold">{plan.price}</span>
              <span className="text-gray-500">/شهرياً</span>
            </p>
 
            <CheckoutButton
              priceId={plan.priceId}
              isLoggedIn={!!session}
              popular={plan.popular}
            />
 
            <ul className="mt-8 space-y-3">
              {plan.features.map((feature) => (
                <li key={feature} className="flex items-center gap-2 text-sm">
                  <svg
                    className="h-4 w-4 text-green-500"
                    fill="none"
                    viewBox="0 0 24 24"
                    strokeWidth={2}
                    stroke="currentColor"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      d="M4.5 12.75l6 6 9-13.5"
                    />
                  </svg>
                  {feature}
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </div>
  );
}

"use client";
 
import { useTransition } from "react";
import { createCheckoutSession } from "./actions";
 
interface CheckoutButtonProps {
  priceId: string;
  isLoggedIn: boolean;
  popular?: boolean;
}
 
export function CheckoutButton({
  priceId,
  isLoggedIn,
  popular,
}: CheckoutButtonProps) {
  const [isPending, startTransition] = useTransition();
 
  const handleCheckout = () => {
    startTransition(async () => {
      const { url } = await createCheckoutSession(priceId);
      if (url) window.location.href = url;
    });
  };
 
  return (
    <button
      onClick={handleCheckout}
      disabled={isPending}
      className={`mt-6 w-full rounded-lg px-4 py-2.5 text-sm font-semibold ${
        popular
          ? "bg-blue-600 text-white hover:bg-blue-700"
          : "bg-gray-900 text-white hover:bg-gray-800"
      } disabled:opacity-50`}
    >
      {isPending ? "جارٍ التحميل..." : isLoggedIn ? "اشترك الآن" : "ابدأ الآن"}
    </button>
  );
}

"use server";
 
import { auth } from "@/auth";
import { stripe } from "@/lib/stripe";
import { db } from "@/db";
import { users } from "@/db/schema";
import { eq } from "drizzle-orm";
import { redirect } from "next/navigation";
 
export async function createCheckoutSession(priceId: string) {
  const session = await auth();
 
  if (!session?.user?.id) {
    redirect("/login");
  }
 
  // الحصول على أو إنشاء عميل Stripe
  const [user] = await db
    .select()
    .from(users)
    .where(eq(users.id, session.user.id));
 
  let customerId = user.stripeCustomerId;
 
  if (!customerId) {
    const customer = await stripe.customers.create({
      email: user.email!,
      name: user.name ?? undefined,
      metadata: { userId: user.id },
    });
 
    await db
      .update(users)
      .set({ stripeCustomerId: customer.id })
      .where(eq(users.id, user.id));
 
    customerId = customer.id;
  }
 
  // إنشاء جلسة الدفع
  const checkoutSession = await stripe.checkout.sessions.create({
    customer: customerId,
    mode: "subscription",
    payment_method_types: ["card"],
    line_items: [{ price: priceId, quantity: 1 }],
    success_url: `${process.env.NEXT_PUBLIC_APP_URL}/dashboard?success=true`,
    cancel_url: `${process.env.NEXT_PUBLIC_APP_URL}/pricing?canceled=true`,
    subscription_data: {
      metadata: { userId: session.user.id },
    },
  });
 
  return { url: checkoutSession.url };
}
 
export async function createCustomerPortalSession() {
  const session = await auth();
 
  if (!session?.user?.id) {
    redirect("/login");
  }
 
  const [user] = await db
    .select()
    .from(users)
    .where(eq(users.id, session.user.id));
 
  if (!user.stripeCustomerId) {
    redirect("/pricing");
  }
 
  const portalSession = await stripe.billingPortal.sessions.create({
    customer: user.stripeCustomerId,
    return_url: `${process.env.NEXT_PUBLIC_APP_URL}/dashboard`,
  });
 
  return { url: portalSession.url };
}

import { headers } from "next/headers";
import { stripe } from "@/lib/stripe";
import { db } from "@/db";
import { users } from "@/db/schema";
import { eq } from "drizzle-orm";
import type Stripe from "stripe";
 
export async function POST(req: Request) {
  const body = await req.text();
  const headersList = await headers();
  const signature = headersList.get("stripe-signature")!;
 
  let event: Stripe.Event;
 
  try {
    event = stripe.webhooks.constructEvent(
      body,
      signature,
      process.env.STRIPE_WEBHOOK_SECRET!
    );
  } catch (err) {
    console.error("فشل التحقق من توقيع Webhook:", err);
    return new Response("Webhook Error", { status: 400 });
  }
 
  switch (event.type) {
    case "checkout.session.completed": {
      const session = event.data.object as Stripe.Checkout.Session;
      const subscription = await stripe.subscriptions.retrieve(
        session.subscription as string
      );
 
      const userId = subscription.metadata.userId;
 
      await db
        .update(users)
        .set({
          stripeSubscriptionId: subscription.id,
          stripePriceId: subscription.items.data[0].price.id,
          stripeSubscriptionStatus: subscription.status,
        })
        .where(eq(users.id, userId));
 
      break;
    }
 
    case "customer.subscription.updated": {
      const subscription = event.data.object as Stripe.Subscription;
 
      await db
        .update(users)
        .set({
          stripePriceId: subscription.items.data[0].price.id,
          stripeSubscriptionStatus: subscription.status,
        })
        .where(eq(users.stripeSubscriptionId, subscription.id));
 
      break;
    }
 
    case "customer.subscription.deleted": {
      const subscription = event.data.object as Stripe.Subscription;
 
      await db
        .update(users)
        .set({
          stripePriceId: null,
          stripeSubscriptionId: null,
          stripeSubscriptionStatus: "canceled",
        })
        .where(eq(users.stripeSubscriptionId, subscription.id));
 
      break;
    }
  }
 
  return new Response("OK", { status: 200 });
}

stripe listen --forward-to localhost:3000/api/webhooks/stripe

import { auth, signOut } from "@/auth";
import { db } from "@/db";
import { users } from "@/db/schema";
import { eq } from "drizzle-orm";
import { redirect } from "next/navigation";
import { PLANS } from "@/lib/stripe";
import { ManageSubscriptionButton } from "./manage-subscription-button";
 
export default async function DashboardPage() {
  const session = await auth();
  if (!session?.user?.id) redirect("/login");
 
  const [user] = await db
    .select()
    .from(users)
    .where(eq(users.id, session.user.id));
 
  const currentPlan = PLANS.find((p) => p.priceId === user.stripePriceId);
  const isActive = user.stripeSubscriptionStatus === "active";
 
  return (
    <div className="mx-auto max-w-4xl px-4 py-16">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold">لوحة التحكم</h1>
          <p className="text-gray-500">مرحباً بعودتك، {session.user.name}</p>
        </div>
        <form
          action={async () => {
            "use server";
            await signOut({ redirectTo: "/" });
          }}
        >
          <button
            type="submit"
            className="rounded-lg border px-4 py-2 text-sm hover:bg-gray-50"
          >
            تسجيل الخروج
          </button>
        </form>
      </div>
 
      <div className="mt-8 rounded-xl border p-6">
        <h2 className="text-lg font-semibold">الاشتراك</h2>
 
        {isActive && currentPlan ? (
          <div className="mt-4 space-y-4">
            <div className="flex items-center gap-3">
              <span className="rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-700">
                نشط
              </span>
              <span className="font-medium">خطة {currentPlan.name}</span>
              <span className="text-gray-500">
                {currentPlan.price}/شهرياً
              </span>
            </div>
            <ManageSubscriptionButton />
          </div>
        ) : (
          <div className="mt-4 space-y-4">
            <p className="text-gray-500">
              أنت حالياً على المستوى المجاني.
            </p>
            <a
              href="/pricing"
              className="inline-block rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-700"
            >
              ترقية الآن
            </a>
          </div>
        )}
      </div>
 
      <div className="mt-8 rounded-xl border p-6">
        <h2 className="text-lg font-semibold">الحساب</h2>
        <div className="mt-4 space-y-2 text-sm">
          <p>
            <span className="text-gray-500">البريد الإلكتروني:</span> {user.email}
          </p>
          <p>
            <span className="text-gray-500">عضو منذ:</span>{" "}
            {user.createdAt?.toLocaleDateString("ar-SA")}
          </p>
        </div>
      </div>
    </div>
  );
}

"use client";
 
import { useTransition } from "react";
import { createCustomerPortalSession } from "../pricing/actions";
 
export function ManageSubscriptionButton() {
  const [isPending, startTransition] = useTransition();
 
  return (
    <button
      onClick={() => {
        startTransition(async () => {
          const { url } = await createCustomerPortalSession();
          if (url) window.location.href = url;
        });
      }}
      disabled={isPending}
      className="rounded-lg border px-4 py-2 text-sm font-medium hover:bg-gray-50 disabled:opacity-50"
    >
      {isPending ? "جارٍ التحميل..." : "إدارة الاشتراك"}
    </button>
  );
}

import { auth } from "@/auth";
import { db } from "@/db";
import { users } from "@/db/schema";
import { eq } from "drizzle-orm";
 
export async function getUserSubscription() {
  const session = await auth();
  if (!session?.user?.id) return null;
 
  const [user] = await db
    .select({
      stripePriceId: users.stripePriceId,
      stripeSubscriptionStatus: users.stripeSubscriptionStatus,
    })
    .from(users)
    .where(eq(users.id, session.user.id));
 
  return {
    isActive: user?.stripeSubscriptionStatus === "active",
    priceId: user?.stripePriceId,
  };
}
 
export async function requireSubscription() {
  const sub = await getUserSubscription();
  if (!sub?.isActive) {
    throw new Error("يتطلب اشتراكاً نشطاً");
  }
  return sub;
}

"use server";
 
import { requireSubscription } from "@/lib/subscription";
 
export async function premiumFeatureAction() {
  await requireSubscription(); // يرمي خطأ إذا لم يكن مشتركاً
 
  // منطق الميزة المميزة هنا
}

# الطرفية 1: تشغيل Next.js
npm run dev
 
# الطرفية 2: توجيه أحداث Stripe
stripe listen --forward-to localhost:3000/api/webhooks/stripe
 
# الطرفية 3: تشغيل حدث تجريبي
stripe trigger checkout.session.completed