अपस्टैश रेडिस और वर्कफ़्लो का उपयोग करके एक स्केलेबल न्यूज़लेटर ऐप बनाएं

प्रेरणा

• अब सर्वर रहित फ़ंक्शन टाइमआउट नहीं :आपके वर्कफ़्लो तब तक चल सकते हैं जब तक उन्हें आवश्यकता हो।
• स्वचालित पुनर्प्राप्ति :यदि कुछ गलत हो जाता है और वर्कफ़्लो बीच में ही विफल हो जाता है, तो यह स्वचालित रूप से ठीक हो जाता है।
• स्वचालित पुनः प्रयास :यदि वर्कफ़्लो में कोई भी चरण विफल हो जाता है, तो इसे स्वचालित रूप से पुनः प्रयास किया जाएगा।
• वास्तविक समय की निगरानी :आप अपस्टैश कंसोल से वास्तविक समय में अपने वर्कफ़्लो की निगरानी कर सकते हैं।

आवश्यकताएँ

• Next.js अनुप्रयोगों की बुनियादी समझ।
• रेडिस और QStash टोकन के लिए एक अपस्टैश खाता।
• परिनियोजन के लिए वर्सेल खाता।
• स्थानीय विकास के लिए ngrok (अनुशंसित)।

प्रोजेक्ट सेटअप

npx create-next-app@latest --typescript newsletter-app
cd newsletter-app

npm install @upstash/qstash @upstash/redis

निर्देशिका संरचना

• src/app/ :यह वह जगह है जहां हमारे मुख्य एप्लिकेशन घटक और पेज रहेंगे।
• src/app/api/ :हम अपने एपीआई रूट यहां रखेंगे - सदस्यता लेने, सदस्यता समाप्त करने और वर्कफ़्लो को संभालने के लिए।
• src/components/ :इस फ़ोल्डर में हमारी सदस्यता और सदस्यता-रहित फ़ॉर्म घटक शामिल होंगे।
• src/lib/ :रेडिस और ईमेल भेजने के लिए उपयोगिता कार्य यहां जाएंगे।
• src/types/ :हम इस निर्देशिका में अपनी टाइपस्क्रिप्ट प्रकार की परिभाषाएँ रखेंगे।

पर्यावरण चर

QSTASH_TOKEN=
UPSTASH_REDIS_REST_URL=
UPSTASH_REDIS_REST_TOKEN=
EMAIL_SERVICE_URL=
NEXT_PUBLIC_BASE_URL=

• QSTASH_TOKEN :हमारे अपस्टैश QStash टोकन को अपस्टैश कंसोल से एक्सेस किया गया।
• UPSTASH_REDIS_REST_URL और UPSTASH_REDIS_REST_TOKEN :हमारे अपस्टैश रेडिस क्रेडेंशियल्स को अपस्टैश कंसोल से एक्सेस किया गया।
• EMAIL_SERVICE_URL :हमारे ईमेल भेजने वाले एपीआई का समापन बिंदु।
• NEXT_PUBLIC_BASE_URL :हमारे तैनात एप्लिकेशन का आधार यूआरएल (उदाहरण के लिए, https://your-app.vercel.app ).

परियोजना कार्यान्वयन

सदस्यता फॉर्म घटक

"use client";
 
import React, { useState } from "react";
 
export default function SubscriptionForm() {
 const [frequency, setFrequency] = useState("daily");
 const [showCustomFrequency, setShowCustomFrequency] = useState(false);
 const [message, setMessage] = useState("");
 const [isError, setIsError] = useState(false);
 
 // Handle frequency selection
 const handleFrequencyChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
 const value = e.target.value;
 setFrequency(value);
 setShowCustomFrequency(value === "custom");
 };
 
 // Handle form submission
 const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
 e.preventDefault();
 setMessage("");
 setIsError(false);
 
 const formData = new FormData(e.currentTarget);
 
 try {
 const response = await fetch("/api/subscribe", {
 method: "POST",
 headers: {
 "Content-Type": "application/json",
 },
 body: JSON.stringify(Object.fromEntries(formData.entries())),
 });
 
 const result = await response.json();
 
 if (!response.ok) {
 setIsError(true);
 setMessage(result.error || "An error occurred during subscription.");
 } else {
 setIsError(false);
 setMessage(result.message || "Subscription successful!");
 }
 } catch (error) {
 console.error("An unexpected error occurred:", error);
 setIsError(true);
 setMessage("An unexpected error occurred.");
 }
 };
 
 // Render the form
 return (
 <form className="flex flex-col gap-4 text-gray-700" onSubmit={handleSubmit}>
 <input
 type="email"
 name="email"
 placeholder="Your Email"
 required
 className="border p-2 rounded"
 />
 <select
 name="frequency"
 value={frequency}
 onChange={handleFrequencyChange}
 required
 className="border p-2 rounded text-gray-700"
 >
 <option value="daily">Daily</option>
 <option value="weekly">Weekly</option>
 <option value="monthly">Monthly</option>
 <option value="custom">Custom Amount of Days</option>
 </select>
 {showCustomFrequency && (
 <input
 type="number"
 name="customFrequency"
 placeholder="Enter number of days"
 min="1"
 className="border p-2 rounded text-gray-700"
 required
 />
 )}
 <button type="submit" className="bg-blue-500 text-white p-2 rounded">
 Subscribe
 </button>
 
 {message && (
 <p className={`mt-2 ${isError ? "text-red-500" : "text-green-500"}`}>
 {message}
 </p>
 )}
 </form>
 );
}

फॉर्म घटक की सदस्यता समाप्त करें

"use client";
 
import { useState, useEffect, Suspense } from "react";
import { useSearchParams } from "next/navigation";
 
const UnsubscribeForm = () => {
 const searchParams = useSearchParams();
 const [email, setEmail] = useState("");
 const [message, setMessage] = useState("");
 const [isError, setIsError] = useState(false);
 
 // Pre-fill email from query parameter
 useEffect(() => {
 const emailParam = searchParams.get("email");
 if (emailParam) {
 setEmail(emailParam);
 }
 }, [searchParams]);
 
 // Handle form submission
 const handleSubmit = async (e: React.FormEvent) => {
 e.preventDefault();
 setMessage("");
 setIsError(false);
 
 try {
 const response = await fetch("/api/unsubscribe", {
 method: "POST",
 headers: {
 "Content-Type": "application/json",
 },
 body: JSON.stringify({ email }),
 });
 
 const data = await response.json();
 
 if (response.ok) {
 setIsError(false);
 setMessage("You have been unsubscribed successfully.");
 } else {
 setIsError(true);
 setMessage(data.error || "Something went wrong. Please try again.");
 }
 } catch (error) {
 console.error("Error unsubscribing:", error);
 setIsError(true);
 setMessage("An unexpected error occurred. Please try again.");
 }
 };
 
 // Render the form
 return (
 <form className="flex flex-col gap-4 text-gray-700" onSubmit={handleSubmit}>
 <input
 type="email"
 name="email"
 value={email}
 onChange={(e) => setEmail(e.target.value)}
 placeholder="Your Email"
 required
 className="border p-2 rounded"
 />
 <button
 type="submit"
 className="bg-red-500 hover:bg-red-700 text-white p-2 rounded"
 >
 Unsubscribe
 </button>
 
 {message && (
 <p className={`mt-2 ${isError ? "text-red-500" : "text-green-500"}`}>
 {message}
 </p>
 )}
 </form>
 );
};
 
export default function UnsubscribePage() {
 return (
 <Suspense fallback={<div>Loading...</div>}>
 <UnsubscribeForm />
 </Suspense>
 );
}

रेडिस में डेटा संग्रहीत करें

import { Redis } from "@upstash/redis";
 
export const redis = new Redis({
 url: process.env.UPSTASH_REDIS_REST_URL!,
 token: process.env.UPSTASH_REDIS_REST_TOKEN!,
});
 
export async function getUserFrequency(email: string): Promise<number | null> {
 const data = await redis.get(`user:${email}`);
 console.log("User data:", data);
 if (!data) return null;
 
 const parsed = JSON.parse(JSON.stringify(data));
 return parsed.frequency;
}
 
export async function removeUser(email: string): Promise<void> {
 await redis.del(`user:${email}`);
}
 
export async function checkSubscription(email: string): Promise<boolean> {
 return (await getUserFrequency(email)) !== null;
}

ईमेल भेजने का कार्य

export async function sendEmail(message: string, email: string) {
 console.log(`Sending email to ${email}`);
 const url = process.env.EMAIL_SERVICE_URL;
 const payload = {
 to_email: email,
 subject: "Upstash Newsletter",
 content: message,
 };
 
 if (!url) {
 console.error("EMAIL_SERVICE_URL is not defined.");
 return;
 }
 
 const response = await fetch(url, {
 method: "POST",
 headers: {
 "Content-Type": "application/json",
 },
 body: JSON.stringify(payload),
 });
 
 if (!response.ok) {
 console.error("Failed to send email:", await response.text());
 }
}

प्रकार परिभाषाएँ

export type SubscriptionData = {
 email: string;
 frequency: string;
 customFrequency?: string;
};

एपीआई रूट की सदस्यता लें

import { NextRequest, NextResponse } from "next/server";
import { checkSubscription } from "@/lib/redis";
 
export const POST = async (request: NextRequest) => {
 try {
 const { email, frequency: freq, customFrequency } = await request.json();
 
 console.log("Email:", email);
 console.log("Frequency:", freq);
 console.log("Custom Frequency:", customFrequency);
 
 if (!email || !freq) {
 console.error("Email and frequency are required.");
 return NextResponse.json(
 { error: "Email and frequency are required." },
 { status: 400 }
 );
 }
 
 let frequency = freq;
 if (frequency === "custom") {
 if (!customFrequency) {
 console.error("Custom frequency days are required.");
 return NextResponse.json(
 { error: "Custom frequency days are required." },
 { status: 400 }
 );
 }
 frequency = customFrequency;
 }
 
 if (frequency === "daily") {
 frequency = "1";
 } else if (frequency === "weekly") {
 frequency = "7";
 } else if (frequency === "monthly") {
 frequency = "30";
 }
 
 const frequencyNumber = Number(frequency);
 
 if (isNaN(frequencyNumber) || frequencyNumber <= 0) {
 console.error("Invalid frequency value.");
 return NextResponse.json(
 { error: "Invalid frequency value." },
 { status: 400 }
 );
 }
 
 const exists = await checkSubscription(email);
 
 if (exists) {
 console.error("Email is already subscribed.");
 return NextResponse.json(
 { error: "Email is already subscribed." },
 { status: 400 }
 );
 }
 
 console.log("Subscription successful!");
 
 console.log("Enqueue the workflow");
 // Enqueue the workflow
 await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/workflow`, {
 method: "POST",
 headers: {
 Authorization: `Bearer ${process.env.QSTASH_TOKEN}`,
 "Content-Type": "application/json",
 },
 body: JSON.stringify({
 email: email,
 frequency: frequencyNumber,
 }),
 })
 .then((response) => {
 if (!response.ok) {
 console.error("Failed to enqueue workflow:", response.statusText);
 return NextResponse.json(
 { error: "Failed to enqueue workflow." },
 { status: 500 }
 );
 } else {
 console.log("Workflow enqueued successfully");
 }
 })
 .catch((error) => {
 console.error("Error enqueuing workflow:", error);
 return NextResponse.json(
 { error: "Error enqueuing workflow." },
 { status: 500 }
 );
 });
 
 return NextResponse.json({ message: "Subscription successful!" });
 } catch (error) {
 console.error("Error occurred:", error);
 return NextResponse.json(
 { error: "An error occurred during subscription." },
 { status: 500 }
 );
 }
};

एपीआई रूट की सदस्यता समाप्त करें

import { NextRequest, NextResponse } from "next/server";
import { redis } from "@/lib/redis";
import { sendEmail } from "@/lib/email";
 
export const POST = async (request: NextRequest) => {
 try {
 const { email } = await request.json();
 
 if (!email) {
 return NextResponse.json(
 { error: "Email is required." },
 { status: 400 }
 );
 }
 
 const userExists = await redis.exists(`user:${email}`);
 if (!userExists) {
 return NextResponse.json(
 { error: "Email is not subscribed." },
 { status: 400 }
 );
 }
 
 // Remove the user from Redis
 await redis.del(`user:${email}`);
 
 // Send an email to confirm unsubscription
 await sendEmail(
 "You have been unsubscribed from Upstash Newsletter.",
 email
 );
 
 return NextResponse.json({ message: "You have been unsubscribed." });
 } catch (error) {
 console.error("Unsubscribe error:", error);
 return NextResponse.json(
 { error: "An error occurred. Please try again." },
 { status: 500 }
 );
 }
};

वर्कफ़्लो एपीआई रूट

1. उपयोगकर्ता के सदस्यता डेटा को Redis में संग्रहीत करें।
2. एक स्वागत योग्य ईमेल भेजें।
3. एक लूप दर्ज करें:
   • निर्दिष्ट आवृत्ति अवधि तक प्रतीक्षा करें।
   • जांचें कि क्या उपयोगकर्ता ने अभी भी सदस्यता ली है।
   • न्यूज़लेटर ईमेल भेजें।
   • एक निश्चित संख्या में न्यूज़लेटर भेजे जाने तक इसे दोहराते रहें क्योंकि हम अनंत लूप नहीं चाहते हैं।

मुख्य पृष्ठ घटक

import SubscriptionForm from "@/components/SubscriptionForm";
import Link from "next/link";
 
export default function Home() {
 return (
 <main className="flex flex-col items-center justify-center min-h-screen p-4">
 <h1 className="text-3xl font-bold mb-6">
 Subscribe to Upstash Newsletter
 </h1>
 
 {/* Subscription Form */}
 <SubscriptionForm />
 
 {/* Unsubscribe Link */}
 <div className="mt-8">
 <p className="text-gray-600">
 Already subscribed and want to unsubscribe?
 <Link
 href="/unsubscribe"
 className="text-red-500 hover:text-red-700 font-bold ml-2"
 >
 Click here to unsubscribe
 </Link>
 </p>
 </div>
 </main>
 );
}

पेज घटक की सदस्यता समाप्त करें

import UnsubscribePage from "@/components/UnsubscribeForm";
 
export default function UnsubscribeHome() {
 return (
 <main className="flex flex-col items-center justify-center min-h-screen p-4">
 <h1 className="text-3xl font-bold mb-6">
 Unsubscribe from Upstash Newsletter
 </h1>
 
 {/* Unsubscribe Form */}
 <UnsubscribePage />
 </main>
 );
}

निष्कर्ष