เริ่มต้นใช้งาน

คุณต้องมีโปรเจกต์ Nuxt 4 หรือ Next.js 15+ และ Node.js 22.12 ขึ้นไป (ถ้าใช้ Nuxt ต้อง 22.19 ขึ้นไป) ใช้ framework อื่น หรือไม่ใช้เลย? ให้รัน Easy CMS เป็น standalone server

ยังไม่มีโปรเจกต์? สร้างด้วย npx create-next-app@latest my-app --yes หรือ npm create nuxt@latest my-app

เพิ่ม Easy CMS

ในไดเรกทอรีโปรเจกต์ของคุณ:

npx create-easy-cms

pnpm create easy-cms

yarn create easy-cms

bun create easy-cms

คำสั่งนี้จะตรวจหา Nuxt หรือ Next.js ถามว่าจะใช้ฐานข้อมูลใด ติดตั้งแพ็กเกจ และ:

• สร้าง easy-cms.config.ts พร้อมตัวอย่าง collection posts และ global site
• เพิ่ม EASY_CMS_SECRET แบบสุ่มลงใน .env
• เพิ่ม cms.db, uploads/, backups/ และ .pglite/ ลงใน .gitignore
• Nuxt: เพิ่ม @easy-cms/nuxt ลงใน modules
• Next.js: สร้าง app/api/cms/[[...path]]/route.ts และ app/admin/[[...path]]/route.ts และครอบ next.config.ts ด้วย withEasyCMS()

ตัวเลือก: --db sqlite|postgres, --pm npm|pnpm|yarn|bun, --yes (ใช้ค่าเริ่มต้น), --skip-install รันซ้ำได้อย่างปลอดภัย คำสั่งในเอกสารมีแท็บของแต่ละ package manager และจำตัวที่คุณเลือกไว้

รันระบบ

npm run dev

pnpm dev

yarn dev

bun run dev

เปิด http://localhost:3000/admin หากยังไม่มีผู้ใช้ หน้า admin จะให้คุณสร้าง admin คนแรก หรือจะรัน npx easy-cms admin:create ก็ได้

ในช่วงพัฒนา (development) schema ของฐานข้อมูลจะเปลี่ยนตาม config ให้อัตโนมัติ แก้ไข easy-cms.config.ts แล้วบันทึก หน้า admin จะแสดง field ใหม่ทันที

อ่านเนื้อหา

export default defineEventHandler(async () => {
  const cms = await useEasyCMS()
  return cms.find('posts', { sort: '-createdAt', limit: 10 })
})

import { connection } from 'next/server'
import { Suspense } from 'react'
import { getEasyCMS } from '@easy-cms/next'
import config from '@/easy-cms.config'
 
export default function Home() {
  return (
    <Suspense fallback={<p>กำลังโหลด…</p>}>
      <Posts />
    </Suspense>
  )
}
 
async function Posts() {
  // อ่านใหม่ทุก request หน้าเว็บจึงแสดงสิ่งที่เพิ่งเผยแพร่
  await connection()
  const cms = await getEasyCMS(config)
  const { docs } = await cms.find('posts', { sort: '-createdAt', limit: 10 })
  return <ul>{docs.map((post) => <li key={post.id}>{post.title}</li>)}</ul>
}

Nuxt: ถ้าโฟลเดอร์ server/ เพิ่งสร้างใหม่ ให้รีสตาร์ต npm run dev เพื่อให้ Nuxt เห็นโฟลเดอร์นี้

Next.js: หน้านี้อ่าน CMS ใหม่ทุก request ด้วย await connection() ใน component ที่อยู่ใน <Suspense> วิธีนี้ใช้ได้ทั้งตอนที่เปิดและไม่เปิด cacheComponents ใน next.config.ts (แอปใหม่จาก create-next-app เปิดไว้ และในกรณีนั้นใช้ export const dynamic ไม่ได้)

โดยค่าเริ่มต้น find จะคืนเฉพาะเอกสารที่เผยแพร่แล้ว และ post.title มี type เป็น string เพราะ config ระบุว่า field นี้เป็นข้อความที่จำเป็นต้องกรอก

ขั้นต่อไป

• ออกแบบโครงสร้างเนื้อหา: Configuration และ Fields
• กำหนดว่าใครทำอะไรได้บ้าง: การควบคุมสิทธิ์
• ก่อน deploy ครั้งแรก: Migration และการ deploy