บทที่ 14: CMS/Content Blueprint

“ห้องสมุดที่ดีต้องจัดหมวดหมู่ชัดเจน ค้นหาง่าย และเข้าถึงได้รวดเร็ว”

The Blueprint (พิมพ์เขียว)

Content Management System (CMS) คือระบบที่:

• สร้างและแก้ไขเนื้อหาได้ง่าย
• จัดเก็บสื่อ (รูปภาพ, วิดีโอ)
• ค้นหาเนื้อหาได้รวดเร็ว
• รองรับ SEO ได้ดี

CMS = ห้องสมุด — เก็บบทความ มีระบบค้นหา

Material Selection (เลือกสเปกวัสดุ)

📦 Tech Stack สำหรับ CMS

Layer	Technology	เหตุผล
Frontend	Next.js 14	SSG + ISR
Database	MongoDB / PostgreSQL	Flexible
Media	Cloudinary / S3	Image Optimization
Search	Algolia / Meilisearch	Full-text
Editor	TipTap / Editor.js	Rich Text

📝 Static Generation

export async function generateStaticParams() {
  const posts = await getAllPosts();
  return posts.map((post) => ({
    slug: post.slug,
  }));
}

export default async function BlogPost({ params }) {
  const post = await getPostBySlug(params.slug);

  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  );
}

export const revalidate = 3600; // Revalidate ทุก 1 ชั่วโมง

🔍 Full-text Search

import { MeiliSearch } from 'meilisearch';

const client = new MeiliSearch({ host: 'http://localhost:7700' });

// Index posts
await client.index('posts').addDocuments(posts);

// Search
const results = await client.index('posts').search('Next.js');

Architect’s Note (บันทึกสถาปนิก)

⚠️ ข้อควรระวัง

1. SEO เป็น Priority — ใช้ SSG สำหรับหน้า Content
2. Image Optimization — ใช้ next/image หรือ Cloudinary
3. Content Security — Sanitize HTML จาก Rich Text Editor

💡 Best Practices

1. Sitemap อัตโนมัติ — next-sitemap
2. RSS Feed — สร้าง Feed สำหรับ Subscribers
3. Related Posts — แนะนำบทความที่เกี่ยวข้อง