بناء تطبيق متعدد المستأجرين مع Next.js

في المشهد الرقمي اليوم، يعد بناء تطبيقات قابلة للتوسع وفعالة أمراً بالغ الأهمية. أحد هذه الأساليب هو إنشاء تطبيق متعدد المستأجرين، والذي يسمح لعدة مستخدمين أو مؤسسات بمشاركة مثيل واحد من تطبيق برمجي مع الحفاظ على عزل بياناتهم. في هذا البرنامج التعليمي، سنستكشف كيفية بناء تطبيق متعدد المستأجرين كامل باستخدام Next.js وVercel والتقنيات الحديثة الأخرى.

التقنيات المستخدمة

• Next.js App Router: إطار عمل React قوي لبناء تطبيقات معروضة من جانب الخادم.
• Tailwind CSS: إطار عمل CSS قائم على الأدوات للتنسيق.
• Tremor: مكتبة لإنشاء رسوم بيانية جميلة.
• Prisma: ORM للوصول إلى قاعدة البيانات.
• Novel: محرر WYSIWYG لتجربة كتابة سلسة.
• Vercel Postgres: حل قاعدة بيانات قابل للتوسع.
• Vercel Blob: للتعامل مع تحميل الصور.
• NextAuth.js: للمصادقة.
• Vercel: للنشر والنطاقات المخصصة وشهادات SSL.

الميزات الرئيسية

• تعدد المستأجرين: تعيين نطاقات مخصصة ونطاقات فرعية وشهادات SSL غير محدودة للمستخدمين.
• منشورات مدونة فائقة الأداء: مخزنة مؤقتاً عبر شبكة Edge من Vercel مع إبطال التخزين المؤقت عند الطلب.
• محرر Markdown مدعوم بالذكاء الاصطناعي: يوفر تجربة كتابة على غرار Notion.
• صور Open Graph ديناميكية: لكل منشور مدونة.

خيارات النشر

الخيار 1: النشر من القالب

1. بدء النشر: انقر على زر النشر في صفحة قالب Platforms Starter Kit.
2. إضافة التخزين: حدد خيار قاعدة بيانات Postgres.
3. إضافة متغيرات البيئة: قم بتكوين متغيرات البيئة الضرورية مثل NEXT_PUBLIC_ROOT_DOMAIN وNEXTAUTH_SECRET وغيرها.
4. النشر والتحديث: انقر على زر النشر وحدث إعدادات مشروعك.

الخيار 2: النشر من مستودع Github

1. إعداد مشروع Next.js: استخدم مستودع Platforms Starter Kit لبدء مشروعك.
2. إعداد متغيرات البيئة: حول ملف .env.example إلى ملف .env وقم بتكوينه.
3. نشر مخطط Prisma: شغل npx prisma db push لنشر المخطط.
4. تحديث عناوين URL لاستدعاء NextAuth.js: خصص عناوين URL للاستدعاء لـ GitHub OAuth.

هيكل المشروع

my-multi-tenant-app/
├── app/
│   ├── [domain]/
│   │   └── page.tsx
│   ├── api/
│   │   └── auth/
│   └── layout.tsx
├── lib/
│   ├── prisma.ts
│   └── auth.ts
├── prisma/
│   └── schema.prisma
└── components/

إعداد تعدد المستأجرين

تكوين Middleware

// middleware.ts
import { NextRequest, NextResponse } from 'next/server';
 
export function middleware(req: NextRequest) {
  const url = req.nextUrl;
  const hostname = req.headers.get('host') || '';
 
  // احصل على النطاق الفرعي
  const subdomain = hostname.split('.')[0];
 
  // أعد كتابة إلى المسار الديناميكي
  if (subdomain && subdomain !== 'www') {
    return NextResponse.rewrite(
      new URL(`/${subdomain}${url.pathname}`, req.url)
    );
  }
 
  return NextResponse.next();
}

مخطط قاعدة البيانات

// prisma/schema.prisma
model Tenant {
  id        String   @id @default(cuid())
  name      String
  subdomain String   @unique
  users     User[]
  createdAt DateTime @default(now())
}
 
model User {
  id       String @id @default(cuid())
  email    String @unique
  tenantId String
  tenant   Tenant @relation(fields: [tenantId], references: [id])
}

الخاتمة

لقد أنشأت الآن أساساً لتطبيق متعدد المستأجرين مع Next.js. يمكنك توسيع هذا بإضافة المزيد من الميزات مثل الفوترة والتحليلات وإدارة المستخدمين المتقدمة.

المرجع: Vercel Platforms Starter Kit