ย่อบ่

ย่อบ่ (Yorbo) เป็นตัวย่อลิงก์สมัยใหม่ที่สร้างด้วย Next.js App Router สร้างลิงก์สั้นที่อ่านง่าย สร้าง QR โค้ด บันทึกสถิติการคลิก และมีแดชบอร์ดสองภาษาสำหรับจัดการและดูประสิทธิภาพของลิงก์

คุณสมบัติ

• สร้างลิงก์สั้นในหน้า shortener โดยใช้รหัสที่สร้างให้อัตโนมัติหรือกำหนดเอง
• เปลี่ยนเส้นทางลิงก์ระดับราก เช่น /abc123 ไปยังปลายทางเดิม
• สร้าง QR โค้ดให้ทุกลิงก์สั้น
• สร้าง QR โค้ดฟรีแบบคงที่หรือติดตามได้ พร้อมสี ขนาด ระยะขอบ การแก้ข้อผิดพลาด โลโก้ตรงกลาง และสไตล์ finder pattern ที่กำหนดเอง
• คัดลอก แชร์ และดาวน์โหลดไฟล์ QR จากหน้ารายละเอียดลิงก์
• มีหน้าพรีวิวความปลอดภัยก่อนที่ผู้เยี่ยมชมจะไปต่อยังปลายทาง (ถ้าเปิดใช้)
• จัดการประวัติลิงก์ด้วยการค้นหา กรอง เรียง แบ่งหน้า รีเฟรช และลบ
• ดู analytics พร้อมตัวกรองช่วงวันที่ ช่วงลัด การ์ด KPI กราฟ การแยกอุปกรณ์/ช่องทาง และเหตุการณ์คลิกล่าสุด
• แคชการรวม analytics ผ่าน API route ที่ใช้ Cache-Control ที่เหมาะกับ Cloudflare
• รองรับภาษาอังกฤษและไทยผ่าน next-intl
• มีหน้านโยบาย ข้อกำหนด และการสนับสนุนในระบบดีไซน์เดียวกัน

เทคโนโลยีที่ใช้

• Next.js 16 พร้อม App Router
• React 19 และ TypeScript
• Tailwind CSS
• shadcn/ui และ Radix UI primitives
• Drizzle ORM กับสคีมาที่เข้ากันได้กับ SQLite
• next-intl สำหรับหลายภาษา
• Recharts สำหรับกราฟ analytics
• vinext (Next.js บน Vite) พร้อม Wrangler สำหรับดีพลอยบน Cloudflare Workers

เส้นทางแอปหลัก

• /[locale] — หน้าแรกสำหรับย่อลิงก์และสร้าง QR
• /[locale]/shorten — หน้าสร้างลิงก์สั้นโดยเฉพาะ
• /[locale]/history — ตารางจัดการและประวัติลิงก์
• /[locale]/qr — เครื่องมือสร้าง QR โค้ดแบบสแตนด์อโลน
• /[locale]/analytic — แดชบอร์ด analytics
• /[locale]/link/[shortCode] — รายละเอียดลิงก์ QR คัดลอก และแชร์
• /[locale]/preview/[shortCode] — พรีวิวความปลอดภัยก่อนไปต่อ
• /[locale]/policy — นโยบายความเป็นส่วนตัว
• /[locale]/terms — ข้อกำหนดการใช้บริการ
• /[locale]/supporting-me — หน้าสนับสนุน/บริจาค
• /r/[shortCode] — เป้าหมาย redirect ภายในสำหรับลิงก์สั้นระดับราก

ลิงก์สั้นระดับรากจัดการผ่าน middleware ซึ่ง rewrite พาธช่วงเดียวที่เข้าเงื่อนไขไปยัง /r/[shortCode] โดยสงวนเส้นทางของแอปและ locale ไว้

API หลัก

• POST /api/links — สร้างลิงก์สั้น
• GET /api/links — รายการลิงก์ พร้อมแบ่งหน้า ค้นหา กรอง และเรียง
• GET /api/links/[shortCode] — ดึงลิงก์เดียว
• DELETE /api/links/[shortCode] — ลบลิงก์และเหตุการณ์ analytics ที่เกี่ยวข้อง
• GET /api/links/[shortCode]/qr — สร้างรูป QR โค้ด
• GET /api/links/[shortCode]/analytics — ดึง analytics ของลิงก์เดียว
• GET /api/analytics — ดึง analytics ของแดชบอร์ดพร้อม header แคช CDN

API แดชบอร์ด analytics ใช้:

Cache-Control: public, s-maxage=60, stale-while-revalidate=300

เพื่อให้ Cloudflare เสิร์ฟคำขอซ้ำจากแคชร่วมได้ช่วงสั้นๆ และลดงานรวมข้อมูลในฐานข้อมูลซ้ำๆ

โมเดลข้อมูล

• links — รหัสสั้น URL ปลายทาง จำนวนคลิก และเวลาบันทึก
• analytics — เหตุการณ์คลิก เมทาดาทาคำขอ ฟิลด์อุปกรณ์/เบราว์เซอร์/ประเทศ ช่องทางได้มา และเวลาบันทึก

ระเบียน analytics เชื่อมกับ links และมีดัชนีสำหรับลิงก์/วันที่ ประเทศ อุปกรณ์ ช่องทาง และเวลาสร้าง

การดีพลอย

ย่อบ่ดีพลอยเป็น Cloudflare Worker พร้อม D1 bindings แนะนำให้รันคำสั่ง preview ของโปรเจกต์ก่อน จากนั้นดีพลอยด้วย Wrangler และอัปเดต bindings / สร้าง types ใหม่เมื่อจำเป็น