إطلاق SaaS لم يعد يتطلب أشهر من التطوير. مع الأدوات الصحيحة — Next.js 14، Stripe، Prisma، Vercel — يمكنك الحصول على منتج وظيفي في 48 ساعة. يوضح هذا الدليل كل خطوة، من أول commit إلى النشر في بيئة الإنتاج.
اليوم الأول — الأساسات (ساعات 0-12)
الخطوة 1: تهيئة المشروع
ابدأ بإنشاء مشروع Next.js 14 مع TypeScript و Tailwind CSS و App Router:
npx create-next-app@14 my-saas \
--typescript --tailwind --eslint --app \
--src-dir --import-alias "@/*"
cd my-saas
# تثبيت التبعيات الأساسية
npm install prisma @prisma/client next-auth
npm install stripe @stripe/stripe-js
npm install zod react-hook-form
npm install @neuraapi/sdkالخطوة 2: تكوين قاعدة البيانات
Prisma يوفر طبقة ORM بديهية. قم بتهيئتها باستخدام PostgreSQL:
// prisma/schema.prisma
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
model User {
id String @id @default(cuid())
email String @unique
name String?
password String
plan String @default("starter")
apiKey String @unique @default(cuid())
createdAt DateTime @default(now())
projects Project[]
}الخطوة 3: تنفيذ المصادقة
NextAuth.js هو الخيار القياسي لـ Next.js. قم بتكوينه باستخدام بيانات الاعتماد:
// src/lib/auth.ts
import NextAuth from 'next-auth'
import CredentialsProvider from 'next-auth/providers/credentials'
import { prisma } from './db'
import bcrypt from 'bcryptjs'
export const { handlers, auth, signIn, signOut } = NextAuth({
providers: [
CredentialsProvider({
credentials: {
email: { label: 'البريد الإلكتروني', type: 'email' },
password: { label: 'كلمة المرور', type: 'password' },
},
async authorize(credentials) {
const user = await prisma.user.findUnique({
where: { email: credentials?.email as string },
})
if (!user) return null
const valid = await bcrypt.compare(
credentials?.password as string, user.password
)
if (!valid) return null
return { id: user.id, email: user.email, name: user.name }
},
}),
],
session: { strategy: 'jwt' },
pages: { signIn: '/login' },
})اليوم الثاني — الفواتير والنشر
الخطوة 4: دمج Stripe
// src/app/api/stripe/checkout/route.ts
import { NextRequest, NextResponse } from 'next/server'
import { auth } from '@/lib/auth'
import Stripe from 'stripe'
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)
export async function POST(req: NextRequest) {
const session = await auth()
if (!session?.user) {
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
}
const { plan } = await req.json()
const checkoutSession = await stripe.checkout.sessions.create({
mode: 'subscription',
payment_method_types: ['card'],
customer_email: session.user.email!,
line_items: [{ price: PLANS[plan].priceId, quantity: 1 }],
success_url: `${process.env.NEXT_URL}/dashboard?success=true`,
cancel_url: `${process.env.NEXT_URL}/pricing?canceled=true`,
metadata: { userId: session.user.id, plan },
})
return NextResponse.json({ url: checkoutSession.url })
}الخطوة 5: النشر على Vercel
# تثبيت Vercel CLI
npm i -g vercel
# النشر
vercel
# تكوين متغيرات البيئة
vercel env add DATABASE_URL
vercel env add NEXTAUTH_SECRET
vercel env add STRIPE_SECRET_KEY
# النشر في بيئة الإنتاج
vercel --prodملخص 48 ساعة
1ساعات 0-4 — إعداد المشروع، التبعيات، قاعدة بيانات Prisma
2ساعات 4-12 — مصادقة NextAuth، التسجيل، تسجيل الدخول
3ساعات 12-24 — لوحة التحكم، التخطيط، الملاحة، الإعدادات
4ساعات 24-36 — Checkout Stripe، Webhooks، إدارة الاشتراكات
5ساعات 36-44 — صفحة الهبوط، SEO، البريد الإلكتروني المعاملاتي
6ساعات 44-48 — الاختبارات، نشر Vercel، المراقبة
هل تحتاج مساراً مختصراً؟
القالب NeuraSaaS يتضمن كل هذا الدليل مُعدّ مسبقاً: المصادقة، لوحة التحكم، Stripe، صفحة الهبوط، لوحة الإدارة. وفّر 40 ساعة من التطوير.
عرض الأسعار ←