Next.js ও React অ্যাপ্লিকেশনে SMS OTP গেটওয়ে ইন্টিগ্রেশন গাইড (TypeScript ও Server Actions)

আধুনিক ওয়েব অ্যাপ্লিকেশনে ফোন নম্বর ভিত্তিক অথেনটিকেশন

বর্তমান সময়ে ফুলস্ট্যাক ওয়েব ডেভেলপমেন্টে সবচেয়ে জনপ্রিয় ফ্রেমওয়ার্ক হলো Next.js (App Router)। বাংলাদেশি ব্যবহারকারীদের জন্য ইউজার অনবোর্ডিং সহজ করতে মোবাইল নম্বর ও ইনস্ট্যান্ট ওটিপি (OTP) ভেরিফিকেশন এখন অপরিহার্য ফিচার।

এই টিউটোরিয়ালে আমরা দেখব কীভাবে Next.js 14/15, TypeScript এবং Server Actions ব্যবহার করে মাত্র কয়েক লাইনের কোডে SMSBD.Asia এসএমএস গেটওয়ে ইন্টিগ্রেট করা যায়।

১. এনভায়রনমেন্ট ভেরিয়েবল সেটআপ (.env.local)

ক্লায়েন্ট সাইডে এপিআই কি ফাঁস হওয়া রোধ করতে সিক্রেট কি সর্বদা সার্ভার সাইড ভেরিয়েবলে রাখুন:

SMSBD_API_KEY=your_secret_api_key_here
SMSBD_SENDER_ID=your_approved_sender_id

২. সার্ভার অ্যাকশন তৈরি করুন (app/actions/sendOtp.ts)

'use server';

interface SendOtpResponse {
  success: boolean;
  message: string;
}

export async function sendOtpAction(phone: string): Promise<SendOtpResponse> {
  try {
    // বাংলাদেশি ১১ ডিজিট ফোন নম্বর ভ্যালিডেশন
    const cleanPhone = phone.replace(/[^0-9]/g, '');
    if (!/^01[3-9]\d{8}$/.test(cleanPhone)) {
      return { success: false, message: 'সঠিক বাংলাদেশি ফোন নম্বর দিন (যেমন: 01712345678)' };
    }

    // ৪ ডিজিটের ক্রিপ্টোগ্রাফিক ওটিপি জেনারেশন
    const otp = Math.floor(1000 + Math.random() * 9000).toString();

    // ওটিপি কোডটি আপনার Redis বা সেশনে সংরক্ষণ করুন (মেয়াদ ৩ মিনিট)
    // await redis.set(`otp:${cleanPhone}`, otp, 'EX', 180);

    const smsMessage = `আপনার ওটিপি কোড হলো ${otp}। ৩ মিনিটের মধ্যে ব্যবহার করুন। - SMSBD`;

    const formData = new URLSearchParams();
    formData.append('api_key', process.env.SMSBD_API_KEY || '');
    formData.append('sender_id', process.env.SMSBD_SENDER_ID || '');
    formData.append('phone', cleanPhone);
    formData.append('message', smsMessage);

    const response = await fetch('https://smsbd.asia/api/send-sms.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: formData.toString(),
      cache: 'no-store',
    });

    const data = await response.json();
    if (data.status === 'success') {
      return { success: true, message: 'ওটিপি সফলভাবে পাঠানো হয়েছে!' };
    } else {
      return { success: false, message: data.message || 'এসএমএস পাঠাতে সমস্যা হয়েছে।' };
    }
  } catch (error) {
    console.error('SMSBD Error:', error);
    return { success: false, message: 'সার্ভার এরর, পুনরায় চেষ্টা করুন।' };
  }
}

৩. ক্লায়েন্ট কম্পোনেন্টে ওটিপি ট্রিগার করা

ক্লায়েন্ট ফর্ম থেকে useTransition হুক ব্যবহার করে সরাসরি এই সার্ভার অ্যাকশন কল করলেই ব্যবহারকারীর ফোনে ১ থেকে ২ সেকেন্ডের মধ্যে ওটিপি চলে যাবে।

সুবিধাসমূহ:

• সম্পূর্ণ টাইপসেফ: TypeScript ইন্টারফেসের মাধ্যমে এরর-ফ্রি ডেটা ট্রান্সফার।
• সার্ভার-সাইড সিকিউরিটি: আপনার API Key কখনোই ব্রাউজারে এক্সপোজ হবে না।
• অত্যন্ত কম ল্যাটেন্সি: সরাসরি বাংলাদেশ লোকাল এপিআই রাউটের মাধ্যমে দ্রুততম ডেলিভারি।