1. ติดตั้งไลบรารีที่จำเป็น:

ก่อนอื่นต้องติดตั้ง axios สำหรับการส่ง HTTP Request:

npm install axios

หรือถ้าใช้ yarn:

yarn add axios

2. สร้างฟังก์ชันสำหรับส่งข้อความแจ้งเตือนใน Next.js:

สามารถสร้างเป็น API Route หรือฟังก์ชัน Utility ในโปรเจกต์ได้ เช่น src/utils/sendLineMessage.js

ตัวอย่างโค้ดใน Next.js สำหรับส่งแจ้งเตือน:

// src/utils/sendLineMessage.js
import axios from 'axios';

// ใส่ Channel Access Token ของคุณ
const CHANNEL_ACCESS_TOKEN = process.env.LINE_CHANNEL_ACCESS_TOKEN;

export const sendLineMessage = async (userId, message) => {
  try {
    const response = await axios({
      method: 'post',
      url: 'https://api.line.me/v2/bot/message/push',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${CHANNEL_ACCESS_TOKEN}`,
      },
      data: {
        to: userId,  // ระบุ User ID ของผู้รับ
        messages: [
          {
            type: 'text',
            text: message,  // ข้อความที่ต้องการส่ง
          },
        ],
      },
    });
    return response.data;
  } catch (error) {
    console.error('เกิดข้อผิดพลาดในการส่งข้อความ:', error.response ? error.response.data : error.message);
    throw error;
  }
};

3. การสร้าง API Route สำหรับเรียกฟังก์ชันส่งข้อความ:

หากต้องการให้สามารถเรียกการแจ้งเตือนได้จาก API ของ Next.js สามารถสร้างไฟล์ API Route เช่น src/pages/api/notify.js ได้ดังนี้:

// src/pages/api/notify.js
import { sendLineMessage } from '@/utils/sendLineMessage';

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { userId, message } = req.body;

    try {
      // เรียกใช้ฟังก์ชันส่งข้อความ
      const result = await sendLineMessage(userId, message);
      res.status(200).json({ success: true, data: result });
    } catch (error) {
      res.status(500).json({ success: false, message: 'ส่งข้อความไม่สำเร็จ', error: error.message });
    }
  } else {
    res.status(405).json({ success: false, message: 'Method Not Allowed' });
  }
}

4. เรียกใช้ API Route จาก Client-Side:

ตัวอย่างการเรียกใช้งานจากหน้าเว็บหรือ Component ภายใน Next.js:

import { useState } from 'react';

const SendNotification = () => {
  const [userId, setUserId] = useState('');
  const [message, setMessage] = useState('');
  const [status, setStatus] = useState('');

  const sendNotification = async () => {
    try {
      const response = await fetch('/api/notify', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ userId, message }),
      });
      const data = await response.json();
      setStatus(data.success ? 'ส่งข้อความสำเร็จ' : 'ส่งข้อความไม่สำเร็จ');
    } catch (error) {
      setStatus('เกิดข้อผิดพลาด');
    }
  };

  return (
    <div>
      <h1>LINE Messaging API แจ้งเตือน</h1>
      <input
        type="text"
        placeholder="User ID"
        value={userId}
        onChange={(e) => setUserId(e.target.value)}
      />
      <br />
      <textarea
        placeholder="ข้อความ"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      />
      <br />
      <button onClick={sendNotification}>ส่งข้อความ</button>
      <p>{status}</p>
    </div>
  );
};

export default SendNotification;

5. การใช้งาน Environment Variables:

เนื่องจาก Channel Access Token ควรเก็บไว้อย่างปลอดภัย แนะนำให้ใช้ Environment Variables โดยเพิ่มไฟล์ .env.local ที่ root directory ของโปรเจกต์ และใส่ค่า:

LINE_CHANNEL_ACCESS_TOKEN=YOUR_CHANNEL_ACCESS_TOKEN

แล้วในไฟล์ Next.js ให้เรียกใช้ได้ด้วย process.env.LINE_CHANNEL_ACCESS_TOKEN.

6. วิธีการทดสอบ:

• ก่อนทดสอบต้องตรวจสอบว่า User ID ที่ใส่ถูกต้องหรือไม่ และ Bot ของคุณต้องเป็นเพื่อนกับผู้ใช้งานใน LINE ด้วย (ในกรณีที่ใช้ Push Message)
• ถ้าเกิดปัญหา ให้ตรวจสอบว่า Channel Access Token และ Permission ใน LINE Developer Console ได้รับอนุญาตถูกต้องหรือไม่

วิธีนี้น่าจะช่วยให้คุณเปลี่ยนจาก LINE Notify มาใช้ LINE Messaging API ได้อย่างราบรื่นใน Next.js ครับ ถ้ามีคำถามเพิ่มเติมเกี่ยวกับการตั้งค่าหรือการเขียนโค้ดบอกได้เลยครับ!