بناء مهام خلفية للإنتاج باستخدام Trigger.dev v3 و Next.js

npx create-next-app@latest trigger-onboarding --typescript --tailwind --eslint --app --src-dir --use-npm
cd trigger-onboarding

npm install @trigger.dev/sdk
npm install -D trigger.dev

npx trigger.dev@latest init

import { defineConfig } from "@trigger.dev/sdk/v3";
 
export default defineConfig({
  project: "proj_your_project_id",
  runtime: "node",
  logLevel: "log",
  retries: {
    enabledInDev: true,
    default: {
      maxAttempts: 3,
      minTimeoutInMs: 1000,
      maxTimeoutInMs: 10000,
      factor: 2,
    },
  },
  dirs: ["src/trigger"],
});

import { task, logger } from "@trigger.dev/sdk/v3";
 
export interface WelcomeEmailPayload {
  userId: string;
  email: string;
  name: string;
}
 
export const sendWelcomeEmail = task({
  id: "send-welcome-email",
  retry: {
    maxAttempts: 5,
  },
  run: async (payload: WelcomeEmailPayload) => {
    logger.info("Sending welcome email", {
      userId: payload.userId,
      email: payload.email,
    });
 
    const response = await fetch("https://api.resend.com/emails", {
      method: "POST",
      headers: {
        Authorization: `Bearer ${process.env.RESEND_API_KEY}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        from: "welcome@yourapp.com",
        to: payload.email,
        subject: `Welcome to Our App, ${payload.name}!`,
        html: `
          <h1>Welcome, ${payload.name}!</h1>
          <p>We are excited to have you on board.</p>
          <p>Here are some things you can do to get started:</p>
          <ul>
            <li>Complete your profile</li>
            <li>Explore the dashboard</li>
            <li>Connect your first integration</li>
          </ul>
        `,
      }),
    });
 
    if (!response.ok) {
      const error = await response.text();
      throw new Error(`Failed to send email: ${error}`);
    }
 
    const result = await response.json();
 
    logger.info("Welcome email sent successfully", {
      emailId: result.id,
    });
 
    return { emailId: result.id, sentAt: new Date().toISOString() };
  },
});

import { task, logger } from "@trigger.dev/sdk/v3";
 
export interface AvatarPayload {
  userId: string;
  name: string;
}
 
export const generateAvatar = task({
  id: "generate-avatar",
  retry: {
    maxAttempts: 3,
  },
  run: async (payload: AvatarPayload) => {
    logger.info("Generating avatar", { userId: payload.userId });
 
    const initials = payload.name
      .split(" ")
      .map((n) => n[0])
      .join("")
      .toUpperCase();
 
    const seed = encodeURIComponent(payload.name);
    const avatarUrl = `https://api.dicebear.com/8.x/initials/svg?seed=${seed}&chars=${initials.length}`;
 
    const response = await fetch(avatarUrl);
    if (!response.ok) {
      throw new Error(`Avatar generation failed: ${response.statusText}`);
    }
 
    const svgContent = await response.text();
 
    const storedUrl = `/avatars/${payload.userId}.svg`;
 
    logger.info("Avatar generated", {
      userId: payload.userId,
      url: storedUrl,
    });
 
    return { avatarUrl: storedUrl, svgSize: svgContent.length };
  },
});

import { task, logger } from "@trigger.dev/sdk/v3";
 
export interface CrmSyncPayload {
  userId: string;
  email: string;
  name: string;
  signupDate: string;
}
 
export const syncToCrm = task({
  id: "sync-to-crm",
  retry: {
    maxAttempts: 4,
    minTimeoutInMs: 2000,
    maxTimeoutInMs: 30000,
    factor: 3,
  },
  run: async (payload: CrmSyncPayload) => {
    logger.info("Syncing user to CRM", {
      userId: payload.userId,
      email: payload.email,
    });
 
    const crmResponse = await fetch(
      `${process.env.CRM_API_URL}/contacts`,
      {
        method: "POST",
        headers: {
          Authorization: `Bearer ${process.env.CRM_API_KEY}`,
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          email: payload.email,
          name: payload.name,
          properties: {
            signup_date: payload.signupDate,
            source: "web_app",
            lifecycle_stage: "subscriber",
          },
        }),
      }
    );
 
    if (!crmResponse.ok) {
      const error = await crmResponse.text();
      logger.error("CRM sync failed", { error });
      throw new Error(`CRM sync failed: ${error}`);
    }
 
    const contact = await crmResponse.json();
 
    logger.info("CRM sync completed", {
      crmContactId: contact.id,
    });
 
    return { crmContactId: contact.id };
  },
});

import { task, logger, wait } from "@trigger.dev/sdk/v3";
import { sendWelcomeEmail } from "./welcome-email";
import { generateAvatar } from "./generate-avatar";
import { syncToCrm } from "./sync-crm";
 
export interface OnboardingPayload {
  userId: string;
  email: string;
  name: string;
}
 
export const onboardingWorkflow = task({
  id: "onboarding-workflow",
  retry: {
    maxAttempts: 1,
  },
  run: async (payload: OnboardingPayload) => {
    logger.info("Starting onboarding workflow", {
      userId: payload.userId,
    });
 
    // الخطوة 1: إرسال بريد الترحيب وإنشاء الصورة الرمزية بالتوازي
    const [emailResult, avatarResult] = await Promise.all([
      sendWelcomeEmail.triggerAndWait({
        userId: payload.userId,
        email: payload.email,
        name: payload.name,
      }),
      generateAvatar.triggerAndWait({
        userId: payload.userId,
        name: payload.name,
      }),
    ]);
 
    logger.info("Email and avatar completed", {
      emailOk: emailResult.ok,
      avatarOk: avatarResult.ok,
    });
 
    // الخطوة 2: مزامنة مع CRM (تعتمد على اكتمال الخطوات السابقة)
    const crmResult = await syncToCrm.triggerAndWait({
      userId: payload.userId,
      email: payload.email,
      name: payload.name,
      signupDate: new Date().toISOString(),
    });
 
    logger.info("CRM sync completed", { crmOk: crmResult.ok });
 
    // الخطوة 3: جدولة بريد متابعة بعد 3 أيام
    const followUpHandle = await sendFollowUpEmail.trigger(
      {
        userId: payload.userId,
        email: payload.email,
        name: payload.name,
      },
      {
        delay: "3d",
      }
    );
 
    logger.info("Follow-up email scheduled", {
      followUpId: followUpHandle.id,
    });
 
    return {
      emailResult: emailResult.ok ? emailResult.output : null,
      avatarResult: avatarResult.ok ? avatarResult.output : null,
      crmResult: crmResult.ok ? crmResult.output : null,
      followUpScheduled: followUpHandle.id,
    };
  },
});
 
const sendFollowUpEmail = task({
  id: "send-follow-up-email",
  retry: {
    maxAttempts: 5,
  },
  run: async (payload: OnboardingPayload) => {
    logger.info("Sending follow-up email", {
      userId: payload.userId,
    });
 
    const response = await fetch("https://api.resend.com/emails", {
      method: "POST",
      headers: {
        Authorization: `Bearer ${process.env.RESEND_API_KEY}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        from: "hello@yourapp.com",
        to: payload.email,
        subject: `How's it going, ${payload.name}?`,
        html: `
          <h1>Hey ${payload.name}!</h1>
          <p>You signed up 3 days ago — how is everything going?</p>
          <p>Need help getting started? Reply to this email and we will help!</p>
        `,
      }),
    });
 
    if (!response.ok) {
      throw new Error(`Follow-up email failed: ${await response.text()}`);
    }
 
    return { sent: true };
  },
});

import { schedules, logger } from "@trigger.dev/sdk/v3";
 
export const dailySignupDigest = schedules.task({
  id: "daily-signup-digest",
  cron: "0 9 * * *", // كل يوم الساعة 9:00 صباحًا بتوقيت UTC
  run: async () => {
    logger.info("Running daily signup digest");
 
    const yesterday = new Date();
    yesterday.setDate(yesterday.getDate() - 1);
 
    const newUsers = await fetchNewUsers(yesterday);
 
    if (newUsers.length === 0) {
      logger.info("No new signups yesterday");
      return { sent: false, reason: "no_new_signups" };
    }
 
    const response = await fetch("https://api.resend.com/emails", {
      method: "POST",
      headers: {
        Authorization: `Bearer ${process.env.RESEND_API_KEY}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        from: "reports@yourapp.com",
        to: "admin@yourapp.com",
        subject: `Daily Signup Digest — ${newUsers.length} new users`,
        html: `
          <h1>Daily Signup Report</h1>
          <p>${newUsers.length} new users signed up yesterday:</p>
          <table>
            <tr><th>Name</th><th>Email</th><th>Time</th></tr>
            ${newUsers
              .map(
                (u) =>
                  `<tr><td>${u.name}</td><td>${u.email}</td><td>${u.createdAt}</td></tr>`
              )
              .join("")}
          </table>
        `,
      }),
    });
 
    if (!response.ok) {
      throw new Error(`Digest email failed: ${await response.text()}`);
    }
 
    logger.info("Digest sent", { userCount: newUsers.length });
    return { sent: true, userCount: newUsers.length };
  },
});
 
async function fetchNewUsers(since: Date) {
  return [
    {
      name: "Alice",
      email: "alice@example.com",
      createdAt: since.toISOString(),
    },
  ];
}

import { NextRequest, NextResponse } from "next/server";
import { tasks } from "@trigger.dev/sdk/v3";
import type { onboardingWorkflow } from "@/trigger/onboarding-workflow";
 
export async function POST(request: NextRequest) {
  const body = await request.json();
  const { email, name, userId } = body;
 
  if (!email || !name || !userId) {
    return NextResponse.json(
      { error: "Missing required fields" },
      { status: 400 }
    );
  }
 
  const handle = await tasks.trigger<typeof onboardingWorkflow>(
    "onboarding-workflow",
    {
      userId,
      email,
      name,
    }
  );
 
  return NextResponse.json({
    message: "Signup successful! Onboarding started.",
    runId: handle.id,
  });
}

"use server";
 
import { tasks } from "@trigger.dev/sdk/v3";
import type { onboardingWorkflow } from "@/trigger/onboarding-workflow";
 
export async function signupAction(formData: FormData) {
  const email = formData.get("email") as string;
  const name = formData.get("name") as string;
  const userId = crypto.randomUUID();
 
  const handle = await tasks.trigger<typeof onboardingWorkflow>(
    "onboarding-workflow",
    { userId, email, name }
  );
 
  return { success: true, runId: handle.id };
}

"use client";
 
import { useState } from "react";
import { signupAction } from "./actions";
 
export default function SignupPage() {
  const [status, setStatus] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);
 
  async function handleSubmit(formData: FormData) {
    setLoading(true);
    try {
      const result = await signupAction(formData);
      setStatus(
        `Signed up successfully! Onboarding run: ${result.runId}`
      );
    } catch (error) {
      setStatus("Something went wrong. Please try again.");
    } finally {
      setLoading(false);
    }
  }
 
  return (
    <main className="flex min-h-screen items-center justify-center bg-gray-50">
      <div className="w-full max-w-md rounded-lg bg-white p-8 shadow-md">
        <h1 className="mb-6 text-2xl font-bold text-gray-900">
          التسجيل
        </h1>
        <form action={handleSubmit} className="space-y-4">
          <div>
            <label
              htmlFor="name"
              className="block text-sm font-medium text-gray-700"
            >
              الاسم
            </label>
            <input
              type="text"
              id="name"
              name="name"
              required
              className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
            />
          </div>
          <div>
            <label
              htmlFor="email"
              className="block text-sm font-medium text-gray-700"
            >
              البريد الإلكتروني
            </label>
            <input
              type="email"
              id="email"
              name="email"
              required
              className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
            />
          </div>
          <button
            type="submit"
            disabled={loading}
            className="w-full rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 disabled:opacity-50"
          >
            {loading ? "جارِ التسجيل..." : "سجّل الآن"}
          </button>
        </form>
        {status && (
          <p className="mt-4 rounded bg-green-50 p-3 text-sm text-green-700">
            {status}
          </p>
        )}
      </div>
    </main>
  );
}

# المحطة الأولى: Next.js
npm run dev
 
# المحطة الثانية: عامل Trigger.dev
npx trigger.dev@latest dev

import { task, logger, retry } from "@trigger.dev/sdk/v3";
 
export const sendWelcomeEmailV2 = task({
  id: "send-welcome-email-v2",
  retry: {
    maxAttempts: 5,
    minTimeoutInMs: 1000,
    maxTimeoutInMs: 60000,
    factor: 2,
  },
  onFailure: async (payload, error, params) => {
    logger.error("Welcome email permanently failed", {
      userId: payload.userId,
      error: error.message,
      attempts: params.attemptCount,
    });
 
    await fetch(process.env.SLACK_WEBHOOK_URL!, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        text: `Failed to send welcome email to ${payload.email} after ${params.attemptCount} attempts: ${error.message}`,
      }),
    });
  },
  run: async (payload: WelcomeEmailPayload) => {
    // تنفيذ المهمة...
  },
});

run: async (payload) => {
  const result = await retry.onThrow(
    async () => {
      const res = await fetch("https://flaky-api.com/data");
      if (!res.ok) throw new Error("API call failed");
      return res.json();
    },
    { maxAttempts: 3, randomize: true }
  );
 
  logger.info("Got data", { result });
};

import { task, logger, metadata, tags } from "@trigger.dev/sdk/v3";
 
export const processOrder = task({
  id: "process-order",
  run: async (payload: { orderId: string; userId: string; amount: number }) => {
    tags.add("order", payload.orderId);
    tags.add("user", payload.userId);
 
    metadata.set("orderAmount", payload.amount);
    metadata.set("currency", "USD");
    metadata.set("status", "processing");
 
    // ... معالجة الطلب ...
 
    metadata.set("status", "completed");
 
    return { processed: true };
  },
});

import { tasks } from "@trigger.dev/sdk/v3";
import type { sendWelcomeEmail } from "@/trigger/welcome-email";
 
export async function sendBulkEmails(
  users: Array<{ userId: string; email: string; name: string }>
) {
  const handle = await tasks.batchTrigger<typeof sendWelcomeEmail>(
    "send-welcome-email",
    users.map((user) => ({
      payload: user,
    }))
  );
 
  return {
    batchId: handle.batchId,
    runCount: handle.runs.length,
  };
}

# Trigger.dev
TRIGGER_SECRET_KEY=tr_dev_your_secret_key
 
# البريد الإلكتروني (Resend)
RESEND_API_KEY=re_your_api_key
 
# CRM
CRM_API_URL=https://api.your-crm.com
CRM_API_KEY=your_crm_key
 
# الإشعارات
SLACK_WEBHOOK_URL=https://hooks.slack.com/services/your/webhook

npx trigger.dev@latest deploy

# .github/workflows/deploy.yml
name: Deploy
on:
  push:
    branches: [main]
 
jobs:
  deploy-trigger:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npx trigger.dev@latest deploy
        env:
          TRIGGER_ACCESS_TOKEN: ${{ secrets.TRIGGER_ACCESS_TOKEN }}