Tento tutoriál je prvním dílem komplexního průvodce vytvářením řízeného systému pro automatické vytváření webových stránek pomocí React 19 a Next.js 15.Náš důraz není jen na rychlost, ale na architektonickou eleganci a konzistentní design značky. Otevřený zdroj : (https://github.com/aifa-agi/aifa) Zde je roadmap: Část 1 (Jste zde): Základní architektura hluboké potápění - zachytit všechny trasy, složku PageHtmlTransformer a silně zadávané konfigurace stránek. Část 2: Pokročilé typy stránek – automatizované stránky dokumentace a interaktivní tutoriály. Část 3: Integrace AI motorů – propojení externích modelů (ChatGPT, Claude) a našeho interního agenta Aifa pro nepřetržitou, autonomní tvorbu obsahu. Bonus: případová studie – nasazení, monetizace a škálování AI SaaS ve výrobní třídě s registrací uživatelů a platbami Stripe. Tento krok za krokem plán vás provede budováním vlastního podnikového klonu v0, kompletního s autentizačními a platebními toky. reálný produkt AI od konceptu až po uvedení – plný zdrojový kód k dispozici na . se Technologie Stack: React 19 · Next.js 15 · Vercel · Prisma · Stripe · AI SDK · ChatGPT Naše platforma kombinuje stabilitu podnikové úrovně s krveprolitou inovací: React 19 a Next.js 15 s App Router dodávají sub-100ms rendery a skutečné paralelní trasy. Vercel podporuje nasazení s nulovým časem ukončení provozu a globální škálování. Prisma & Neon zajišťují typově bezpečný a bleskově rychlý přístup k datům. Stripe zpracovává okamžité, PCI-kompatibilní platby mimo krabici. AI SDK + ChatGPT vrstva v generativní inteligenci, takže AIFA Dev Starter může spínat kompletní UI, obsahové moduly a prototypy během několika minut - kompletní s vestavěnou autentizaci a vícejazyčný AI chat. Jak to funguje Prompt: Odeslat jedinou žádost v přirozeném jazyce na ChatGPT. Generovat: Získejte PageConfig založený na JSON, který definuje sekce, metadata a rozložení vaší stránky. Build: Drop config soubor do aplikace Next.js a spustit npm run build. Ihned máte plně stylizované, SEO-připravené stránky, kompletní s auth a AI-powered chat. Jednoduše zapněte náš „v0 Corporate Mode“ v [nadcházející aifa.dev(https://aifa.dev) pro pokročilou automatizaci, přístup založený na rolích a škálovatelnou architekturu mikroslužeb. Jednoduše zapněte náš „v0 Corporate Mode“ v [nadcházející aifa.dev(https://aifa.dev) pro pokročilou automatizaci, přístup založený na rolích a škálovatelnou architekturu mikroslužeb. Kdo vyhraje s AI-powered Site Generator? Studios, Enterprises, Startups, a Freelancers Next-Generation Design Agency: Od mockupu k masové výrobě během několika minut Představte si agenturu, která vytváří škálovatelné technologické ekosystémy, nejen statické mockupy.Jedna investice do vlastní knihovny komponent odemkne schopnost vytvářet a nasazovat více než 50 webových stránek na úrovni výroby za hodinu. Toto není science fiction.Je to nový operační paradigma, kde se kreativní kapitál setkává s automatizovaným provedením.A s integrovanou integrací Stripe můžete tuto novou rychlost vydělat od prvního dne. Zavádění podniků: konzistence značky a radikální škálovatelnost Klasický podnikový případ použití: řešení QR menu na klíč pro národní restaurační franšízu. Vytváříte master designový systém pro základní uživatelský zážitek – jako jsou produktové karty nebo nabídky – pouze jednou. Každá lokalita přizpůsobuje svou značku a obsah prostřednictvím jednoduchého rozhraní, zatímco základní UX, výkon a integrita designu zůstávají uzamčeny a konzistentní. , , , a . radical scalability bulletproof brand consistency unmatched speed-to-market Core Engine: Naše JSON-to-React Transformer architektura Celý systém je poháněn dvěma kritickými složkami: 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. Zatímco externí modely, jako jsou ChatGPT a Claude, se zabývají generováním obsahu, naše proprietární transformátorové komponenty jsou jádrem systému – částí, kterou jsme vybudovali, abychom zaručili výkon a věrnost designu. AI-nativní dokumentace: Použijte tento tutoriál jako živou znalostní základnu Zastavit Dokumenty - začátek To je. čtení Velení Skutečná síla tohoto průvodce není v tom, že jej čtete na pokrytí.Je navržen tak, aby byl vaším projektem soukromá expertní znalostní základna. Jak to funguje: Napájejte celý tento dokument do ChatGPT. Zeptejte se konkrétních, kontextových otázek: „Jak mohu implementovat vlastní sekci?“, „Jaký je účel FullScreenWrapper?“, „Ukažte mi kód pro komponentu DoublePresentation“. Získejte přesné, výrobně připravené odpovědi s kompletními zlomky kódu. Zkuste tento přístup a pochopíte, proč veškerá technická dokumentace v roce 2025 musí být AI-nativní. Úvod: Naše filozofie – konzistence Trumps Raw Speed Zatímco nástroje AI jako v0 upřednostňují rychlost surové generace, naše metodika se zaměřuje na kritickou obchodní metriku: Naším hlavním cílem je poskytnout konzistenci střelného designu a architektonickou harmonii v celé vaší digitální stopě. Total Cost of Ownership (TCO) Zatímco počáteční generace jedné stránky může trvat o něco déle, následné úspory ve vývoji, údržbě a řízení značky jsou exponenciální. Bulletproof Brand Consistency: Každá stránka generovaná AI je automaticky v souladu s vaším zavedeným designovým systémem. Bezproblémová uživatelská zkušenost: Architektura zajišťuje harmonickou a soudržnou cestu pro uživatele, čímž eliminuje nepříjemné nesrovnalosti běžné u rychle generovaných stránek. Drasticky snížená přepracování: Zavedením norem v okamžiku vytvoření minimalizujeme nákladné a časově náročné manuální úpravy, které jsou obvykle požadovány pro postgenerování. Skutečná architektonická škálovatelnost: Náš přístup se stává efektivnějším, jak se rozšiřujete. Čím více stránek vytváříte, tím větší jsou návratnosti v rychlosti a konzistenci. The result isn't just a collection of pages; it's a cohesive, professional-grade digital asset that scales gracefully with minimal maintenance overhead. Beyond the Basics: Řešení složitosti reálného světa This initial tutorial focuses on building standard pages with our core , , , a Avšak open-source kódová základna poskytuje pokročilá řešení mimo krabici pro složitější požadavky: Header Body Footer Stránky s pokročilou, propojenou navigací. Interaktivní tutoriály se stavovými, krok za krokem prvky. Pro jedinečné, vysoce interaktivní funkce, jako jsou animované prezentace, datové tabulky v reálném čase nebo komponenty se složitým řízením stavu, můžete vstřikovat To vám dává flexibilitu k implementaci přizpůsobených funkcí, aniž by došlo k ohrožení základní integrity systému. Custom Components Your Next Step: Hands-On with Custom Components To truly master this system, your practical assignment is to explore the process of creating and integrating a new Custom Component. This will solidify your understanding of the architecture's power and flexibility. 1.1 Koncept: AI jako správce vaší značky, nejen jako obsahový motor Moderní digitální operace vyžadují rychlost, integritu značky a tržní agilitu.Naše architektura toho dosahuje tím, že váš designový systém zachází jako se strukturovanou, inteligentní znalostní základnou.Formalizované, předem schválené definice pro každou kritickou sekci značky (Hero, CTA, FAQ, Features atd.) jsou absorbovány AI. By feeding the AI your exact UI/UX standards, it becomes more than a content generator—it becomes the ultimate steward of your brand identity, enforcing consistency at every stage of the page creation lifecycle. Pět kroků pracovního postupu: od designového systému k SEO-optimalizovanému budování Využijte svůj designový systém: Nabízíme znalostní základnu umělé inteligence s vašimi šablony komponent a explicitními pokyny, jak je implementovat vizuálně a strukturálně, což zajišťuje 100% zarovnání značky. Definování cíle pomocí příkazu: Uživatel, projektový manažer nebo vývojář odesílá jednoduchý textový příkaz popisující požadovanou stránku nebo její prvky. Interpretace a strukturování AI: Agent AI analyzuje požadavek, generuje sémantický obsah a inteligentně jej mapuje na vhodné, předem schválené šablony z databáze znalostí. Vytvořte deklarativní PageConfig: Na základě vybraných šablon systém vydá silně tištěný PageConfig – deklarativní JSON popis konečné stránky. The config is consumed by our render components during the build process. The output is a production-ready, SEO-optimized page that is visually and technically compliant with your corporate standards. Automated Build & Deployment: Podnikatelský dopad: Drive Conversions a Slash TCO Zrychlený přechod na trh: Spusťte nové vstupní a produktové stránky s jedinou poptávkou a využijte předem schválené šablony pro bezkonkurenční rychlost. Integrita značky Ironclad: Konzistence značky a kontrola kvality jsou automatizovány, což zajišťuje, že každá nová stránka dokonale odráží váš designový systém. Omezené manuální a škálovatelné A/B testování: Poskytněte marketingovým týmům schopnost škálovat variace stránek a testovat obsah A/B bez zapojení vývojářů do procesu rozložení. Built for Global Scale: Všechny textové a uživatelské rozhraní prvky jsou centralizovány, což zajišťuje bezproblémovou lokalizaci a přizpůsobení trhu. Architektonická flexibilita: Navrženo tak, aby se bezchybně integrovalo do moderních potrubí CI/CD, hostingových platforem a dalších pracovních postupů řízených AI. 1.4.Tvá cestovní mapa prostřednictvím této série V tomto rozsáhlém tutoriálu vám pomůžeme: Dekonstrukce základní architektury: hluboké ponoření do systému PageHtmlTransformer, systému Wrapper/FullScreenWrapper a interakce komponent sekcí. Ovládání renderovacího potrubí: Pochopte logiku, která stojí za renderováním sekcí, zadáváním konfigurací a vztahem mezi soubory config a komponentami React, abyste mohli systém rozšířit sami. Naučte se učit AI: Naučte se vytvářet strukturované pokyny pro metadata, hlavičky a stopy a definovat specifikace pro generování obsahu těla jako fragment JSX. Generování stránek na vyžádání: Použijte své znalosti k vytvoření konfiguračních souborů, které AI používá k vytváření stránek, které jsou plně v souladu s vašimi architektonickými a designovými standardy. Anatomie naší architektury poháněné AI Náš projekt je organizován tak, aby maximalizoval škálovatelnost, udržitelnost a rychlost vývoje. Používáme Next.js 15 konvencí App Router, včetně paralelních tras ( ) a soukromé složky ( vytvořit čistou a silnou strukturu. @right _folder Projektový adresář Tree 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 Vstup do režimu plné obrazovky Klíčové komponenty cesty 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 Vstup do režimu plné obrazovky Key Component Toolkit: Produkční připravené stránky z krabice Cílem Tato sbírka obsahuje architektonické pilíře našeho systému: dynamické směrování, centrální transformátorový motor, všestranné obaly obsahu, jednotné sekce hlaviček a podstavců a konfigurační soubory a datové smlouvy, které je pohánějí. Základní architektonické principy: Bulletproof UI Consistency: Každá komponenta dodržuje jednotný designový systém a vzorce chování, což zajišťuje bezproblémový a předvídatelný uživatelský zážitek. AI-Native by Design: Architektura je optimalizována pro autonomní generování, což umožňuje AI vytvářet složité stránky bez ručního zásahu. SEO-optimalizované od začátku: Nejlepší postupy pro optimalizaci pro vyhledávače a sémantický HTML jsou pečeny, nikoliv oploceny. Type-Safe & Predictable: Využíváme přísné typování TypeScript k vynucení spolehlivé datové smlouvy mezi AI a uživatelským rozhraním, což zajišťuje stabilitu systému. Modulární a kompozitní: Každá komponenta je samostatná jednotka, která řeší konkrétní problém, navržen pro maximální opakovanou použitelnost a rozšiřitelnost. Tyto součásti společně tvoří základ systému, který zaručuje, že každá stránka generovaná umělou inteligencí je nejen vizuálně soudržná, ale také technicky robustní a připravena na podnikání. 2.1.1 Na základě Součást: Universal Catch-All Route pro dynamické URL [[...slug]]/page.tsx 2.1.1.1 Strategická hodnota všech tras Catch-All: Agility a rychlost nasazení Catch-all Route je dynamický směrovací vzor v Next.js, který umožňuje jediné složce stránky zpracovávat nekonečné množství segmentů URL. Úmluva, The Parametr se stává souborem obsahujícím každou část URL cesty, bez ohledu na to, jak hluboce se nachází. [[...slug]] slug Z obchodního hlediska je tato architektonická volba obrovskou konkurenční výhodou. Nekonečné hnízdění a hloubka obsahu: Už nejste omezeni strukturou souborů projektu. URL jako /public/category/nike/sneakers/black/12345 je spravována přesně stejnou složkou jako /public/test. To odemyká možnost vytvářet hluboce hierarchické katalogy produktů, dokumentační stránky nebo obsahové knihovny bez nutnosti jakýchkoli změn kódu. Bezproblémová navigace a okamžité spuštění stránek: Nasazení nové stránky je stejně jednoduché jako přidání její konfigurace do centrálního souboru. Stránka je okamžitě živá, aniž byste vytvářeli nové součásti nebo navigovali do složitého souborového systému. Vestavěná automatizace: Tato architektura je základem pro plně automatizovaný obsahový ekosystém. Automaticky generovaný boční panel nebo menu lze naprogramovat tak, aby četl konfigurace stránek a dynamicky budoval navigaci.Když přidáte novou konfiguraci stránek, navigace se automaticky aktualizuje, což zajišťuje konzistentní uživatelský zážitek s nulovým manuálním úsilím. 2.1.1.2. The Value of Dynamic URLs for AI Assistants: Infinite Content Scalability 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: Vytvořte komplexní obsahové hierarchie pro jakýkoliv případ použití. Navigace je řízena čistě vaší obchodní logikou, nikoli omezením rigidního souborového systému.Tím se oddělí vaše obsahová strategie od inženýrských cyklů, což dává produktům a marketingovým týmům možnost provádět rychleji. Umožňuje AI-powered automatizaci: Tato architektura je navržena pro svět AI-first. poskytuje stabilní základ pro agenty AI, aby autonomně generovaly, konfigurovaly a nasazovaly celé sekce vašeho webu, od produktových katalogů až po znalostní základny. 2.1.1.3 Případy reálného světa v měřítku Tato architektura není teoretická; je to bojově testovaný model pro nasazení vysoce hodnotných, hluboce hnízděných obsahových struktur, které řídí růst podnikání: Systémy QR Menu: Využijte řešení s bílým štítkem pro národní restaurační franšízu. Každá lokalita může mít jedinečné, hluboce kategorizované menu (např. /public/menu/dallas-tx/dinner/mains/pasta-dishes), a to při zachování dokonalé konzistence značky a integrity UX. Katalogy produktů elektronického obchodu: Okamžitě spustíte rozsáhlé produktové řady s nekonečnými variacemi. URL jako /public/shop/apparel/mens/jackets/leather/fall-2025/black/sku-12345 se stává triviálním pro vytváření a správu, což umožňuje rychlé rozšiřování trhu a granulární organizaci produktů. Firemní a vzdělávací portály: Vytvořte rozsáhlé znalostní základny nebo výukové platformy, kde může být obsah organizován logicky, bez ohledu na to, jak hluboko musí hierarchie jít (např. /public/tutorials/enterprise-ai/onboarding/module-3/advanced-prompting). ##### 2.1.1.4. Jak to funguje: Engine of On-Demand Content Ve svém jádru je proces elegantně jednoduchý, ale výkonný: dynamicky překládá jakoukoli cestu URL do odpovídající konfigurace stránky, která se pak zobrazuje na letadle. The component's primary tasks are: 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 ; } Because the Může být jakékoliv délky a hledání je přímý zápas, tento systém poskytuje nekonečnou hloubku hnízdění s nulovým rizikem srážek trasy. slugArr 2.1.1.5. Key Functions and Their Business Impact generateStaticParams: Pohání výkon a SEO tím, že řekne Next.js, které 2.1.1.7 Složka: Exekuční motor Tato komponenta je motorem, který přináší naši architekturu poháněnou umělou inteligencí k životu. Jedná se o jedinou, výkonnou Next.js Serverovou komponentu, která působí jako univerzální manipulátor pro každou dynamicky generovanou veřejnou stránku. Je zodpovědná za získání správné konfigurace stránky na základě adresy URL a orchestrování konečného renderování, což zajišťuje jak maximální výkon, tak dodržování kritérií SEO. // @/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} />; } Vstup do režimu plné obrazovky 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. Základní princip je jednoduchý, ale transformativní: Žádné nové kódové soubory, žádné složité struktury složek.Navigační a renderovací systémy se automaticky přizpůsobují, což je základním kamenem skutečně agilní a škálovatelné platformy poháněné umělou inteligencí. A new page is just a new entry in a configuration file. FullScreenWrapper vs. Wrapper: Crafting Immersive Full-Screen zážitky 2.1 Základní účel Tyto je speciálně navržen pro sekce, které vyžadují immersivní prezentaci na plné obrazovce s podporou videa nebo obrazu na pozadí. slouží jako základní kontejner pro sekce „hrdiny“, kde je obsah elegantně překryt na vrcholu bohatých mediálních prvků. FullScreenWrapper 2.3.2 Architektonická architektura Komponenta používá sofistikovanou vrstvenou strukturu, která zajišťuje, že obsah zůstane čitelný a vizuálně odlišný od pozadí. 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> Vstup do režimu plné obrazovky 2.1.3.3 Přizpůsobení a rozšířitelnost Tyto je navržen pro snadné přizpůsobení. Můžete přidat složité vizuální efekty přímo prostřednictvím prop. FullScreenWrapper className <FullScreenWrapper className="bg-gradient-to-br from-blue-900 to-purple-900"> Vstup do režimu plné obrazovky Kontrola opacity: Pozadí videa automaticky obdrží třídu opacity-40 pro zlepšení čitelnosti textu, ale to lze snadno překonat. : A class is built-in to ensure smooth changes to background properties. Smooth Transitions transition-all duration-500 2.1.3.4 Pokročilé stylingové a opakovatelné šablony Když potřebujete oddíly sekcí, hranice, efekty lesku nebo rozmazání pozadí, poskytuje ideální základ pro implementaci těchto stylů.To je ideální pro vytváření vysoce stylizovaných, opakovaně použitelných šablon. FullScreenWrapper typescript <FullScreenWrapper className="border-t-4 border-gradient bg-blur-effect"> Enter fullscreen mode Exit fullscreen mode 5.1 Součásti // @/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> ); } Enter fullscreen mode Exit fullscreen mode 2.4.4 Wrapper: Standardní sekční kontejner 2.1.4.1. Primary Use Case 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 Struktura a styling typescript <section className="py-10 lg:py-14 bg-background"> <div className="container mx-auto px-4"> {children} // Header → Body → Footer </div> </section> Enter fullscreen mode Exit fullscreen mode Struktura komponentu je jednoduchá a optimalizovaná pro výkon a spoléhá se na několik klíčových tříd Tailwind CSS: py-10 lg:py-14: Používá reagující vertikální podložku pro konzistentní odstup mezi zařízeními. : Creates a centered, max-width container with horizontal padding, ensuring content is well-aligned and readable. container mx-auto px-4 : Utilizes the current theme's CSS variable for the background color, ensuring seamless integration with light/dark modes. bg-background 2.1.4.3. Customization Points Minimalismus podle designu is a flexible foundation for custom styling via the prop. It's the perfect base for adding: Wrapper className Vlastní barvy pozadí nebo gradientové efekty. Hranice nebo rozdělení mezi sekcemi. Podrobné vizuální vylepšení, jako jsou blur nebo glow efekty. 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 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. 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> ); } Enter fullscreen mode Exit fullscreen mode 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. kategorie SectionType a generace řízená AI 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 Rozhraní zajišťuje standardní generaci meta tagů, což je kritické pro optimalizaci pro vyhledávače (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; // Тип основной секции } Vstup do režimu plné obrazovky 2.1.5.4. HeaderContentConfig: Správa SEO hierarchie Managing the heading hierarchy is critical for on-page SEO. The section is optional. This is an intentional design choice because certain section types may embed / Dárky přímo uvnitř . 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 Podle designu je tělu sekce poskytnuta úplná svoboda k implementaci jakéhokoli rozložení nebo designu.Tato architektonická volba umožňuje maximální kreativní flexibilitu, což umožňuje AI generovat bohatý a rozmanitý obsah. 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: A Minimalist Approach 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: Tento proces dosahuje zásadní architektonické rovnováhy: a 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 Tyto Pole uvnitř 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 Tato volba designu poskytuje potřebnou flexibilitu pro integraci vysoce interaktivních, dynamických a pokročilých uživatelsky orientovaných oddílů bez kompromisu na základní písemné smlouvě hlavní architektury stránky. within the custom component itself 2.1.6. public-pages-config.ts: The Public Page and Slug Route Registry 2.1.6.1. Role in System Architecture 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 a definic. public-pages-config.ts SectionType Výsledná konfigurace působí jako most, který překládá analýzu uživatelských požadavků AI do struktury, kterou náš systém renderování stránek může interpretovat a zobrazovat. 2.1.6.2 Kdy používat tuto konfiguraci založenou na souborech 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: Pro rozsáhlé výrobní aplikace je přístup založený na souborech praktický pouze pro malou sadu stránek.Většina scénářů bude mít prospěch z ukládání těchto informací v databázi, která umožňuje dynamickou správu obsahu a škálovatelnost. 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[], }; Enter fullscreen mode Exit fullscreen mode 2.1.6.4. Configuration Categorization Principle Umístění konfiguračního souboru do 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: public-pages-config.ts – pro veřejné stránky (např. přistání, informace, kontakt). docs-pages-config.ts – pro dokumentační stránky s pokročilou navigací. admin-pages-config.ts – pro správní panely. blog-pages-config.ts – pro blogové příspěvky a články. Each category is designed to have its own: Speciální konfigurace souboru. Specializované typy sekcí. Unique rendering logic. 2.1.6.5. Interaction with the AI Generation System Pro náš systém AI slouží tento konfigurační soubor jako: Defining how objects should be formed. A structural template: PageConfig Providing reference values for the generation process. A data example: Schéma ověřování typu: Provádí TypeScript pro přísnou bezpečnost typu. The workflow is as follows: The AI analyzes the existing configuration file. It generates a new object based on the user's prompt. PageConfig Vývojář pak přidá novou konfiguraci do array stránek. Systém automaticky rozpoznává a registruje nové trasy. 2.6.6 Výhody a omezení Advantages of the File-Based Approach: Easily managed and versioned via Git. Version Control: Bezpečnost typu: Výhody zabezpečení typu kompilace s typem TypeScript. No database queries result in faster page loads. Zero Latency: Works seamlessly with static site generation (SSG). Simplified Deployment: Limitations: Žádné dynamické aktualizace: Chybí možnosti dynamické správy obsahu. Vyžaduje opětovné nasazení: Jakákoli změna vyžaduje novou výstavbu a nasazení. Ne pro UGC: Nevhodné pro uživatelsky generovaný obsah. Becomes difficult to manage beyond 20-30 pages. Scalability Concerns: 2.6.7 Složení // @/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[], }; Vstup do režimu plné obrazovky 6.8 Závěrečné zjištění je praktickým řešením pro malé až středně velké projekty, které nabízejí rovnováhu mezi jednoduchostí řízení a funkčností.Pro větší aplikace slouží jako vynikající výchozí bod před přechodem na robustnější architekturu založenou na databázích. public-pages-config.ts 2.1.7. utils.ts: Funkce konfiguračního nástroje This module provides utility functions for managing page configurations. It includes two primary functions: , který filtruje všechny stránky s předponou "veřejné" pro statickou generaci, a , který umístí konkrétní stránku přesným, případově citlivým zápasem jeho slug array. 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())) ); } Vstup do režimu plné obrazovky 2.1.8. header-section.tsx: Unified Section Header Jednotný hlavička sekce Tato standardizovaná složka slouží jako univerzální nadpis pro všechny typy sekcí, což zajišťuje konzistenci v celé aplikaci. Nabízí volitelné prvky, jako je oznámení, nadpis H1/H2 a popis. Tato složka hraje klíčovou roli při optimalizaci SEO a udržování vizuální konzistence pro stránky generované 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> ); } Vstup do režimu plné obrazovky 2.1.9. header-section.tsx: Unified Section Header (Atomic Components) This section details the atomic components used to construct headers: (podpora pro H1 a H2) pro subdodavatele a pro umístění tlačítek. Tyto součásti 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 }; Vstup do režimu plné obrazovky 2.1.10. announcement.tsx: Oznámení složka 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> ); } Vstup do režimu plné obrazovky 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> ); } Vstup do režimu plné obrazovky 2.1.12. body-section.tsx: Arbitrary Content Container 2.1.12.1 Účel a filozofie serves as a highly flexible container for the main content within sections. Unlike the strictly standardized Header and Footer components, Poskytuje úplnou svobodu pro umístění jakéhokoli obsahu React. BodySection BodySection 2.1.12.2 Zásady generování obsahu Potěšení pro must be generated as plain TSX without using elements, where all elements are presented in an expanded format. 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> </> ) Enter fullscreen mode Exit fullscreen mode // ❌ bodyContent: ( <div className="grid"> {features.map(feature => <FeatureCard key={feature.id} {...feature} />)} </div> ) Vstup do režimu plné obrazovky 2.1.12.3. When to Use Custom Components Pokud sekce vyžaduje složitou logiku (stav, efekty, interaktivitu), vytvořte samostatnou složku a přidejte ji do 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> ); } Enter fullscreen mode Exit fullscreen mode 2.1.12.4 Složení // @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> ); } Vstup do režimu plné obrazovky 2.1 12.5 Závěry Působí jako most mezi standardizovanou architekturou systému a tvůrčí svobodou generace umělé inteligence, čímž dosahuje rovnováhy mezi kontrolou a flexibilitou. BodySection 2.2 Pokročilé součásti Advanced Custom Components jsou navrženy tak, aby poskytovaly komplexní, interaktivní funkce, které přesahují možnosti našich standardních architektonických vzorů.Tyto komponenty jsou vyhrazeny pro scénáře vyžadující stavové řízení, sofistikované animace, zpracování dat v reálném čase nebo jedinečnou obchodní logiku. Kdy používat vlastní součásti: Interaktivní prvky: formuláře s validací, kalkulačky, konfigurátory produktů. : Complex transitions, parallax effects, automatic sliders. Animated Presentations Funkce v reálném čase: chaty, oznámení, živé datové zdroje. : Components with fundamentally different behavior on desktop vs. mobile. Adaptive Logic : Non-standard interface elements specific to the project. Unique UI Patterns Architektonická integrace : Konkrétní součásti jsou integrovány do Jak odlišné Prohlášení v rámci A Tento přístup jim umožňuje přístup k celosystémovému kontextu, jako je téma a informace o zařízení, při zachování konzistentního vzhledu a pocitu prostřednictvím sdílených tříd CSS a designových tokenů.Ačkoli se drží vizuálního jazyka systému, zachovávají úplnou svobodu ve své vnitřní logice a implementaci. Tato strategie poskytuje rovnováhu mezi standardizací většiny obsahu a umožněním tvůrčí svobody při implementaci složitých interaktivních prvků. PageHtmlTransformer case switch 2.2.1 Pokyny pro implementaci vlastních komponent 2.2.1.1 Závěsná politika : Přizpůsobené součásti musí být vráceny přímo, aniž by byly nebo Jsou zodpovědní za správu vlastního rozložení, paddingu a vrstvení, aby zajistili plnou kontrolu nad svou prezentací. No External Wrappers Wrapper FullScreenWrapper 2.2.1.2 Složení součástek : Prop rozhraní pro vlastní komponenty by měly být deklarovány v horní části souboru samotného komponentu. Všechny údaje jsou přenášeny z konfigurace stránky do komponentu prostřednictvím v sekci Config. Local Prop Interfaces customComponentsAnyTypeData 2.1 Rozšíření SectionType sekce : Každá vlastní součást vyžaduje, aby byl do Enum v To zajišťuje správnou typovou kontrolu a umožňuje výrazu v transformátoru pro správnou identifikaci a renderování komponenty. 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”; Vstup do režimu plné obrazovky 2.2.1.4. aktualizace případů v ageHtmlTransformer Přizpůsobené zpracování případůNový případ je přidán do aplikace PageHtmlTransformer pro manipulaci s vlastním typem sekce s přímým // В PageHtmlTransformer: case "new-custom-section": return ( <NewCustomSection key={config.id} customData={section.customComponentsAnyTypeData.customData} /> ); Vstup do režimu plné obrazovky 2.2.1.5 Struktura vlastních konfigurací : Následující je příkladem konfigurace stránky, která zahrnuje vlastní sekci. Všechny údaje specifické pro jednotlivé komponenty jsou umístěny v objekt, který může mít jakoukoli strukturu požadovanou komponentou. 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[], Vstup do režimu plné obrazovky 2.2.2 Vlastní součást Příklad 2 2 1 . Dvojnásobná prezentace Dvojnásobná prezentace se 2.2.1.1 Aktualizace základních typů Nejprve přidejte nový typ sekce do Jedná se o. SectionType typescript // @/app/@right/(_service)/(_types)/page-wrapper-types.ts export type SectionType = | "hero-section" | "cta-section" | "double-presentation-section" Vstup do režimu plné obrazovky 2.2.1.2 Přidat nový případ Převodovka Transformer Převodovka Transformer Dále přidáme odpovídající Dvě na aby se vytvořila složka. case PageHtmlTransformer case "double-presentation-section": return ( <DoublePresentation key={section.id} metaData={section.customComponentsAnyTypeData.metaData} leftItem={section.customComponentsAnyTypeData.leftItem} rightItem={section.customComponentsAnyTypeData.rightItem} /> ); Vstup do režimu plné obrazovky 2.2.1.4 Příklad konfigurace Zde je příklad, jak nastavit Komponenty v . 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[]; Vstup do režimu plné obrazovky 2.2.2.1.5. Component Kompletní kód pro a komponenty. 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[], }; Vstup do režimu plné obrazovky 2 2 1 3 page-wrapper-types.ts Štítek: Page-Wrapper-types Zde je kompletní Soubor s novým typem. 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> ); } Vstup do režimu plné obrazovky Conclusion: How to Get the Most Out of This Documentation Můžete dokonce cítit, že to není nejvíce vzrušující čtení, a měli byste pravdu. To není zábava; je to podrobný technický průvodce navržen tak, aby vám plnou kontrolu nad výkonným systémem. To transform the study of this complex system into an interactive and productive process, we recommend the following approach. Používejte AI pro zrychlené učení Namísto pasivního čtení použijte tuto dokumentaci jako "mozek" pro svého AI asistenta. Your Action Plan: Zkopírujte celý obsah tohoto článku, od úvodu k této sekci. Použijte ji jako systémovou poptávku pro ChatGPT. To poskytne AI plný kontext architektury, kterou diskutujeme. 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 Tato metoda vám pomůže pochopit principy aplikace mnohem rychleji. . GitHub úložiště Co je následující? V tomto článku jsme vybudovali jeden ze dvou kritických prvků našeho systému generování stránek: soubor do připravených pro použití komponentů React. To otevírá cestu pro automatizované vytváření stránek, kde AI může generovat konfiguraci, a naše Tím se vytvoří krásné rozhraní. a tool that transforms a Config Transformer Chcete-li vidět náš projekt v akci, navštivte live demo na . Štítek.dev Štítek.dev A Glimpse into Future Posts: Příští článek se zaměří na druhou klíčovou technologii: generování stránek (dokumentace, tutoriály, stránky produktů) z souborů Markdown. Část 3: Od konfigurace k uživatelskému rozhraní.Znovu se podíváme na téma tohoto článku a hlouběji se podíváme na to, jak je konfigurace generovaná ChatGPT transformována na komponenty React a jak může být tento proces rozšířen. V následujícím tutoriálu začneme odpovědí na klíčovou otázku: Zůstaňte v tunelu! Why was Markdown chosen for content management?
