brewInTH.
← บทความทั้งหมด

14/10/2026 · Next.js, PostgreSQL, AI

ทำเว็บ Next.js + PostgreSQL ด้วย AI ตั้งแต่ต้นจนออนไลน์ ทีละขั้น

ภาพปก ทำเว็บ Next.js และ PostgreSQL ด้วย AI ตั้งแต่ต้นจนออนไลน์ พร้อมไอคอนโค้ดและฐานข้อมูล และมณี

ทำสมุดรายรับรายจ่ายด้วย Next.js + PostgreSQL ให้ AI เขียนและ deploy ขึ้น BrewInTH พร้อม prompt ทุกขั้น release command ของ Prisma และทางแก้ปัญหาที่พบบ่อย

อยากได้เว็บที่มากกว่าหน้าแสดงข้อมูล มีล็อกอิน บันทึกข้อมูลลงฐานข้อมูล แล้วเปิดดูจากมือถือได้ทุกที่ Next.js + PostgreSQL เป็นคู่ที่ AI เขียนเก่งที่สุดคู่หนึ่ง แต่ตอนนำขึ้นออนไลน์มักติดเรื่องเดิม ๆ ตารางในฐานข้อมูลไม่ถูกสร้าง build ล้มเพราะต่อฐานข้อมูลไม่ได้ หรือเว็บขึ้นแต่หน้าแรก error

บทความนี้พาทำจริงทีละขั้น ตัวอย่างคือ สมุดรายรับรายจ่ายของร้านเล็ก ๆ ตั้งแต่สร้างโปรเจกต์บน BrewInTH เขียนเว็บด้วย AI จนออนไลน์ และแก้ไขต่อในรอบถัดไป พร้อม prompt ให้คัดลอกไปใช้ทุกขั้น

สรุปสั้นก่อนอ่าน
✅ สร้างโปรเจกต์เลือก Node.js และฐานข้อมูล PostgreSQL ระบบใส่ DATABASE_URL ให้แอปเอง
✅ ให้ AI ที่ทำงานบนคอมพิวเตอร์ (Claude Code, Codex, Cursor หรือ Windsurf) เขียนและ deploy ด้วยลิงก์ + token
✅ ตารางสร้างด้วย คำสั่งก่อนเผยแพร่ (release command) npx prisma migrate deploy ไม่ใช่ตอน build
✅ หน้าที่อ่านฐานข้อมูลต้องทำงานตอนมีคนเปิด ไม่ใช่ตอน build
✅ แก้ไขรอบต่อไป คุยต่อในแชตเดิม AI สร้าง migration ใหม่แล้ว deploy ซ้ำ

สิ่งที่จะได้เมื่อทำจบ

เว็บ สมุดรายรับรายจ่าย ที่เจ้าของร้านล็อกอินด้วยรหัสผ่าน แล้วบันทึกรายการ (วันที่ ประเภท รายรับหรือรายจ่าย จำนวนเงิน หมายเหตุ) ดูยอดรวมรายเดือน และดาวน์โหลดเป็นไฟล์ CSV ได้ ข้อมูลทั้งหมดอยู่ใน PostgreSQL บน BrewInTH เปิดจากมือถือได้ที่ที่อยู่ HTTPS ของโปรเจกต์

สิ่งที่ต้องมี

  • บัญชี BrewInTH (เริ่มที่แพ็กเกจ Free ได้ มี 1 โปรเจกต์และ 1 ฐานข้อมูล)
  • คอมพิวเตอร์ที่ติดตั้ง Node.js และ AI แบบ coding agent อย่าง Claude Code, Codex, Cursor หรือ Windsurf ขั้นนี้ยังทำจากมือถือไม่ได้

ภาพรวม 6 ขั้น: 1 สร้างโปรเจกต์ Node.js กับ PostgreSQL บน BrewInTH 2 คัดลอกข้อความสำเร็จรูปที่มีลิงก์และ token ไปให้ AI 3 ให้ AI วางโครงและออกแบบตาราง 4 ให้ AI เขียนหน้าและทดสอบในเครื่อง 5 deploy พร้อมตั้ง release command 6 เปิดเว็บจริงและตรวจตารางในแท็บฐานข้อมูล

ขั้นที่ 1: สร้างโปรเจกต์บน BrewInTH

  1. ในคอนโซลกด สร้างโปรเจกต์ ตั้งชื่อ เช่น "สมุดรายรับรายจ่าย"
  2. ช่อง เทคโนโลยีของเว็บ/แอป เลือก Node.js (หรือให้ระบบเลือกให้ ระบบจะตรวจจากโค้ดตอน deploy ครั้งแรก)
  3. ช่อง ฐานข้อมูล เลือก PostgreSQL
  4. ตั้งชื่อเว็บฟรีในส่วน ที่อยู่เว็บ ถ้าต้องการ แล้วกดสร้าง

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

ขั้นที่ 2: ส่งลิงก์และ token ให้ AI

หลังสร้างโปรเจกต์ หน้าจอจะมี ข้อความสำเร็จรูป ที่มีลิงก์เชื่อมต่อและ token ของโปรเจกต์ คัดลอกทั้งหมด แล้วเปิดโฟลเดอร์ว่างบนคอมพิวเตอร์ด้วย AI ที่ใช้ วางข้อความนั้นเป็นข้อความแรก AI จะอ่านคู่มือของ BrewInTH แล้วรู้ว่าโปรเจกต์นี้มีฐานข้อมูลอะไร ต้อง deploy ยังไง

token มีอายุจำกัด ถ้าทำต่อวันหลังแล้วหมดอายุ ไปที่เมนู เชื่อมต่อ AI สร้าง token ใหม่ แล้วส่งให้ AI ในแชตเดิม

ขั้นที่ 3: ให้ AI วางโครงและออกแบบตาราง

เริ่มจากให้ AI วางแผนก่อนเขียน จะได้ตรวจว่าเข้าใจตรงกัน

(วางข้อความสำเร็จรูปจาก BrewInTH ตรงนี้)

ช่วยสร้างเว็บ "สมุดรายรับรายจ่าย" สำหรับร้านเล็ก ด้วย Next.js (App Router, TypeScript)
+ PostgreSQL ของโปรเจกต์นี้บน BrewInTH ใช้ Prisma ต่อฐานข้อมูลผ่าน DATABASE_URL
ขั้นนี้ยังไม่ต้องเขียนหน้าเว็บ ขอแค่:
1. แผนหน้าเว็บ: /login, / (รายการเดือนนี้ + ยอดรวม), /new (เพิ่มรายการ), /export (CSV)
2. schema.prisma: ตาราง Entry (id, date, kind: income|expense, category, amount เป็นจำนวนเต็มสตางค์,
   note, createdAt) และ migration แรก
3. ล็อกอินด้วยรหัสผ่านเดียวจากค่า ADMIN_PASSWORD และ cookie ที่เซ็นด้วย AUTH_SECRET
   (ทั้งสองค่าจะตั้งใน "ตั้งค่าแอป" ของ BrewInTH ห้ามใส่ในโค้ดหรือ .env ที่ส่งขึ้นไป)
สรุปแผนให้ฉันดูก่อน แล้วรอฉันตอบตกลง

ทำไมเก็บจำนวนเงินเป็น สตางค์ (จำนวนเต็ม) เพราะเลขทศนิยมในคอมพิวเตอร์ปัดเศษเพี้ยนได้ เงิน 0.1 + 0.2 อาจไม่เท่ากับ 0.3 พอดี เก็บเป็นจำนวนเต็มแล้วค่อยแสดงเป็นบาทปลอดภัยกว่า

ขั้นที่ 4: เขียนหน้าเว็บและทดสอบในเครื่อง

พอแผนตรงใจ ให้ AI เขียนต่อ

แผนโอเค เขียนต่อได้เลย:
- หน้าเว็บทั้ง 4 หน้า ใช้งานบนมือถือสะดวก ปุ่มใหญ่ ตัวเลขจัดหลักพันมีคอมมา แสดงเป็นบาท
- ยอดรวมรายเดือน: รายรับ รายจ่าย คงเหลือ เลือกเดือนย้อนหลังได้
- ฟอร์มตรวจข้อมูลฝั่ง server ด้วย (จำนวนเงินต้องมากกว่า 0, วันที่ต้องถูกต้อง)
- ทุกหน้าที่อ่านฐานข้อมูลต้อง render ตอนมีคนเปิด (export const dynamic = "force-dynamic")
  เพราะตอน build บน BrewInTH ไม่มี DATABASE_URL
- package.json: "build": "prisma generate && next build" และ "start": "next start"
ถ้าในเครื่องมี PostgreSQL หรือ Docker ให้ทดสอบกับฐานในเครื่องก่อน ถ้าไม่มีให้บอกฉัน
แล้วข้ามไปทดสอบบนเว็บจริงหลัง deploy

ประโยคเรื่อง render ตอนมีคนเปิด สำคัญที่สุดในบทความนี้ Next.js พยายามสร้างหน้าเว็บล่วงหน้าตอน build ถ้าหน้านั้นอ่านฐานข้อมูล build จะล้มบน BrewInTH เพราะขั้น build ทำงานบนเครื่อง build แยกต่างหากที่ไม่มีค่าจากตั้งค่าแอปและต่อฐานข้อมูลไม่ได้

ขั้นที่ 5: deploy ขึ้น BrewInTH

แต่ละอย่างทำงานตอนไหน: ตอน build ระบบรัน npm ci และ npm run build บนเครื่อง build ไม่มี DATABASE_URL, ก่อนเผยแพร่ระบบรัน release command npx prisma migrate deploy เพื่อสร้างหรือแก้ตาราง ถ้าล้มเว็บเวอร์ชันเดิมยังเปิดอยู่, ตอนรันแอปใช้ next start ฟังพอร์ตจาก PORT และอ่าน DATABASE_URL ADMIN_PASSWORD AUTH_SECRET จากตั้งค่าแอป

deploy เว็บนี้ขึ้น BrewInTH ให้ใช้งานได้จริง:
1. ตั้งค่า ADMIN_PASSWORD (ให้ฉันเป็นคนพิมพ์รหัสเอง) และ AUTH_SECRET (สุ่มยาว 32 ตัวขึ้นไป)
   ในตั้งค่าแอปของโปรเจกต์ ห้ามใส่ใน ZIP
2. ตั้ง release command เป็น npx prisma migrate deploy
3. ส่งเป็น ZIP พร้อม package-lock.json ไม่ใส่ node_modules, .next และ .env
4. รอจน release ขึ้น active แล้วเปิดเว็บจริงตรวจ: ล็อกอิน เพิ่มรายการ ดูยอดรวม ดาวน์โหลด CSV
5. ถ้าล้ม อ่าน log ของ release แก้แล้วส่งใหม่ จนผ่าน แล้วสรุปลิงก์ให้ฉัน

ระบบ build ของ BrewInTH ทำแบบนี้กับโปรเจกต์ Node.js

  1. ติดตั้ง dependency ด้วย npm ci (ถ้ามี package-lock.json)
  2. รัน npm run build
  3. รัน คำสั่งก่อนเผยแพร่ npx prisma migrate deploy ด้วยโค้ดเวอร์ชันใหม่ ก่อนสลับให้ผู้เข้าเห็น ถ้าคำสั่งล้มเหลว release นั้นล้ม และ เว็บเวอร์ชันเดิมยังเปิดอยู่
  4. เริ่มแอปด้วย npm start ระบบตั้งตัวแปร PORT ให้ (ค่าเริ่มต้น 8080) ซึ่ง next start อ่านเอง
  5. เช็กว่าหน้าแรกตอบได้ (ได้ 200 หรือ redirect ไปหน้าล็อกอินก็ผ่าน) ภายใน 5 นาที แล้วจึงสลับไปเวอร์ชันใหม่

ช่อง คำสั่งก่อนเผยแพร่ (release command) อยู่ในแท็บ ตั้งค่าแอป ของโปรเจกต์ AI ตั้งให้ผ่าน token ได้ หรือพิมพ์เองก็ได้

ขั้นที่ 6: ตรวจว่าใช้งานได้จริง

  • กดปุ่ม เปิดเว็บ ของโปรเจกต์ ลองล็อกอิน เพิ่มรายการ 2-3 รายการ
  • เมนู ฐานข้อมูล ดูตาราง SQL ของโปรเจกต์ได้ เห็นรายการที่เพิ่งบันทึกอยู่ในตาราง Entry
  • แท็บ การเผยแพร่ ดูประวัติ release และ log ของแต่ละรอบ ส่วนแท็บ บันทึกการทำงาน ดู log ของแอปที่กำลังทำงาน
  • ถ้าต้องรันคำสั่งครั้งเดียว เช่น ใส่ข้อมูลตัวอย่าง ใช้แท็บ คำสั่ง › คำสั่งใน sandbox แล้วกด รันคำสั่ง

เจอปัญหาบ่อย แก้ยังไง

ปัญหาที่พบบ่อยและทางแก้: build ล้มว่าต่อฐานข้อมูลไม่ได้ ให้หน้าที่อ่านฐานข้อมูลเป็น force-dynamic, เว็บขึ้นแต่ error ว่าไม่มีตาราง ให้ตั้ง release command, ล็อกอินแล้วหลุด ให้ตรวจว่าตั้ง AUTH_SECRET แล้ว, Prisma Client ยังไม่ถูกสร้าง ให้ build เป็น prisma generate และ next build, แก้ schema แล้วไม่มีผล ต้องสร้าง migration ใหม่

| อาการ | สาเหตุ | ทางแก้ |
|---|---|---|
| build ล้ม ข้อความประมาณ "Can't reach database server" | Next.js สร้างหน้าที่อ่านฐานข้อมูลตอน build | ใส่ export const dynamic = "force-dynamic" ในหน้านั้น |
| เว็บขึ้น แต่ error ว่าไม่มีตาราง | ยังไม่ได้รัน migration บนฐานจริง | ตั้ง release command npx prisma migrate deploy แล้ว deploy ใหม่ |
| error ว่า Prisma Client ยังไม่ถูกสร้าง | ไม่ได้รัน prisma generate ก่อน build | ให้ script build เป็น prisma generate && next build |
| ล็อกอินแล้วหลุดทุกครั้งที่ deploy | AUTH_SECRET ไม่ได้ตั้ง หรือสุ่มใหม่ตอนเริ่มแอป | ตั้งค่าคงที่ในตั้งค่าแอป |
| แก้ schema แล้วตารางไม่เปลี่ยน | แก้ไฟล์ schema แต่ไม่ได้สร้าง migration | ให้ AI รัน prisma migrate dev ในเครื่องเพื่อสร้าง migration แล้วส่งไปด้วย |

ถ้าไม่แน่ใจว่าเป็นอะไร ส่งข้อความนี้ให้ AI "อ่าน log ของ release ล่าสุดบน BrewInTH บอกสาเหตุเป็นภาษาง่าย ๆ แล้วแก้จนผ่าน"

แก้ไขเว็บรอบต่อไป

อยากเพิ่มฟีเจอร์ เช่น แนบรูปใบเสร็จ หรือแยกหมวดหมู่ คุยต่อในแชตเดิมได้เลย

เพิ่มฟีเจอร์ในเว็บสมุดรายรับรายจ่าย:
- เพิ่มฟิลด์ paymentMethod (เงินสด / โอน / บัตร) ในตาราง Entry ค่าเดิมเป็น "เงินสด"
- สร้าง migration ใหม่ด้วย prisma migrate dev (ห้ามแก้ migration เก่า และห้ามลบข้อมูลเดิม)
- deploy ใหม่ แล้วตรวจว่ารายการเก่ายังอยู่ครบ

กติกาสำคัญคือ ห้ามแก้หรือลบ migration เก่า และ ห้ามสั่ง reset ฐานข้อมูล บนเว็บจริง release command จะรันเฉพาะ migration ที่ยังไม่เคยรัน ข้อมูลเดิมจึงอยู่ครบ ถ้าอยากมีทางถอยเมื่อ AI ทำพลาดกับข้อมูล พิจารณาบริการเสริม Backups (99 บาทต่อเดือน) ซึ่งสำรองฐานข้อมูลให้ทุกวัน

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

ใช้แพ็กเกจ Free ได้ไหม

ได้ แพ็กเกจ Free มี 1 โปรเจกต์ 1 ฐานข้อมูล และ RAM 256 MB เพียงพอสำหรับเว็บเล็กที่ใช้กันไม่กี่คน แต่แอปบน Free จะพักเมื่อไม่มีคนเข้าเกิน 3 วัน คนแรกที่เข้าจะรอสักครู่ ถ้าเริ่มใช้จริงทุกวันหรือมีลูกค้าหลายคน แพ็กเกจ Starter (99 บาทต่อเดือน) มี RAM 512 MB และไม่พักเป็นค่าเริ่มต้น

ไม่ใช้ Prisma ได้ไหม

ได้ Drizzle หรือ pg ตรง ๆ ก็ใช้ DATABASE_URL เดียวกัน เพียงตั้ง release command ให้ตรงกับเครื่องมือที่ใช้สร้างตาราง

ต้องเปิดพอร์ตหรือตั้งค่า host อะไรไหม

ไม่ต้อง next start อ่านตัวแปร PORT ที่ระบบตั้งให้เอง ส่วนแอปต่อฐานข้อมูลผ่าน DATABASE_URL ที่ระบบตั้งให้

เปิดฐานข้อมูลจากโปรแกรมบนเครื่องตัวเองได้ไหม

ทางที่สะดวกที่สุดคือดูตารางและรัน SQL จากเมนู ฐานข้อมูล ในคอนโซล หรือให้ AI รันคำสั่งผ่าน token

ไฟล์รูปใบเสร็จที่ผู้ใช้อัปโหลดเก็บที่ไหน

อย่าเก็บในโฟลเดอร์ของแอป เพราะจะหายเมื่อ deploy ใหม่ ให้ AI เปิด พื้นที่เก็บไฟล์ถาวร (/bw-data) ของโปรเจกต์แล้วเก็บไว้ที่นั่น

สรุป

Next.js + PostgreSQL บน BrewInTH เริ่มจากสร้างโปรเจกต์ Node.js กับฐานข้อมูล PostgreSQL ส่งลิงก์ + token ให้ AI แล้วจำ 3 อย่างให้ขึ้นในรอบเดียว หน้าที่อ่านฐานข้อมูลต้อง render ตอนมีคนเปิด ใช้ npx prisma migrate deploy เป็น release command และเก็บรหัสลับในตั้งค่าแอป ไม่ใช่ใน ZIP

เริ่มโปรเจกต์แรกฟรี →

บทความที่เกี่ยวข้อง