Tento výukový program je prvým dielom komplexného sprievodcu vytváraním riadeného systému pre automatické generovanie webových stránok pomocou React 19 a Next.js 15. Otvorený zdroj : (https://github.com/aifa-agi/aifa) Tu je roadmap: Časť 1 (ste tu): Základná architektúra hlboké potápanie - zachytiť všetky trasy, PageHtmlTransformer komponent a silne napísané konfigurácie stránok. Časť 2: Pokročilé typy stránok – automatizované stránky dokumentácie a interaktívne tutoriály. Časť 3: Integrácia AI motora – pripojenie externých modelov (ChatGPT, Claude) a nášho interného agenta Aifa pre nepretržitú, autonómnu generáciu obsahu. Bonus: Prípadová štúdia – nasadenie, monetizácia a škálovanie AI SaaS na úrovni výroby s registráciou používateľov a platbami Stripe. Tento krok za krokom blueprint vás prevedie budovaním vlastného klonu v0 pripraveného na podnikanie, kompletného s autentifikáciou a platobnými tokmi. reálny produkt AI od koncepcie až po spustenie - plný zdrojový kód k dispozícii na . → Technológia Stack: React 19 · Next.js 15 · Vercel · Prisma · Stripe · AI SDK · ChatGPT Naša platforma spája podnikovú stabilitu s krvavou inováciou: React 19 a Next.js 15 s App Router prinášajú sub-100ms rendery a skutočné paralelné trasy. Vercel podporuje nasadenie s nulovým časom ukončenia a globálne škálovanie. Prisma & Neon zaisťuje typovo bezpečný a bleskový prístup k dátam. Stripe spracováva okamžité, PCI-kompatibilné platby mimo krabice. AI SDK + ChatGPT vrstva v generatívnej inteligencii, takže AIFA Dev Starter môže spiniť kompletné UI, obsahové moduly a prototypy v priebehu niekoľkých minút - kompletné s vstavanou autentifikáciou a viacjazyčným AI chatom. Ako to funguje Poznámka: Odoslať jednu žiadosť v prirodzenom jazyku na ChatGPT. Generovať: Získajte PageConfig založený na JSON, ktorý definuje sekcie, metaúdaje a rozloženie vašej stránky. Build: Drop config súbor do aplikácie Next.js a spustiť npm run build. Ihneď máte plne štylizovaný, SEO-ready stránku, kompletný s auth a AI-powered chat. Potrebujete firemnú integráciu? Jednoducho zapnite náš „v0 Corporate Mode“ v [budúci aifa.dev(https://aifa.dev) pre pokročilú automatizáciu, prístup založený na úlohe a škálovateľnú architektúru mikroslužieb. Potrebujete firemnú integráciu? Jednoducho zapnite náš „v0 Corporate Mode“ v [budúci aifa.dev(https://aifa.dev) pre pokročilú automatizáciu, prístup založený na úlohe a škálovateľnú architektúru mikroslužieb. Kto vyhrá s generátorom lokalít poháňaným umelou inteligenciou? štúdiá, podniky, začínajúce spoločnosti a freelanceri Next-Generation Design Agency: Od mockupu po masovú produkciu za pár minút Predstavte si agentúru, ktorá vytvára škálovateľné technologické ekosystémy, nie len statické mockupy.Jedna investícia vopred do proprietárnej knižnice komponentov odomkne schopnosť vytvárať a nasadzovať viac ako 50 webových stránok na úrovni výroby za hodinu. Toto nie je sci-fi. Je to nová operačná paradigma, kde sa kreatívny kapitál stretáva s automatizovanou realizáciou. A s integrovanou integráciou Stripe môžete túto novú rýchlosť získať od prvého dňa. Zavedenie podniku: konzistentnosť značky a radikálna škálovateľnosť Klasický podnikový prípad použitia: riešenie QR menu na kľúč pre národnú reštauráciu. Vytvoríte systém hlavného dizajnu pre základné používateľské skúsenosti – ako sú produktové karty alebo ponuky – len raz. Každá lokalita prispôsobuje svoj branding a obsah prostredníctvom jednoduchého rozhrania, zatiaľ čo základné UX, výkon a integrita dizajnu zostávajú uzamknuté a konzistentné. , , , a . radical scalability bulletproof brand consistency unmatched speed-to-market Základný motor: naša architektúra transformátorov JSON-to-React Celý systém je poháňaný dvoma kritickými komponentmi: 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. Zatiaľ čo externé modely ako ChatGPT a Claude sa zaoberajú generovaním obsahu, naše vlastné transformátorové komponenty sú základným motorom systému – časť, ktorú sme vybudovali, aby sme zaručili výkon a vernosť dizajnu. AI-Native Documentation: Použite tento tutoriál ako živú znalostnú základňu Zastaviť Dokumentácia - Štart To je. čítanie Velenie Skutočná sila tejto príručky nie je v jej čítaní, je navrhnutá tak, aby bola súkromnou expertnou znalostnou základňou vášho projektu. Ako to funguje: Pošlite celý tento dokument do ChatGPT. Položte konkrétne, kontextové otázky: "Ako implementujem vlastnú sekciu?", "Aký je účel FullScreenWrapper?", "Ukážte mi kód pre komponentu DoublePresentation." Získajte presné odpovede pripravené na výrobu s kompletnými zlomkami kódu. Vyskúšajte tento prístup a pochopíte, prečo všetka technická dokumentácia v roku 2025 musí byť AI-native. Úvod: Naša filozofia – konzistentnosť Trumps surová rýchlosť Zatiaľ čo nástroje AI ako v0 uprednostňujú rýchlosť surovej generácie, naša metodika sa zameriava na kritickejšiu obchodnú metriku: Naším hlavným cieľom je poskytnúť konzistenciu dizajnu a architektonickú harmóniu v celej vašej digitálnej stopy. Total Cost of Ownership (TCO) Zatiaľ čo počiatočná generácia jednej stránky môže trvať o niečo dlhšie, následné úspory v oblasti vývoja, údržby a riadenia značky sú exponenciálne. Bulletproof Brand Consistency: Každá stránka generovaná umelou inteligenciou je automaticky v súlade s vašim zavedeným dizajnovým systémom. Bezproblémová užívateľská skúsenosť: Architektúra zaisťuje harmonickú a súdržnú cestu pre používateľa, čím eliminuje nepríjemné nezrovnalosti bežné v rýchlo generovaných lokalitách. Drasticky znížené prepracovanie: Tým, že presadzujeme štandardy v bode vytvorenia, minimalizujeme nákladné a časovo náročné manuálne úpravy, ktoré sa zvyčajne vyžadujú v postgenerácii. Skutočná architektonická škálovateľnosť: Náš prístup sa stáva efektívnejším, keď rozširujete.Čím viac stránok vytvárate, tým väčšia je návratnosť v rýchlosti a konzistencii. 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: Zaobchádzanie s komplexnosťou reálneho sveta Tento počiatočný tutoriál sa zameriava na budovanie štandardných stránok s naším jadrom , , , a Avšak open-source kódová základňa poskytuje pokročilé, out-of-the-box riešenia pre zložitejšie požiadavky: Header Body Footer Stránky s pokročilou navigáciou. Interaktívne Tutorial Pages s stateful, krok za krokom prvky. Pre jedinečné, vysoko interaktívne funkcie, ako sú animované prezentácie, databázy v reálnom čase alebo komponenty so zložitou správou stavu, môžete použiť To vám dáva flexibilitu pri implementácii vlastných funkcií bez toho, aby bola nikdy ohrozená základná integrita systému. Custom Components Your Next Step: Hands-On with Custom Components Aby ste skutočne zvládli tento systém, vašou praktickou úlohou je preskúmať proces vytvárania a integrácie nového vlastného komponentu. Koncept: AI ako správca vašej značky, nie len obsahový motor Moderné digitálne operácie vyžadujú rýchlosť, integritu značky a trhovú agilitu.Naša architektúra to dosahuje tým, že váš dizajnový systém zaobchádza ako so štruktúrovanou, inteligentnou znalostnou základňou.Formalizované, vopred schválené definície pre každú kritickú sekciu značky (Hero, CTA, FAQ, Features atď.) sú absorbované AI. Tým, že AI podáva vaše presné štandardy UI / UX, stáva sa viac ako generátorom obsahu - stáva sa konečným správcom identity vašej značky a presadzuje konzistenciu v každej fáze životného cyklu tvorby stránok. Pracovný postup v piatich krokoch: od dizajnového systému po SEO-optimalizovanú stavbu Získajte svoj dizajnový systém: Zaťažujeme znalostnú základňu AI vašimi šablónami komponentov a explicitnými pokynmi, ako ich implementovať vizuálne a štrukturálne, čím zabezpečíme 100% zarovnanie značky. Definovanie cieľa pomocou výzvy: Používateľ, projektový manažér alebo vývojár odošle jednoduchú textovú výzvu popisujúcu požadovanú stránku alebo jej prvky. Interpretácia a štruktúra AI: Agent AI analyzuje požiadavku, generuje sémantický obsah a inteligentne ho mapuje na príslušné, vopred schválené šablóny z databázy znalostí. Generujte deklaratívny PageConfig: Na základe vybraných šablón systém vydá silne napísaný PageConfig – deklaratívny JSON popis konečnej stránky. Automatizované vytváranie a nasadenie: Konfigurácia je spotrebovaná našimi komponentmi počas procesu vytvárania. Výstupom je stránka pripravená na výrobu, optimalizovaná pre SEO, ktorá je vizuálne a technicky v súlade s vašimi firemnými štandardmi. Podnikateľský vplyv: Drive Conversions a Slash TCO Zrýchlený prístup na trh: Spustite nové vstupné a produktové stránky s jedinou výzvou, pričom využijete predbežne schválené šablóny pre bezkonkurenčnú rýchlosť. Integrita značky Ironclad: Konzistencia značky a kontrola kvality sú automatizované, čím sa zabezpečí, že každá nová stránka dokonale odráža váš dizajnový systém. Redukované manuálne a škálovateľné A/B testovanie: Poskytnite marketingovým tímom možnosť škálovať varianty stránok a testovať obsah A/B bez zapojenia vývojárov do procesu rozloženia. Built for Global Scale: Všetky textové prvky a prvky rozhrania používateľa sú centralizované, takže lokalizácia a prispôsobenie trhu sú bezproblémové. Architektonická flexibilita: Navrhnuté tak, aby sa bezchybne integrovali do moderných potrubí CI/CD, hostingových platforiem a ďalších pracovných postupov založených na AI. 1.4. vaša cestovná mapa prostredníctvom tejto série V tomto komplexnom tutoriále vás prevedie: Dekonštrukcia jadrovej architektúry: hlboké ponorenie do systému PageHtmlTransformer, systému Wrapper/FullScreenWrapper a interakcie komponentov sekcií. Zvládnutie Rendering Pipeline: Pochopte logiku, ktorá stojí za zobrazením sekcií, zadávaním konfigurácií a vzťahom medzi súbormi config a komponentmi React, takže môžete systém rozšíriť sami. Naučte sa poučiť AI: Naučte sa vytvárať štruktúrované pokyny pre metaúdaje, hlavičky a stopy a definujte špecifikácie pre generovanie obsahu tela ako fragment JSX. Generovanie stránok na požiadanie: Použite svoje vedomosti na vytvorenie konfiguračných súborov, ktoré AI používa na generovanie stránok, ktoré sú plne v súlade s vašou architektúrou a štandardmi dizajnu. Anatómia našej AI-poháňanej architektúry Náš projekt je organizovaný tak, aby maximalizoval škálovateľnosť, udržateľnosť a rýchlosť vývoja. Používame konvencie Next.js 15 App Router, vrátane paralelných trás ( ) a súkromné zložky ( ), vytvoriť čistú a silnú štruktúru. @right _folder Projektový adresár 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 plnej obrazovky výstup z režimu plnej obrazovky Kľúč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 plnej obrazovky výstup z režimu plnej obrazovky Kľúčové komponenty Toolkit: Produkcia-pripravené stránky z krabice Cieľom Táto zbierka obsahuje architektonické piliery nášho systému: dynamické smerovanie, centrálny transformátorový motor, všestranné obaly obsahu, jednotné časti hlavičky a záložky a konfiguračné súbory a dátové zmluvy, ktoré ich poháňajú. Základné architektonické princípy: Bulletproof UI Consistency: Každá zložka dodržiava jednotný dizajnový systém a vzorce správania, čo zaisťuje bezproblémový a predvídateľný užívateľský zážitok. AI-Native by Design: Architektúra je optimalizovaná pre autonómnu generáciu, čo umožňuje AI budovať zložité stránky bez manuálneho zásahu. SEO-optimalizované od začiatku: Najlepšie postupy pre optimalizáciu pre vyhľadávače a sémantický HTML sú pečené, nie boldené. Typovo bezpečné a predvídateľné: Využívame prísne typovanie TypeScript na presadzovanie spoľahlivej zmluvy o údajoch medzi AI a užívateľským rozhraním, čím zabezpečujeme stabilitu systému. Modulárne a kompozitné: Každá zložka je samostatná jednotka, ktorá rieši konkrétny problém, navrhnutý pre maximálnu opakovateľnosť a rozšíriteľnosť. Spoločne tieto komponenty tvoria základ systému, ktorý zaručuje, že každá stránka generovaná umelou inteligenciou je nielen vizuálne súdržná, ale aj technicky robustná a pripravená na podnikanie. 2.1.1 V prípade Komponent: Univerzálna cesta Catch-All pre dynamické adresy URL [[...slug]]/page.tsx 2.1.1.1 Strategická hodnota všetkých ciest Catch-All: Agility a rýchlosť nasadenia Catch-all Route je dynamický smerovací vzor v Next.js, ktorý umožňuje jednej zložke stránky spracovať nekonečný počet segmentov URL. Dohovor, The parameter sa stáva množinou obsahujúcou každú časť URL cesty, bez ohľadu na to, ako hlboko je niesť. [[...slug]] slug Z obchodného hľadiska je táto architektonická voľba obrovskou konkurenčnou výhodou. Nekonečné hniezdenie a hĺbka obsahu: Už nie ste obmedzovaní štruktúrou súborov projektu. URL ako /public/category/nike/sneakers/black/12345 je spravovaný presne rovnakou zložkou ako /public/test. Bezproblémová navigácia a okamžité spustenie stránky: Nasadenie novej stránky je rovnako jednoduché ako pridanie jej konfigurácie do centrálneho súboru. Stránka prechádza naživo okamžite bez vytvorenia nových komponentov alebo navigácie v komplexnom súborovom systéme.To oddeľuje obsahovú stratégiu od inžinierskych cyklov, čo umožňuje marketingovým a produktovým tímom pohybovať sa rýchlejšie. Vstavaná automatizácia: Táto architektúra je základom pre plne automatizovaný obsahový ekosystém. Automaticky generovaný bočný panel alebo menu je možné naprogramovať tak, aby čítal konfigurácie stránok a dynamicky budoval navigáciu.Keď pridáte novú konfiguráciu stránky, navigácia sa automaticky aktualizuje, čo zaisťuje konzistentný užívateľský zážitok s nulovým manuálnym úsilím. 2.1.1.2 Hodnota dynamických URL pre AI asistentov: nekonečná škálovateľnosť obsahu V dnešnej konkurencieschopnej krajine si moderné platformy SaaS a AI vyžadujú obratnosť pri vytváraní nových stránok.Či už iniciované používateľom, administrátorom alebo autonómnym agentom AI, obsah musí byť architektúrovaný na okamžité vytváranie a nasadenie. Strategic Business Advantages: Odstraňuje architektonické obmedzenia: Odstraňuje všetky obmedzenia týkajúce sa štruktúry obsahu a hĺbky hniezdenia, čo umožňuje, aby sa vaša digitálna prítomnosť rozširovala nekonečne bez toho, aby sa vyžadovala zmena kódu. Unlocks Unmatched Agility: Vytvorte komplexné hierarchie obsahu pre akýkoľvek prípad použitia. Navigácia je riadená čisto vašou obchodnou logikou, nie obmedzená tuhým súborovým systémom. Umožňuje AI-powered automatizáciu: Táto architektúra je navrhnutá pre svet AI-first. poskytuje stabilný základ pre AI agentov autonómne generovať, konfigurovať a nasadzovať celé sekcie vašich stránok, od produktových katalógov až po znalostné základne. 2.1.1.3 Reálne prípady použitia vo veľkom meradle Táto architektúra nie je teoretická; je to bojovo testovaný model na nasadenie štruktúr obsahu s vysokou hodnotou a hlbokými hniezdami, ktoré podporujú rast podnikania: 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 Katalógy produktov elektronického obchodu: Okamžite spustite rozsiahle produktové línie s nekonečnými variáciami. URL ako /public/shop/apparel/mens/jackets/leather/fall-2025/black/sku-12345 sa stáva triviálnym na vytvorenie a správu, čo umožňuje rýchlu expanziu trhu a granulárnu organizáciu produktov. Firemné a vzdelávacie portály: Vytvorte rozsiahle znalostné základne alebo výukové platformy, kde môže byť obsah organizovaný logicky, bez ohľadu na to, ako hlboko hierarchia potrebuje ísť (napr. /public/tutorials/enterprise-ai/onboarding/module-3/advanced-prompting). #### 2.1.1.4. Ako to funguje: Engine of On-Demand Content V jadre je tento proces elegantne jednoduchý, ale výkonný: dynamicky prekladá akúkoľvek cestu URL do zodpovedajúcej konfigurácie stránky, ktorá sa potom zobrazí na blesku. Hlavnými úlohami komponentu sú: 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 byť ľubovoľnej dĺžky a vyhľadávanie je priamy zápas, tento systém poskytuje nekonečnú hĺbku hniezdenia s nulovým rizikom zrážok trasy. slugArr 1.1.5. kľúčové funkcie a ich obchodný vplyv : Drives by telling Next.js which generateStaticParams Performance & SEO 2.1.1.7. The Component: The Execution Engine Táto zložka je motorom, ktorý prináša našu architektúru poháňanú umelou inteligenciou k životu. Je to jediný, výkonný Next.js Server Component, ktorý pôsobí ako univerzálny manipulátor pre každú dynamicky generovanú verejnú stránku. Je zodpovedný za vyzdvihnutie správnej konfigurácie stránky na základe adresy URL a orchestráciu konečného renderovania, čo zaisťuje maximálny výkon a dodržiavanie pravidiel 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 plnej obrazovky výstup z režimu plnej obrazovky Bottom Line: Catch-All Routes ako váš AI Content Engine Kombinácia všetkých ciest s centralizovanou konfiguráciou stránok vytvára architektúru, ktorá je maximálne flexibilná, rozšíriteľná a účelovo postavená na orchesterovanie obsahu založeného na AI. Tento prístup je priateľský pre vývojárov aj agentov AI, čo vytvára bezproblémový pracovný postup od koncepcie až po nasadenie. Základný princíp je jednoduchý, ale transformatívny: Žiadne nové kódové súbory, žiadne zložité štruktúry priečinkov. Systémy navigácie a zobrazovania sa automaticky prispôsobujú, čo je základom skutočne agilnej a škálovateľnej platformy poháňanej umelou inteligenciou. A new page is just a new entry in a configuration file. FullScreenWrapper vs. Wrapper: Crafting Immersive plnohodnotné zážitky 2.1.3.1 Základný cieľ na je špeciálne navrhnutý pre sekcie, ktoré vyžadujú immersívnu prezentáciu na celej obrazovke s podporou videa alebo obrazu na pozadí. slúži ako základný kontajner pre sekcie "hrdiny", kde je obsah elegantne prekrývaný na vrchole bohatých mediálnych prvkov. FullScreenWrapper 2.1.3.2. Layered Architecture Komponent používa sofistikovanú vrstvenú štruktúru, aby zabezpečil, že obsah zostane čitateľný a vizuálne odlíšený od pozadia. 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 plnej obrazovky výstup z režimu plnej obrazovky 2.1.3.3 Prispôsobenie a rozšíriteľnosť na is designed for easy customization. You can add complex visual effects directly via the V blízkosti. FullScreenWrapper className <FullScreenWrapper className="bg-gradient-to-br from-blue-900 to-purple-900"> vstup do režimu plnej obrazovky výstup z režimu plnej obrazovky Kontrola opacity: Videá na pozadí automaticky dostávajú triedu opacity-40 na zlepšenie čitateľnosti textu, ale toto môže byť ľahko prevrátené. : 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 Keď potrebujete rozdeľovače sekcií, hranice, efekty lesku alebo rozostrenie pozadia, poskytuje ideálny základ pre implementáciu týchto štýlov, vďaka čomu je ideálny pre vytváranie vysoko štylizovaných, opakovane použiteľných šablón. FullScreenWrapper typescript <FullScreenWrapper className="border-t-4 border-gradient bg-blur-effect"> vstup do režimu plnej obrazovky výstup z režimu plnej obrazovky 2.3.3 Zloženie zložky // @/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: Štandardný sekčný kontajner 2.1.4.1 Prípad primárneho použitia na 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. Structure and Styling typescript <section className="py-10 lg:py-14 bg-background"> <div className="container mx-auto px-4"> {children} // Header → Body → Footer </div> </section> vstup do režimu plnej obrazovky výstup z režimu plnej obrazovky The component's structure is simple and optimized for performance, relying on a few key Tailwind CSS classes: py-10 lg:py-14: Používa responzívnu vertikálnu podložku pre konzistentné oddeľovanie medzi zariadeniami. kontajner mx-auto px-4: Vytvára stredový kontajner s maximálnou šírkou s horizontálnym zapínaním, čím zabezpečuje, že obsah je dobre zarovnaný a čitateľný. bg-background: Využíva pre farbu pozadia premennú CSS aktuálnej témy, čím zabezpečuje bezproblémovú integráciu so svetlými a tmavými režimami. 2.1.4.3. Customization Points While minimalist by design, the je flexibilný základ pre vlastné styling prostredníctvom Je to ideálny základ pre pridanie: Wrapper className Vlastné farby pozadia alebo gradientové efekty. Hranice alebo rozdelenia medzi sekciami. 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> vstup do režimu plnej obrazovky výstup z režimu plnej obrazovky 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 4.1 Zloženie komponentu // 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. Základná zmluva: prepojenie generácie AI a renderovania používateľského rozhrania 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. kategórie SectionType a generácia založená na AI Operačný model AI je sústredený okolo 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 optimalizácia a metaúdaje na interface ensures the standards-compliant generation of meta tags, which is critical for search engine optimization (SEO). Meta tags are generated automatically via the Táto funkcia získava údaje z konfigurácie stránky a odovzdáva ich 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 plnej obrazovky výstup z režimu plnej obrazovky 2.1.5.4. HeaderContentConfig: Managing SEO Hierarchy Riadenie hierarchie nadpisov je rozhodujúce pre on-page SEO. The section is optional. This is an intentional design choice because certain section types may embed / tags directly within their Aj keď to poskytuje flexibilitu, predstavuje potenciálne riziko pre konzistenciu používateľského rozhrania, čo je hlavným cieľom tejto architektúry. A note of caution: Header H1 H2 bodyContent typescript interface HeaderContentConfig { heading: string; headingLevel?: 1 | 2; // H1/H2 для поисковой иерархии description?: string; showBorder?: boolean; } vstup do režimu plnej obrazovky výstup z režimu plnej obrazovky 2.1.5.5. BodySection: Enabling Maximum Design Freedom typescript bodyContent?: React.ReactNode; vstup do režimu plnej obrazovky výstup z režimu plnej obrazovky Podľa dizajnu je telu sekcie udelená úplná sloboda na implementáciu akéhokoľvek rozloženia alebo dizajnu.Táto architektonická voľba umožňuje maximálnu kreatívnu flexibilitu, čo umožňuje AI generovať bohatý a rôznorodý obsah.Tento prístup zámerne kontrastuje s 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: Minimalistický prístup Súčasná implementácia footer je zámerne minimalistická. Podporuje iba voliteľné tlačidlá call-to-action. Nie sú zahrnuté žiadne ďalšie prvky, rozhodnutie urobené na uprednostnenie jednoduchosti, rýchlosti a jednotnosti na všetkých generovaných stránkach. 2.1.5.7 Zásady pre rozšírenie definícií typu To introduce a new , the following steps must be taken: SectionType Aktualizácia znalostí o umelej inteligencii: znalostná základňa umelej inteligencie musí byť aktualizovaná s komplexnými pokynmi a príkladmi pre nový typ sekcie. 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 kľúčovú architektonickú rovnováhu: and are strictly typed to enforce SEO best practices and UI consistency, while the offers maximum flexibility for innovative, AI-driven design solutions. Header Footer Body 2.1.5.8. Component // app/@right/(_service)/(_types)/page-wrapper-types.ts export interface MetadataConfig { title?: string; description?: string; } export interface PageMetadata { id: string; title: string; description: string; image?: string; slug?: string[]; type: SectionType; } export type SectionType = | "hero-section" | "cta-section" | "faq-section" | "features-section" | "testimonials-section" | "pricing-section" | "contact-section" | "blog-posts-section" | "product-grid-section" | "image-gallery-section" | "text-block-section" | "video-section" | "team-section" | "about-us-section" | "newsletter-section" | "social-proof-section" | "comparison-table-section" | "map-section" | "custom-html-section" | "changelog-section" | "comparison-two-column-section" | "comparison-three-column-section" | "feature-showcase-section"; export interface BaseSection { id: string; type: SectionType; className?: string; } export interface HeaderContentConfig { announcement?: { badgeText?: string; descriptionText?: string; href?: string; }; heading: string; headingLevel?: 1 | 2; description?: string; showBorder?: boolean; } export interface FooterContentConfig { actions?: { label: string; href: string; variant?: | "default" | "secondary" | "destructive" | "outline" | "ghost" | "link"; }[]; } export interface SectionConfig extends BaseSection { type: SectionType; headerContent: HeaderContentConfig; bodyContent?: React.ReactNode; footerContent?: FooterContentConfig; videoUrl?: string; imageUrl?: string; sectionClassName?: string; contentWrapperClassName?: string; customComponentsAnyTypeData?: any; } export type Section = SectionConfig; export interface PageConfig { metadata: PageMetadata; sections: Section[]; } export type SlugType = string[]; Enter fullscreen mode Exit fullscreen mode 2.1.5.9. customComponentsAnyTypeData: Supporting Arbitrary Custom Components The field within Je určený na prenášanie nestrukturovaných údajov do sekcií, ktoré využívajú zložité alebo jedinečné vlastné komponenty, ktoré nie sú v súlade s našimi štandardnými rozhraním. 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. V rámci samotnej zložky 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 definícií. 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). Webové stránky s statickým obsahom, ktorý vyžaduje zriedkavé aktualizácie. Rapid prototyping and Minimum Viable Products (MVPs), allowing for a quick start without database setup. Pristávacie stránky s pevnou, preddefinovanou štruktúrou. When to Transition to a Database: For large-scale production applications, a file-based approach is only practical for a small set of pages. Most scenarios will benefit from storing this information in a database to enable dynamic content management and scalability. 2.1.6.3. Configuration Structure typescript export const PublicPagesConfig = { pages: [ { metadata: { id: "public", title: "Enterprise-Grade AI Next.js starter", description: "Free Open-Source starter kit...", slug: ["public", "test"], type: "hero-section", }, sections: [ { id: "test-block", type: "hero-section", headerContent: { /* SEO-заголовки */ }, bodyContent: {}, footerContent: { /* Кнопки действий */ }, videoUrl: "/_static/video/ai-loop.mp4", contentWrapperClassName: "text-white", } as SectionConfig, ], }, ] as PageConfig[], }; Enter fullscreen mode Exit fullscreen mode 2.1.6.4 Princíp kategorizácie konfigurácie Placing the configuration file in the directory signifies its role in managing public-facing pages. Key Architectural Decision: public/(_service)/(_config)/ Scaling by Category: Naša architektúra podporuje škálovanie kategorizáciou konfigurácií, čím zabezpečuje čistú a organizovanú štruktúru: — for public pages (e.g., landing, about, contact). public-pages-config.ts docs-pages-config.ts – pre dokumentárne lokality s pokročilou navigáciou. — for administrative dashboards. admin-pages-config.ts blog-pages-config.ts – pre blogové príspevky a články. Each category is designed to have its own: Dedicated configuration file. Špecializované typy sekcií. Unique rendering logic. 2.1.6.5. Interaction with the AI Generation System For our AI system, this configuration file serves as: Štrukturálna šablóna: Definovanie toho, ako by sa mali vytvárať objekty PageConfig. Providing reference values for the generation process. A data example: Enforced by TypeScript for strict type safety. A type validation schema: The workflow is as follows: The AI analyzes the existing configuration file. It generates a new object based on the user's prompt. PageConfig Vývojár potom pridá novú konfiguráciu do array stránok. Systém automaticky rozpozná a zaregistruje nové trasy. 2.1.6.6. Advantages and Limitations Advantages of the File-Based Approach: Easily managed and versioned via Git. Version Control: Benefits from compile-time type safety with TypeScript. Type Safety: No database queries result in faster page loads. Zero Latency: Works seamlessly with static site generation (SSG). Simplified Deployment: Limitations: Lacks dynamic content management capabilities. No Dynamic Updates: Any change necessitates a new build and deployment. Requires Redeployment: Nie pre UGC: Nevhodné pre používateľom generovaný obsah. Becomes difficult to manage beyond 20-30 pages. Scalability Concerns: 2.1.6.7. Component // @/app/@right/public/(_servise)/(_config)/public-pages-config.ts import { PageConfig, SectionConfig, } from "@/app/@right/(_service)/(_types)/page-wrapper-types"; export const PublicPagesConfig = { pages: [ { metadata: { id: "public", title: "Enterprise-Grade AI Next.js starter", description: "Free Open-Source starter kit...", slug: ["public", "test"], type: "hero-section", }, sections: [ { id: "test-block", type: "hero-section", headerContent: { announcement: { badgeText: "Thanks", descriptionText: "AI-SDK V5 & Vercel AI", href: "https://github.com/aifa-agi/aifa", }, heading: "Enterprise-Grade AI Next.js starter", description: "Free Open-Source starter kit to build, deploy, and scale intelligent AI applications. Artifacts Feature, features secure multi-provider auth, Stripe payments, vector knowledge bases, deep-research agents, and a unique fractal architecture designed for the future of AI.", showBorder: false, headingLevel: 1, }, bodyContent: {}, footerContent: { actions: [ { label: "Get Started", href: "/https://github.com/aifa-agi/aifa", variant: "default", }, { label: "Browse Docs", href: "/docs", variant: "ghost" }, ], }, videoUrl: "/_static/video/ai-loop.mp4", contentWrapperClassName: "text-white", } as SectionConfig, ], }, ] as PageConfig[], }; Enter fullscreen mode Exit fullscreen mode 2.6.8 Záverečné hodnotenie je praktickým riešením pre malé až stredne veľké projekty, ponúka rovnováhu medzi jednoduchosťou riadenia a funkčnosťou.Pre väčšie aplikácie slúži ako vynikajúci východiskový bod pred prechodom na robustnejšiu architektúru založenú na databázach. public-pages-config.ts 2.1.7. utils.ts: Konfigurácia utility funkcie This module provides utility functions for managing page configurations. It includes two primary functions: , which filters all pages with the "public" prefix for static generation, and , which locates a specific page by an exact, case-sensitive match of its 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())) ); } Enter fullscreen mode Exit fullscreen mode 2.1.8. header-section.tsx: Jednotný hlavička sekcie 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> ); } Enter fullscreen mode Exit fullscreen mode 2.1.9. header-section.tsx: Unified Section Header (Jednotná hlavička sekcií) This section details the atomic components used to construct headers: (podpora pre H1 a H2) pre podriadených a for placing buttons. These components leverage pre dynamickú generáciu tagov HTML, zabezpečenie správnej hierarchie SEO. 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: Oznámenie komponent Táto interaktívna zložka značiek je určená pre oznámenia a oznámenia. Podporuje navigáciu, ovládanie klávesnice a podmienené zobrazovanie, automaticky sa skrýva, keď nie je prítomný žiadny obsah. Používa sa na upozornenie na dôležité aktualizácie alebo odkazy. // @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 plnej obrazovky výstup z režimu plnej obrazovky 2.1.11. footer-section.tsx: Jednotné akcie sekcie 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 plnej obrazovky výstup z režimu plnej obrazovky 2.1.12. body-section.tsx: Rozhodný obsahový kontajner 2.1.12.1. Purpose and Philosophy slúži ako vysoko flexibilný kontajner pre hlavný obsah v sekciách. Na rozdiel od prísne štandardizovaných komponentov hlavičky a nohy, poskytuje úplnú slobodu pri umiestňovaní akéhokoľvek obsahu React. BodySection BodySection 2.1.12.2. Content Generation Principles Spokojnosť pre musí byť generovaný ako obyčajný TSX bez použitia prvky, kde sú všetky prvky prezentované v rozšírenom formáte. 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 plnej obrazovky výstup z režimu plnej obrazovky 2.1.12.3 Kedy používať vlastné komponenty If a section requires complex logic (state, effects, interactivity), create an independent component and add it to 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> ); } vstup do režimu plnej obrazovky výstup z režimu plnej obrazovky 2.1.12.4. Component // @app/@right/(_service)/(_components)/page-transformer-components/body-sections-components/body-section.tsx import type { HTMLAttributes, ReactNode } from "react"; import { cn } from "@/lib/utils"; import { SectionType } from "../../../(_types)/page-wrapper-types"; interface BodySectionProps extends HTMLAttributes<HTMLDivElement> { children?: ReactNode | null; type: SectionType; } export function BodySection({ children, className, ...props }: BodySectionProps) { const defaultHeightRem = 0; const hasChildren = children !== null && children !== undefined && // Covers case when children = [] or "" !(Array.isArray(children) && children.length === 0) && !(typeof children === "string" && children === ""); if (!hasChildren && defaultHeightRem) { return ( <div className={cn(className)} style={{ height: `${defaultHeightRem}rem` }} {...props} > {/* Empty section with default height */} </div> ); } if (!hasChildren) { return null; } return ( <div className={cn(className)} {...props}> {children} </div> ); } Enter fullscreen mode Exit fullscreen mode 2.1.12.5 Záverečné hodnotenie Pôsobí ako most medzi štandardizovanou architektúrou systému a tvorivou slobodou generácie umelej inteligencie, čím dosahuje rovnováhu medzi kontrolou a flexibilitou. BodySection 2.2 Pokročilé vlastné komponenty Pokročilé vlastné komponenty sú navrhnuté tak, aby poskytovali komplexné, interaktívne funkcie, ktoré presahujú možnosti našich štandardných architektonických vzorov. Tieto komponenty sú vyhradené pre scenáre vyžadujúce riadenie stavu, sofistikované animácie, spracovanie údajov v reálnom čase alebo jedinečnú obchodnú logiku. Kedy používať vlastné komponenty: : Forms with validation, calculators, product configurators. Interactive Elements Animované prezentácie: Komplexné prechody, parallaxové efekty, automatické posúvače. : Chats, notifications, live data feeds. Real-Time Functionality : Components with fundamentally different behavior on desktop vs. mobile. Adaptive Logic Jedinečné vzory používateľského rozhrania: neštandardné prvky rozhrania špecifické pre projekt. Architektonická integrácia : Špeciálne komponenty sú integrované do Ako odlišné Vyhlásenia v rámci A Tento prístup im umožňuje prístup k celosystémovému kontextu, ako sú informácie o téme a zariadení, pričom udržiava konzistentný vzhľad a pocit prostredníctvom zdieľaných tried CSS a dizajnových tokenov. Hoci dodržiavajú vizuálny jazyk systému, zachovávajú úplnú slobodu vo svojej vnútornej logike a implementácii. Táto stratégia poskytuje rovnováhu medzi štandardizáciou väčšiny obsahu a umožnením tvorivej slobody pri implementácii komplexných interaktívnych prvkov. PageHtmlTransformer case switch 2.2.1 Usmernenia pre implementáciu vlastných komponentov 2.2.1.1 Obalová politika : Prispôsobené komponenty musia byť vrátené priamo bez toho, aby boli uzavreté alebo . They are responsible for managing their own layout, padding, and layering to ensure full control over their presentation. No External Wrappers Wrapper FullScreenWrapper 2.2.1.2. Component-Scoped Typing : Prop rozhrania pre vlastné komponenty by mali byť deklarované v hornej časti súboru samotného komponentu. Všetky údaje sa prenášajú z konfigurácie stránky do komponentu prostredníctvom položky v sekcii Config. Local Prop Interfaces customComponentsAnyTypeData 2.2.1.3 Rozšírenie sekcie sekcie : Každý vlastný komponent vyžaduje, aby bol do Jedná sa o To zaisťuje správnu typovú kontrolu a umožňuje vyhlásenie v transformátore na správnu identifikáciu a zobrazenie komponentu. 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 plnej obrazovky výstup z režimu plnej obrazovky 2.2.1.4. aktualizácia prípadov v ageHtmlTransformer Prispôsobené spracovanie prípadovNový prípad je pridaný do aplikácie PageHtmlTransformer na spracovanie vlastného typu sekcie s priamym // В PageHtmlTransformer: case "new-custom-section": return ( <NewCustomSection key={config.id} customData={section.customComponentsAnyTypeData.customData} /> ); vstup do režimu plnej obrazovky výstup z režimu plnej obrazovky 2.2.1.5. Custom Config Structure : Nižšie je uvedený príklad konfigurácie stránky, ktorá obsahuje vlastnú sekciu. Všetky údaje špecifické pre jednotlivé komponenty sú umiestnené v objekt, ktorý môže mať akúkoľvek štruktúru požadovanú komponentom. 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 plnej obrazovky výstup z režimu plnej obrazovky 2.2.2 Príklad prispôsobených komponentov 2.2.2.1. DoublePresentation Dvojnásobná prezentácia → 2.2.2.1.1 Aktualizácia základných typov Najprv pridajte nový typ sekcie do Jedného dňa. SectionType typescript // @/app/@right/(_service)/(_types)/page-wrapper-types.ts export type SectionType = | "hero-section" | "cta-section" | "double-presentation-section" vstup do režimu plnej obrazovky výstup z režimu plnej obrazovky 2.2.1.2 Pridať nový prípad PageHtmlTransformátor PageHtmlTransformátor Ďalej pridajte zodpovedajúce Dvojica The na vytvorenie komponentu. 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 plnej obrazovky výstup z režimu plnej obrazovky 2.2.2.1.4. Config Example Tu je príklad, ako nastaviť 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 plnej obrazovky výstup z režimu plnej obrazovky 2.2.2.1 Zloženie Kompletný kód pre 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 plnej obrazovky výstup z režimu plnej obrazovky 2 2 1 3 Stránka - typy.sk Stránka - typy.sk Tu je kompletný Súbor s novým typom. 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 plnej obrazovky výstup z režimu plnej obrazovky Záver: Ako získať čo najviac z tejto dokumentácie Vieme, že pokyny a komponenty prezentované tu sa môžu zdať rozsiahle pre jeden príspevok.Môžete dokonca cítiť, že to nie je najzaujímavejšie čítanie, a mali by ste pravdu.Toto nie je zábava; je to podrobný technický sprievodca navrhnutý tak, aby vám úplnú kontrolu nad výkonným systémom. Ak chcete premeniť štúdium tohto komplexného systému na interaktívny a produktívny proces, odporúčame nasledujúci prístup. Použitie AI pre zrýchlené učenie Namiesto pasívneho čítania použite túto dokumentáciu ako "mozog" pre svojho AI asistenta. Your Action Plan: Skopírujte celý obsah tohto článku, od úvodu k tejto sekcii. Použite ho ako systémovú výzvu pre ChatGPT. To poskytne AI s plným kontextom architektúry, o ktorej hovoríme. 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 Táto metóda vám pomôže pochopiť princípy aplikácie oveľa rýchlejšie. Môžete nájsť úplný zdrojový kód pre tento projekt na našom . GitHub repository Čo je nasledujúce? V tomto článku sme vybudovali jeden z dvoch kritických kusov nášho systému generovania lokalít: súbor do pripravených na použitie komponentov React. To otvára cestu pre automatizované vytváranie stránok, kde AI môže generovať konfiguráciu, a naše Urobte z neho krásny rozhranie. a tool that transforms a Config Transformer Ak chcete vidieť náš projekt v akcii, navštívte live demo na . Zoznamka.dev Zoznamka.dev A Glimpse into Future Posts: Ďalší článok sa zameria na druhú kľúčovú technológiu: generovanie stránok (dokumentácia, tutoriály, stránky produktov) z súborov Markdown. Časť 3: Od konfigurácie k používateľskému rozhraní. opätovne sa pozrieme na tému tohto článku a ponoríme sa hlbšie do toho, ako sa konfigurácia generovaná ChatGPT transformuje na komponenty React a ako sa tento proces môže rozšíriť. V nasledujúcom tutoriále začneme odpoveďou na kľúčovú otázku: Zostaňte v tuneli! Why was Markdown chosen for content management?
