อ๋อ เข้าใจแล้วจ้ะ! ถ้าแบบนั้นคือ...

แยกเนื้อหา (content) ไปไว้ในไฟล์ตัวแปร แล้ว import มาใช้ในแต่ละหน้า
เช่น เขียนเนื้อหาทั้งหมดไว้ในไฟล์ content.ts แล้วค่อย import ไปแสดงในแต่ละหน้า

แบบนี้ทำได้ และเป็นแนวทางที่ดีด้วยในหลายกรณีเลยจ้ะ
แต่ก็มีข้อพิจารณาเล็กน้อยเกี่ยวกับ performance และ SEO ดังนี้:

---

ข้อดีของการแยก content ไว้ในไฟล์เดียว

• จัดการง่าย: เปลี่ยนเนื้อหาตรงไหนก็แค่แก้ที่ไฟล์เดียว
• เหมาะกับหลายภาษา: ใช้คู่กับ i18n ได้ดี เช่น { en: {...}, th: {...} }
• ลด duplication: ถ้าเนื้อหาบางอย่างใช้ซ้ำกันหลายหน้า เช่น slogan, title
• ควบคุม content โดยโปรแกรมเมอร์: โดยไม่ต้องมี CMS หรือไฟล์ Markdown ฯลฯ

---

ข้อควรระวัง

1. ขนาดไฟล์ content.ts: ถ้าเนื้อหาเยอะมาก มันจะถูกรวมเข้าไปใน JavaScript bundle ของทุกหน้าที่ import มัน ทำให้โหลดช้าในบางกรณี

   • วิธีแก้: แยกเนื้อหาเป็นหลายไฟล์ย่อย เช่น homeContent.ts, aboutContent.ts

2. SEO (ไม่มีผลเสีย): ถ้า content ถูก render ออกมาบน server (ผ่าน getStaticProps หรือ getServerSideProps) หรือเป็น static page อยู่แล้ว Google จะเห็นเนื้อหาตามปกติ

   • แต่ถ้าเป็นการโหลด content หลังจากโหลดหน้า (client-side) ต้องระวัง เพราะ Google อาจจะไม่ index ดีเท่าการ render ที่ฝั่ง server

---

ตัวอย่างโครงสร้างที่ดี

/content
  home.ts
  about.ts
  contact.ts

/pages
  index.tsx      // import from content/home
  about.tsx      // import from content/about

home.ts

export const homeContent = {
  title: 'ยินดีต้อนรับสู่เว็บไซต์ของเรา',
  description: 'เราคือผู้เชี่ยวชาญด้าน...'
}

index.tsx

import { homeContent } from '../content/home'

export default function HomePage() {
  return (
    <div>
      <h1>{homeContent.title}</h1>
      <p>{homeContent.description}</p>
    </div>
  )
}

---

สรุป

แนวทางนี้ ดีและปลอดภัยต่อ SEO ถ้า render ฝั่ง server
แนะนำให้ แยกเป็นหลายไฟล์ตามหน้า เพื่อ performance ที่ดีขึ้น และให้โปรเจกต์ดูสะอาดเป็นระเบียบ

ถ้าอยากใช้กับระบบหลายภาษา หรือให้เนื้อหา editable ง่าย ๆ ต่อไปภายหน้า ก็สามารถขยับไปใช้ CMS หรือ JSON / Markdown ได้ด้วยเหมือนกันจ้ะ ถ้าสนใจเดี๋ยวแนะนำให้ได้ต่อเลย!