מדריך זה הוא הפרק הראשון של מדריך מקיף ליצירת מערכת מבוססת על ייצור אוטומטי של דפי אינטרנט באמצעות React 19 ו- Next.js 15. מקור פתוח : (https://github.com/aifa-agi/aifa) הנה מפת הדרכים: Part 1 (You are here): Core architecture deep dive—catch-all routes, the PageHtmlTransformer component, and strongly typed page configs. Part 2: Advanced page types—automating documentation pages and interactive tutorials. חלק 3: אינטגרציה של מנועי AI – חיבור מודלים חיצוניים (ChatGPT, Claude) עם סוכן Aifa הפנימי שלנו ליצירת תוכן מתמשכת ואוטונומית. בונוס: מחקר מקרה – הפצה, רווחיות והרחבה של SaaS AI ברמה הייצור עם רישום משתמשים ותשלומים Stripe. תוכנית צעד אחר צעד זו עוקבת אתכם דרך בניית הקולון שלכם מוכן לעסק, מלא עם זיהוי ותזרים תשלומים.מוצר AI בעולם האמיתי מן המושג ועד ההשקה – קוד המקור המלא זמין בכתובת . → טכנולוגיה: 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 המגדיר את סעיפים, מטא-נתונים ועיצוב של הדף שלך. Build: הורידו את קובץ ה-config לאפליקציית Next.js שלכם והפעילו את npm run build. Instantly you have a fully styled, SEO-ready page, complete with auth and AI-powered chat. זקוקים לאינטגרציה עסקית? פשוט הפעל את "V0 Corporate Mode" שלנו ב- aifa.dev (https://aifa.dev) לקבלת אוטומציה מתקדמת, גישה מבוססת תפקידים ואדריכלות מיקרו-שירותים מתוחכמת. זקוקים לאינטגרציה עסקית? פשוט הפעל את "V0 Corporate Mode" שלנו ב- aifa.dev (https://aifa.dev) לקבלת אוטומציה מתקדמת, גישה מבוססת תפקידים ואדריכלות מיקרו-שירותים מתוחכמת. מי מנצח עם גנרטור אתרים מנוהל על ידי AI? סטודיו, עסקים, סטארט-אפים ופריילנסרים סוכנות העיצוב של הדור הבא: מהתמונה ליצירת המונים בדקות תארו לעצמכם סוכנות שמארגן מערכות אקולוגיות טכנולוגיות מתוחכמות, לא רק מקטעים סטטיים.השקעה אחת מראש בספריה של רכיבים קנייניים משחררת את היכולת ליצור ולהפיץ יותר מ-50 אתרי אינטרנט ברמה הייצור לשעה. זה לא מדע בדיוני, זה פרדיגמה עסקית חדשה שבה ההון היצירתי פוגש ביצוע אוטומטי, ועם שילוב של Stripe מובנה, אתה יכול להרוויח מהמהירות החדשה הזו מהיום הראשון. הפעלת ארגונים: עקביות המותג וגמישות רדיקלית מקרה קלאסי לשימוש בתעשייה: פתרון תפריט QR המפתח למפתחת מסעדה לאומית.אתה בונה מערכת עיצוב מאסטר לחווית המשתמש המרכזית – כגון כרטיסי מוצרים או תפריטים – רק פעם אחת. כל מיקום מותאם אישית את המותג ואת התוכן שלו באמצעות ממשק פשוט, בעוד UX הליבה, הביצועים והאינטליגנציה העיקרית של העיצוב נשארים סגורים ותואמים. , , ו . 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: השתמש במדריך זה כבסיס ידע חי עצור תיעוד - התחל זה קריאה מפקד הכוח האמיתי של מדריך זה הוא לא לקרוא אותו cover-to-cover. איך זה עובד: הזן את המסמך כולו ב-ChatGPT. שאלו שאלות ספציפיות ומקשרים: "איך אני מיישם סעיף מותאם אישית?", "מהי מטרת FullScreenWrapper?", "הראה לי את הקוד עבור הרכיב DoublePresentation". קבל תשובות מדויקות, מוכנות לייצור עם קישורים מלאים של קוד. נסו את הגישה הזו, ותבינו מדוע כל התיעוד הטכני בשנת 2025 צריך להיות AI-native. פתיחה: הפילוסופיה שלנו – עקביות מטומטמת במהירות חדה This guide is not about creating the fastest possible AI page generator. While AI tools like v0 prioritize raw generation speed, our methodology focuses on a more critical business metric: המטרה העיקרית שלנו היא לספק עקביות עיצוב עמיד לפצצות והרמוניה אדריכלית בכל טביעת הרגל הדיגיטלית שלך. Total Cost of Ownership (TCO) בעוד שההפקה הראשונית של דף יחיד עשויה לקחת קצת יותר זמן, החיסכון המתמשך בפיתוח, תחזוקה וניהול המותג הוא אקספוננציונלי. עקביות המותג בטיחותית: כל דף שנוצר על ידי AI תואם באופן אוטומטי את מערכת העיצוב המוקדמת שלך. חווית משתמש אלחוטית: הארכיטקטורה מבטיחה מסע הרמוני וקרוב למשתמש, ובכך מסירה את החסרונות המזיקים הנפוצים באתרים שנוצרים במהירות. Reduced Reduced Rework: By enforcing standards at the point of creation, we minimize the expensive and time-consuming manual adjustments typically required post-generation. אסטרטגיה אמיתית: הגישה שלנו הופכת ליעילה יותר ככל שאתה מגדיל.ככל שאתה מייצר יותר דפים, כך ההחזרים גדולים יותר במהירות ובקביעות. 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 דפי תיעוד עם ניווט מתקדם. דפים אינטראקטיביים עם אלמנטים סטטיסטיים, שלב אחר שלב. עבור תכונות ייחודיות ואינטראקטיביות – כגון מצגות אנונימיות, לוח נתונים בזמן אמת, או רכיבים עם ניהול מצב מורכב – באפשרותך להזריק זה נותן לך את הגמישות ליישם פונקציונליות מותאמת אישית מבלי לפגוע באינטגרליות הליבה של המערכת. Custom Components Your Next Step: Hands-On with Custom Components כדי לשלוט באמת במערכת זו, המשימה המעשית שלך היא לחקור את התהליך של יצירת ואינטגרציה של רכיב מותאם אישית חדש. המושג: AI כמנהל המותג שלך, לא רק מנוע תוכן פעולות דיגיטליות מודרניות דורשות מהירות, שלמות של המותג וגינות בשוק.ארכיטקטורה שלנו משיגה זאת על ידי טיפול במערכת העיצוב שלך כבסיס ידע מובנה ואינטליגנטי. על ידי הזנת ה- AI לסטנדרטים UI / UX המדויקים שלך, זה הופך להיות יותר מאשר יצרן תוכן - זה הופך למנהל האולטימטיבי של זהות המותג שלך, לאכוף עקביות בכל שלב של מחזור החיים של יצירת הדף. תהליך העבודה של 5 צעדים: מהמערכת העיצובת לבניית אופטימיזציה עבור SEO השתמש במערכת העיצוב שלך: אנו מכסים את בסיס הידע של AI עם תבניות הרכיבים שלך והוראות מפורשות על איך ליישם אותם בצורה חזותית ומבנית, ומבטיחים 100% התאמה למותג. הגדרת המטרה באמצעות פקודה: משתמש, מנהל פרויקטים או מפתח שולח פקודה טקסט פשוטה המתארת את הדף הרצוי או את האלמנטים שלו. אינטלקטואליזציה ומבנה: סוכן ה-AI מפרט את הבקשה, מייצר את התוכן הסמנטי ומפותח אותו בצורה אינטליגנטית לתבניות מתאימות, מאושרות מראש מהבסיס הידע. Generate a Declarative PageConfig: בהתבסס על התבניות שנבחרו, המערכת יוצרת PageConfig עם תבנית חזקה – תיאור JSON מפורסם של הדף הסופי. בניית אוטומטית והפצה: התצורה נצרכת על ידי רכיבי ההפצה שלנו במהלך תהליך הבנייה.הפיצוץ הוא דף מוכן לייצור, אופטימיזציה עבור SEO אשר תואם מבחינה חזותית וטכנית את הסטנדרטים של החברה שלך. 1.3.ההשפעה העסקית: Drive Conversions ו Slash TCO Go-to-Market המהיר: הפעל דפי נחיתה חדשים ודפי מוצר עם דחיפה אחת, תוך ניצול תבניות מאושרות מראש עבור מהירות יוצאת דופן. אינטנסיביות המותג של Ironclad: עקביות המותג ובקרת איכות אוטומטית, מבטיחה שכל דף חדש משקף באופן מושלם את מערכת העיצוב שלך. Reduced Manual Overhead & Scalable A/B Testing: להעצים צוותי שיווק כדי להגדיל וריאציות דפים ותוכן A/B מבחן ללא מעורבות מפתחים בתהליך העיצוב. All text and UI elements are centralized, making localization and market adaptation seamless. Built for Global Scale: גמישות ארכיטקטורית: נועדה לשלב בצורה מושלמת לתוך צינורות CI / CD מודרניות, פלטפורמות אחסון ותהליכים עבודה אחרים המנוהלים על ידי AI. 1.4.הדרך שלך דרך הסדרה הזאת במדריך מקיף זה, אנו מובילים אותך דרך: פירוק ארכיטקטורת הליבה: צלילה עמוקה ב-PageHtmlTransformer, במערכת Wrapper/FullScreenWrapper ואיך מרכיבי החלקים אינטראקציה. שליטה ב-Rendering Pipeline: להבין את ההיגיון שמאחורי rendering של חלקים, כתיבת הגדרות, ואת היחסים בין קבצים Config ו React רכיבים, כך שאתה יכול להרחיב את המערכת בעצמך. למידה להוראת ה- AI: למדו כיצד ליצור הוראות מובנות עבור מטא-נתונים, כותרות ורגליים, ולהגדיר את הספציפיות לייצור תוכן גוף כפרק JSX. Apply your knowledge to create the files that the AI uses to generate pages that are fully compliant with your architecture and design standards. Generating Pages on Demand: config האנטומיה של ארכיטקטורת ה-AI שלנו הפרוייקט שלנו מאורגן על מנת להגדיל את הספציפיות, תחזוקה והמהירות של פיתוח.אנחנו משתמשים ב- Next.js 15 קונבנציונל רדיו אפליקציות, כולל מסלולים מקבילים ( ) ופרטי תיבות פרטיות ( ) כדי ליצור מבנה נקי וחזק. @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 כניסה למצב מסך מלא כניסה למצב מסך מלא מסלולי מרכיבים מרכזיים 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 כניסה למצב מסך מלא כניסה למצב מסך מלא כלי הרכיבים הבסיסיים: דפים מוכנים לייצור מחוץ לקופסה מטרה ספריית הרכיבים הסטנדרטית שלנו מספקת את הבסיס המהנדס ליצירת דפי כתיבה חזקים, מותאמים למותגים בקנה מידה.הסדרה כוללת את עמודי האדריכלות של המערכת שלנו: מסלול דינמי, מנוע טרנספורמטר מרכזי, אריזות תוכן מגוונות, סעיפים כותרת ועמוד מאוחדים, וקבצי ההגדרות והסכמי נתונים המניעים אותם. עקרונות ארכיטקטוניים עיקריים: עקביות UI: כל רכיב עוקב אחר מערכת עיצוב מאוחדת ודפוסים התנהגותיים, ומבטיח חוויית משתמש חלקה ונכונה. AI-Native by Design: הארכיטקטורה אופטימלית לייצור אוטונומי, ומאפשרת ל-AI לבנות דפים מורכבים ללא התערבות ידנית. SEO-Optimized from the Ground Up: שיטות הטובות ביותר עבור אופטימיזציה למנועי חיפוש ו- HTML סמנטיים מבושלים, לא מבושלים. Type-Safe & Predictable: אנו מנצלים את הכתיבה הקפדנית של TypeScript כדי לאכוף חוזה נתונים אמין בין ה- AI לבין ה- UI, כדי להבטיח יציבות המערכת. מודולרי & Composable: כל רכיב הוא יחידה עצמית אשר פותרת בעיה ספציפית, המיועדת לשימוש חוזר והרחבה מקסימלי. יחד, הרכיבים הללו מהווים את הבסיס של המערכת, ומבטיחים כי כל דף שנוצר על ידי ה-AI אינו רק עקבי מבחינה חזותית, אלא גם חזק מבחינה טכנית ומוכן לעסק. 2.1 The מרכיב: Universal Catch-All Route for Dynamic URLs [[...slug]]/page.tsx 2.1.1.1 הערך האסטרטגי של Catch-All Routes: Agility and Deployment Speed מסלול catch-all הוא דפוס מסלול דינמי ב- Next.js המאפשר לרכיב אחד של הדף להתמודד עם מספר אינסופי של סוגי כתובות URL. הוועדה, The הפרמטר הופך למערך המכיל כל חלק של מסלול ה-URL, לא משנה כמה עמוק הוא מחובר. [[...slug]] slug מנקודת מבט עסקית, הבחירה האדריכלית הזו היא יתרון תחרותי עצום. קישוט אינסופי ועמוקות תוכן: אתה כבר לא מוגבל על ידי מבנה הקובץ של הפרויקט. URL כמו /public/category/nike/sneakers/black/12345 מטופל על ידי אותו רכיב בדיוק כמו /public/test. ניווט חסר קשיי וגורמי דף מיידיים: הפעלת דף חדש היא פשוטה כמו הוספת הגדרה לקובץ מרכזי.הדף פועל באופן מיידי ללא יצירת רכיבים חדשים או ניווט במערכת קבצים מורכבת. אוטומציה מובנית: ארכיטקטורה זו היא הבסיס לאקולוגיה אוטומטית לחלוטין של תוכן. ניתן לתכנת סרגל צד או תפריט שנוצר באופן אוטומטי כדי לקרוא את הגדרות הדף ולהקים את הניווט באופן דינמי. 2.1.1.2 הערך של כתובות URL דינמיות עבור עוזרי AI: גודל תוכן אינסופי In today's competitive landscape, modern SaaS and AI platforms demand the agility to generate new pages on the fly. Whether initiated by a user, an administrator, or an autonomous AI agent, content must be architected for instant creation and deployment. Our catch-all routing architecture is the engine that drives this capability. Strategic Business Advantages: It removes all limitations on content structure and nesting depth, allowing your digital presence to scale infinitely without requiring code changes. Eliminates Architectural Constraints: Unlocks Unmatched Agility: Build complex content hierarchies for any use case.Navigation is driven purely by your business logic, not constrained by a rigid file system.This uncouples your content strategy from engineering cycles, empowering product and marketing teams to execute faster. מאפשרת אוטומציה בעזרת ה-AI: ארכיטקטורה זו תוכננה עבור עולם ראשון בעזרת ה-AI.היא מספקת בסיס יציב לסוכני ה-AI כדי ליצור, להגדיר ולהפעיל באופן אוטונומי חלקים שלמים של האתר שלך, מקטלוגים למוצרים ועד מסדי ידע. 2.1.1.3. Real-World Use Cases at Scale This architecture isn't theoretical; it's a battle-tested model for deploying high-value, deeply-nested content structures that drive business growth: Deploy a white-label solution for a national restaurant franchise. Each location can have a unique, deeply categorized menu (e.g., ), all while maintaining perfect brand consistency and UX integrity. Turnkey QR Menu Systems: /public/menu/dallas-tx/dinner/mains/pasta-dishes קטלוגים מוצר מסחר אלקטרוני: הפעל קווי מוצר נרחבים עם שינויים אינסופיים באופן מיידי. 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. איך זה עובד: המנוע של תוכן לפי דרישה At its core, the process is elegantly simple yet powerful: it dynamically translates any URL path into a corresponding page configuration, which is then rendered on the fly. This is the technical foundation that unlocks the business agility described earlier. המשימות העיקריות של הרכיב הן: 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 ; } כי ה can be of any length and the lookup is a direct match, this system provides infinite nesting depth with zero risk of route collisions. slugArr 2.1.1.5. Key Functions and Their Business Impact generateStaticParams: Drives Performance & SEO על ידי אומר Next.js איזה 1.1.1.7 המרכיב: מנוע ההוצאה להורג רכיב זה הוא המנוע שמביא את ארכיטקטורת ה- AI שלנו לחיים. זהו רכיב שרת Next.js יחיד, רב עוצמה אשר פועל כמו מנהל אוניברסלי עבור כל דף ציבורי שנוצר באופן דינמי. // @/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} />; } כניסה למצב מסך מלא כניסה למצב מסך מלא 2.1.1.7. השורה התחתונה: תפסו את כל המסלולים כמנוע התוכן שלכם 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. העיקרון הבסיסי הוא פשוט אך טרנספורמטיבי: No new code files, no complex folder structures. The navigation and rendering systems adapt automatically, making this the cornerstone of a truly agile and scalable AI-powered platform. A new page is just a new entry in a configuration file. FullScreenWrapper vs. Wrapper: Crafting Immersive חוויות מסך מלא 2.1 מטרות עיקריות The היא תוכננה במיוחד עבור סעיפים הדורשים מצגת מלאה מלאה עם תמיכה בווידאו או תמונה ברקע.היא משמשת כמתקן היסוד עבור סעיפים "גיבורים", שבו התוכן מכוסה באלגנטיות על פני אלמנטים מדיה עשירים. FullScreenWrapper 2.1.3.2. Layered Architecture 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> כניסה למצב מסך מלא כניסה למצב מסך מלא 2.1.3.3. Customization and Extensibility The ניתן להוסיף אפקטים חזותיים מורכבים ישירות דרך קרוב FullScreenWrapper className <FullScreenWrapper className="bg-gradient-to-br from-blue-900 to-purple-900"> כניסה למצב מסך מלא כניסה למצב מסך מלא : Background videos automatically receive an class to improve text readability, but this can be easily overridden. Opacity Control opacity-40 : A class is built-in to ensure smooth changes to background properties. Smooth Transitions transition-all duration-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"> כניסה למצב מסך מלא כניסה למצב מסך מלא 5.1.3 החלק המרכיב // @/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> ); } כניסה למצב מסך מלא כניסה למצב מסך מלא 2.1.4. Wrapper: The Standard Sectional Container 2.1.4.1 מקרה השימוש העיקרי The is the default, go-to container for the majority of content sections. It's designed to provide standard padding, content centering, and a consistent, predictable layout for informational blocks. 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> כניסה למצב מסך מלא כניסה למצב מסך מלא The component's structure is simple and optimized for performance, relying on a few key Tailwind CSS classes: : Applies responsive vertical padding for consistent spacing across devices. 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 Custom background colors or gradient effects. גבולות או חלוקות בין חלקים. Subtle visual enhancements like blur or glow effects. 2.1.4.4. Building Reusable Templates 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 כאשר העיצוב שלך דורש תבנית עם סגנון ייחודי אך מבנה תוכן סטנדרטי וממוקד, הוא מספק את הגזע המבני, המאפשר לך להתמקד בסגנונות ספציפיים של התבנית. Wrapper 2.1.4.5. The Component // 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> ); } כניסה למצב מסך מלא כניסה למצב מסך מלא 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 Categories and AI-Driven Generation The AI's operational model is centered around the 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" Enter fullscreen mode Exit fullscreen mode 2.1.5.3. SEO Optimization and Metadata The interface ensures the standards-compliant generation of meta tags, which is critical for search engine optimization (SEO). Meta tags are generated automatically via the 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; // Тип основной секции } Enter fullscreen mode Exit fullscreen mode 2.1.5.4. HeaderContentConfig: Managing SEO Hierarchy ניהול ההיררכיה של הכותרות הוא קריטי עבור SEO באתר. The section is optional. This is an intentional design choice because certain section types may embed / tags directly within their בעוד זה מספק גמישות, זה מציג סיכון פוטנציאלי לצמיחה UI, שהוא מטרה עיקרית של ארכיטקטורה זו. 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 By design, the body of a section is granted complete freedom to implement any layout or design. This architectural choice allows for maximum creative flexibility, enabling the AI to generate rich and varied content. This approach deliberately contrasts with the 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: גישה מינימליסטית The current implementation of the footer is intentionally minimalist. It supports only optional call-to-action buttons. No additional elements are included, a decision made to prioritize simplicity, speed, and uniformity across all generated pages. 2.1.5.7. Principles for Extending Type Definitions To introduce a new , the following steps must be taken: SectionType The AI's knowledge base must be updated with comprehensive instructions and examples for the new section type. Update AI Knowledge: 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 הם כותבים בקפדנות כדי לאכוף שיטות SEO הטובות ביותר ותקיימות UI, בעוד מציעה גמישות מקסימלית עבור פתרונות עיצוב חדשניים, מונחים על ידי AI. 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: תמיכה של רכיבים מותאמים אישית The שדה פנימי 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 To maintain architectural integrity, the type and structure of this data must be rigorously defined and documented . 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. בתוך החלק הקבוע עצמו 2.1.6. public-pages-config.ts: The Public Page and Slug Route Registry 2.1.1.1 תפקידים בארכיטקטורה של מערכות The file is an AI-generated registry of all public-facing pages within the application. This configuration is automatically generated by our AI based on system instructions and user prompts. Its structure is directly influenced by the available components in our knowledge base examples and the enumerations within the → הגדרות 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: Projects with a limited number of pages (typically 10-15). Websites with static content that requires infrequent updates. Rapid prototyping and Minimum Viable Products (MVPs), allowing for a quick start without database setup. Landing pages with a fixed, predefined structure. When to Transition to a Database: עבור יישומים ייצור בקנה מידה גדול, גישה מבוססת קבצים היא מעשית רק עבור קבוצה קטנה של דפים. 2.1.6.3 מבנה ההגדרה 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[], }; כניסה למצב מסך מלא כניסה למצב מסך מלא 2.1.6.4 עיקרון הקטגוריות של הגדרות Placing the configuration file in the directory signifies its role in managing public-facing pages. Key Architectural Decision: public/(_service)/(_config)/ Scaling by Category: האדריכלות שלנו תומכת בקנה מידה על-ידי קטגוריות של תצורות, ומבטיחה מבנה נקי ומאורגן: public-pages-config.ts – עבור דפים ציבוריים (לדוגמה, נחיתה, אודות, קשר). — for documentation sites with advanced navigation. docs-pages-config.ts — for administrative dashboards. admin-pages-config.ts — for blog posts and articles. blog-pages-config.ts Each category is designed to have its own: קובץ Configuration Dedicated סוגים מיוחדים של קטגוריות. Unique rendering logic. 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 דוגמה לנתונים: אספקת ערכי התייחסות לתהליך הייצור. תוכנית אימות סוג: כפופה על ידי TypeScript לביטחון סוג קפדני. The workflow is as follows: The AI analyzes the existing configuration file. It generates a new object based on the user's prompt. PageConfig לאחר מכן, מפתח מוסיף את ההגדרה החדשה לסדרת הדפים. The system automatically recognizes and registers the new routes. 6.1 היתרונות והגבלות Advantages of the File-Based Approach: בקרת גירסאות: בקלות בניהול וגרסאות באמצעות Git. אבטחת סוגים: יתרונות של אבטחת סוגים עם TypeScript. No database queries result in faster page loads. Zero Latency: הפצה פשוטה: פועלת בצורה חלקה עם יצירת אתרים סטטיים (SSG). Limitations: אין עדכונים דינמיים: חסרים אפשרויות ניהול תוכן דינמי. דרושה הפצה מחדש: כל שינוי דורש בניית ופיתוח חדשים. לא עבור UGC: לא מתאים לתוכן שנוצר על ידי משתמש. Becomes difficult to manage beyond 20-30 pages. Scalability Concerns: 6.1 רכיב // @/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[], }; כניסה למצב מסך מלא כניסה למצב מסך מלא 6.8 מסקנות הוא פתרון מעשי עבור פרויקטים קטנים עד בינוניים, המציע איזון בין קלות ניהול ותפקוד.ליישומים בקנה מידה גדול יותר, הוא משמש כנקודת התחלה מצוינת לפני המעבר לארכיטקטורה חזקה יותר, המבוססת על מסדי נתונים. public-pages-config.ts 2.1.7. utils.ts: Configuration Utility Functions מודול זה מספק פונקציות שימושיות לניהול תצורות דף, כולל שתי פונקציות עיקריות: , which filters all pages with the "public" prefix for static generation, and , אשר ממוקם דף מסוים על ידי תואם מדויק, מקרה רגיש של מסדרת הסלוג שלה. 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())) ); } כניסה למצב מסך מלא כניסה למצב מסך מלא 1.1.8. header-section.tsx: כותרת סעיף מאוחדת This standardized component serves as a universal header for all section types, ensuring consistency across the application. It offers optional elements such as an announcement, an H1/H2 heading, and a description. This component plays a crucial role in SEO optimization and maintaining visual consistency for AI-generated pages. // @/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> ); } כניסה למצב מסך מלא כניסה למצב מסך מלא 2.1.9. header-section.tsx: Unified Section Header (Atomic Components) This section details the atomic components used to construct headers: (תמיכה ב- H1 ו- H2) for subheadings, and for placing buttons. These components leverage 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: רכיב ההודעה This interactive badge component is designed for announcements and notifications. It supports navigation, keyboard control, and conditional rendering, automatically hiding when no content is present. It is used to draw attention to important updates or links. // @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> ); } כניסה למצב מסך מלא כניסה למצב מסך מלא 2.1.11. footer-section.tsx: Unified Section Actions 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> ); } כניסה למצב מסך מלא כניסה למצב מסך מלא 2.1.12. body-section.tsx: תיבת תוכן רצונית 2.1 מטרה ופילוסופיה משמש כמכלול גמיש ביותר עבור התוכן העיקרי בתוך החלקים.בניגוד לרכיבי הכותרת והרגל הסטנדרטיים, נותן חופש מוחלט לשים כל תוכן React. BodySection BodySection 2.1.12.2. Content Generation Principles Content for חייב להיות מיוצר כ TSX רגיל ללא שימוש אלמנטים, שבהם כל האלמנטים מוצגים בפורמט מורחב. 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> </> ) כניסה למצב מסך מלא כניסה למצב מסך מלא // ❌ bodyContent: ( <div className="grid"> {features.map(feature => <FeatureCard key={feature.id} {...feature} />)} </div> ) Enter fullscreen mode Exit fullscreen mode 2.1.12.3 מתי להשתמש רכיבים מותאמים אישית אם סעיף דורש לוגיקה מורכבת (מצב, אפקטים, אינטראקטיביות), ליצור רכיב עצמאי ולהוסיף אותו ל כחברה נפרדת 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> ); } Enter fullscreen mode Exit fullscreen mode 2.1.12.4 רכיב // @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> ); } כניסה למצב מסך מלא כניסה למצב מסך מלא 2.1 12.5 מסקנות הוא משמש כגשר בין ארכיטקטורה סטנדרטית של המערכת לחופש היצירתי של יצירת AI, ומצליח להשיג איזון בין שליטה לגמישות. BodySection 2.2. Advanced Custom Components 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. מתי להשתמש ברכיבים מותאמים אישית: אלמנטים אינטראקטיביים: טפסים עם אימות, חישובים, הגדרות מוצר. המצגות האנימטיביות: מעברים מורכבים, אפקטים פרלקסים, מנועים אוטומטיים. פונקציונליות בזמן אמת: צ'אטים, הודעות, זרימי נתונים חיים. לוגיקה מתאימה: רכיבים עם התנהגות שונה לגמרי על שולחן עבודה לעומת נייד. דפוסי UI ייחודיים: אלמנטים לא סטנדרטיים של ממשק ספציפי לפרויקט. שילוב ארכיטקטוני : הרכיבים המשותפים משולבים לתוך as distinct הצהרות בתוך A block. This approach allows them to access system-wide context, such as theme and device information, while maintaining a consistent look and feel through shared CSS classes and design tokens. Although they adhere to the system's visual language, they retain complete freedom in their internal logic and implementation. This strategy provides a balance between standardizing the majority of content and allowing for creative freedom in implementing complex interactive elements. PageHtmlTransformer case switch 2.2.1 הנחיות ליישום רכיבים מותאמים אישית 2.2.1.1 פוליטיקה של Wrapper חלקים מותאמים אישית יש להחזיר ישירות מבלי להיות מכוסים או הם אחראים לניהול הפריסה שלהם, הפדגוגיה, והרכיב כדי להבטיח שליטה מלאה על המצגת שלהם. No External Wrappers Wrapper FullScreenWrapper 2.2.1.2. Component-Scoped Typing הגדרות המשתמש של רכיב מותאם אישית צריכות להיות מסומנות בחלק העליון של קובץ הרכיב עצמו.כל הנתונים מועברים מהגדרת הדף אל הרכיב באמצעות המשתמש נמצא בסעיף Config. Local Prop Interfaces customComponentsAnyTypeData 2.2.1.3 הרחבה סעיף סעיף כל רכיב מותאם אישית דורש סוג ייחודי להוסיף enum in זה מבטיח בדיקת סוג נכונה ומאפשר את הצהרה בטרנספורמטר כדי לזהות ולהפוך את הרכיב בצורה נכונה. 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”; כניסה למצב מסך מלא כניסה למצב מסך מלא 2.2.1.4. עדכון מקרים ב ageHtmlTransformer Custom case processingA new case is added to the PageHtmlTransformer to handle a custom section type with a direct // В PageHtmlTransformer: case "new-custom-section": return ( <NewCustomSection key={config.id} customData={section.customComponentsAnyTypeData.customData} /> ); כניסה למצב מסך מלא כניסה למצב מסך מלא 2.2.1.5 מבנה Config מותאם אישית : דוגמה לדוגמה של הגדרת דף הכוללת סעיף מותאם אישית.כל הנתונים הספציפיים לרכיב ממוקמים בתוך אובייקט, אשר יכול להיות כל מבנה הנדרש על ידי הרכיב. 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[], כניסה למצב מסך מלא כניסה למצב מסך מלא 2.2.2 דוגמה של רכיב מותאם אישית 2.2.2.1. DoublePresentation כפולת הצגה → 2.2.2.1.1. Update Core Types ראשית, הוסף את סוג החלק החדש ל- אנדום SectionType typescript // @/app/@right/(_service)/(_types)/page-wrapper-types.ts export type SectionType = | "hero-section" | "cta-section" | "double-presentation-section" כניסה למצב מסך מלא כניסה למצב מסך מלא 2.2.2.1.2. Add New Case to PageHtmlTransformer תגית: Transformer לאחר מכן, הוסף את התואם to the כדי להפוך את המרכיב. case PageHtmlTransformer case "double-presentation-section": return ( <DoublePresentation key={section.id} metaData={section.customComponentsAnyTypeData.metaData} leftItem={section.customComponentsAnyTypeData.leftItem} rightItem={section.customComponentsAnyTypeData.rightItem} /> ); כניסה למצב מסך מלא כניסה למצב מסך מלא 2.2.2.1.4. Config Example הנה דוגמה כיצד להגדיר את מרכיב ב . 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[]; כניסה למצב מסך מלא כניסה למצב מסך מלא 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[], }; Enter fullscreen mode Exit fullscreen mode 2.2.2 1 3 תגיות קשורות תגיות קשורות תגיות קשורות תגיות קשורות הנה המלאה הקובץ כולל את הסוג החדש. 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> ); } Enter fullscreen mode Exit fullscreen mode מסקנה: כיצד להפיק את המרב מן המסמך הזה אנו מבינים כי ההוראות והרכיבים המוצגים כאן עשויים להיראות נרחבים עבור פוסט אחד.ייתכן אפילו להרגיש כי זה לא הקריאה המרגשת ביותר, ואתה תהיה צודק.זה לא בידור; זה מדריך טכני מפורט שנועד לתת לך שליטה מלאה על מערכת חזקה. כדי להפוך את המחקר של מערכת מורכבת זו לתהליך אינטראקטיבי ופרודוקטיבי, אנו ממליצים על הגישה הבאה. שימוש ב-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 מה יהיה הבא? In this article, we've built one of the two critical pieces of our site generation system: זה פותח את הדרך ליצירת עמודים אוטומטית, שבו AI יכול ליצור את ההגדרה, ואנחנו להפוך את זה לממשק יפה. a tool that transforms a Config Transformer כדי לראות את הפרוייקט שלנו בפעולה, בקר ב- Live Demo . aifa.dev תגית: dev A Glimpse into Future Posts: The next article will focus on the second key technology: generating pages (documentation, tutorials, product pages) from Markdown files. Part 2: The Magic of Markdown. חלק 3: מ- Config ל- UI. נבחן מחדש את הנושא של מאמר זה ונכנס עמוק יותר לאופן שבו הגדרת ChatGPT הופכת לרכיבים של React וכיצד ניתן להרחיב את התהליך הזה. במדריך הבא, נתחיל על ידי לענות על שאלה חשובה: להישאר טוני! Why was Markdown chosen for content management?
