ชุดคำสั่งเริ่มโปรเจค Next.js — ก๊อปวางครั้งเดียวได้โครงครบ ไม่ต้องจ่ายสักบาท

สร้างโปรเจค Next.js ให้ผมหนึ่งชุด ที่รันในเครื่องได้ทันทีและเอาขึ้น Vercel ได้จริง โดยไม่ต้องจ่ายเงินสักบาท

[อ่านก่อนเขียน]
เปิด doc ของเวอร์ชั่นที่ติดตั้งจริงใน node_modules ก่อนลงมือ ทั้ง Next.js (node_modules/next/dist/docs/) Tailwind, Drizzle และ better-auth อย่าเขียนจากความจำ เพราะทุกตัวเปลี่ยน API บ่อยกว่าที่คุณจำได้

[โครงโค้ด] แยกเป็นชั้นแบบ ports & adapters
- app/ มีได้เฉพาะไฟล์ของ route (page, layout, loading, error) ห้ามมี component หรือ logic
- src/domain/ เก็บ type กับกติกาของงานล้วน ห้ามมี React ห้าม import framework
- src/data/ คือตัวต่อกับของนอก (ฐานข้อมูล ที่เก็บไฟล์ auth) แต่ละตัวซ่อนหลัง interface ที่ประกาศไว้ใน domain
- src/presentation/ แยกเป็น components/ (รับค่าผ่าน prop อย่างเดียว ห้ามยิงข้อมูลเอง) hooks/ และ lib/ (ฟังก์ชันแปลงค่าล้วน)
ทิศพึ่งพาเดินทางเดียว presentation -> data -> domain ติดเครื่องตรวจทิศให้ด้วย แล้วพิสูจน์ว่ามันจับได้จริงโดยลอง import ผิดทิศหนึ่งครั้งให้ผมเห็น error แล้วค่อยเอาออก

[ธีม 3 แบบ สลับได้ตอนใช้งานจริง ทุกแบบมีทั้งโหมดสว่างและมืด]
- ประกาศชื่อสีตามหน้าที่ ไม่ใช่ตามชื่อธีม เป็นชุดเดียวที่ทุกธีมใช้ร่วมกัน (--background --card --brand-50 ถึง --brand-900 --on-brand --success --warning --error --accent) แล้วสลับค่าด้วย [data-theme="ชื่อธีม"] ห้ามตั้งชื่อสีแยกต่อธีม
- โหมดมืดทำแยกต่อธีม ด้วยการพลิกลำดับความเข้ม: ในโหมดมืด --brand-50 ถึง --brand-300 กลายเป็นสีพื้นเข้ม และ --brand-500 ถึง --brand-900 กลายเป็นสีอ่อนสำหรับตัวอักษร
- --on-brand ต้องตั้งค่าแยกเอง ห้ามหยิบจากลำดับความเข้ม ไม่งั้นตัวอักษรบนปุ่มหลักจะจมหายตอนสลับโหมดมืด
- ฟอนต์เปลี่ยนตามธีมได้ ผ่านตัวแปร CSS ของหัวข้อกับเนื้อความ
- สามธีมต้องต่างกันจริง ทั้งชุดสี ฟอนต์ และความโค้งของมุม ไม่ใช่เปลี่ยนแค่สีปุ่ม ตั้งชื่อและเลือกบุคลิกของแต่ละธีมเอง
- จำธีมที่เลือกไว้ในเครื่องผู้ใช้ แล้ววาง script สั้น ๆ แบบ blocking ไว้ใน head ให้อ่านค่าก่อนหน้าจอวาดครั้งแรก ไม่งั้นคนเปิดหน้าจะเห็นธีมผิดแวบหนึ่งทุกครั้ง
- className ใช้ได้เฉพาะ utility ที่ผูกกับชื่อสีที่ประกาศไว้ ห้ามใส่ค่าสีดิบ ห้าม bg-white ห้าม text-gray-500 และถ้าต้องเขียน rounded-[var(--radius-md)] แปลว่ายังลงทะเบียนค่านั้นไม่ครบ ให้กลับไปลงทะเบียนก่อน

[ฐานข้อมูล]
ตัวต่อเดียวใช้ได้ทั้งสองที่ ตอนพัฒนาชี้ไฟล์ในเครื่อง (file:./local.db) ตอนขึ้นจริงชี้ Turso เปลี่ยนที่ค่า env ค่าเดียว ห้ามเขียนโค้ดแยกสองทาง ใช้ Drizzle คุม schema และไฟล์ migration แล้วเขียน seed ที่สร้างบัญชีทดสอบไว้ 2-3 คน (ผู้ใช้ทั่วไปกับแอดมิน)

[การเข้าสู่ระบบ]
ใช้ better-auth แบบอีเมลกับรหัสผ่าน แล้วเพิ่มปุ่มล็อกอินคลิกเดียวสำหรับตอนพัฒนา ที่กรอกบัญชี seed ให้อัตโนมัติ แต่ปุ่มนี้ต้องปิดตายเมื่ออยู่บนเซิร์ฟเวอร์จริง และเมื่อค่า env ของฐานข้อมูลไม่ได้ชี้ไฟล์ในเครื่อง โดยตัดสินฝั่ง server แล้วส่งรายชื่อว่างกลับมา ไม่ใช่ซ่อนแค่ฝั่งหน้าจอ และมันต้องล็อกอินจริงผ่าน better-auth ทุกครั้ง ไม่ใช่ทางลัดข้าม auth

[ที่เก็บไฟล์]
ประกาศ interface ไว้ที่ domain (อัปโหลด ลบ ขอลิงก์) แล้วทำตัวต่อสองตัว ตัวหนึ่งเขียนลงโฟลเดอร์ในเครื่อง อีกตัวคุยกับ Cloudflare R2 ผ่าน S3 API เลือกตัวไหนให้ดูจากค่า env ตัวเดียว โค้ดที่เรียกใช้ต้องไม่รู้ว่ากำลังคุยกับใครอยู่

[ตอนขึ้นเซิร์ฟเวอร์]
ให้ migration รันเองที่ขั้น build ครั้งเดียว ไม่ใช่ทุก request และถ้า migration ล้ม ให้ build ล้มไปด้วย อย่าปล่อยขึ้นครึ่งทาง เพิ่มด่านที่อ่านไฟล์ migration ก่อนรัน แล้วบล็อกไว้ถ้าเจอคำสั่งลบตาราง ลบคอลัมน์ หรือเปลี่ยนชื่อ เพราะพวกนี้ทำให้โค้ดเก่าที่ยังเสิร์ฟอยู่พังระหว่าง deploy โดยเปิดข้ามด่านได้ด้วยค่า env เมื่อผมตั้งใจทำ และทำ .env.example ให้ครบทุกค่า พร้อมจุดตรวจที่ล้มทันทีและบอกชื่อค่าที่ขาด

[หน้าที่ต้องมี]
อย่างน้อยหนึ่งเส้นทางที่พิสูจน์ว่าทุกชิ้นต่อกันจริง: ล็อกอิน แล้วอัปโหลดรูป แล้วเห็นรายการของตัวเอง แล้วลบได้ แล้วสลับธีมโดยหน้านี้ยังอ่านออกครบทั้งสามธีมสองโหมด

[เกณฑ์ว่าเสร็จ — ห้ามบอกว่าเสร็จจนครบทุกข้อ และแปะผลให้ผมดู]
1. ติดตั้งใหม่จากศูนย์แล้วสั่ง dev ขึ้นได้ ไม่มี error ทั้งใน terminal และใน console ของเบราว์เซอร์
2. สั่ง build ผ่าน โดยรวม typecheck, lint และการตรวจทิศพึ่งพาไว้ในนั้นแล้ว
3. เดินเส้นทางข้างบนเองจนจบ แล้วบอกว่าเห็นอะไรในแต่ละขั้น
4. สลับครบ 3 ธีม คูณ 2 โหมด แล้วยืนยันว่าไม่มีตัวอักษรจมพื้น
5. รีเฟรชหน้าแล้วธีมไม่กระพริบเปลี่ยน
6. บอกมาว่าเหลืออะไรที่ผมต้องทำเองก่อนขึ้นเซิร์ฟเวอร์จริง ค่า env ตัวไหนบ้าง และเอามาจากไหน

ถ้าตรงไหนของคำสั่งนี้ขัดกันเอง หรือขัดกับ doc ที่คุณเพิ่งอ่าน ให้หยุดถามผมก่อน อย่าเดา