Next.js 16 + Better Auth Scaffold ด้วย Claude Code Skill

1. Introduction#

การทำระบบ login บน Next.js 16 ที่ใช้ Better Auth กับ Prisma และ MySQL นั้น “เริ่มต้นยาก” มีจุดเล็ก ๆ ที่ต้องตั้งให้ถูกทั้งหมดพร้อมกัน เช่น การเชื่อมต่อ database, การตั้งค่า Prisma, หรือการ redirect หลัง login — ผิดที่หนึ่งจุดก็ login ไม่ได้แล้ว ลองผิดลองถูกไปครึ่งวันก็เป็นเรื่องปกติ

บทความนี้จะสอนใช้ skill (ซึ่งก็คือ “สูตร” ที่เก็บไว้ให้ Claude Code ทำตาม) ที่ชื่อ nextjs16-prisma7-mysql-betterauth1 ↗ ให้ Claude Code สร้างระบบ login ให้เราเองในไม่กี่นาที — โดยอ้างอิงจากตัวอย่างที่ทดสอบแล้วว่าใช้ได้จริง

skill นี้ช่วยให้เรื่องยากกลายเป็นเรื่องง่าย โดยทำ 3 อย่างให้:

1. ประกอบทุกอย่างเข้าด้วยกัน — เอา Next.js 16, Prisma 7, MySQL และ Better Auth มาเชื่อมต่อกันให้ถูกวิธี
2. จัดการจุดที่มักพลาดให้เอง — จุดที่คนมักเจอและติดอยู่นาน ๆ skill รู้แล้วและจัดการให้ จึงไม่ต้องมานั่งแก้ทีละอย่าง
3. สร้างโค้ด login ที่ใช้งานได้จริง — login ด้วยบัญชี Google และด้วย email/password ได้ทันที

อย่าเข้าใจผิด: สิ่งที่ได้ไม่ใช่แอปพลิเคชันสมบูรณ์พร้อมใช้ทุกฟีเจอร์ แต่เป็น scaffold (โครงระบบ login ที่ทำงานได้จริง) ที่คุณเอาไปต่อยอดฟีเจอร์อื่น ๆ ในภายหลัง

2. Skill ทำอะไรให้ (What it produces)#

เมื่อใช้ skill นี้แล้ว คุณจะได้ระบบ login ที่พร้อมใช้งาน ประกอบด้วย:

• Login ได้ 2 แบบ — login ด้วยบัญชี Google (กดปุ่ม “Sign in with Google”) และ login ด้วย email + รหัสผ่าน
• จดจำ session ใน database — หลัง login ระบบจะจำคุณได้แม้ปิดแล้วเปิดเบราว์เซอร์ใหม่ (ข้อมูล session ถูกเก็บไว้ใน MySQL ผ่าน Prisma)
• หน้า sign-in และ sign-up — หน้าเข้าสู่ระบบและหน้าสมัครสมาชิกพร้อมใช้งาน
• หน้า dashboard — หน้าหลักหลัง login ที่แสดงชื่อและรูปโปรไฟล์ (avatar) ของผู้ใช้
• ตรวจสอบ session ฝั่ง server — หน้าที่ต้อง login จะถูกตรวจสอบจากฝั่งเซิร์ฟเวอร์ คนที่ยังไม่ login จะเข้าไม่ได้

skill นี้มีหน้าที่หลักคือ “ประกอบทุกอย่างเข้าด้วยกัน และแก้จุดที่คนมักพลาดให้” ส่วนเนื้อหาลึก ๆ เฉพาะตัวของ Better Auth หรือ Prisma จะอ้างอิงไปยัง companion skills (skill ที่ใช้คู่กัน) อีก 2 ตัว — รายละเอียดอยู่ในส่วนการติดตั้ง

ใช้เมื่อไร (When to use)#

• กำลังสร้างแอป Next.js 16 ใหม่ และต้องการระบบ login ด้วย Better Auth (Google + email/password) ที่เก็บข้อมูลใน MySQL/MariaDB ผ่าน Prisma 7

3. Install Claude Code#

Native Install (Recommended)#

ติดตั้งผ่าน command line สำหรับ macOS, Linux และ Windows:

macOS, Linux, WSL:

curl -fsSL https://claude.ai/install.sh | bash

Windows PowerShell:

irm https://claude.ai/install.ps1 | iex

Windows CMD:

curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install.cmd

Configure GLM as the Model Provider#

ในการใช้ GLM กับ Claude Code จะต้องตั้งค่า GLM Coding Plan

Step 1: Get API Key from Z.AI#

1. เข้า Z.AI Platform ↗ แล้วสมัครหรือ login
2. ไปที่หน้าจัดการ API Keys
3. สร้าง API Key ใหม่
4. คัดลอก API Key เก็บไว้

Step 2: Configure GLM Coding Plan#

ใช้ Coding Tool Helper ตั้งค่า GLM อัตโนมัติ:

# Run Coding Tool Helper directly in your terminal
npx @z_ai/coding-helper

กด Enter เพื่อเลือก API Key option

วาง API Key เมื่อถูกถาม

เมื่อตั้งค่าเสร็จแล้ว ให้ restart Claude Code เพื่อใช้ GLM เป็น AI model provider

4. Prerequisites#

เครื่องมือที่ต้องมี:

• Node.js ติดตั้งอยู่ในเครื่อง
• Claude Code ที่ตั้งค่า GLM แล้ว (ดูด้านบน)
• CAMPP ↗ - Local web development stack (Caddy, PHP, MySQL)
• Terminal (แนะนำ VS Code)
• Google OAuth credentials — Client ID และ Client Secret จาก Google Cloud Console (ดูวิธีสร้างในส่วนที่ 9)

5. Set Up the Project#

Step 1: Create the Next.js 16 Project#

เปิด terminal แล้วรันคำสั่ง:

mkdir betterauth-app
cd betterauth-app
npx create-next-app@16 .

เมื่อถูกถาม Would you like to use the recommended Next.js defaults? ให้เลือก:

• Yes, use recommended defaults

จะได้ Next.js 16 project ที่มาพร้อม:

• TypeScript
• ESLint
• Tailwind CSS
• App Router
• ไม่มี src/ directory — ไฟล์เริ่มต้นอยู่ที่โฟลเดอร์ app/ ใน root ของ project โดยตรง

Step 2: Set Up the Database#

Start CAMPP#

1. ดาวน์โหลด CAMPP ↗ แล้วติดตั้ง
2. เปิด CAMPP แล้วกด Start สำหรับ Caddy, PHP และ MySQL

ค่า default ของ MySQL บน CAMPP:

Create the Database#

1. กดปุ่ม phpMyAdmin บน CAMPP Dashboard

   

   จะเปิดหน้า phpMyAdmin ในเว็บเบราว์เซอร์ที่ http://127.0.0.1:8080/phpmyadmin/ ↗

2. กด New ใน phpMyAdmin

3. ตั้งชื่อ database: betterauth_app

4. กด Create

6. ติดตั้ง Skill + Companion Skills (Install)#

skill นี้มี companion skills ที่จำเป็น 2 ตัว ต้องติดตั้งให้ครบทั้งหมด รันใน project directory ของคุณ:

# 1. ตัว skill หลัก (integration layer)
npx skills@latest add KarnYong/nextjs16-prisma7-mysql-betterauth1

# 2. companion skills — ให้ per-library depth ของ Better Auth ที่ skill หลัก delegate ไป
npx skills@latest add better-auth/skills

เมื่อรันคำสั่งแต่ละอัน ระบบจะถามให้เลือก AI tool ที่จะติดตั้ง skill ให้ ให้เลือก Claude Code:

• กด space bar เพื่อเลือก Claude Code
• กด enter เพื่อ continue

แต่ละคำสั่งทำอะไร:

• คำสั่งที่ 1 ติดตั้ง nextjs16-prisma7-mysql-betterauth1 ตัว integration layer ที่จัดการการประกอบ stack และจุดที่มักพลาดเฉพาะ Next.js 16
• คำสั่งที่ 2 ติดตั้ง better-auth/skills ซึ่งมีทั้ง better-auth-best-practices และ create-auth-skill — skill หลักจะ delegate ความลึกเรื่อง Better Auth ไปยังสองตัวนี้

สำคัญ: ถ้าข้ามคำสั่งที่ 2 คำสั่งอ้างอิงแบบ “for depth, use these” ของ skill หลักจะไม่มีที่ชี้ไป ดังนั้นต้องติดตั้งให้ครบทั้งสาม

7. ใช้งาน Skill (Sample Prompt)#

Open Claude Code in Your Project#

ให้แน่ใจว่าอยู่ใน project directory แล้วจึงเปิด Claude Code:

ผ่าน terminal:

cd betterauth-app
claude

หรือจาก VS Code:

• เปิด project folder ใน VS Code
• กด Ctrl+Shift+P (Windows/Linux) หรือ Cmd+Shift+P (macOS)
• พิมพ์ “Claude Code: Start New Chat” แล้วกด Enter

Initialize the Project Context#

ก่อนใช้ prompt ให้ Claude Code เข้าใจ project structure ก่อนด้วยคำสั่ง:

/init

จะสแกน project และช่วยให้ Claude Code สร้างโค้ดที่เข้ากับ setup ที่มีอยู่

Use This Prompt#

หลังจาก /init เสร็จ ให้วาง prompt นี้:

Set up auth for my Next.js 16 app using Better Auth with:
- Google OAuth (social login)
- email/password

Backed by MySQL via Prisma 7.

Scaffold these:
- server and client config
- the route handler
- the Prisma schema
- the sign-in / sign-up / dashboard pages

skill จะ activate จากการผสมของ Next.js 16 + Prisma 7 + MySQL + Better Auth โดยคุณไม่จำเป็นต้องเอ่ยชื่อ skill โดยตรง แค่อธิบายสิ่งที่ต้องการ แล้ว Claude Code จะจับคู่กับ skill เอง

เมื่อ Claude Code ถามระหว่างทำงาน ให้เตรียมข้อมูลนี้ให้พร้อม:

• DATABASE_URL — connection string ของ MySQL (ดูตัวอย่างในส่วนถัดไป)
• Google OAuth credentials — Client ID และ Client Secret (ดูวิธีสร้างในส่วนถัดไป)

ระหว่าง Claude Code เขียนโค้ด อาจจะขอ run คำสั่งเช่น npx prisma generate หรือ npx prisma migrate — คำสั่งเหล่านี้สร้าง Prisma Client จาก schema และสร้าง tables ใน database ให้อนุญาต

8. ตั้งค่า Database และ Google OAuth#

DATABASE_URL#

กำหนดค่า DATABASE_URL ใน .env.local ให้ชี้ไปยัง database ที่สร้างไว้ (ปรับ username/password ตาม CAMPP ของคุณ):

DATABASE_URL="mysql://root:YOUR_PASSWORD@localhost:3307/betterauth_app"

CAMPP ใช้ port 3307 สำหรับ MySQL เพื่อหลีกเลี่ยงการ conflict กับ MySQL service อื่นบนเครื่อง — อย่าใช้ 3306

Google OAuth Credentials#

Better Auth ต้องใช้ Google OAuth Client ID และ Client Secret สร้างได้จาก Google Cloud Console:

1. เข้า Google Cloud Console ↗ แล้วสร้าง (หรือเลือก) project
2. ไปที่ APIs & Services → OAuth consent screen ตั้งค่า consent screen (External), กรอก app name และ email
3. ไปที่ APIs & Services → Credentials → Create Credentials → OAuth client ID
4. เลือกประเภท Web application
5. ในส่วน Authorized redirect URIs ให้เพิ่ม callback URL ของ Better Auth สำหรับ local dev:

   http://localhost:3000/api/auth/callback/google
6. กด Create แล้วคัดลอก Client ID และ Client Secret

เมื่อ Claude Code ถาม (หรือเพิ่มใน .env.local) ให้ใส่ค่าที่ได้:

GOOGLE_CLIENT_ID=your-client-id
GOOGLE_CLIENT_SECRET=your-client-secret

9. Run และทดสอบ (Run the Scaffold)#

เมื่อ Claude Code สร้าง scaffold เสร็จ ให้เริ่ม development server:

npm run dev

เปิด http://localhost:3000 ↗ ใน browser แล้วทดสอบ:

• Sign up ด้วย email/password — สร้างบัญชีและ login ได้
• Sign in with Google — Google OAuth flow ทำงาน แล้ว redirect กลับมา
• Dashboard — แสดงข้อมูลผู้ใช้และ avatar หลัง login
• Server-side session check — หน้าที่ต้อง login จะตรวจสอบ session ฝั่ง server
• Logout — ล้าง session

หากเจอปัญหา ให้เปิด http://localhost:8080/phpmyadmin ↗ ตรวจสอบว่า tables ถูกสร้างแล้วใน database betterauth_app

10. พัฒนาต่อจาก Scaffold (Continue Development)#

สิ่งที่ skill สร้างให้คือ scaffold พร้อมพัฒนาต่อ — ระบบ Authentication ทำงานได้จริง แต่ยังเป็นเพียงจุดเริ่มต้น สิ่งที่มักจะเพิ่มต่อจากนี้:

• Roles / RBAC — เพิ่ม role field ใน user model (เช่น admin/customer) และเช็คสิทธิ์
• Profile editing — หน้าแก้ไขข้อมูลผู้ใช้, เปลี่ยนรหัสผ่าน, อัปโหลด avatar
• Email verification — ส่งอีเมลยืนยันตัวตนก่อน login ได้
• Forgot / reset password — flow ขอรหัสผ่านใหม่
• Protected pages และ API — ขยาย session check ไปยัง route อื่น ๆ
• เชื่อมกับ feature หลักของแอป — เช่นสินค้า, คำสั่งซื้อ, เนื้อหา ฯลฯ

เนื่องจาก skill นี้ delegate per-library depth ไปยัง companion skills ตอนเจอปัญหาเฉพาะตัว ให้ถาม Claude Code ตรง ๆ แล้วมันจะดึง better-auth-best-practices หรือ Prisma reference มาช่วยเอง

11. Summary#

สิ่งที่สร้าง:

สิ่งที่ได้เรียนรู้:

• skill แบบ integration layer ช่วยประกอบ stack และจัดการจุดที่มักพลาดเฉพาะเวอร์ชันให้
• การติดตั้ง skill พร้อม companion skills ที่จำเป็น
• วิธี activate skill ผ่านการอธิบายสิ่งที่ต้องการ (ไม่ต้องเอ่ยชื่อ skill)
• การเตรียม DATABASE_URL และ Google OAuth credentials ให้พร้อม
• ผลลัพธ์คือ scaffold พร้อมพัฒนาต่อ — ไม่ใช่แอปสมบูรณ์ทุกฟีเจอร์

When NOT to use this skill:

• ใช้ Auth.js / next-auth, MongoDB หรือ direct-driver MySQL → ใช้ better-auth-best-practices skill โดยตรงแทน

Happy building!