กวดวิชานี้เป็นส่วนแรกของคู่มือที่ครอบคลุมในการสร้างระบบขับเคลื่อนสําหรับการสร้างหน้าเว็บโดยอัตโนมัติโดยใช้ React 19 และ Next.js 15 ความมุ่งเน้นของเราไม่ใช่แค่ความเร็ว แต่ยังถึงความสง่างามทางสถาปัตยกรรมและการออกแบบที่สอดคล้องกันในแบรนด์ แหล่งที่เปิด: (https://github.com/aifa-agi/aifa) นี่คือแผนที่ถนน: ส่วนหนึ่ง 1 (คุณอยู่ที่นี่): พื้นฐานสถาปัตยกรรมลึก - การจับเส้นทางทั้งหมดส่วนประกอบ PageHtmlTransformer และการกําหนดค่าหน้าเว็บที่พิมพ์อย่างแข็งแกร่ง ส่วนที่ 2: ประเภทหน้าขั้นสูง – หน้าเอกสารอัตโนมัติและบทเรียนแบบโต้ตอบ ส่วนที่ 3: การบูรณาการเครื่องยนต์ AI—การเชื่อมต่อรุ่นภายนอก (ChatGPT, Claude) และตัวแทน Aifa ภายในของเราเพื่อการสร้างเนื้อหาอย่างต่อเนื่องและอิสระ โบนัส: การศึกษากรณี—การใช้งานการทํากําไรและการปรับขนาดของ AI SaaS ในระดับการผลิตด้วยการลงทะเบียนผู้ใช้และการชําระเงิน Stripe แผนผังขั้นตอนตามขั้นตอนนี้จะนําคุณไปสู่การสร้างคลอน v0 ที่พร้อมใช้งานสําหรับองค์กรของคุณเองพร้อมกับการรับรองความถูกต้องและการชําระเงิน ผลิตภัณฑ์ AI ในโลกจริงจากแนวคิดจนถึงการเปิดตัว - รหัสที่สมบูรณ์สามารถใช้ได้ที่ . ลงทะเบียนเพื่อติดตามชุดเต็มรูปแบบ - นี่เป็นเพียงจุดเริ่มต้นเท่านั้น! โซฟา เทคโนโลยี Stack: React 19 · Next.js 15 · Vercel · Prisma · Stripe · AI SDK · ChatGPT แพลตฟอร์มของเราผสมผสานความมั่นคงระดับองค์กรกับนวัตกรรมที่รุนแรง: React 19 & Next.js 15 พร้อม App Router ให้การแสดงผล sub-100ms และเส้นทางแบบขนานจริง Vercel ช่วยให้การใช้งานแบบไม่มีเวลาหยุดทํางานและการปรับขนาดขอบเขตระดับโลก Prisma & Neon ให้การเข้าถึงข้อมูลที่ปลอดภัยและรวดเร็ว Stripe จัดการการชําระเงินทันทีตาม PCI จากกล่อง AI SDK + ChatGPT ชั้นในการสร้างความเข้าใจดังนั้น AIFA Dev Starter สามารถสปิน UI เต็มรูปแบบโมดูลเนื้อหาและโปรโตทิปในไม่กี่นาที - เต็มไปด้วยการรับรองความถูกต้องในตัวและการแชท AI หลายภาษา วิธีการทํางาน แนะนํา: ส่งคําขอภาษาธรรมชาติเดียวไปยัง ChatGPT สร้าง: รับ PageConfig ขึ้นอยู่กับ JSON ซึ่งกําหนดส่วนข้อมูลเมตาและ layout ของหน้าของคุณ สร้าง: ลบไฟล์การกําหนดค่าลงในแอป Next.js ของคุณและเรียกใช้ npm run build. Instantly คุณมีหน้าเว็บที่มีสไตล์เต็มรูปแบบพร้อม SEO พร้อมกับ chat auth และ AI ต้องการบูรณาการองค์กรหรือไม่ เพียงเปิด “V0 Corporate Mode” ของเราใน aifa.dev(https://aifa.dev) สําหรับการอัตโนมัติขั้นสูงการเข้าถึงตามบทบาทและสถาปัตยกรรม microservices ที่สามารถปรับขนาดได้ ต้องการบูรณาการองค์กรหรือไม่ เพียงเปิด “V0 Corporate Mode” ของเราใน aifa.dev(https://aifa.dev) สําหรับการอัตโนมัติขั้นสูงการเข้าถึงตามบทบาทและสถาปัตยกรรม microservices ที่สามารถปรับขนาดได้ ใครชนะกับเครื่องกําเนิดเว็บไซต์ที่ขับเคลื่อนด้วย AI? สตูดิโอองค์กร startup และ freelancers สํานักงานการออกแบบรุ่นถัดไป: จาก Mockup ไปยังการผลิตมวลในไม่กี่นาที ลองจินตนาการว่าหน่วยงานที่สร้างระบบนิเวศทางเทคนิคที่สามารถปรับขนาดได้ไม่ใช่เพียง mockups แบบคงที่ การลงทุนล่วงหน้าครั้งเดียวในห้องสมุดส่วนประกอบที่เป็นเจ้าของจะเปิดเผยความสามารถในการสร้างและใช้เว็บไซต์ระดับการผลิตมากกว่า 50 เว็บไซต์ต่อชั่วโมง นี่ไม่ใช่ความคิดสร้างสรรค์ทางวิทยาศาสตร์ มันเป็นพารามิเตอร์การดําเนินงานใหม่ที่เงินทุนสร้างสรรค์พบกับการดําเนินการอัตโนมัติ และด้วยการบูรณาการ Stripe ในตัวคุณสามารถสร้างรายได้ด้วยความเร็วใหม่นี้ได้ตั้งแต่วันแรก เราจะสํารวจเรื่องนี้ต่อไปในโพสต์ต่อไปนี้ การใช้งานขององค์กร: ความสม่ําเสมอของแบรนด์และความสามารถในการปรับขนาดอย่างรุนแรง กรณีการใช้งานทางธุรกิจแบบคลาสสิก: โซลูชั่นเมนู QR แบบเปิดคีย์สําหรับร้านอาหารระดับชาติ คุณสร้างระบบการออกแบบหลักสําหรับประสบการณ์ผู้ใช้หลักเช่นการ์ดผลิตภัณฑ์หรือเมนูเพียงครั้งเดียว นี้จะกลายเป็นโซลูชั่นที่ทําด้วยเครื่องหมายสีขาวที่คุณสามารถใช้ได้กับผู้ให้บริการหรือสถานที่หลายร้อยแห่ง ทุกสถานที่ปรับแต่งแบรนด์และเนื้อหาผ่านอินเตอร์เฟซที่เรียบง่ายในขณะที่ UX หลักประสิทธิภาพและความสมบูรณ์ของการออกแบบยังคงปิดและสม่ําเสมอ นี่คือ trifecta ที่ตลาดองค์กรต้องการในปี 2025: , และ . radical scalability bulletproof brand consistency unmatched speed-to-market เครื่องยนต์หลัก: โครงสร้างการแปลง JSON-to-React ของเรา ระบบทั้งหมดนี้ถูกขับเคลื่อนโดยสองส่วนสําคัญ: Intelligent Prompt Engineering We use highly-tuned instructions that command the AI to pull battle-tested section templates from a vector database and tailor them to your specific request. The Component Transformer Architecture Our React components are engineered to interpret these JSON configs, instantly transforming them into fully-rendered, interactive pages. ในขณะที่รุ่นภายนอกเช่น ChatGPT และ Claude จัดการการสร้างเนื้อหาส่วนประกอบเครื่องแปลงเอกสารของเราเป็นเครื่องมือหลักของระบบ - ส่วนที่เราสร้างขึ้นเพื่อรับประกันประสิทธิภาพและการออกแบบที่เชื่อถือได้ หลักฐาน AI-Native: ใช้บทเรียนนี้เป็นฐานความรู้สด หยุด เอกสาร เริ่มต้น มัน การอ่าน คู่มือ อํานาจที่แท้จริงของคู่มือนี้ไม่ได้อยู่ในการอ่านที่ครอบคลุม มันถูกออกแบบมาเพื่อเป็นฐานความรู้ผู้เชี่ยวชาญส่วนบุคคลของโครงการของคุณ วิธีการทํางาน: ส่งเอกสารทั้งหมดนี้ไปยัง ChatGPT ถามคําถามที่เฉพาะเจาะจงและเป็นพื้นฐาน: "ฉันจะใช้ส่วนที่กําหนดเองได้อย่างไร?", "วัตถุประสงค์ของ FullScreenWrapper คืออะไร?", "แสดงให้เห็นรหัสสําหรับส่วนประกอบ DoublePresentation" รับคําตอบที่แม่นยําพร้อมการผลิตด้วยรหัสที่สมบูรณ์แบบ นี่ไม่ใช่เพียงเอกสารเท่านั้น มันเป็นหนังสือเล่มที่สามารถใช้งานได้ ลองวิธีการนี้และคุณจะเข้าใจว่าทําไมเอกสารทางเทคนิคทั้งหมดในปี 2025 ต้องเป็น AI-native บทนํา: จริยธรรมของเรา – ความสม่ําเสมอ Trumps ความเร็วดิบ คู่มือนี้ไม่ได้เกี่ยวกับการสร้างเครื่องกําเนิดหน้า AI ที่เร็วที่สุดเท่าที่จะเป็นไปได้ ในขณะที่เครื่องมือ AI เช่น v0 ให้ความสําคัญกับความเร็วในการสร้างวัตถุดิบวิธีการของเรามุ่งเน้นไปที่เมตริกธุรกิจที่สําคัญมากขึ้น: วัตถุประสงค์หลักของเราคือการส่งมอบความสอดคล้องในการออกแบบที่ทนไฟและสอดคล้องทางสถาปัตยกรรมทั่วทั้งนิทรรศการดิจิตอลของคุณ Total Cost of Ownership (TCO) ในขณะที่การสร้างครั้งแรกของหน้าเดียวอาจใช้เวลานานกว่าเล็กน้อยการประหยัดในด้านการพัฒนาการบํารุงรักษาและการจัดการแบรนด์เป็นจํานวนมาก นี่คือเหตุผลที่การทําธุรกรรมนี้ให้ ROI ที่เหนือกว่า: Bulletproof Brand Consistency: ทุกหน้าที่สร้างขึ้นโดย AI จะสอดคล้องกับระบบการออกแบบของคุณโดยอัตโนมัติ ไม่มีส่วนประกอบที่ผิดพลาดไม่มีการออกแบบภายนอกแบรนด์ ประสบการณ์ผู้ใช้ที่ไร้รอยต่อ: สถาปัตยกรรมให้แน่ใจว่าการเดินทางที่สอดคล้องกันและสอดคล้องกันสําหรับผู้ใช้กําจัดความไม่สอดคล้องที่พบบ่อยในเว็บไซต์ที่สร้างขึ้นอย่างรวดเร็ว Reduced Reduced Rework: โดยการบังคับใช้มาตรฐานในจุดของการสร้างเราลดการปรับแต่งด้วยตนเองที่แพงและใช้เวลานานตามปกติที่จําเป็นหลังการผลิต ความสามารถในการปรับขนาดของสถาปัตยกรรมที่แท้จริง: วิธีการของเราจะมีประสิทธิภาพมากขึ้นเมื่อคุณปรับขนาดได้ ยิ่งคุณสร้างหน้าเว็บมากขึ้นผลตอบแทนจะสูงขึ้นในความเร็วและความสม่ําเสมอ The result isn't just a collection of pages; it's a cohesive, professional-grade digital asset that scales gracefully with minimal maintenance overhead. นอกเหนือจากพื้นฐาน: การจัดการความซับซ้อนของโลกจริง กวดวิชานี้เริ่มต้นมุ่งเน้นไปที่การสร้างหน้ามาตรฐานด้วยหลักของเรา , และ อย่างไรก็ตามฐานรหัสที่เปิดแหล่งที่มาให้โซลูชั่นขั้นสูงนอกกล่องสําหรับความต้องการที่ซับซ้อนมากขึ้น: Header Body Footer หน้าเอกสารที่มีการนําทางขั้นสูง หน้ากวดวิชาแบบโต้ตอบที่มีองค์ประกอบขั้นตอนตามขั้นตอน สถาปัตยกรรมของเราได้รับการออกแบบมาเพื่อความยืดหยุ่น สําหรับคุณสมบัติที่ไม่ซ้ํากันและโต้ตอบสูงเช่นการนําเสนอแบบเคลื่อนไหวแผงข้อมูลแบบเรียลไทม์หรือส่วนประกอบที่มีการจัดการสถานะที่ซับซ้อนคุณสามารถฉีด โดยตรงไปยังท่อ rendering นี้จะช่วยให้คุณมีความยืดหยุ่นในการใช้ฟังก์ชั่นที่กําหนดเองโดยไม่ต้องเสี่ยงต่อความสมบูรณ์หลักของระบบ Custom Components Your Next Step: Hands-On with Custom Components เพื่อเป็นเจ้าของระบบนี้อย่างแท้จริงภารกิจทางปฏิบัติของคุณคือการสํารวจกระบวนการสร้างและบูรณาการองค์ประกอบที่กําหนดเองใหม่ สิ่งนี้จะเสริมสร้างความเข้าใจของคุณเกี่ยวกับพลังและความยืดหยุ่นของสถาปัตยกรรม 1.1. แนวคิด: AI เป็นผู้ดูแลแบรนด์ของคุณไม่ใช่เครื่องมือเนื้อหาเท่านั้น การดําเนินงานดิจิตอลที่ทันสมัยต้องการความเร็วความสมบูรณ์ของแบรนด์และความยืดหยุ่นของตลาดสถาปัตยกรรมของเราบรรลุสิ่งนี้โดยการรักษาระบบการออกแบบของคุณเป็นฐานความรู้ที่มีโครงสร้างและอัจฉริยะ การกําหนดค่าที่ได้รับการอนุมัติล่วงหน้าสําหรับแต่ละส่วนที่สําคัญกับแบรนด์ (Hero, CTA, FAQ, Features ฯลฯ) จะถูกดูดซับโดย AI โดยการให้อาหาร AI มาตรฐาน UI / UX ที่แน่นอนของคุณมันจะกลายเป็นมากกว่าเครื่องกําเนิดเนื้อหา - มันจะกลายเป็นผู้ปกครองที่สมบูรณ์แบบของเอกลักษณ์แบรนด์ของคุณบังคับใช้ความสม่ําเสมอในทุกขั้นตอนของวงจรชีวิตการสร้างหน้าเว็บ 1.2. กระแสการทํางาน 5 ขั้นตอน: จากระบบการออกแบบเพื่อสร้าง SEO ที่เพิ่มประสิทธิภาพ ใช้ระบบการออกแบบของคุณ: เราโหลดฐานความรู้ของ AI กับเทมเพลตส่วนประกอบของคุณและคําแนะนําที่ชัดเจนเกี่ยวกับวิธีการนําไปใช้ได้ทางวิสัยทัศน์และโครงสร้างเพื่อให้มั่นใจได้ว่าแบรนด์สอดคล้อง 100% กําหนดเป้าหมายด้วยตัวอักษร: ผู้ใช้ผู้จัดการโครงการหรือผู้พัฒนาจะส่งตัวอักษรข้อความง่ายๆที่อธิบายหน้าที่ต้องการหรือองค์ประกอบของหน้า AI Interpretation & Structuring: ตัวแทน AI ตรวจสอบคําขอสร้างเนื้อหาทางสัญลักษณ์และอัจฉริยะแผนที่ไปยังเทมเพลตที่เหมาะสมและได้รับการอนุมัติล่วงหน้าจากฐานความรู้ สร้าง PageConfig Declarative: ขึ้นอยู่กับเทมเพลตที่เลือกระบบส่งออก PageConfig ที่พิมพ์อย่างเข้มงวด—คําอธิบาย JSON ของหน้าสุดท้าย ซึ่งรับประกันความสอดคล้องกับแบรนด์และทําให้การพัฒนาด้านล่างง่ายขึ้น การสร้างและการใช้งานอัตโนมัติ: การกําหนดค่าจะถูกบริโภคโดยองค์ประกอบการ render ของเราในระหว่างกระบวนการสร้าง ผลผลิตเป็นหน้าเว็บพร้อมการผลิต SEO ที่ได้รับการเพิ่มประสิทธิภาพซึ่งเป็นไปตามมาตรฐานทางวิสัยทัศน์และทางเทคนิคขององค์กรของคุณ 1.3. ผลกระทบทางธุรกิจ: แปลงไดรฟ์และ Slash TCO Go-to-Market ที่เร่งด่วน: เปิดหน้าปลายทางและหน้าผลิตภัณฑ์ใหม่ด้วยคําแนะนําเดียวโดยใช้เทมเพลตที่ได้รับการอนุมัติล่วงหน้าเพื่อความเร็วที่ไม่เหมือนใคร Ironclad ความสมบูรณ์ของแบรนด์: ความสม่ําเสมอของแบรนด์และการควบคุมคุณภาพได้รับการอัตโนมัติเพื่อให้แน่ใจว่าทุกหน้าใหม่สะท้อนให้เห็นถึงระบบการออกแบบของคุณอย่างสมบูรณ์แบบ การทดสอบ A / B ที่สามารถปรับขนาดได้: ช่วยให้ทีมงานการตลาดสามารถปรับขนาดการเปลี่ยนแปลงหน้าและเนื้อหา A / B ได้โดยไม่ต้องมีส่วนร่วมกับนักพัฒนาในกระบวนการวางแผน สร้างขึ้นสําหรับระดับโลก: องค์ประกอบของข้อความและอินเทอร์เฟซอินเทอร์เฟซทั้งหมดเป็นศูนย์กลางทําให้การตั้งถิ่นฐานและการปรับเปลี่ยนตลาดได้อย่างราบรื่น ความยืดหยุ่นทางสถาปัตยกรรม: ออกแบบมาเพื่อบูรณาการได้อย่างราบรื่นกับท่อ CI / CD แบบทันสมัยแพลตฟอร์มโฮสติ้งและกระบวนการทํางานอื่น ๆ ที่ขับเคลื่อนด้วย AI 1.4. แผนผังของคุณผ่านชุดนี้ ในบทเรียนที่ครอบคลุมนี้เราจะนําคุณผ่าน: การทําลายสถาปัตยกรรมหลัก: การดําน้ําลึกเข้าไปใน PageHtmlTransformer ระบบ Wrapper / FullScreenWrapper และวิธีการทํางานร่วมกันของส่วนประกอบ พัฒนาท่อ rendering: ทําความเข้าใจเกี่ยวกับกลยุทธ์ที่อยู่เบื้องหลังการ rendering ส่วนการพิมพ์การกําหนดค่าและความสัมพันธ์ระหว่างไฟล์ Config และส่วนประกอบ React เพื่อให้คุณสามารถขยายระบบได้ด้วยตัวเอง เรียนรู้วิธีการสอน AI: เรียนรู้วิธีการสร้างคําสั่งแบบโครงสร้างสําหรับเมตาเดทหัวและขาและกําหนดข้อกําหนดสําหรับการสร้างเนื้อหาร่างกายเป็นชิ้นส่วน JSX สร้าง Pages on Demand: ใช้ความรู้ของคุณเพื่อสร้างไฟล์การกําหนดค่าที่ AI ใช้เพื่อสร้างหน้าเว็บที่สอดคล้องกับมาตรฐานสถาปัตยกรรมและการออกแบบของคุณอย่างสมบูรณ์ 2. การวิเคราะห์ของสถาปัตยกรรมที่ขับเคลื่อนด้วย AI ของเรา โครงการของเราได้รับการจัดระเบียบเพื่อเพิ่มการปรับขนาดความสามารถในการบํารุงรักษาและความเร็วในการพัฒนา เราใช้แนวทาง App Router Next.js 15 รวมถึงเส้นทาง paralel ( ) และโฟลเดอร์ส่วนตัว ( ) เพื่อสร้างโครงสร้างที่สะอาดและแข็งแรง @right _folder Project Directory ต้นไม้ app/@right/ ├── public/ │ ├── (_routing)/ │ │ └── [[...slug]]/ │ │ └── page.tsx # 1. Dynamic Catch-All Route Handler │ └── (_service)/ │ ├── (_config)/ │ │ └── public-pages-config.ts # 6. AI-Generated Page Configurations │ └── (_libs)/ │ └── utils.ts # 7. Configuration Utilities └── (_service)/ ├── (_types) │ └── page-wrapper-types.ts # 5. The TypeScript Data Contract (AI <-> UI) └── (_components)/ └── page-transformer-components/ ├── page-html-transformer.tsx # 2. The Core Page Transformer Engine ├── custom-sections/ # Directory for complex, interactive components ├── wrappers/ │ ├── full-screen-wrapper.tsx # 3. Immersive Full-Screen Wrapper │ └── wrapper.tsx # 4. Standard Content Section Wrapper ├── header-sections-components/ │ ├── header-section.tsx # 8. Standardized Header Component │ ├── page-header-elements.tsx # 9. Atomic Header Elements (H1/H2) │ └── announcement.tsx # 10. Announcement Banner Component ├── body-sections-components/ │ └── body-section.tsx # 12. Flexible Body Content Container └── footer-sections-components/ └── footer-section.tsx # 11. Standardized Footer Component เข้าสู่โหมดหน้าจอเต็ม Exit โหมดหน้าจอเต็ม หลักส่วนประกอบเส้นทาง 1. @/app/@right/public/(_routing)/[[...slug]]/page.tsx 2. @/app/@right/(_service)/(_components)/page-transformer-components/page-html-transformer.tsx 3. @/app/@right/(_service)/(_components)/page-transformer-components/wrappers/full-screen-wrapper.tsx 4. @/app/@right/(_service)/(_components)/page-transformer-components/wrappers/wrapper.tsx 5. @/app/@right/(_service)/(_types)/page-wrapper-types.ts 6. @/app/@right/public/(_service)/(_config)/public-pages-config.ts 7. @/app/@right/public/(_service)/(_libs)/utils.ts 8. @/app/@right/(_service)/(_components)/page-transformer-components/header-sections-components/header-section.tsx 9. @/app/@right/(_service)/(_components)/page-transformer-components/header-sections-components/page-header-elements.tsx 10. @/app/@right/(_service)/(_components)/page-transformer-components/header-sections-components/announcement.tsx 11. @/app/@right/(_service)/(_components)/page-transformer-components/footer-sections-components/footer-section.tsx 12. @/app/@right/(_service)/(_components)/page-transformer-components/body-sections-components/body-section.tsx เข้าสู่โหมดหน้าจอเต็ม Exit โหมดหน้าจอเต็ม 2.1. ชุดเครื่องมือส่วนประกอบหลัก: หน้าที่พร้อมการผลิตออกจากกล่อง เป้าหมาย แคตตาล็อกส่วนประกอบมาตรฐานของเรามีพื้นฐานที่ออกแบบมาสําหรับการสร้างหน้าเว็บที่มีการพิมพ์ที่แข็งแกร่งและยึดติดกับแบรนด์ในขนาด คอลเลกชันนี้ประกอบด้วยโครงสร้างพื้นฐานของระบบของเรา: การออกแบบเส้นทางแบบไดนามิกเครื่องยนต์เครื่องแปลงส่วนกลางบรรจุเนื้อหาที่หลากหลายส่วนหัวและขาเดียวและไฟล์การกําหนดค่าและสัญญาข้อมูลที่ขับเคลื่อนพวกเขา หลักการทางสถาปัตยกรรมหลัก: ความสม่ําเสมอของอินเตอร์เฟซอินเตอร์เฟซอินเตอร์เฟซ: แต่ละส่วนประกอบสอดคล้องกับระบบการออกแบบและรูปแบบพฤติกรรมที่สม่ําเสมอเพื่อให้แน่ใจว่าประสบการณ์ของผู้ใช้ที่ราบรื่นและคาดการณ์ได้ AI-Native by Design: สถาปัตยกรรมได้รับการเพิ่มประสิทธิภาพสําหรับการสร้างอัตโนมัติช่วยให้ AI สร้างหน้าเว็บที่ซับซ้อนโดยไม่มีการแทรกแซงด้วยตนเอง SEO-Optimized จาก Ground Up: แนวทางปฏิบัติที่ดีที่สุดสําหรับการเพิ่มประสิทธิภาพเครื่องมือค้นหาและ HTML เซมแมนติกถูกอบใน, ไม่ bolted บน. Type-Safe & Predictable: เราใช้การพิมพ์ที่เข้มงวดของ TypeScript เพื่อบังคับใช้สัญญาข้อมูลที่เชื่อถือได้ระหว่าง AI และ UI เพื่อให้มั่นใจในเสถียรภาพของระบบ โมดูลและคอมโพสิต: แต่ละส่วนประกอบเป็นหน่วยที่ครอบคลุมตัวเองซึ่งแก้ปัญหาเฉพาะที่ออกแบบมาเพื่อให้สามารถใช้ซ้ําได้และขยายได้สูงสุด ร่วมกันส่วนประกอบเหล่านี้เป็นโครงสร้างพื้นฐานของระบบซึ่งรับประกันว่าทุกหน้าที่สร้างขึ้นโดย AI ไม่เพียง แต่มีความซับซ้อนทางวิสัยทัศน์ แต่ยังมีความแข็งแรงทางเทคนิคและพร้อมใช้งาน 2.1.1 การ ส่วนประกอบ: Universal Catch-All Route สําหรับ URL แบบไดนามิก [[...slug]]/page.tsx 2.1.1.1 ค่าใช้จ่ายเชิงกลยุทธ์ของเส้นทาง Catch-All: ความยืดหยุ่นและความเร็วในการใช้งาน เส้นทาง catch-all เป็นรูปแบบการนําทางแบบไดนามิกใน Next.js ที่ช่วยให้องค์ประกอบหน้าเดียวสามารถจัดการกับส่วนแบ่ง URL ที่ไม่มีที่สิ้นสุดได้ สัญญา, The พารามิเตอร์จะกลายเป็นมาร์เรย์ที่มีทุกส่วนของเส้นทาง URL ไม่ว่ามันจะอยู่ลึกเท่าใด [[...slug]] slug จากมุมมองทางธุรกิจทางสถาปัตยกรรมนี้เป็นข้อได้เปรียบในการแข่งขันที่ยิ่งใหญ่ นี่คือเหตุผล: การยึดติดและความลึกเนื้อหาที่ไม่มีที่สิ้นสุด: คุณไม่ถูก จํากัด โดยโครงสร้างไฟล์ของโครงการอีกต่อไป URL เช่น /public/category/nike/sneakers/black/12345 จะได้รับการจัดการโดยส่วนประกอบเดียวกันเช่นเดียวกับ /public/test สิ่งนี้เปิดเผยความสามารถในการสร้างแคตตาล็อกผลิตภัณฑ์, เว็บไซต์เอกสารหรือห้องสมุดเนื้อหาที่แนบมาอย่างลึกซึ้งโดยไม่จําเป็นต้องมีการเปลี่ยนแปลงรหัสฐานใด ๆ การนําทางโดยไม่มีรอยขีดข่วนและการเปิดตัวหน้าเว็บทันที: การใช้หน้าเว็บใหม่เป็นเรื่องง่ายเท่าที่จะเพิ่มการกําหนดค่าไปยังไฟล์กลาง หน้าเว็บจะใช้งานได้ทันทีโดยไม่ต้องสร้างส่วนประกอบใหม่หรือนําทางไปยังระบบไฟล์ที่ซับซ้อน สิ่งนี้จะแยกแยะกลยุทธ์เนื้อหาออกจากวงจรวิศวกรรมช่วยให้ทีมงานด้านการตลาดและผลิตภัณฑ์สามารถเคลื่อนย้ายได้เร็วขึ้น การอัตโนมัติแบบบูรณาการ: สถาปัตยกรรมนี้เป็นพื้นฐานสําหรับระบบนิเวศของเนื้อหาอัตโนมัติอย่างเต็มที่ แถบด้านหรือเมนูที่สร้างขึ้นโดยอัตโนมัติสามารถเขียนโปรแกรมเพื่ออ่านการกําหนดค่าหน้าและสร้างการนําทางแบบไดนามิก เมื่อคุณเพิ่มการกําหนดค่าหน้าใหม่การนําทางจะอัปเดตโดยอัตโนมัติเพื่อให้มั่นใจได้ว่าประสบการณ์ของผู้ใช้มีความสม่ําเสมอโดยไม่มีความพยายามด้วยตนเอง 2.1.1.2 ค่าใช้จ่ายของ URL แบบไดนามิกสําหรับผู้ช่วย AI: ความสามารถในการปรับขนาดเนื้อหาที่ไม่มีที่สิ้นสุด ในสภาพแวดล้อมการแข่งขันของวันนี้แพลตฟอร์ม SaaS และ AI แบบสมัยใหม่ต้องการความยืดหยุ่นในการสร้างหน้าเว็บใหม่โดยเร็ว ไม่ว่ามันจะถูกเปิดตัวโดยผู้ใช้ผู้ดูแลระบบหรือตัวแทน AI อัตโนมัติเนื้อหาจะต้องได้รับการออกแบบมาเพื่อการสร้างและการใช้งานทันที อาร์คไทเทเนียมการกําหนดเส้นทางของเราเป็นเครื่องมือที่ขับเคลื่อนความสามารถนี้ Strategic Business Advantages: ลบข้อ จํากัด ของสถาปัตยกรรม: ลบข้อ จํากัด ทั้งหมดเกี่ยวกับโครงสร้างเนื้อหาและความลึกของรังสีช่วยให้การปรากฏตัวดิจิตอลของคุณสามารถขยายขนาดได้โดยไม่จําเป็นต้องมีการเปลี่ยนแปลงรหัส Unlocks Unmatched Agility: สร้างลําดับพื้นฐานของเนื้อหาที่ซับซ้อนสําหรับกรณีการใช้งานใด ๆ การนําทางจะถูกขับเคลื่อนโดยกลยุทธ์ทางธุรกิจของคุณโดยไม่ถูก จํากัด โดยระบบไฟล์ที่แข็งแกร่ง สิ่งนี้จะแยกแยะกลยุทธ์เนื้อหาของคุณออกจากวงจรวิศวกรรมช่วยให้ทีมผลิตภัณฑ์และการตลาดสามารถดําเนินการได้เร็วขึ้น This architecture is designed for an AI-first world. It provides a stable foundation for AI agents to autonomously generate, configure, and deploy entire sections of your site, from product catalogs to knowledge bases. Enables AI-Powered Automation: 2.1.3. กรณีการใช้งานในโลกจริงในขนาด สถาปัตยกรรมนี้ไม่ได้เป็นทางทฤษฎี แต่เป็นรูปแบบที่ผ่านการทดสอบเพื่อใช้โครงสร้างเนื้อหาที่มีมูลค่าสูงและมีร่องลึกซึ่งจะกระตุ้นการเติบโตของธุรกิจ: ระบบเมนู QR เคล็ดลับ: ใช้โซลูชั่น White-label สําหรับร้านอาหารระดับชาติ แต่ละสถานที่สามารถมีเมนูที่ไม่ซ้ํากันและแบ่งประเภทอย่างลึกซึ้ง (เช่น /public/menu/dallas-tx/dinner/mains/pasta-dishes) ทั้งหมดในขณะที่รักษาความสอดคล้องกับแบรนด์ที่สมบูรณ์แบบและความสมบูรณ์แบบของ UX แคตตาล็อกผลิตภัณฑ์อีคอมเมิร์ซ: เปิดตัวสายผลิตภัณฑ์ที่ครอบคลุมด้วยความแตกต่างที่ไม่มีที่สิ้นสุดทันที URL เช่น /public/shop/apparel/mens/jackets/leather/fall-2025/black/sku-12345 จะกลายเป็นเรื่องเล็ก ๆ น้อยที่จะสร้างและจัดการซึ่งจะช่วยให้การขยายตัวของตลาดอย่างรวดเร็วและองค์กรผลิตภัณฑ์ที่ละเอียดอ่อน พอร์ทัลองค์กรและการศึกษา: สร้างฐานความรู้ที่กว้างขวางหรือแพลตฟอร์มการสอนที่สามารถจัดระเบียบเนื้อหาได้โดยไม่คํานึงถึงความลึกของลําดับพื้นฐาน (เช่น /public / tutorials / enterprise-ai / onboarding / module-3 / advanced-prompting) ##### 2.1.1.4 วิธีทํางาน: เครื่องมือของเนื้อหาตามความต้องการ ขั้นตอนหลักของกระบวนการนั้นเรียบง่าย แต่มีประสิทธิภาพ: มันแปลเส้นทาง URL ใด ๆ ไปยังการกําหนดค่าหน้าเว็บที่สอดคล้องกันซึ่งจะถูก rendered บน fly นี่คือพื้นฐานทางเทคนิคที่ปลดล็อคความยืดหยุ่นทางธุรกิจที่อธิบายไว้ข้างต้น งานหลักขององค์ประกอบคือ: It captures the incoming URL path as an array of segments (e.g., ). Receive the URL: ["category", "nike", "sneakers"] The function proactively reads your file. It informs Next.js of all valid page routes defined in your configuration. For the business, this translates to comprehensive Static Site Generation (SSG), ensuring every page is pre-built for lightning-fast load times and optimal SEO. Generate Static Paths: generateStaticParams public-pages-config.ts export async function generateStaticParams() { const pages: PageConfig[] = getAllPublicPages(); return pages.map((page: PageConfig) => ({ slug: page.metadata.slug ? page.metadata.slug.slice(1) : [], })); } When a user requests a URL, the component receives the array. It then uses the utility to perform a high-speed lookup against the configuration array (prepending for an accurate match). If a match is found, the configuration is passed to our universal component for rendering. Fetch and Render: slug getPageBySlug "public" PageHtmlTransformer export default async function PublicDynamicSlugPage({ params }: Props) { const resolvedParams = await params; const slugArr = resolvedParams.slug ?? []; const pageConfig = getPageBySlug(["public", ...slugArr]); if (!pageConfig) { return Page not found; } return ; } เพราะว่า สามารถมีความยาวใด ๆ และการมองเห็นเป็นความตรงกันข้ามโดยตรงระบบนี้ให้ความลึกที่ไม่มีที่สิ้นสุดโดยไม่มีความเสี่ยงต่อการขัดแย้งทางเส้นทาง slugArr 2.1.5. ฟังก์ชั่นที่สําคัญและผลกระทบทางธุรกิจของพวกเขา : Drives by telling Next.js which generateStaticParams Performance & SEO 2.1.1.7. The Component: The Execution Engine This component is the engine that brings our AI-powered architecture to life. It's a single, powerful Next.js Server Component that acts as a universal handler for every dynamically generated public page. It is responsible for fetching the correct page configuration based on the URL and orchestrating the final render, ensuring both maximum performance and out-of-the-box SEO compliance. // @/app/@right/public/(_routing)/[[...slug]]/page.tsx import { PageHtmlTransformer } from "@/app/@right/(_service)/(_components)/page-transformer-components/page-html-transformer"; import { getPageBySlug } from "@/app/@right/(_service)/(_config)/pages-config"; import { constructMetadata } from "@/lib/construct-metadata"; import type { PageConfig } from "@/app/@right/(_service)/(_types)/page-wrapper-types"; import { getAllPublicPages } from "../../(_servise)/(_libs)/get-all-public-pages"; interface Props { params: Promise<{ slug?: string[] }>; } export async function generateStaticParams() { const pages: PageConfig[] = getAllPublicPages(); return pages.map((page: PageConfig) => ({ slug: page.metadata.slug || [], })); } export async function generateMetadata({ params }: Props) { const resolvedParams = await params; const slugArr = resolvedParams.slug ?? []; const pageConfig = getPageBySlug(["public", ...slugArr]); if (!pageConfig) return {}; return constructMetadata(pageConfig.metadata); } export default async function PublicDynamicSlugPage({ params }: Props) { const resolvedParams = await params; const slugArr = resolvedParams.slug ?? []; const publicPageConfig = getPageBySlug(["public", ...slugArr]); if (!publicPageConfig) { return <div>Page not found</div>; } return <PageHtmlTransformer data={publicPageConfig} />; } เข้าสู่โหมดหน้าจอเต็ม Exit โหมดหน้าจอเต็ม 2.1.1.7. The Bottom Line: Catch-All Routes as Your AI Content Engine Combining catch-all routes with a centralized page configuration creates an architecture that is maximally flexible, extensible, and purpose-built for AI-driven content orchestration. This approach is friendly to both developers and AI agents, creating a seamless workflow from concept to deployment. The core principle is simple but transformative: ไม่มีไฟล์โค้ดใหม่ไม่มีโครงสร้างโฟลเดอร์ที่ซับซ้อน ระบบการนําทางและ rendering จะปรับตัวโดยอัตโนมัติทําให้เป็นรากฐานของแพลตฟอร์มที่เคลื่อนไหวด้วย AI ที่ยืดหยุ่นและสามารถปรับขนาดได้ A new page is just a new entry in a configuration file. 2.1.3. FullScreenWrapper vs. Wrapper: Crafting Immersive Full-Screen Experiences 2.1.3.1 วัตถุประสงค์หลัก โซ ได้รับการออกแบบมาเป็นพิเศษสําหรับส่วนที่ต้องการการนําเสนอแบบเต็มหน้าจอแบบ immersive ด้วยการสนับสนุนวิดีโอหรือภาพในพื้นหลัง มันทําหน้าที่เป็นภาชนะพื้นฐานสําหรับส่วน "ฮีโร่" ซึ่งมีเนื้อหาที่ครอบคลุมอย่างหรูหราบนองค์ประกอบสื่อที่อุดมไปด้วย FullScreenWrapper 2.1.3.2 เคลือบสถาปัตยกรรม The component uses a sophisticated layered structure to ensure content remains legible and visually distinct from the background. Technical Highlights: : Guarantees the section fills the entire viewport height, creating a captivating, full-bleed effect. min-h-screen Positioning: Enables precise control for stacking elements. relative z-index / ): Positioned with and to sit behind all other content. Background Elements ( video img absolute z-0 : Uses positioning with to ensure it always appears above the background. Content Container relative z-10 <section className="relative flex min-h-screen flex-col py-10 lg:py-14 bg-background"> {backgroundElement} // z-0 <div className="relative z-10 flex flex-col flex-1"> {children} // Header → Body → Footer </div> </section> Enter fullscreen mode Exit fullscreen mode 2.1.3.3 การปรับแต่งและการขยายตัว The ออกแบบมาเพื่อการปรับแต่งที่ง่าย คุณสามารถเพิ่มผลภาพที่ซับซ้อนได้โดยตรงผ่านทาง ปลั๊ก FullScreenWrapper className <FullScreenWrapper className="bg-gradient-to-br from-blue-900 to-purple-900"> เข้าสู่โหมดหน้าจอเต็ม Exit โหมดหน้าจอเต็ม : Background videos automatically receive an class to improve text readability, but this can be easily overridden. Opacity Control opacity-40 การเปลี่ยนแปลงที่ราบรื่น: การเปลี่ยนแปลงทุกระยะเวลา 500 ชั้นจะถูกสร้างขึ้นเพื่อให้มั่นใจได้ถึงการเปลี่ยนแปลงที่ราบรื่นในคุณสมบัติพื้นหลัง 2.1.3.4. Advanced Styling and Reusable Templates When you need section dividers, borders, glow effects, or background blurs, the provides the ideal foundation for implementing these styles. This makes it perfect for creating highly stylized, reusable templates. FullScreenWrapper typescript <FullScreenWrapper className="border-t-4 border-gradient bg-blur-effect"> Enter fullscreen mode Exit fullscreen mode 2.1.3.5 ส่วนประกอบ // @/app/@right/(_service)/(_components)/page-transformer-components/wrappers/full-screen-wrapper.tsx import React, { HTMLAttributes } from "react"; import { cn } from "@/lib/utils"; interface FullScreenWrapperProps extends HTMLAttributes<HTMLDivElement> { videoUrl?: string; imageUrl?: string; className?: string; children: React.ReactNode; } export function FullScreenWrapper({ videoUrl, imageUrl, className, children, ...props }: FullScreenWrapperProps) { let backgroundElement: React.ReactNode = null; if (videoUrl) { backgroundElement = ( <video className="absolute inset-0 size-full object-cover z-0 opacity-40 transition-all duration-500" autoPlay loop muted playsInline src={videoUrl} /> ); } else if (imageUrl) { backgroundElement = ( <img className="absolute inset-0 size-full object-cover z-0" src={imageUrl || "/placeholder.svg"} alt="Background" /> ); } return ( <section className={cn( "relative flex min-h-screen flex-col py-10 lg:py-14 bg-background", className )} {...props} > {backgroundElement} <div className="relative z-10 flex flex-col flex-1">{children}</div> </section> ); } เข้าสู่โหมดหน้าจอเต็ม Exit โหมดหน้าจอเต็ม 2.1.4. Wrapper: คอนเทนเนอร์ส่วนมาตรฐาน 2.1.4.1 กรณีการใช้งานหลัก The เป็นคอนเทนเนอร์เริ่มต้นสําหรับส่วนใหญ่ของส่วนเนื้อหา มันถูกออกแบบมาเพื่อให้การปัดมาตรฐานการมุ่งเน้นเนื้อหาและการวางแผนที่สอดคล้องกันและคาดการณ์ได้สําหรับบล็อกข้อมูล Wrapper 2.1.4.2 โครงสร้างและรูปแบบ typescript <section className="py-10 lg:py-14 bg-background"> <div className="container mx-auto px-4"> {children} // Header → Body → Footer </div> </section> เข้าสู่โหมดหน้าจอเต็ม Exit โหมดหน้าจอเต็ม โครงสร้างส่วนประกอบที่เรียบง่ายและเพิ่มประสิทธิภาพโดยใช้คลาส CSS Tailwind ที่สําคัญบางอย่าง: py-10 lg:py-14: ใช้การวางแนวตั้งแบบตอบสนองเพื่อให้สามารถแยกพื้นที่ระหว่างอุปกรณ์ได้อย่างสม่ําเสมอ คอนเทนเนอร์ mx-auto px-4: สร้างคอนเทนเนอร์กลางความกว้างสูงสุดด้วยการวางแนวนอนเพื่อให้แน่ใจว่าเนื้อหามีความสอดคล้องและสามารถอ่านได้ bg-background: ใช้ตัวแปร CSS ของธีมปัจจุบันสําหรับสีพื้นหลังเพื่อให้แน่ใจว่าการรวมกันได้อย่างราบรื่นกับโหมดแสง / มืด 2.1.4.3. Customization Points While minimalist by design, the เป็นพื้นฐานที่ยืดหยุ่นสําหรับการออกแบบที่กําหนดเองผ่านทาง prop. It's the perfect base for adding: Wrapper className สีพื้นหลังที่กําหนดเองหรือเอฟเฟกต์เกรด ขอบเขตหรือส่วนแบ่งระหว่างส่วน การปรับปรุงภาพที่ละเอียดอ่อนเช่นผลลัพธ์ Blur หรือ Glow 2.1.4.4 สร้างเทมเพลตที่สามารถใช้ซ้ําได้ typescript // Пример для pricing-секций <Wrapper className="bg-gradient-to-br from-green-50 to-green-100 border-2 border-green-200"> <HeaderSection /> <PricingTable /> <FooterSection /> </Wrapper> Enter fullscreen mode Exit fullscreen mode When your design calls for a template with unique styling but a standard, centered content structure, is the ideal choice. It provides the structural backbone, allowing you to focus on the specific styles of the template. Wrapper 2.1.4.5 ส่วนประกอบ // app/@right/(_service)/(_components)/page-transformer-components/wrappers/wrapper.tsx import React, { HTMLAttributes } from "react"; import { cn } from "@/lib/utils"; interface WrapperProps extends HTMLAttributes<HTMLDivElement> { className?: string; children: React.ReactNode; } export function Wrapper({ className, children, ...props }: WrapperProps) { return ( <section className={cn("py-10 lg:py-14 bg-background", className)} {...props} > <div className="container mx-auto px-4">{children}</div> </section> ); } เข้าสู่โหมดหน้าจอเต็ม Exit โหมดหน้าจอเต็ม 2.1.5. page-wrapper-types.ts: The AI-to-UI TypeScript Contract 2.1.5.1. The Core Contract: Bridging AI Generation and UI Rendering The file establishes a formal, strictly-typed contract between our AI content generator and the UI rendering system. This contract is fundamental to our architecture, defining the structure of all possible page components and the rules governing their interactions to ensure seamless integration and predictability. page-wrapper-types.ts 2.1.5.2. หมวดหมู่ SectionType และ AI-Driven Generation รูปแบบการดําเนินงานของ AI จะมุ่งเน้นไปที่ enum. First, the AI analyzes the available section types defined within this enum. Then, based on the user's request, it strategically selects which sections to assemble for a given page. To facilitate fully autonomous and high-quality content generation, the AI's knowledge base must be populated with comprehensive instructions and diverse examples for each of the 25+ section types. SectionType typescript export type SectionType = | "hero-section" | "cta-section" | "faq-section" | "features-section" | "testimonials-section" | "pricing-section" เข้าสู่โหมดหน้าจอเต็ม Exit โหมดหน้าจอเต็ม 2.1.5.3 การเพิ่มประสิทธิภาพ SEO และข้อมูลเมตา The อินเตอร์เฟซให้แน่ใจว่าการสร้างแท็กเมตาตามมาตรฐานซึ่งเป็นสิ่งสําคัญสําหรับการเพิ่มประสิทธิภาพเครื่องมือค้นหา (SEO) แท็กเมตาจะถูกสร้างขึ้นโดยอัตโนมัติผ่านทาง function. This function retrieves data from the page configuration and passes it to the utility, which in turn constructs well-formed HTML headers. PageMetadata generateMetadata() constructMetadata() typescript export interface PageMetadata { id: string; // Уникальный идентификатор title: string; // <title> тег для SEO description: string; // <meta description> для сниппетов image?: string; // Open Graph изображение slug?: string[]; // URL-структура страницы type: SectionType; // Тип основной секции } เข้าสู่โหมดหน้าจอเต็ม Exit โหมดหน้าจอเต็ม 2.1.5.4. HeaderContentConfig: การจัดการ SEO เสาธิต Managing the heading hierarchy is critical for on-page SEO. The ชิ้นส่วนเป็นตัวเลือก นี่คือการเลือกการออกแบบด้วยความมุ่งมั่นเนื่องจากประเภทส่วนบางอย่างอาจรวม / tags โดยตรงภายในของพวกเขา . While this provides flexibility, it introduces a potential risk to UI consistency, which is a primary objective of this architecture. Careful implementation is required to maintain a logical and SEO-friendly document structure. A note of caution: Header H1 H2 bodyContent typescript interface HeaderContentConfig { heading: string; headingLevel?: 1 | 2; // H1/H2 для поисковой иерархии description?: string; showBorder?: boolean; } Enter fullscreen mode Exit fullscreen mode 2.1.5.5. BodySection: Enabling Maximum Design Freedom typescript bodyContent?: React.ReactNode; Enter fullscreen mode Exit fullscreen mode โดยการออกแบบร่างกายของส่วนได้รับการอนุญาตให้มีอิสระอย่างสมบูรณ์ในการประยุกต์ใช้การวางแผนหรือการออกแบบใด ๆ ทางเลือกทางสถาปัตยกรรมนี้ช่วยให้มีความยืดหยุ่นในการสร้างสรรค์สูงสุดช่วยให้ AI สามารถสร้างเนื้อหาที่อุดมสมบูรณ์และหลากหลาย วิธีนี้ตรงกันข้ามกับ and , which are standardized to maintain a consistent look and feel across the entire application. Header Footer typescript interface FooterContentConfig { actions?: { label: string; href: string; variant?: "default" | "secondary" | "outline" | "ghost" | "link"; }[]; } Enter fullscreen mode Exit fullscreen mode 2.1.5.6. FooterContentConfig: วิธีการขั้นต่ํา การประยุกต์ใช้ Footer ปัจจุบันเป็นขั้นต่ําอย่างมีนัยสําคัญ มันสนับสนุนเพียงปุ่ม Call-to-Action ที่เป็นตัวเลือกเท่านั้น ไม่มีองค์ประกอบเพิ่มเติมรวมอยู่ซึ่งเป็นการตัดสินใจที่จะให้ความสําคัญกับความเรียบง่ายความเร็วและความสม่ําเสมอในทุกหน้าที่สร้างขึ้น 2.1.5.7. Principles for Extending Type Definitions เพื่อแนะนําใหม่ , the following steps must be taken: SectionType การอัปเดตความรู้ AI: ฐานความรู้ของ AI ควรได้รับการอัปเดตด้วยคําแนะนําและตัวอย่างที่ครอบคลุมสําหรับประเภทส่วนใหม่ The new type must be added to the enum. Extend Enum: SectionType If the new section requires unique configuration parameters, the corresponding configuration interface must be extended. Expand Interfaces: This process strikes a crucial architectural balance: the and are strictly typed to enforce SEO best practices and UI consistency, while the offers maximum flexibility for innovative, AI-driven design solutions. Header Footer Body 2.1.5.8. Component // app/@right/(_service)/(_types)/page-wrapper-types.ts export interface MetadataConfig { title?: string; description?: string; } export interface PageMetadata { id: string; title: string; description: string; image?: string; slug?: string[]; type: SectionType; } export type SectionType = | "hero-section" | "cta-section" | "faq-section" | "features-section" | "testimonials-section" | "pricing-section" | "contact-section" | "blog-posts-section" | "product-grid-section" | "image-gallery-section" | "text-block-section" | "video-section" | "team-section" | "about-us-section" | "newsletter-section" | "social-proof-section" | "comparison-table-section" | "map-section" | "custom-html-section" | "changelog-section" | "comparison-two-column-section" | "comparison-three-column-section" | "feature-showcase-section"; export interface BaseSection { id: string; type: SectionType; className?: string; } export interface HeaderContentConfig { announcement?: { badgeText?: string; descriptionText?: string; href?: string; }; heading: string; headingLevel?: 1 | 2; description?: string; showBorder?: boolean; } export interface FooterContentConfig { actions?: { label: string; href: string; variant?: | "default" | "secondary" | "destructive" | "outline" | "ghost" | "link"; }[]; } export interface SectionConfig extends BaseSection { type: SectionType; headerContent: HeaderContentConfig; bodyContent?: React.ReactNode; footerContent?: FooterContentConfig; videoUrl?: string; imageUrl?: string; sectionClassName?: string; contentWrapperClassName?: string; customComponentsAnyTypeData?: any; } export type Section = SectionConfig; export interface PageConfig { metadata: PageMetadata; sections: Section[]; } export type SlugType = string[]; Enter fullscreen mode Exit fullscreen mode 2.1.5.9. customComponentsAnyTypeData: Supporting Arbitrary Custom Components The field within serves as a powerful "escape hatch." It is designed for passing unstructured data to sections that leverage complex or unique custom components that do not conform to our standard interfaces. customComponentsAnyTypeData?: any; SectionConfig เพื่อรักษาความสมบูรณ์ของสถาปัตยกรรมประเภทและโครงสร้างของข้อมูลเหล่านี้ต้องได้รับการกําหนดและเอกสารอย่างเข้มงวด . This design choice provides the necessary flexibility to integrate highly interactive, dynamic, and advanced user-facing sections without compromising the core typing contract of the main page architecture. within the custom component itself 2.1.6. public-pages-config.ts: The Public Page and Slug Route Registry 2.1.6.1 บทบาทในสถาปัตยกรรมระบบ The ไฟล์เป็นบันทึกที่สร้างขึ้นโดย AI ของทุกหน้าที่เปิดเผยสาธารณะภายในแอปพลิเคชัน การกําหนดค่านี้ถูกสร้างขึ้นโดยอัตโนมัติโดย AI ของเราตามคําแนะนําระบบและคําแนะนําของผู้ใช้ โครงสร้างของมันได้รับผลกระทบโดยตรงจากส่วนประกอบที่มีอยู่ในตัวอย่างฐานความรู้ของเราและรายการภายใน definitions. public-pages-config.ts SectionType The resulting configuration acts as a bridge, translating the AI's analysis of user requirements into a structure that our page rendering system can interpret and display. 2.1.6.2. When to Use This File-Based Configuration This approach is ideal for: โครงการที่มีจํานวนหน้านี้ จํากัด (ปกติ 10-15) Websites with static content that requires infrequent updates. การสร้างต้นแบบอย่างรวดเร็วและผลิตภัณฑ์ที่ใช้งานได้น้อยที่สุด (MVPs) ช่วยให้สามารถเริ่มต้นได้อย่างรวดเร็วโดยไม่ต้องติดตั้งฐานข้อมูล หน้าปลายทางที่มีโครงสร้างที่กําหนดไว้ล่วงหน้า When to Transition to a Database: For large-scale production applications, a file-based approach is only practical for a small set of pages. Most scenarios will benefit from storing this information in a database to enable dynamic content management and scalability. 2.1.6.3. Configuration Structure typescript export const PublicPagesConfig = { pages: [ { metadata: { id: "public", title: "Enterprise-Grade AI Next.js starter", description: "Free Open-Source starter kit...", slug: ["public", "test"], type: "hero-section", }, sections: [ { id: "test-block", type: "hero-section", headerContent: { /* SEO-заголовки */ }, bodyContent: {}, footerContent: { /* Кнопки действий */ }, videoUrl: "/_static/video/ai-loop.mp4", contentWrapperClassName: "text-white", } as SectionConfig, ], }, ] as PageConfig[], }; เข้าสู่โหมดหน้าจอเต็ม Exit โหมดหน้าจอเต็ม 2.1.6.4. Configuration Categorization Principle การวางไฟล์การกําหนดค่าใน directory signifies its role in managing public-facing pages. Key Architectural Decision: public/(_service)/(_config)/ Scaling by Category: Our architecture supports scaling by categorizing configurations, ensuring a clean and organized structure: — for public pages (e.g., landing, about, contact). public-pages-config.ts — for documentation sites with advanced navigation. docs-pages-config.ts — for administrative dashboards. admin-pages-config.ts blog-pages-config.ts – สําหรับบล็อกโพสต์และบทความ Each category is designed to have its own: ไฟล์การกําหนดค่าเฉพาะ Specialized section types. แสดงโลโก้ที่ไม่ซ้ํากัน 2.1.6.5. Interaction with the AI Generation System For our AI system, this configuration file serves as: Defining how objects should be formed. A structural template: PageConfig Providing reference values for the generation process. A data example: Enforced by TypeScript for strict type safety. A type validation schema: The workflow is as follows: AI จะวิเคราะห์ไฟล์การกําหนดค่าที่มีอยู่ It generates a new object based on the user's prompt. PageConfig A developer then adds the new configuration to the array. pages ระบบจะระบุและบันทึกเส้นทางใหม่โดยอัตโนมัติ 2.1.6.6. Advantages and Limitations Advantages of the File-Based Approach: การควบคุมเวอร์ชัน: จัดการและเวอร์ชันได้อย่างง่ายดายผ่าน Git Benefits from compile-time type safety with TypeScript. Type Safety: No database queries result in faster page loads. Zero Latency: การใช้งานที่เรียบง่าย: ทํางานได้อย่างราบรื่นกับ Static Site Generation (SSG) Limitations: ไม่มีการอัปเดตแบบไดนามิก: ไม่มีคุณสมบัติการจัดการเนื้อหาแบบไดนามิก Any change necessitates a new build and deployment. Requires Redeployment: Unsuitable for user-generated content. Not for UGC: ความกังวลเกี่ยวกับความยืดหยุ่น: มันเป็นเรื่องยากที่จะจัดการมากกว่า 20-30 หน้า 2.1.6.7. Component // @/app/@right/public/(_servise)/(_config)/public-pages-config.ts import { PageConfig, SectionConfig, } from "@/app/@right/(_service)/(_types)/page-wrapper-types"; export const PublicPagesConfig = { pages: [ { metadata: { id: "public", title: "Enterprise-Grade AI Next.js starter", description: "Free Open-Source starter kit...", slug: ["public", "test"], type: "hero-section", }, sections: [ { id: "test-block", type: "hero-section", headerContent: { announcement: { badgeText: "Thanks", descriptionText: "AI-SDK V5 & Vercel AI", href: "https://github.com/aifa-agi/aifa", }, heading: "Enterprise-Grade AI Next.js starter", description: "Free Open-Source starter kit to build, deploy, and scale intelligent AI applications. Artifacts Feature, features secure multi-provider auth, Stripe payments, vector knowledge bases, deep-research agents, and a unique fractal architecture designed for the future of AI.", showBorder: false, headingLevel: 1, }, bodyContent: {}, footerContent: { actions: [ { label: "Get Started", href: "/https://github.com/aifa-agi/aifa", variant: "default", }, { label: "Browse Docs", href: "/docs", variant: "ghost" }, ], }, videoUrl: "/_static/video/ai-loop.mp4", contentWrapperClassName: "text-white", } as SectionConfig, ], }, ] as PageConfig[], }; Enter fullscreen mode Exit fullscreen mode 2.1.6.8. Conclusion เป็นโซลูชั่นที่ใช้งานได้สําหรับโครงการขนาดเล็กถึงขนาดกลางซึ่งให้ความสมดุลระหว่างความสะดวกในการจัดการและฟังก์ชั่น สําหรับแอพพลิเคชันขนาดใหญ่ก็เป็นจุดเริ่มต้นที่ยอดเยี่ยมก่อนที่จะเปลี่ยนไปสู่สถาปัตยกรรมฐานข้อมูลที่ทนทานมากขึ้น public-pages-config.ts 2.1.7. utils.ts: Configuration Utility Functions This module provides utility functions for managing page configurations. It includes two primary functions: , which filters all pages with the "public" prefix for static generation, and ซึ่งวางตําแหน่งหน้าที่เฉพาะเจาะจงโดยการจับคู่ที่แม่นยําและเป็นกรณีของแถบ Slug getAllPublicPages() getPageBySlug() // @app/@right/public/(_servise)/(_libs)/utils.ts import { PageConfig, SlugType, } from "@/app/@right/(_service)/(_types)/page-wrapper-types"; import { PublicPagesConfig } from "../(_config)/public-pages-config"; export function getAllPublicPages(): PageConfig[] { return PublicPagesConfig.pages.filter( (page: PageConfig) => page.metadata.slug?.[0] === "public" ); } export function getPageBySlug(slug: SlugType): PageConfig | undefined { return PublicPagesConfig.pages.find( (page: PageConfig) => JSON.stringify( page.metadata.slug?.map((s: string) => s.toLowerCase()) ) === JSON.stringify(slug.map((s: string) => s.toLowerCase())) ); } เข้าสู่โหมดหน้าจอเต็ม Exit โหมดหน้าจอเต็ม 2.1.8. header-section.tsx: Header ส่วนรวม ส่วนประกอบมาตรฐานนี้ทําหน้าที่เป็นหัวหน้าสากลสําหรับประเภทส่วนทั้งหมดเพื่อให้มั่นใจได้ถึงความสม่ําเสมอทั่วแอปพลิเคชัน มันมีองค์ประกอบเสริมเช่นประกาศหัวหน้า H1/H2 และคําอธิบาย ส่วนประกอบนี้มีบทบาทสําคัญในการเพิ่มประสิทธิภาพ SEO และรักษาความสม่ําเสมอภาพสําหรับหน้าเว็บที่สร้างขึ้นโดย AI // @/app/@right/(_service)/(_components)/page-transformer-components/header-sections-components/header-section.tsx import React from "react"; import { cn } from "@/lib/utils"; import { PageHeaderDescription, PageHeaderHeading, } from "./page-header-elements"; import { Announcement } from "./announcement"; import { HeaderContentConfig } from "../../../(_types)/page-wrapper-types"; export type HeaderSectionProps = { headerContent: HeaderContentConfig; } & React.HTMLAttributes<HTMLDivElement>; export function HeaderSection({ headerContent, className, ...props }: HeaderSectionProps) { if (!headerContent) return null; const { announcement, heading, headingLevel = 1, description, showBorder = false, } = headerContent; return ( <section className={cn( showBorder && "border-t-4 border-b-4 border-primary", className )} {...props} > <div className="container mx-auto px-4"> <div className="flex flex-col items-center gap-1 py-8 md:py-10 lg:py-12"> {announcement && ( <Announcement badgeText={announcement.badgeText} descriptionText={announcement.descriptionText} href={announcement.href} /> )} <PageHeaderHeading level={headingLevel}>{heading}</PageHeaderHeading> {description && ( <PageHeaderDescription>{description}</PageHeaderDescription> )} </div> </div> </section> ); } เข้าสู่โหมดหน้าจอเต็ม Exit โหมดหน้าจอเต็ม 2.1.9. header-section.tsx: Unified Section Header (อะตอมส่วนประกอบ) This section details the atomic components used to construct headers: (สนับสนุน H1 / H2) สําหรับหัวข้อและ สําหรับการวางปุ่ม ส่วนประกอบเหล่านี้ใช้ for dynamic HTML tag generation, ensuring correct SEO hierarchy. PageHeaderHeading PageHeaderDescription PageActions createElement // @app/@right/(_service)/(_components)/page-transformer-components/header-sections-components/page-header-elements.tsx import { HTMLAttributes, createElement } from "react"; import { cn } from "@/lib/utils"; type HeadingTag = "h1" | "h2"; interface PageHeaderHeadingProps extends HTMLAttributes<HTMLHeadingElement> { level?: 1 | 2; } function PageHeaderHeading({ className, level = 1, ...props }: PageHeaderHeadingProps) { const Heading: HeadingTag = level === 1 ? "h1" : "h2"; const h1Classes = "text-2xl sm:text-3xl md:text-6xl lg:text-7xl"; const h2Classes = "text-lg sm:text-xl md:text-3xl lg:text-4xl"; return createElement(Heading, { className: cn( "text-center font-bold leading-tight tracking-tighter font-serif", level === 1 ? h1Classes : h2Classes, className ), ...props, }); } function PageHeaderDescription({ className, ...props }: HTMLAttributes<HTMLParagraphElement>) { return ( <p className={cn( "max-w-2xl text-balance text-center text-base font-light text-muted-foreground sm:text-lg", className )} {...props} /> ); } function PageActions({ className, ...props }: HTMLAttributes<HTMLDivElement>) { return ( <div className={cn( "flex w-full items-center justify-center gap-2 pt-2", className )} {...props} /> ); } export { PageActions, PageHeaderDescription, PageHeaderHeading }; Enter fullscreen mode Exit fullscreen mode 2.1.10. announcement.tsx: ส่วนประกอบการแจ้งเตือน ส่วนประกอบแท็กแบบโต้ตอบนี้ได้รับการออกแบบมาสําหรับการแจ้งเตือนและแจ้งเตือน สนับสนุนการนําทางการควบคุมแป้นพิมพ์และการแสดงเงื่อนไขโดยอัตโนมัติเมื่อไม่มีเนื้อหา ใช้เพื่อดึงดูดความสนใจต่อการอัปเดตหรือลิงก์ที่สําคัญ // @app/@right/(_service)/(_components)/page-transformer-components/header-sections-components/announcement.tsx "use client"; import { useRouter } from "next/navigation"; import { Badge } from "@/components/ui/badge"; import { ArrowRight } from "lucide-react"; import { cn } from "@/lib/utils"; interface AnnouncementProps { badgeText?: string; descriptionText?: string; href?: string; className?: string; } export function Announcement({ badgeText, descriptionText, href, className, }: AnnouncementProps) { const router = useRouter(); const handleOnClick = () => { if (href) { router.push(href); } }; // Если нет текста для бейджа, описания или ссылки, возвращаем null if (!badgeText && !descriptionText && !href) { return null; } return ( <div className={cn( "flex cursor-pointer items-center gap-2 rounded-full border border-primary bg-muted px-3 py-1 text-sm transition-colors hover:bg-muted/80", className )} onClick={handleOnClick} role="link" tabIndex={0} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { handleOnClick(); } }} > {badgeText && ( <Badge variant="secondary" className="text-xs"> {badgeText} </Badge> )} {descriptionText && ( <span className="text-muted-foreground">{descriptionText}</span> )} {href && <ArrowRight className=" h-3 w-3 text-muted-foreground" />} </div> ); } เข้าสู่โหมดหน้าจอเต็ม Exit โหมดหน้าจอเต็ม 2.1.11. footer-section.tsx: การกระทําส่วนรวม This standardized footer component includes action buttons. It supports multiple buttons with various styling options, ensuring uniformity of Call-to-Action (CTA) elements across all sections. It automatically hides when no actions are defined. // @app/@right/(_service)/(_components)/page-transformer-components/footer-sections-components/footer-section.tsx "use client"; import { useRouter } from "next/navigation"; import type { HTMLAttributes } from "react"; import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/button"; import { PageActions } from "../header-sections-components/page-header-elements"; interface FooterAction { label: string; href: string; variant?: | "default" | "secondary" | "destructive" | "outline" | "ghost" | "link"; } interface FooterSectionProps extends HTMLAttributes<HTMLDivElement> { actions?: FooterAction[]; } export function FooterSection({ actions, className, ...props }: FooterSectionProps) { const router = useRouter(); if (!actions || actions.length === 0) { return null; } return ( <section className={cn("py-4 md:py-6 lg:py-8", className)} {...props}> <div className="container mx-auto px-4"> <PageActions> {actions.map((action) => ( <Button key={action.href} // href должен быть уникальным! size="sm" variant={action.variant || "default"} onClick={() => router.push(action.href)} > {action.label} </Button> ))} </PageActions> </div> </section> ); } Enter fullscreen mode Exit fullscreen mode 2.1.12. body-section.tsx: คอนเทนเนอร์เนื้อหาใด ๆ 2.1.12.1 วัตถุประสงค์และปรัชญา ทํางานเป็นภาชนะที่มีความยืดหยุ่นสูงสําหรับเนื้อหาหลักภายในส่วน ซึ่งแตกต่างจากส่วนประกอบ Header และ Footer ที่มีมาตรฐานอย่างเข้มงวด provides complete freedom for placing any React content. BodySection BodySection 2.1.12.2 หลักการสร้างเนื้อหา ความสุขสําหรับ must be generated as plain TSX without using องค์ประกอบซึ่งองค์ประกอบทั้งหมดจะนําเสนอในรูปแบบที่ขยาย Crucially: bodyContent .map() typescript // ✅ bodyContent: ( <> <div className="grid grid-cols-1 md:grid-cols-3 gap-6"> <div className="feature-card"> <h3>Feature 1</h3> <p>Description 1</p> </div> <div className="feature-card"> <h3>Feature 2</h3> <p>Description 2</p> </div> <div className="feature-card"> <h3>Feature 3</h3> <p>Description 3</p> </div> </div> </> ) เข้าสู่โหมดหน้าจอเต็ม Exit โหมดหน้าจอเต็ม // ❌ bodyContent: ( <div className="grid"> {features.map(feature => <FeatureCard key={feature.id} {...feature} />)} </div> ) Enter fullscreen mode Exit fullscreen mode 2.1.12.3. When to Use Custom Components หากส่วนต้องใช้กลยุทธ์ที่ซับซ้อน (สถานะผลการโต้ตอบ) สร้างส่วนประกอบที่เป็นอิสระและเพิ่มไปยัง as a separate entity. PageHtmlTransformer typescript // @/app/@right/(_service)/(_components)/page-transformer-components/body-sections-components/body-section.tsx export function BodySection({ children, className, ...props }: BodySectionProps) { const hasChildren = children !== null && children !== undefined && !(Array.isArray(children) && children.length === 0) && !(typeof children === "string" && children === ""); if (!hasChildren) return null; return ( <div className={cn(className)} {...props}> {children} </div> ); } เข้าสู่โหมดหน้าจอเต็ม Exit โหมดหน้าจอเต็ม 2.1.12.4. Component // @app/@right/(_service)/(_components)/page-transformer-components/body-sections-components/body-section.tsx import type { HTMLAttributes, ReactNode } from "react"; import { cn } from "@/lib/utils"; import { SectionType } from "../../../(_types)/page-wrapper-types"; interface BodySectionProps extends HTMLAttributes<HTMLDivElement> { children?: ReactNode | null; type: SectionType; } export function BodySection({ children, className, ...props }: BodySectionProps) { const defaultHeightRem = 0; const hasChildren = children !== null && children !== undefined && // Covers case when children = [] or "" !(Array.isArray(children) && children.length === 0) && !(typeof children === "string" && children === ""); if (!hasChildren && defaultHeightRem) { return ( <div className={cn(className)} style={{ height: `${defaultHeightRem}rem` }} {...props} > {/* Empty section with default height */} </div> ); } if (!hasChildren) { return null; } return ( <div className={cn(className)} {...props}> {children} </div> ); } เข้าสู่โหมดหน้าจอเต็ม Exit โหมดหน้าจอเต็ม 2.1.12.5 ข้อสรุป ทําหน้าที่เป็นสะพานระหว่างสถาปัตยกรรมมาตรฐานของระบบและความเป็นอิสระในการสร้างสรรค์ของการสร้างอัจฉริยะอัจฉริยะสร้างสมดุลระหว่างการควบคุมและความยืดหยุ่น BodySection 2.2. ส่วนประกอบที่กําหนดเองขั้นสูง Advanced Custom Components are engineered to deliver complex, interactive functionality that extends beyond the capabilities of our standard architectural patterns. These components are reserved for scenarios requiring state management, sophisticated animations, real-time data handling, or unique business logic. When to Use Custom Components: : Forms with validation, calculators, product configurators. Interactive Elements การนําเสนอแบบเคลื่อนไหว: การเปลี่ยนแปลงที่ซับซ้อนเอฟเฟกต์ parallax, สไลด์อัตโนมัติ ฟังก์ชั่นแบบเรียลไทม์: การแชท การแจ้งเตือน การส่งข้อมูลสด : Components with fundamentally different behavior on desktop vs. mobile. Adaptive Logic : Non-standard interface elements specific to the project. Unique UI Patterns Architectural Integration: ส่วนประกอบที่กําหนดเองถูกรวมเข้ากับ as distinct คําอธิบายภายใน A บล็อก วิธีการนี้ช่วยให้พวกเขาสามารถเข้าถึงบรรทัดฐานทั่วระบบเช่นธีมและข้อมูลอุปกรณ์ในขณะที่รักษารูปลักษณ์และความรู้สึกที่สอดคล้องกันผ่านการแชร์คลาส CSS และโทเค็นการออกแบบ แม้ว่าพวกเขาจะสอดคล้องกับภาษาภาพของระบบ แต่พวกเขายังคงเป็นอิสระอย่างสมบูรณ์ในกลยุทธ์ภายในและการใช้งาน กลยุทธ์นี้ให้สมดุลระหว่างการมาตรฐานส่วนใหญ่ของเนื้อหาและอนุญาตให้มีอิสระในการสร้างสรรค์ในการใช้องค์ประกอบการโต้ตอบที่ซับซ้อน PageHtmlTransformer case switch 2.2.1 คําแนะนําสําหรับการใช้งานส่วนประกอบที่กําหนดเอง 2.2.1.1 นโยบาย Wrapper : ชิ้นส่วนที่กําหนดเองต้องถูกส่งกลับโดยตรงโดยไม่ต้องถูกห่อใน หรือ พวกเขาเป็นผู้รับผิดชอบในการจัดการการวางแผนการเคลือบและ layering ของตัวเองเพื่อให้แน่ใจว่าการควบคุมอย่างเต็มที่เกี่ยวกับการนําเสนอของพวกเขา No External Wrappers Wrapper FullScreenWrapper 2.2.1.2 ชิ้นส่วนการพิมพ์ : อินเตอร์เฟซ prop สําหรับส่วนประกอบที่กําหนดเองควรจะประกาศไว้ด้านบนของไฟล์ส่วนประกอบเอง ข้อมูลทั้งหมดจะถูกส่งผ่านจากการกําหนดค่าหน้าไปสู่ส่วนประกอบผ่านทาง field in the section config. Local Prop Interfaces customComponentsAnyTypeData 2.2.1.3 การขยายตัว ประเภทส่วน ประเภทส่วน : องค์ประกอบที่กําหนดเองแต่ละองค์ประกอบต้องมีการเพิ่มประเภทที่ไม่ซ้ํากัน enum in สิ่งนี้ช่วยให้การตรวจสอบประเภทที่เหมาะสมและช่วยให้ คําอธิบายในตัวแปลงเพื่อระบุและ render ส่วนประกอบอย่างถูกต้อง Add a New Section Type SectionType page-wrapper-types.ts switch typescript // @/app/@right/(_service)/(_types)/page-wrapper-types.ts // ... export type SectionType ="hero-section" | “new-custom-section”; Enter fullscreen mode Exit fullscreen mode 2.2.1.4. ปรับปรุงกรณีใน ageHtmlTransformer การประมวลผลกรณีที่กําหนดเองกรณีใหม่จะถูกเพิ่มไปยัง PageHtmlTransformer เพื่อจัดการกับประเภทส่วนที่กําหนดเองโดยตรง // В PageHtmlTransformer: case "new-custom-section": return ( <NewCustomSection key={config.id} customData={section.customComponentsAnyTypeData.customData} /> ); เข้าสู่โหมดหน้าจอเต็ม Exit โหมดหน้าจอเต็ม 2.2.1.5. Custom Config Structure : ต่อไปนี้เป็นตัวอย่างของการกําหนดค่าหน้าซึ่งรวมถึงส่วนที่กําหนดเอง ข้อมูลส่วนประกอบทั้งหมดจะถูกวางไว้ภายใน วัตถุซึ่งสามารถมีโครงสร้างใด ๆ ที่ต้องการโดยส่วนประกอบ Configuration Structure customComponentsAnyTypeData export const PublicPagesConfig = { pages: [ { metadata: { id: "CIUD", title: "1", description: "2", slug: ["public", "name"], type: "new-custom-section", }, sections: [ { id: "new-custom-section", type: "new-custom-section", customComponentsAnyTypeData: { metaData: { metaTitle: "1", metaDescription: "2", }, customData: { mediaUrl: "/_static/illustrations/3.png", title: "4", description: "5", }, }, } as SectionConfig, ], }, ] as PageConfig[], เข้าสู่โหมดหน้าจอเต็ม Exit โหมดหน้าจอเต็ม 2.2.2 ตัวอย่างส่วนประกอบที่กําหนดเอง 2.2.2 หลักฐาน การนําเสนอคู่ การนําเสนอคู่ โซฟา 2.2.1.1 ปรับปรุงประเภทหลัก ก่อนอื่นเพิ่มประเภทส่วนใหม่ไปยัง สัมผัส SectionType typescript // @/app/@right/(_service)/(_types)/page-wrapper-types.ts export type SectionType = | "hero-section" | "cta-section" | "double-presentation-section" เข้าสู่โหมดหน้าจอเต็ม Exit โหมดหน้าจอเต็ม 2.2.1.2 เพิ่มกรณีใหม่ PageHtmlTransformer PageHtmlTransformer ต่อไปให้เพิ่มการสอดคล้อง สอง เพื่อสร้างองค์ประกอบ case PageHtmlTransformer case "double-presentation-section": return ( <DoublePresentation key={section.id} metaData={section.customComponentsAnyTypeData.metaData} leftItem={section.customComponentsAnyTypeData.leftItem} rightItem={section.customComponentsAnyTypeData.rightItem} /> ); เข้าสู่โหมดหน้าจอเต็ม Exit โหมดหน้าจอเต็ม 2.2.1.4 ตัวอย่างการกําหนดค่า นี่คือตัวอย่างของวิธีการกําหนดค่า ส่วนประกอบใน . DoublePresentation public-pages-config.ts // app/@right/(_service)/(_types)/page-wrapper-types.ts export interface MetadataConfig { title?: string; description?: string; } export type CuidString = string; export interface PageMetadata { id: CuidString; title: string; description: string; image?: string; slug?: string[]; type: SectionType; } export type SectionType = | "hero-section" | "cta-section" | "faq-section" | "features-section" | "testimonials-section" | "pricing-section" | "contact-section" | "blog-posts-section" | "product-grid-section" | "image-gallery-section" | "text-block-section" | "video-section" | "team-section" | "about-us-section" | "newsletter-section" | "social-proof-section" | "comparison-table-section" | "map-section" | "custom-html-section" | "changelog-section" | "comparison-two-column-section" | "comparison-three-column-section" | "feature-showcase-section" | "double-presentation-section"; export interface BaseSection { id: string; type: SectionType; className?: string; } export interface HeaderContentConfig { announcement?: { badgeText?: string; descriptionText?: string; href?: string; }; heading: string; headingLevel?: 1 | 2; description?: string; showBorder?: boolean; } export interface FooterContentConfig { actions?: { label: string; href: string; variant?: | "default" | "secondary" | "destructive" | "outline" | "ghost" | "link"; }[]; } export interface SectionConfig extends BaseSection { type: SectionType; headerContent: HeaderContentConfig; bodyContent?: React.ReactNode; footerContent?: FooterContentConfig; videoUrl?: string; imageUrl?: string; sectionClassName?: string; contentWrapperClassName?: string; customComponentsAnyTypeData?: any; } export type Section = SectionConfig; export interface PageConfig { metadata: PageMetadata; sections: Section[]; } export type SlugType = string[]; Enter fullscreen mode Exit fullscreen mode 2.2.2.1.5 ส่วนประกอบ รหัสที่สมบูรณ์สําหรับ ส่วนประกอบ DoublePresentation // @/app/@right/public/(_servise)/(_config)/public-pages-config.ts import { PageConfig, SectionConfig, } from "@/app/@right/(_service)/(_types)/page-wrapper-types"; export const PublicPagesConfig = { pages: [ { metadata: { id: "public", title: "Enterprise-Grade AI Next.js starter", description: "Free Open-Source starter kit...", slug: ["public", "test"], type: "hero-section", }, sections: [ { id: "test-block", type: "hero-section", headerContent: { announcement: { badgeText: "Thanks", descriptionText: "AI-SDK V5 & Vercel AI", href: "https://github.com/aifa-agi/aifa", }, heading: "Enterprise-Grade AI Next.js starter", description: "Free Open-Source starter kit to build, deploy, and scale intelligent AI applications. Artifacts Feature, features secure multi-provider auth, Stripe payments, vector knowledge bases, deep-research agents, and a unique fractal architecture designed for the future of AI.", showBorder: false, headingLevel: 1, }, bodyContent: {}, footerContent: { actions: [ { label: "Get Started", href: "/https://github.com/aifa-agi/aifa", variant: "default", }, { label: "Browse Docs", href: "/docs", variant: "ghost" }, ], }, videoUrl: "/_static/video/ai-loop.mp4", contentWrapperClassName: "text-white", } as SectionConfig, ], }, { metadata: { id: "interactive-ai", title: "Interactive AI Demo", description: "Demo: DoublePresentation custom case", slug: ["public", "example"], type: "double-presentation-section", }, sections: [ { id: "double-presentation-demo", type: "double-presentation-section", customComponentsAnyTypeData: { metaData: { metaTitle: "Interactive AI: Where Conversation Builds the UI", metaDescription: "Discover what makes AIFA revolutionary...", }, leftItem: { mediaUrl: "/_static/illustrations/ai-chat.png", title: "Ai Artifacts Chatbot", description: "As the AI chatbot speaks, it highlights elements...", }, rightItem: { mediaUrl: "/_static/illustrations/ai-web.png", title: "Related Pages", description: "Click any UI element, and the AI provides instant context...", }, }, } as SectionConfig, ], }, ] as PageConfig[], }; เข้าสู่โหมดหน้าจอเต็ม Exit โหมดหน้าจอเต็ม 2.2.2.1.3 page-wrapper-types.ts แพ็คเกจ - ประเภท นี่คือการเสร็จสมบูรณ์ ไฟล์ที่มีประเภทใหม่รวม page-wrapper-types.ts // @/app/@right/(_service)/(_components)/page-transformer-components/custom-sections/custom-double-prsentation.tsx "use client"; import React, { useState, useEffect } from "react"; import { motion } from "framer-motion"; import Image from "next/image"; import { cn } from "@/lib/utils"; import { useMediaQuery } from "@/hooks/use-media-query"; interface PresentationMeta { metaTitle: string; metaDescription: string; } interface PresentationItem { mediaUrl: string; title: string; description: string; } interface DoublePresentationProps { metaData: PresentationMeta; leftItem: PresentationItem; rightItem: PresentationItem; } export default function DoublePresentation({ metaData, leftItem, rightItem, }: DoublePresentationProps) { const { isMobile } = useMediaQuery(); // Desktop animation state const [activeContainer, setActiveContainer] = useState<"left" | "right">( "left" ); const [sliderKey, setSliderKey] = useState(0); // Desktop auto-switching effect useEffect(() => { // Only run animation cycle on desktop if (isMobile) return; let sliderTimer: NodeJS.Timeout; let transitionTimer: NodeJS.Timeout; const startAnimationCycle = () => { setSliderKey((prev) => prev + 1); sliderTimer = setTimeout(() => { setActiveContainer((prev) => (prev === "left" ? "right" : "left")); transitionTimer = setTimeout(() => { startAnimationCycle(); }, 500); }, 9000); }; startAnimationCycle(); return () => { clearTimeout(sliderTimer); clearTimeout(transitionTimer); }; }, [isMobile]); // Return null while determining screen size if (isMobile === null) { return null; } // Common CSS classes const metaBlockClass = "text-center max-w-3xl flex flex-col items-center"; const descriptionClass = "mb-12 max-w-xl text-base text-muted-foreground text-center"; const desktopTitleClass = "mb-6 max-w-3xl font-serif font-bold leading-tight md:text-2xl lg:text-4xl"; const desktopDescriptionClass = "mb-12 max-w-xl text-lg text-muted-foreground md:text-xl text-center"; // Mobile card renderer const renderMobileCard = (item: PresentationItem) => ( <div className="relative flex flex-col rounded-xl bg-gray-900 text-white shadow-lg mb-6 overflow-hidden"> <div className="w-full relative" style={{ paddingTop: "56.25%" }}> <Image src={item.mediaUrl} alt={item.title} fill className="object-cover rounded-t-xl" sizes="100vw" priority /> </div> <div className="flex flex-col p-4"> <h2 className="text-xl font-bold mb-2">{item.title}</h2> <p className="text-gray-300 mb-2 text-base min-h-16"> {item.description} </p> </div> </div> ); // Desktop card renderer const renderDesktopCard = (item: PresentationItem, isActive: boolean) => ( <motion.div layout animate={{ flex: isActive ? "7 1 0%" : "3 1 0%" }} transition={{ duration: 0.5 }} className="relative flex flex-col rounded-lg overflow-hidden bg-transparent text-white p-0 shadow-lg h-[30rem] flex-shrink-0" > <div className="relative w-full h-60 mb-4 rounded-xl overflow-hidden border-4 border-gray-700"> <Image src={item.mediaUrl} alt={item.title} fill className="object-cover" priority sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" /> </div> <div className="flex flex-col pt-6"> <h2 className="text-2xl font-bold mb-2 whitespace-nowrap overflow-hidden text-ellipsis"> {item.title} </h2> <div className="relative w-full h-px bg-gray-700 mb-4"> <motion.div key={`slider-${item.title}-${sliderKey}`} className={cn( "absolute top-0 left-0 h-full", isActive ? "bg-primary" : "bg-gray-700" )} initial={{ width: 0 }} animate={{ width: isActive ? "100%" : "0%" }} transition={ isActive ? { duration: 9, ease: "linear" } : { duration: 0 } } /> </div> <p className="text-gray-300 mb-4 text-sm line-clamp-4 min-h-[4rem]"> {item.description} </p> </div> </motion.div> ); // Mobile layout if (isMobile) { return ( <section className="w-full pt-20"> <div className="container mx-auto px-4 flex flex-col items-center"> <div className={metaBlockClass}> <h2 className="text-xl font-bold mb-4">{metaData.metaTitle}</h2> <p className={descriptionClass}>{metaData.metaDescription}</p> </div> <div className="w-full flex flex-col"> {renderMobileCard(leftItem)} {renderMobileCard(rightItem)} </div> </div> </section> ); } // Desktop layout return ( <section className="w-full pt-28"> <div className="container mx-auto px-4 flex flex-col items-center gap-12"> <div className={metaBlockClass}> <h2 className={desktopTitleClass}>{metaData.metaTitle}</h2> <p className={desktopDescriptionClass}>{metaData.metaDescription}</p> </div> <div className="flex gap-6 w-full max-w-6xl"> {renderDesktopCard(leftItem, activeContainer === "left")} {renderDesktopCard(rightItem, activeContainer === "right")} </div> </div> </section> ); } เข้าสู่โหมดหน้าจอเต็ม Exit โหมดหน้าจอเต็ม ข้อสรุป: วิธีการได้รับประโยชน์สูงสุดจากเอกสารนี้ เราเข้าใจว่าคําแนะนําและส่วนประกอบที่นําเสนอที่นี่อาจดูกว้างขวางสําหรับโพสต์เดียว คุณอาจรู้สึกว่านี่ไม่ใช่การอ่านที่น่าตื่นเต้นที่สุดและคุณจะถูกต้อง นี่ไม่ได้เป็นความบันเทิง มันเป็นคู่มือทางเทคนิคที่รายละเอียดที่ออกแบบมาเพื่อให้คุณควบคุมระบบที่มีประสิทธิภาพอย่างสมบูรณ์ เพื่อเปลี่ยนการศึกษาของระบบที่ซับซ้อนนี้เป็นกระบวนการที่โต้ตอบและมีประสิทธิภาพเราขอแนะนําวิธีการต่อไปนี้ ใช้ AI สําหรับการเรียนรู้ที่รวดเร็ว แทนที่จะอ่านแบบพาสซีฟใช้เอกสารนี้เป็น "สมอง" สําหรับผู้ช่วย AI ของคุณ Your Action Plan: คัดลอกเนื้อหาทั้งหมดของบทความนี้จากคําแนะนําถึงส่วนนี้ ใช้เป็นคําแนะนําระบบสําหรับ ChatGPT สิ่งนี้จะให้ AI กับบรรทัดฐานเต็มรูปแบบของสถาปัตยกรรมที่เราพูดถึง You can now have a dialogue with an AI that "understands" our rules and conventions. For example: Ask questions about the source code. "Based on the provided documentation, explain how to create a new custom component to display customer testimonials." and ." "Show me a configuration example for a page that uses both DoublePresentation HeroSection วิธีนี้จะช่วยให้คุณเข้าใจหลักการของแอพพลิเคชันได้เร็วขึ้น คุณสามารถหารหัสต้นฉบับเต็มรูปแบบสําหรับโครงการนี้บนเว็บไซต์ของเรา . บันทึก GitHub ถัดไปคืออะไร ในบทความนี้เราได้สร้างหนึ่งในสองชิ้นที่สําคัญของระบบสร้างเว็บไซต์ของเรา: ไฟล์ลงในส่วนประกอบ React พร้อมใช้งาน สิ่งนี้เปิดทางสําหรับการสร้างหน้าเว็บอัตโนมัติซึ่ง AI สามารถสร้างการกําหนดค่าและของเรา เปลี่ยนเป็นอินเตอร์เฟซที่สวยงาม a tool that transforms a Config Transformer เพื่อดูโครงการของเราในกิจกรรมเยี่ยมชมการแสดงผลสดที่ . aifa.dev ภาษาไทย.dev A Glimpse into Future Posts: ส่วนที่ 2: The Magic of Markdown บทความถัดไปจะมุ่งเน้นไปที่เทคโนโลยีหลักที่สอง: การสร้างหน้า (เอกสารบทเรียนหน้าผลิตภัณฑ์) จากไฟล์ Markdown ส่วนที่ 3: จาก Config ไปยัง UI เราจะทบทวนหัวข้อของบทความนี้และเจาะลึกเข้าไปในวิธีที่การกําหนดค่าที่สร้างขึ้นโดย ChatGPT จะถูกแปลงเป็นส่วนประกอบ React และวิธีที่กระบวนการนี้สามารถขยายได้ ในบทเรียนถัดไปเราจะเริ่มต้นด้วยการตอบคําถามที่สําคัญ: เก็บสติ๊กเกอร์ Why was Markdown chosen for content management?
