LINE LIFF คืออะไร ทำระบบจองคิวด้วย Next.js | KittiStack

LINE LIFF คืออะไร ทำระบบจองคิวด้วย Next.js

LIFF คือหน้าเว็บที่เปิดในแอป LINE และรู้ว่าใครเปิด ทำระบบจองคิวที่ลูกค้าไม่ต้องสมัครสมาชิก พร้อมโค้ด Next.js ตรวจ ID Token และส่งข้อความยืนยันผ่าน LINE OA

Kittipong C.

ทีมงาน KittiStack

October 27, 20264 min read

LINE LIFF คืออะไร ทำระบบจองคิวด้วย Next.js

LINE LIFF ทำระบบจองคิวด้วย Next.js

LINE LIFF (LINE Front-end Framework) คือการเปิดหน้าเว็บของเราเองภายในแอป LINE โดยหน้าเว็บนั้นรู้ได้ทันทีว่าใครเปิด ได้ทั้งชื่อ รูปโปรไฟล์ และ userId ของ LINE จึงเหมาะกับระบบจองคิว เพราะลูกค้ากดลิงก์จาก LINE OA ของร้าน เลือกเวลา แล้วจองเสร็จโดยไม่ต้องสมัครสมาชิกหรือกรอกเบอร์โทรใหม่

สำหรับร้านในไทยที่ลูกค้าทักผ่าน LINE OA อยู่แล้ว วิธีนี้ลดขั้นตอนได้มาก เทียบกับการส่งลิงก์เว็บจองคิวที่ต้องล็อกอินแยก ด้านล่างจะอธิบายว่า LIFF ต่างจาก LINE Login และ LINE MINI App ยังไง แล้วไล่โค้ดระบบจองคิวด้วย Next.js ทีละขั้น

	LINE Login	LINE LIFF	LINE MINI App

Back to all posts

You May Like

Next.js & Frontend

หัวข้อโปรเจคจบ คอมพิวเตอร์ เว็บแอป 2026

Oct 27, 2026

Next.js & Frontend

รับชำระเงิน PromptPay บนเว็บ Next.js ทำยังไง

Oct 27, 2026

Next.js & Frontend

สอน Tailwind CSS ตั้งแต่เริ่ม ใช้กับ Next.js

Oct 27, 2026

tsx

"use client";
import { useEffect, useState } from "react";
import liff from "@line/liff";

export default function BookingPage() {
  const [name, setName] = useState<string | null>(null);

  useEffect(() => {
    liff.init({ liffId: process.env.NEXT_PUBLIC_LIFF_ID! }).then(async () => {
      if (!liff.isLoggedIn()) { liff.login(); return; }
      const profile = await liff.getProfile();
      setName(profile.displayName);
    });
  }, []);

  async function book(slot: string) {
    const res = await fetch("/api/bookings", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ slot, idToken: liff.getIDToken() }),
    });
    if (res.ok && liff.isInClient()) {
      await liff.sendMessages([{ type: "text", text: `จองคิว ${slot} แล้ว` }]);
      liff.closeWindow();
    }
  }

  if (!name) return <p>กำลังโหลด...</p>;
  return (
    <main>
      <p>สวัสดี {name} เลือกเวลาที่ต้องการ</p>
      <button onClick={() => book("2026-11-02 10:00")}>10:00</button>
    </main>
  );
}

// app/api/bookings/route.ts
export async function POST(req: Request) {
  const { slot, idToken } = await req.json();

  const verify = await fetch("https://api.line.me/oauth2/v2.1/verify", {
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body: new URLSearchParams({ id_token: idToken, client_id: process.env.LINE_LOGIN_CHANNEL_ID! }),
  });
  if (!verify.ok) return new Response("unauthorized", { status: 401 });

  const { sub: lineUserId, name } = await verify.json();
  // บันทึก { lineUserId, name, slot } ลงฐานข้อมูล และเช็กว่าเวลานี้ยังว่าง
  return Response.json({ ok: true });
}

บทความ

บทความ

LINE LIFF คืออะไร ทำระบบจองคิวด้วย Next.js

LINE LIFF ทำระบบจองคิวด้วย Next.js

ระบบจองคิวผ่าน LINE ทำงานยังไง

ขั้นตอนทำ LIFF app ด้วย Next.js

1. สร้าง LIFF app ใน LINE Developers Console

2. เรียก liff.init ในหน้าจอง

3. ตรวจ ID Token ฝั่งเซิร์ฟเวอร์

4. ส่งข้อความยืนยันการจอง

ข้อจำกัดที่ควรรู้ก่อนทำ

คำถามที่พบบ่อย

สรุป

บทความ

บทความ

LINE LIFF ทำระบบจองคิวด้วย Next.js

LINE LIFF ต่างจาก LINE Login และ LINE MINI App ยังไง

ระบบจองคิวผ่าน LINE ทำงานยังไง

ขั้นตอนทำ LIFF app ด้วย Next.js

1. สร้าง LIFF app ใน LINE Developers Console

2. เรียก liff.init ในหน้าจอง

3. ตรวจ ID Token ฝั่งเซิร์ฟเวอร์

4. ส่งข้อความยืนยันการจอง

ข้อจำกัดที่ควรรู้ก่อนทำ

คำถามที่พบบ่อย

สรุป