จะเริ่มทำแอป ใช้อะไรบ้าง ที่เริ่มได้โดยไม่ต้องจ่าย

อยากทำแอปสักตัว แต่พอนึกถึงค่าเซิร์ฟเวอร์ ค่าฐานข้อมูล และค่าระบบล็อกอิน ก็เลยยังไม่เริ่มสักที บทความนี้รวม 5 เครื่องมือที่มีแผนฟรีให้เริ่มได้ ตั้งแต่เอาเว็บขึ้นไปจนถึงเก็บรูปและไฟล์ ตัวเลขทุกตัวเช็กจากหน้าราคาทางการเมื่อ 12 ต.ค. 2026

แผนฟรีเปลี่ยนได้ตลอด ก่อนตัดสินใจทุกครั้งให้เปิดดูหน้าราคาล่าสุดของแต่ละเจ้าอีกที

ชุดนี้แนะนำสำหรับคนที่เริ่มโดยไม่มีทุน ส่วน School ใช้ Next.js, Convex และ Vercel เป็นหลัก ซึ่งเป็นอีกชุดหนึ่ง

แอปหนึ่งตัวต้องมีอะไรบ้าง

แอปที่คนใช้ได้จริงมักต้องมีห้าอย่างนี้

• เว็บที่คนเข้าได้ ให้มีลิงก์ใช้งานได้
• ฐานข้อมูล เก็บข้อมูลผู้ใช้และเนื้อหา
• ระบบล็อกอิน ให้คนสมัครและเข้าสู่ระบบ
• การส่งอีเมล เช่น อีเมลยืนยันการสมัคร
• ที่เก็บรูปและไฟล์ เช่น รูปโปรไฟล์หรือไฟล์ที่คนอัปโหลด

ทั้งห้าอย่างมีเครื่องมือของตัวเองอยู่แล้ว ด้านล่างจะไล่ทีละตัว

1. Cloudflare Pages เอาเว็บขึ้นให้คนเข้าได้

Pages รับไฟล์ของเว็บแล้วเผยแพร่ให้มีลิงก์ใช้งานได้ ถ้าเปรียบเป็นของจริงก็เหมือนร้านที่เช่าหน้าร้านไว้ให้คนเดินเข้ามา

แผนฟรีที่หน้า Limits ระบุ (เช็กเมื่อ 12 ต.ค. 2026)

• build ได้ 500 ครั้งต่อเดือน ทีละ 1 งาน
• โดเมนของตัวเองต่อโปรเจกต์ได้ 100 โดเมน

ลงทะเบียนและดูขั้นตอนได้ที่ หน้า Get started ของ Pages

ขั้นที่ 1: ล็อกอิน Wrangler (เครื่องมือบรรทัดคำสั่งของ Cloudflare)

npx wrangler login

ขั้นที่ 2: อัปโหลดโฟลเดอร์ที่ build เสร็จแล้วขึ้น Pages แทนที่ <BUILD_OUTPUT_DIRECTORY> ด้วยชื่อโฟลเดอร์ผลลัพธ์ของเว็บ

npx wrangler pages deploy <BUILD_OUTPUT_DIRECTORY>

ถ้าไม่อยากใช้บรรทัดคำสั่ง Pages ก็มีหน้าเว็บให้ลากไฟล์ขึ้นได้ ตามขั้นตอนใน หน้า Direct Upload

2. Neon ฐานข้อมูล PostgreSQL

Neon คือฐานข้อมูล PostgreSQL แบบบริการ ข้อมูลของแอปเช่นผู้ใช้ รายการสินค้า หรือโพสต์จะเก็บที่นี่ ถ้า PostgreSQL คือตู้เอกสาร Neon ก็คือตู้เอกสารที่มีคนดูแลให้

แผนฟรีที่หน้าราคาระบุ (เช็กเมื่อ 12 ต.ค. 2026)

• ราคา $0 ไม่มีเวลาจำกัด และไม่ต้องใส่บัตรเครดิต
• 100 โปรเจกต์
• พื้นที่เก็บข้อมูล 1 GB ต่อโปรเจกต์
• compute 100 CU-hours ต่อเดือนต่อโปรเจกต์

ลงทะเบียนได้ที่ หน้าราคาของ Neon และดูคู่มือเริ่มต้นได้ที่ หน้า Introduction

ขั้นที่ 1: รันคำสั่งเดียว คำสั่งนี้จะเชื่อมโปรเจกต์และเขียนค่า DATABASE_URL ลงไฟล์ .env ให้

npx neon@latest init

ขั้นที่ 2: เปิดไฟล์ .env ในโฟลเดอร์โปรเจกต์ ค่า DATABASE_URL คือที่อยู่ที่แอปใช้ต่อฐานข้อมูล อย่าเอาไปโพสต์ที่ไหน

3. Clerk ระบบล็อกอิน

Clerk ทำระบบสมัครและเข้าสู่ระบบให้ทั้งชุด ทั้งหน้าฟอร์ม การยืนยันตัวตน และการจำการล็อกอิน ทำให้เราไม่ต้องเขียนระบบรหัสผ่านเองตั้งแต่ต้น

แผนฟรีที่หน้าราคาระบุ (เช็กเมื่อ 12 ต.ค. 2026)

• Hobby ฟรี ไม่ต้องใส่บัตรเครดิต
• 50,000 MRU ต่อแอป หน้าราคาอธิบายว่า MRU นับผู้ใช้ที่กลับมาใช้อีกหลังสมัครเกิน 24 ชั่วโมง ไม่ใช่ทุกคนที่เคยสมัคร
• มีแดชบอร์ดให้ 3 ที่นั่ง และ user impersonation ได้ 5 คน

ดูหน้าราคาได้ที่ Clerk pricing และเริ่มต้นได้ที่ Quickstart ของ Clerk สำหรับ Next.js

ขั้นที่ 1: รันคำสั่งเดียวในโปรเจกต์ Next.js คำสั่งนี้ติดตั้งและตั้งค่าให้ในขั้นตอนเดียว

npx -y clerk@latest init

ขั้นที่ 2: คำสั่งจะเขียนค่า NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY กับ CLERK_SECRET_KEY ลงไฟล์ .env.local ให้ ไม่ต้องคัดลอกเอง

ตามเอกสาร ไฟล์ middleware ชื่อ proxy.ts สำหรับ Next.js 16 ขึ้นไป และ middleware.ts สำหรับเวอร์ชัน 15 และก่อนหน้า

4. Resend ส่งอีเมล

Resend ใช้ส่งอีเมลจากแอป เช่นอีเมลยืนยันการสมัคร หรืออีเมลรีเซ็ตรหัสผ่าน แอปจะเรียก API ของ Resend แล้วให้ Resend เป็นคนส่งต่อ

แผนฟรีที่หน้าราคาระบุ (เช็กเมื่อ 12 ต.ค. 2026)

• 3,000 ฉบับต่อเดือน
• จำกัด 100 ฉบับต่อวัน

ดูหน้าราคาได้ที่ Resend pricing และตัวอย่างการส่งด้วย Node.js ดูได้ที่ Send with Node.js

ขั้นที่ 1: ติดตั้งแพ็กเกจ

npm install resend

ขั้นที่ 2: ส่งอีเมลด้วยโค้ดนี้ ค่า API key ต้องอยู่ในตัวแปรแวดล้อม RESEND_API_KEY ไม่ควรเขียนลงในโค้ดตรงๆ

import { Resend } from 'resend';

const resend = new Resend(process.env.RESEND_API_KEY);

const { data, error } = await resend.emails.send({
  from: 'Acme <onboarding@resend.dev>',
  to: ['delivered@resend.dev'],
  subject: 'Hello World',
  html: '<strong>It works!</strong>',
});

if (error) {
  return console.error({ error });
}

ที่อยู่ onboarding@resend.dev ใช้ทดสอบได้เท่านั้น เอกสารระบุว่าห้ามใช้ในโค้ดจริง เมื่อจะใช้จริงต้องยืนยันโดเมนของตัวเองกับ Resend ก่อน

5. Cloudflare R2 เก็บรูปและไฟล์

R2 คือที่เก็บไฟล์บนคลาวด์ของ Cloudflare เอาไว้เก็บรูปโปรไฟล์ ไฟล์ PDF หรือวิดีโอที่ผู้ใช้อัปโหลด ข้อดีคือการดาวน์โหลดออกจาก R2 ผ่าน Workers API, S3 API หรือโดเมน r2.dev ไม่มีค่า egress

แผนฟรีที่หน้า Pricing ระบุ (อัปเดตหน้าเมื่อ 1 ต.ค. 2026 และเช็กเมื่อ 12 ต.ค. 2026)

• พื้นที่เก็บ 10 GB-month ต่อเดือน
• Class A operations (การเขียนและแก้ไข) 1 ล้านครั้งต่อเดือน
• Class B operations (การอ่าน) 10 ล้านครั้งต่อเดือน
• egress ฟรี

เริ่มได้ที่ Cloudflare Dashboard ไปที่ Storage & databases > R2 ตามที่ หน้า Get started ของ R2 ระบุ หน้านั้นไม่ได้เขียนขั้นตอนสร้าง bucket ไว้ จึงให้ทำตามหน้าจอของ Dashboard

ตารางสรุป

หน้าที่	เครื่องมือ	แผนฟรี (เช็กเมื่อ 12 ต.ค. 2026)	หน้าราคาทางการ
เอาเว็บขึ้น	Cloudflare Pages	build 500 ครั้งต่อเดือน ทีละ 1 งาน, 100 โดเมนต่อโปรเจกต์	Limits
ฐานข้อมูล	Neon (PostgreSQL)	100 โปรเจกต์, 1 GB ต่อโปรเจกต์	Pricing
ล็อกอิน	Clerk	50,000 MRU ต่อแอป, ไม่ต้องใส่บัตร	Pricing
ส่งอีเมล	Resend	3,000 ฉบับต่อเดือน, 100 ฉบับต่อวัน	Pricing
เก็บรูปและไฟล์	Cloudflare R2	10 GB-month, Class A 1 ล้าน, Class B 10 ล้าน ต่อเดือน	Pricing

แผนฟรีมีเพดานตรงไหน และเมื่อไรต้องจ่าย

• Pages: เกินโควตา 500 build ในเดือนไหน ให้ดูหน้า Limits ว่ามีผลอย่างไรก่อนเลือกแผน
• Neon: ถ้าใช้เกินโควตาของแผนฟรี ฐานข้อมูลอาจถูกพักการใช้งาน รายละเอียดให้ดูในหน้าราคา
• Clerk: เกิน 50,000 MRU ต่อเดือน หน้า Pricing ให้เวลาอัปเกรดหนึ่งเดือนก่อนที่แอปจะได้รับผลกระทบ
• Resend: แผนฟรีจำกัด 100 ฉบับต่อวัน ถ้าวันไหนต้องส่งเกินนี้ แผนฟรีรองรับไม่ได้
• R2: เกิน 10 GB หรือเกินจำนวนครั้งที่ให้ฟรี จะคิดเงินตามที่ใช้ ดูอัตราในหน้า Pricing

เกณฑ์ง่ายๆ คือจ่ายเมื่อแอปชนเพดานของตัวเองแล้ว ไม่ใช่จ่ายตั้งแต่วันแรก

ลำดับที่ควรเริ่มทำ

1. สร้างฐานข้อมูลที่ Neon ก่อน เพราะแอปส่วนใหญ่เริ่มจากตารางข้อมูล
2. ต่อระบบล็อกอินด้วย Clerk
3. ขึ้นเว็บที่ Cloudflare Pages เพื่อให้คนอื่นเข้าดูได้
4. ตั้งค่า Resend เมื่อแอปต้องส่งอีเมลจริง และมีโดเมนแล้ว
5. เพิ่ม R2 เมื่อมีรูปหรือไฟล์ที่ผู้ใช้อัปโหลด

ข้อควรระวัง

• ตัวเลขในบทความเป็นค่าจากหน้าทางการ ณ วันที่ 12 ต.ค. 2026 แผนฟรีเปลี่ยนได้ ก่อนเริ่มให้เปิดหน้าราคาล่าสุดของแต่ละเจ้า
• Resend ต้องมีโดเมนของตัวเองเพื่อส่งอีเมลจริง โดเมนมักมีค่าใช้จ่ายซึ่งไม่อยู่ในแผนฟรี
• Clerk แผน Hobby กำหนดให้ session มีอายุ 7 วันแบบตายตัว
• ค่า API key ค่า publishable key และ DATABASE_URL ห้ามโพสต์ลงที่สาธารณะหรือ commit ขึ้น Git
• บทความนี้รวมข้อมูลจากหน้าทางการ ยังไม่ได้ทดลองติดตั้งทั้งห้าตัวต่อกันเป็นแอปเต็มตัว ถ้าขั้นตอนไหนต่างจากนี้ให้ยึดหน้าทางการเป็นหลัก
• Bandwidth ของ Cloudflare Pages ในแผนฟรี หน้า Limits ที่เปิดดูไม่ได้ระบุ จึงไม่ได้พูดถึงในบทความ

สิ่งที่ได้ / ลองต่อ

• รู้ว่าแอปหนึ่งตัวต้องมีห้าส่วนอะไรบ้าง และแต่ละส่วนใช้เครื่องมือไหน
• มีคำสั่งเริ่มต้นสำหรับ Pages, Neon, Clerk และ Resend ที่เอาไปรันได้เลย
• รู้เพดานของแผนฟรีและลำดับที่ควรเริ่มทำ

ถ้าอยากเรียนทำแอปตั้งแต่ต้นแบบมีคนพาทำ ดูคอร์สทั้งหมด ได้เลย

ลิงก์

• Cloudflare Pages: Limits · Get started · Direct Upload
• Neon: Pricing · Introduction
• Clerk: Pricing · Quickstart สำหรับ Next.js
• Resend: Pricing · Send with Node.js
• Cloudflare R2: Pricing · Get started