Šī apmācība ir pirmā daļa no visaptverošas rokasgrāmatas, lai izveidotu vadītu sistēmu, lai automātiski ģenerētu tīmekļa lapas, izmantojot React 19 un Next.js 15. Atvērtais avots : (https://github.com/aifa-agi/aifa) ir tīmekļa vietnes tīmekļa vietne, kas atrodas šajā vietnē. Šeit ir ceļvedis: 1. daļa (Jūs esat šeit): Galvenā arhitektūra dziļa niršana - visus maršrutus, PageHtmlTransformer sastāvdaļu un spēcīgi ievadītās lapas konfigurācijas. 2. daļa: Paplašināti lapas veidi — automatizētas dokumentācijas lapas un interaktīvie apmācības. 3. daļa: AI motora integrācija — savienojot ārējos modeļus (ChatGPT, Claude) un mūsu iekšējo aifa aģentu nepārtrauktai, autonomai satura ģenerācijai. Bonuss: gadījumu izpēte — ražošanas līmeņa AI SaaS izvietošana, monetizēšana un mērogošana ar lietotāju reģistrāciju un Stripe maksājumiem. Šis soli pa solim plāns pavada jūs, veidojot savu uzņēmuma gatavo v0 klonu, kas ir pilns ar autentifikāciju un maksājumu plūsmām. reālais AI produkts no koncepcijas līdz uzsākšanai - pilns avota kods, kas pieejams vietnē . Tātad Tehnoloģiju kopa: React 19 · Next.js 15 · Vercel · Prisma · Stripe · AI SDK · ChatGPT Mūsu platforma apvieno uzņēmuma līmeņa stabilitāti ar novatoriskām inovācijām: React 19 un Next.js 15 ar App Router nodrošina sub-100ms rādītājus un patiesos paralēlos maršrutus. Vercel nodrošina nulles izbeigšanās laiku un globālu robežšķērsošanas mērogu. ensure type-safe, lightning-fast data access. Prisma & Neon Stripe apstrādā tūlītējus, PCI atbilstīgus maksājumus ārpus kastes. AI SDK + ChatGPT slānis ģeneratīvajā inteliģencē, tāpēc AIFA Dev Starter var pārveidot pilnīgu interfeisu, satura moduļus un prototipus minūtēs - pilnībā ar iebūvētu autentifikāciju un daudzvalodu AI tērzēšanu. Kā tas darbojas Priekšlikums: nosūtiet vienu dabiskās valodas pieprasījumu ChatGPT. Generate: saņem JSON balstītu PageConfig, kas definē jūsu lapas sadaļas, metadatus un izkārtojumu. Build: Ielieciet konfig failu savā Next.js lietojumprogrammā un palaidiet npm run build. Nekavējoties jums ir pilnībā stilēta, SEO gatava lapa, kas ir pilnīga ar auth un AI darbināmu tērzēšanu. Nepieciešama uzņēmējdarbības integrācija? Vienkārši ieslēdziet mūsu “v0 korporatīvo režīmu” [nākamajā aifa.dev(https://aifa.dev)], lai iegūtu uzlabotu automatizāciju, uz lomu balstītu piekļuvi un skalējamu mikropakalpojumu arhitektūru. Tātad, ja jums ir nepieciešama papildu informācija, lūdzu, sazinieties ar mums, lai noskaidrotu, vai jums ir nepieciešama papildu informācija, lai noskaidrotu, vai jums ir nepieciešama papildu informācija, lai noskaidrotu ( Uzlabota automatizācija, uz lomu balstīta piekļuve un skalējama mikropakalpojumu arhitektūra. https://aifa.dev Kas uzvar ar AI darbināmu vietņu ģeneratoru? Studios, uzņēmumi, jaunuzņēmumi un brīvprātīgie Nākamās paaudzes dizaina aģentūra: no maketēšanas līdz masveida ražošanai minūtēs Iedomājieties aģentūru, kas arhitektē mērogojamas tehnoloģiju ekosistēmas, nevis tikai statiskas mockups. Tā ir jauna darbības paradigma, kurā radošais kapitāls atbilst automatizētai izpildei.Un ar iebūvēto Stripe integrāciju jūs varat monetizēt šo jauno ātrumu no pirmās dienas. Uzņēmējdarbības ieviešana: zīmola konsekvence un radikāla mērogojamība Klasisks uzņēmuma lietošanas gadījums: atslēgvārdu QR izvēlnes risinājums valsts restorānu franšīzei. Jūs izveidojat galveno dizaina sistēmu galvenajai lietotāja pieredzei, piemēram, produktu kartēm vai izvēlnēm, tikai vienu reizi. Katra atrašanās vieta pielāgo savu zīmolu un saturu, izmantojot vienkāršu saskarni, bet galvenā UX, veiktspēja un dizaina integritāte paliek slēgta un konsekventa. , un . radical scalability bulletproof brand consistency unmatched speed-to-market Galvenais dzinējs: mūsu JSON-to-React Transformers arhitektūra Visa šī sistēma ir aprīkota ar divām kritiskām sastāvdaļām: 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. Kamēr ārējie modeļi, piemēram, ChatGPT un Claude, pārvalda satura ģenerāciju, mūsu patentētie transformatoru komponenti ir sistēmas pamatdzinējs - daļa, ko mēs izveidojām, lai garantētu veiktspēju un dizaina ticamību. AI-Native dokumentācija: Izmantojiet šo pamācību kā dzīvu zināšanu bāzi Pārtraukt Dokumentācija - Sākums Tā ir. Lasīt Komandas Šīs rokasgrāmatas patiesais spēks nav tās lasīšanā.Tas ir paredzēts kā jūsu projekta privātā, ekspertu zināšanu bāze. Kā tas darbojas: Ievadiet šo visu dokumentu ChatGPT. Uzdodiet konkrētus, kontekstuālus jautājumus: "Kā īstenot pielāgotu sadaļu?", "Kāds ir FullScreenWrapper mērķis?", "Rādīt man DoublePresentation komponenta kodu." Saņemiet precīzas, ražošanas gatavas atbildes ar pilnīgiem koda fragmentiem. Izmēģiniet šo pieeju, un jūs sapratīsiet, kāpēc visai tehniskajai dokumentācijai 2025. gadā ir jābūt AI dzimtai. Ievads: Mūsu filozofija — konsekvence Trumps Raw Speed Šajā rokasgrāmatā nav runa par ātrākās iespējamās AI lapas ģeneratora izveidi.Kamēr AI rīki, piemēram, v0, prioritizē izejvielu ražošanas ātrumu, mūsu metodoloģija koncentrējas uz kritiskāku biznesa rādītāju: Mūsu galvenais mērķis ir nodrošināt bulletproof dizaina konsekvenci un arhitektūras harmoniju visā jūsu digitālo pēdu. Total Cost of Ownership (TCO) Lai gan vienas lapas sākotnējā ģenerācija var ilgt nedaudz ilgāk, lejupslīdes ietaupījumi izstrādē, uzturēšanā un zīmola pārvaldībā ir eksponenciāli. Bulletproof Brand Consistency: Katra AI ģenerēta lapa automātiski atbilst jūsu izveidotajai dizaina sistēmai. Netraucēta lietotāja pieredze: arhitektūra nodrošina lietotāja harmonisku un saskaņotu ceļojumu, novēršot straujās nesaskaņotības, kas ir bieži sastopamas ātri izveidotajās vietnēs. Drastiski samazināta pārstrāde: Nosakot standartus izveides brīdī, mēs samazinām dārgus un laikietilpīgus manuālos pielāgojumus, kas parasti nepieciešami pēc paaudzes. : Our approach becomes more efficient as you scale. The more pages you generate, the greater the returns in speed and consistency. True Architectural Scalability The result isn't just a collection of pages; it's a cohesive, professional-grade digital asset that scales gracefully with minimal maintenance overhead. Vairāk par pamatiem: reālās pasaules sarežģītības risināšana Šī sākotnējā apmācība koncentrējas uz standarta lapu veidošanu ar mūsu kodolu , un Tomēr atvērtā koda koda bāze nodrošina uzlabotus, ārpus kastes risinājumus sarežģītākām prasībām: Header Body Footer Dokumentācijas lapas ar uzlabotu, nested navigāciju. Interaktīvas apmācību lapas ar stāvokli, soli pa solim elementiem. Lai iegūtu unikālas, ļoti interaktīvas funkcijas, piemēram, animētas prezentācijas, reāllaika datu plāksnes vai komponentus ar sarežģītu stāvokļa pārvaldību, varat Tas dod jums elastību pielāgotās funkcionalitātes ieviešanai, nekad neapdraudot sistēmas pamatintegritāti. Custom Components Your Next Step: Hands-On with Custom Components Lai patiesi apgūtu šo sistēmu, jūsu praktiskais uzdevums ir izpētīt jaunu pielāgotu komponentu izveides un integrēšanas procesu. Koncepcija: AI kā jūsu zīmola pārvaldnieks, ne tikai satura dzinējs Mūsdienu digitālās operācijas prasa ātrumu, zīmola integritāti un tirgus elastību.Mūsu arhitektūra to sasniedz, apstrādājot jūsu dizaina sistēmu kā strukturētu, inteliģentu zināšanu bāzi. Piegādājot AI jūsu precīziem UI / UX standartiem, tas kļūst par vairāk nekā satura ģeneratoru - tas kļūst par jūsu zīmola identitātes galveno pārvaldnieku, nosakot konsekvenci katrā lapas izveides dzīves cikla posmā. Piecu soļu darba plūsma: no dizaina sistēmas līdz SEO optimizētai būvniecībai Iegūstiet savu dizaina sistēmu: mēs ielādējam AI zināšanu bāzi ar jūsu sastāvdaļu veidnēm un skaidriem norādījumiem par to, kā tos īstenot vizuāli un strukturāli, nodrošinot 100% zīmola saskaņošanu. Mērķa definēšana ar ielūgumu: lietotājs, projekta vadītājs vai izstrādātājs iesniedz vienkāršu teksta ielūgumu, kurā aprakstīta vēlamā lapa vai tās elementi. AI interpretācija un strukturēšana: AI aģents analizē pieprasījumu, ģenerē semantisko saturu un inteliģenti to pārraida uz atbilstošiem, iepriekš apstiprinātiem veidnēm no zināšanu bāzes. Izveidojiet deklaratīvu PageConfig: Pamatojoties uz izvēlētajiem veidnēm, sistēma iznāk spēcīgi tipēts PageConfig — deklaratīvs JSON apraksts galīgajā lapā. Automatizēta izveide un izvietošana: konfigurācija tiek patērēta mūsu renderēšanas komponentiem izveides procesa laikā. izeja ir gatava ražošanai, SEO optimizēta lapa, kas vizuāli un tehniski atbilst jūsu uzņēmuma standartiem. Uzņēmējdarbības ietekme: Drive Conversions un Slash TCO Paātrināts Go-to-Market: Izlaidiet jaunas galamērķa un produktu lapas ar vienu pieprasījumu, izmantojot iepriekš apstiprinātas veidnes, lai nodrošinātu nepārspējamu ātrumu. Ironclad zīmola integritāte: zīmola konsekvence un kvalitātes kontrole ir automatizēta, nodrošinot, ka katra jauna lapa perfekti atspoguļo jūsu dizaina sistēmu. Samazināta manuālā pārbaude un skalējama A/B testēšana: ļauj mārketinga komandām mērogot lapas izmaiņas un testēt A/B saturu, neiesaistot izstrādātājus izkārtojuma procesā. Izveidots globālā mērogā: visi teksta un lietotāja interfeisa elementi ir centralizēti, padarot lokalizāciju un tirgus pielāgošanu vienmērīgu. Arhitektūras elastība: izstrādāta, lai bez kļūdām integrētos mūsdienu CI/CD cauruļvados, hostinga platformās un citās AI vadītās darba plūsmās. Jūsu ceļvedis caur šo sēriju Šajā visaptverošajā apmācībā mēs vadīsim jūs caur: Kodola arhitektūras dekonstruēšana: dziļa niršana PageHtmlTransformer, Wrapper/FullScreenWrapper sistēmā un secību komponentu mijiedarbībā. Renderēšanas cauruļvada apgūšana: izprot loģiku, kas saistīta ar sadaļu renderēšanu, konfigurācijas ievadīšanu un attiecībām starp konfig failiem un React komponentiem, lai jūs pats varētu paplašināt sistēmu. Uzziniet, kā mācīt AI: Uzziniet, kā izveidot strukturētas instrukcijas metadatiem, virsrakstam un kājām, un definējiet specifikācijas ķermeņa satura ģenerēšanai kā JSX fragmentam. Pages pēc pieprasījuma ģenerēšana: pielietojiet savas zināšanas, lai izveidotu konfigurācijas failus, kurus AI izmanto, lai ģenerētu lapas, kas pilnībā atbilst jūsu arhitektūras un dizaina standartiem. Mūsu AI-powered arhitektūras anatomija Mūsu projekts ir organizēts, lai maksimāli palielinātu mērogojamību, uzturamību un izstrādes ātrumu. Mēs izmantojam Next.js 15 lietojumprogrammu maršruta konvencijas, tostarp paralēlos maršrutus ( ) un privātās kartes ( ), lai izveidotu tīru un spēcīgu struktūru. @right _folder Projekta direktorijas koks 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 Ievadiet pilna ekrāna režīmu Izejiet pilna ekrāna režīmā Galvenie komponenti Ceļš 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 Ievadiet pilna ekrāna režīmu Izejiet pilna ekrāna režīmā Pamatkomponentu rīku komplekts: gatavas lapas no kastes Mērķis Šī kolekcija ietver mūsu sistēmas arhitektūras pīlārus: dinamisko maršrutu, centrālo transformatoru dzinēju, daudzpusīgus satura iesaiņotājus, vienotus virsrakstu un pēdu sadaļas, kā arī to konfigurācijas failus un datu līgumus. Galvenie arhitektūras principi: Bulletproof UI konsekvence: Katrs komponents ievēro vienotu dizaina sistēmu un uzvedības modeļus, nodrošinot nevainojamu un paredzamu lietotāja pieredzi. AI-Native pēc dizaina: arhitektūra ir optimizēta autonomai ģenerācijai, ļaujot AI izveidot sarežģītas lapas bez manuālas iejaukšanās. SEO optimizēts no pamatnes: labākā prakse meklētājprogrammu optimizācijai un semantiskajam HTML tiek pagatavota, nevis pārklāta. Type-Safe & Predictable: Mēs izmantojam TypeScript stingro tipēšanu, lai īstenotu uzticamu datu līgumu starp AI un UI, nodrošinot sistēmas stabilitāti. Modulāra un kompozīta: Katra sastāvdaļa ir pašpietiekama vienība, kas atrisina konkrētu problēmu, kas paredzēta maksimālai atkārtotai izmantošanai un paplašināšanai. Kopā šie komponenti veido sistēmas pamatu, nodrošinot, ka katra AI ģenerētā lapa ir ne tikai vizuāli saskaņota, bet arī tehniski izturīga un uzņēmuma gatava. 2.1.1 Par to, ka Sastāvdaļa: Universal Catch-All Route dinamiskiem URL [[...slug]]/page.tsx 2.1.1.1 Catch-All maršrutu stratēģiskā vērtība: elastība un izvietošanas ātrums A catch-all route is a dynamic routing pattern in Next.js that allows a single page component to handle an infinite number of URL segments. By using the Konvencija, tā Parametrs kļūst par matricu, kas satur katru URL ceļa daļu, neatkarīgi no tā, cik dziļi tas ir iestrēdzis. [[...slug]] slug No uzņēmējdarbības viedokļa šī arhitektūras izvēle ir milzīga konkurences priekšrocība. Bezgalīga nestingrība un satura dziļums: Jūs vairs neesat ierobežots ar projekta failu struktūru. URL, piemēram, /public/category/nike/sneakers/black/12345 tiek apstrādāts ar to pašu komponentu kā /public/test. Neaizsargāta navigācija un tūlītējas laidiens: jaunas lapas izvietošana ir tikpat vienkārša kā tās konfigurācijas pievienošana centrālajam failam. lapa nekavējoties nonāk dzīvē, neradot jaunas sastāvdaļas vai navigējot sarežģītā failu sistēmā. Iebūvēta automatizācija: Šī arhitektūra ir pamats pilnībā automatizētai satura ekosistēmai. Var programmēt automātiski ģenerētu sānu joslu vai izvēlni, lai lasītu lapas konfigurācijas un dinamiski izveidotu navigāciju. 2.1.1.2. dinamisko URL vērtība AI palīgiem: bezgalīga satura mērogojamība 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: Novērš arhitektūras ierobežojumus: novērš visus ierobežojumus attiecībā uz satura struktūru un dziļumu, ļaujot jūsu digitālajai klātbūtnei bezgalīgi paplašināties, neprasot izmaiņas kodā. Atbloķē nesalīdzināmu elastību: izveidojiet sarežģītas satura hierarhijas jebkuram lietojuma gadījumam. Navigācija ir pilnībā balstīta uz jūsu biznesa loģiku, nevis ierobežota ar stingru failu sistēmu. Tas nodrošina stabilu pamatu AI aģentiem, lai patstāvīgi ģenerētu, konfigurētu un izvietotu veselas jūsu vietnes sadaļas, sākot no produktu katalogiem līdz zināšanu bāzēm. 2.1.3. reālās pasaules lietošanas gadījumi mērogā This architecture isn't theoretical; it's a battle-tested model for deploying high-value, deeply-nested content structures that drive business growth: Katrai atrašanās vietai var būt unikāla, dziļi kategorizēta izvēlne (piem., /public/menu/dallas-tx/dinner/mains/pasta-dishes), saglabājot perfektu zīmola konsekvenci un UX integritāti. E-komercijas produktu katalogi: Ieslēdziet plašas produktu līnijas ar bezgalīgām variācijām uzreiz. URL, piemēram, /public/shop/apparel/mens/jackets/leather/fall-2025/black/sku-12345, kļūst triviāls, lai izveidotu un pārvaldītu, ļaujot ātri paplašināt tirgu un granulētu produktu organizāciju. Korporatīvie un izglītības portāli: Izveidojiet plašas zināšanu bāzes vai mācību platformas, kur saturu var organizēt loģiski, neatkarīgi no tā, cik dziļi hierarhijai ir jāiet (piem., /public/tutorials/enterprise-ai/onboarding/module-3/advanced-prompting). #### 2.1.1.4. Kā tas darbojas: On-Demand satura dzinējs Pamatā process ir eleganti vienkāršs, bet spēcīgs: tas dinamiski tulko jebkuru URL ceļu atbilstošai lapas konfigurācijai, kas pēc tam tiek rādīta. 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 ; } Tā kā tās can be of any length and the lookup is a direct match, this system provides infinite nesting depth with zero risk of route collisions. slugArr 2.1.5. Galvenās funkcijas un to ietekme uz uzņēmējdarbību generateStaticParams: virza veiktspēju un SEO, pateicoties Next.js 2.1.1.7. komponents: izpildes dzinējs Tas ir viens, spēcīgs Next.js servera komponents, kas darbojas kā universāls pārvaldnieks katrai dinamiski ģenerētajai publiskajai lapai. tas ir atbildīgs par pareizās lapas konfigurācijas iegūšanu, pamatojoties uz URL un galīgās rādīšanas orķestris, nodrošinot gan maksimālu veiktspēju, gan ārpus kastes SEO atbilstību. // @/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} />; } Enter fullscreen mode Exit fullscreen mode Bottom Line: Catch-All Routes kā jūsu AI satura dzinējs Combining catch-all routes with a centralized page configuration creates an architecture that is maximally flexible, extensible, and purpose-built for AI-driven content orchestration. This approach is friendly to both developers and AI agents, creating a seamless workflow from concept to deployment. The core principle is simple but transformative: No new code files, no complex folder structures. The navigation and rendering systems adapt automatically, making this the cornerstone of a truly agile and scalable AI-powered platform. A new page is just a new entry in a configuration file. 2.1.3. FullScreenWrapper vs. Wrapper: Crafting Immersive Full-Screen Experiences 2.1.3.1 Galvenais mērķis Tās Tas ir īpaši izstrādāts sadaļām, kurām nepieciešama aizraujoša, pilna ekrāna prezentācija ar fona video vai attēla atbalstu. FullScreenWrapper 2.1.3.2. Layered Architecture Komponents izmanto izsmalcinātu slāņu struktūru, lai nodrošinātu, ka saturs paliek lasāms un vizuāli atšķirīgs no fona. 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> Ievadiet pilna ekrāna režīmu Izejiet pilna ekrāna režīmā 2.1.3.3. Customization and Extensibility Tās ir paredzēts vienkāršai pielāgošanai. Jūs varat pievienot sarežģītus vizuālos efektus tieši prop. FullScreenWrapper className <FullScreenWrapper className="bg-gradient-to-br from-blue-900 to-purple-900"> Enter fullscreen mode Exit fullscreen mode Opacity Control: Fona video automātiski saņem opacity-40 klasi, lai uzlabotu teksta lasāmību, bet to var viegli pārspīlēt. : A class is built-in to ensure smooth changes to background properties. Smooth Transitions transition-all duration-500 2.1.3.4. Advanced Styling un atkārtoti lietojami veidnes Ja jums ir nepieciešami sadaļu sadalītāji, robežas, spīduma efekti vai fona neskaidrības, nodrošina ideālu pamatu šo stilu ieviešanai. tas padara to ideālu, lai izveidotu ļoti stilizētus, atkārtoti izmantojamus veidnes. FullScreenWrapper typescript <FullScreenWrapper className="border-t-4 border-gradient bg-blur-effect"> Enter fullscreen mode Exit fullscreen mode 2.1.3.5 Sastāvdaļas sastāvs // @/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.1.4. Wrapper: The Standard Sectional Container 2.1.4.1. Primary Use Case The ir noklusējuma konteiners lielākajai daļai satura sadaļu. tas ir paredzēts, lai nodrošinātu standarta pārklājumu, satura centrēšanu un konsekventu, paredzamu informācijas bloku izkārtojumu. 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> Ievadiet pilna ekrāna režīmu Izejiet pilna ekrāna režīmā The component's structure is simple and optimized for performance, relying on a few key Tailwind CSS classes: : Applies responsive vertical padding for consistent spacing across devices. py-10 lg:py-14 konteiners mx-auto px-4: Tiek izveidots centrēts, maksimāli plats konteiners ar horizontālu pārklājumu, nodrošinot, ka saturs ir labi sakārtots un lasāms. : Utilizes the current theme's CSS variable for the background color, ensuring seamless integration with light/dark modes. bg-background 2.1.4.3 Pielāgošanas punkti While minimalist by design, the is a flexible foundation for custom styling via the prop. It's the perfect base for adding: Wrapper className Custom background colors or gradient effects. Borders or dividers between sections. 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> Ievadiet pilna ekrāna režīmu Izejiet pilna ekrāna režīmā When your design calls for a template with unique styling but a standard, centered content structure, Tas nodrošina strukturālo mugurkaulu, ļaujot jums koncentrēties uz konkrētiem veidnes stiliem. 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> ); } Ievadiet pilna ekrāna režīmu Izejiet pilna ekrāna režīmā 2.1.5. page-wrapper-types.ts: The AI-to-UI TypeScript Contract 2.1.5.1. Galvenais līgums: AI ģenerācijas un UI rādīšanas savienojums The file establishes a formal, strictly-typed contract between our AI content generator and the UI rendering system. This contract is fundamental to our architecture, defining the structure of all possible page components and the rules governing their interactions to ensure seamless integration and predictability. page-wrapper-types.ts 2.1.5.2. SectionType kategorijas un AI-driven ģenerācija AI darbības modelis ir vērsts ap Pirmkārt, AI analizē pieejamos sadaļu veidus, kas definēti šajā enum. Pēc tam, pamatojoties uz lietotāja pieprasījumu, tas stratēģiski izvēlas, kuras sadaļas apvienot konkrētai lapai. Lai atvieglotu pilnībā autonomu un augstas kvalitātes satura ģenerēšanu, AI zināšanu bāzei jābūt piepildītai ar visaptverošām instrukcijām un dažādiem piemēriem katram no 25+ sadaļu veidiem. 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 Tās interfeiss nodrošina standartiem atbilstošu meta tagu ģenerāciju, kas ir kritiska meklētājprogrammu optimizācijai (SEO). function. This function retrieves data from the page configuration and passes it to the lietojumprogramma, kas savukārt veido labi izveidotas HTML virsrakstus. PageMetadata generateMetadata() constructMetadata() typescript export interface PageMetadata { id: string; // Уникальный идентификатор title: string; // <title> тег для SEO description: string; // <meta description> для сниппетов image?: string; // Open Graph изображение slug?: string[]; // URL-структура страницы type: SectionType; // Тип основной секции } Enter fullscreen mode Exit fullscreen mode 2.1.5.4. HeaderContentConfig: Managing SEO Hierarchy Managing the heading hierarchy is critical for on-page SEO. Tās section is optional. This is an intentional design choice because certain section types may embed / Dienas tūlīt viņu iekšienē . 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 By design, the body of a section is granted complete freedom to implement any layout or design. This architectural choice allows for maximum creative flexibility, enabling the AI to generate rich and varied content. This approach deliberately contrasts with the and , which are standardized to maintain a consistent look and feel across the entire application. Header Footer typescript interface FooterContentConfig { actions?: { label: string; href: string; variant?: "default" | "secondary" | "outline" | "ghost" | "link"; }[]; } Enter fullscreen mode Exit fullscreen mode 2.1.5.6. FooterContentConfig: 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 Ieviešot jaunu , the following steps must be taken: SectionType The AI's knowledge base must be updated with comprehensive instructions and examples for the new section type. Update AI Knowledge: The new type must be added to the enum. Extend Enum: SectionType If the new section requires unique configuration parameters, the corresponding configuration interface must be extended. Expand Interfaces: This process strikes a crucial architectural balance: the un ir stingri tipēti, lai īstenotu SEO paraugpraksi un UI konsekvenci, bet offers maximum flexibility for innovative, AI-driven design solutions. Header Footer Body 2.1.5.8 Sastāvdaļas // app/@right/(_service)/(_types)/page-wrapper-types.ts export interface MetadataConfig { title?: string; description?: string; } export interface PageMetadata { id: string; title: string; description: string; image?: string; slug?: string[]; type: SectionType; } export type SectionType = | "hero-section" | "cta-section" | "faq-section" | "features-section" | "testimonials-section" | "pricing-section" | "contact-section" | "blog-posts-section" | "product-grid-section" | "image-gallery-section" | "text-block-section" | "video-section" | "team-section" | "about-us-section" | "newsletter-section" | "social-proof-section" | "comparison-table-section" | "map-section" | "custom-html-section" | "changelog-section" | "comparison-two-column-section" | "comparison-three-column-section" | "feature-showcase-section"; export interface BaseSection { id: string; type: SectionType; className?: string; } export interface HeaderContentConfig { announcement?: { badgeText?: string; descriptionText?: string; href?: string; }; heading: string; headingLevel?: 1 | 2; description?: string; showBorder?: boolean; } export interface FooterContentConfig { actions?: { label: string; href: string; variant?: | "default" | "secondary" | "destructive" | "outline" | "ghost" | "link"; }[]; } export interface SectionConfig extends BaseSection { type: SectionType; headerContent: HeaderContentConfig; bodyContent?: React.ReactNode; footerContent?: FooterContentConfig; videoUrl?: string; imageUrl?: string; sectionClassName?: string; contentWrapperClassName?: string; customComponentsAnyTypeData?: any; } export type Section = SectionConfig; export interface PageConfig { metadata: PageMetadata; sections: Section[]; } export type SlugType = string[]; Enter fullscreen mode Exit fullscreen mode 2.1.5.9. customComponentsAnyTypeData: Supporting Arbitrary Custom Components The field within serves as a powerful "escape hatch." It is designed for passing unstructured data to sections that leverage complex or unique custom components that do not conform to our standard interfaces. customComponentsAnyTypeData?: any; SectionConfig To maintain architectural integrity, the type and structure of this data must be rigorously defined and documented Šī dizaina izvēle nodrošina nepieciešamo elastību, lai integrētu ļoti interaktīvas, dinamiskas un uzlabotas lietotāju orientētas sadaļas, neapdraudot galvenās lapas arhitektūras kodēšanas līgumu. within the custom component itself public-pages-config.ts: Publiskā lapa un Slug maršruta reģistrs 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 definitions. public-pages-config.ts SectionType The resulting configuration acts as a bridge, translating the AI's analysis of user requirements into a structure that our page rendering system can interpret and display. 2.1.6.2. When to Use This File-Based Configuration This approach is ideal for: Projects with a limited number of pages (typically 10-15). Websites with static content that requires infrequent updates. Ātra prototipēšana un minimāli dzīvotspējīgi produkti (MVP), kas ļauj ātri uzsākt bez datu bāzes iestatīšanas. Mājas lapas ar fiksētu, iepriekš definētu struktūru. 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 Konfigurācijas struktūra 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 Placing the configuration file in the directory signifies its role in managing public-facing pages. Key Architectural Decision: public/(_service)/(_config)/ Scaling by Category: Our architecture supports scaling by categorizing configurations, ensuring a clean and organized structure: — for public pages (e.g., landing, about, contact). public-pages-config.ts docs-pages-config.ts — dokumentācijas vietnēm ar uzlabotu navigāciju. admin-pages-config.ts — administratīviem vadības paneliem. — for blog posts and articles. blog-pages-config.ts Katra kategorija ir izstrādāta, lai tai būtu sava: Dedicated configuration file. Specialized section types. Unique rendering logic. 2.1.6.5. Interaction with the AI Generation System Mūsu AI sistēmai šis konfigurācijas fails kalpo kā: Defining how objects should be formed. A structural template: PageConfig Providing reference values for the generation process. A data example: Enforced by TypeScript for strict type safety. A type validation schema: The workflow is as follows: AI analizē esošo konfigurācijas failu. It generates a new object based on the user's prompt. PageConfig A developer then adds the new configuration to the array. pages Sistēma automātiski atpazīst un reģistrē jaunus maršrutus. 2.1.6.6. Advantages and Limitations Advantages of the File-Based Approach: Versiju pārvaldība: Viegli pārvaldīta un versijas, izmantojot Git. Tipu drošība: ieguvumi no compile-time tipa drošības ar TypeScript. No database queries result in faster page loads. Zero Latency: Works seamlessly with static site generation (SSG). Simplified Deployment: Limitations: Nav dinamisko atjauninājumu: trūkst dinamiskās satura pārvaldības iespējas. Any change necessitates a new build and deployment. Requires Redeployment: Ne UGC: nav piemērots lietotāja radītajam saturam. Scalability bažas: kļūst grūti pārvaldīt vairāk nekā 20-30 lapas. 2.1.6.7 Sastāvdaļas // @/app/@right/public/(_servise)/(_config)/public-pages-config.ts import { PageConfig, SectionConfig, } from "@/app/@right/(_service)/(_types)/page-wrapper-types"; export const PublicPagesConfig = { pages: [ { metadata: { id: "public", title: "Enterprise-Grade AI Next.js starter", description: "Free Open-Source starter kit...", slug: ["public", "test"], type: "hero-section", }, sections: [ { id: "test-block", type: "hero-section", headerContent: { announcement: { badgeText: "Thanks", descriptionText: "AI-SDK V5 & Vercel AI", href: "https://github.com/aifa-agi/aifa", }, heading: "Enterprise-Grade AI Next.js starter", description: "Free Open-Source starter kit to build, deploy, and scale intelligent AI applications. Artifacts Feature, features secure multi-provider auth, Stripe payments, vector knowledge bases, deep-research agents, and a unique fractal architecture designed for the future of AI.", showBorder: false, headingLevel: 1, }, bodyContent: {}, footerContent: { actions: [ { label: "Get Started", href: "/https://github.com/aifa-agi/aifa", variant: "default", }, { label: "Browse Docs", href: "/docs", variant: "ghost" }, ], }, videoUrl: "/_static/video/ai-loop.mp4", contentWrapperClassName: "text-white", } as SectionConfig, ], }, ] as PageConfig[], }; Enter fullscreen mode Exit fullscreen mode 2.1.6.8. Conclusion is a practical solution for small to medium-sized projects, offering a balance between ease of management and functionality. For larger-scale applications, it serves as an excellent starting point before transitioning to a more robust, database-driven architecture. public-pages-config.ts 2.1.7. utils.ts: Konfigurācijas lietojumprogrammu funkcijas This module provides utility functions for managing page configurations. It includes two primary functions: , kas filtrē visas lapas ar "public" prefiksu statiskai ģenerācijai, un , kas lokalizē konkrētu lapu ar precīzu, gadījuma jutīgu atbilstību tās 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())) ); } Ievadiet pilna ekrāna režīmu Izejiet pilna ekrāna režīmā 2.1.8. header-section.tsx: Unified Section Header 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 (Atomu sastāvdaļas) This section details the atomic components used to construct headers: (supporting H1/H2), par apakšpozīcijām un lai ievietotu pogas. Šīs sastāvdaļas dinamiska HTML tagu ģenerācija, nodrošinot pareizu SEO hierarhiju. 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: Announcement Component Šis interaktīvais badge komponents ir paredzēts paziņojumiem un paziņojumiem.Tas atbalsta navigāciju, tastatūras kontroli un nosacītu rādīšanu, automātiski slēpjot, kad nav satura.Tas tiek izmantots, lai pievērstu uzmanību svarīgiem atjauninājumiem vai saitēm. // @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> ); } Ievadiet pilna ekrāna režīmu Izejiet pilna ekrāna režīmā 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> ); } Ievadiet pilna ekrāna režīmu Izejiet pilna ekrāna režīmā 2.1.12. body-section.tsx: Patvaļīgs satura konteineris 2.1.12.1. Purpose and Philosophy kalpo kā ļoti elastīgs konteineris galvenajam saturam sadaļās. atšķirībā no stingri standartizētajām galvas un pēdas sastāvdaļām, nodrošina pilnīgu brīvību, lai ievietotu jebkuru React saturu. BodySection BodySection 2.1.12.2. Content Generation Principles Apmierinātība ar jāizveido kā vienkāršs TSX, neizmantojot 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> </> ) Ievadiet pilna ekrāna režīmu Izejiet pilna ekrāna režīmā // ❌ bodyContent: ( <div className="grid"> {features.map(feature => <FeatureCard key={feature.id} {...feature} />)} </div> ) Ievadiet pilna ekrāna režīmu Izejiet pilna ekrāna režīmā 2.1.12.3. When to Use Custom Components Ja sadaļai ir nepieciešama sarežģīta loģika (valsts, efekti, interaktivitāte), izveidojiet neatkarīgu komponentu un pievienojiet to kā atsevišķa struktūra. 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 Sastāvdaļas // @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> ); } Ievadiet pilna ekrāna režīmu Izejiet pilna ekrāna režīmā 2.1.12.5. Conclusion darbojas kā tilts starp sistēmas standartizēto arhitektūru un mākslīgā intelekta radīšanas radošo brīvību, panākot līdzsvaru starp kontroli un elastību. BodySection 2.2. Advanced Custom Components Advanced Custom Components ir izstrādāti, lai nodrošinātu sarežģītas, interaktīvas funkcionalitātes, kas pārsniedz mūsu standarta arhitektūras modeļu iespējas.Šīs sastāvdaļas ir rezervētas scenārijiem, kas prasa stāvokļa pārvaldību, sarežģītas animācijas, reāllaika datu apstrādi vai unikālu biznesa loģiku. Kad izmantot pielāgotas sastāvdaļas: Interaktīvie elementi: veidlapas ar validāciju, kalkulatori, produktu konfiguratori. Animētas prezentācijas: sarežģītas pārejas, paralakses efekti, automātiskie slidkalniņi. Reālā laika funkcionalitāte: tērzēšana, paziņojumi, dzīvo datu plūsmas. Adaptīvā loģika: komponenti ar fundamentāli atšķirīgu uzvedību darbvirsmā pret mobilo. Unikālie UI modeļi: projektam raksturīgi nestandarta saskarnes elementi. Architectural Integration: Sastāvdaļas ir integrētas as distinct Paziņojumi A Šī pieeja ļauj viņiem piekļūt visā sistēmas kontekstam, piemēram, tēmai un ierīces informācijai, vienlaikus saglabājot konsekventu izskatu un sajūtu, izmantojot kopīgās CSS klases un dizaina žetonus. Lai gan viņi ievēro sistēmas vizuālo valodu, viņi saglabā pilnīgu brīvību savā iekšējā loģikā un īstenošanā. PageHtmlTransformer case switch 2.2.1 Pamatnostādnes pielāgotu komponentu ieviešanai 2.2.1.1 Rīcības politika : Pielāgotas sastāvdaļas jāatdod tieši bez ieslēgšanas vai Viņi ir atbildīgi par savu izkārtojumu, pārklājumu un slāņu pārvaldību, lai nodrošinātu pilnīgu kontroli pār savu prezentāciju. No External Wrappers Wrapper FullScreenWrapper 2.2.1.2 Sastāvdaļu tipogrāfija : Pielāgotas sastāvdaļas prop interfeisiem jābūt deklarētiem pašas sastāvdaļas faila augšpusē. Konfigurācija sadaļā Config. Local Prop Interfaces customComponentsAnyTypeData 2.2.1 Paplašināšanās Sekcijas Sekcijas : Katram pielāgotam komponentam ir nepieciešams unikāls tips, kas jāpievieno Eņģeļi Tas nodrošina pareizu tipa pārbaudi un ļauj statement in the transformer to correctly identify and render the component. 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”; Ievadiet pilna ekrāna režīmu Izejiet pilna ekrāna režīmā 2.2.1.4. Update cases in the ageHtmlTransformer Custom case processingA new case is added to the PageHtmlTransformer to handle a custom section type with a direct // В PageHtmlTransformer: case "new-custom-section": return ( <NewCustomSection key={config.id} customData={section.customComponentsAnyTypeData.customData} /> ); Ievadiet pilna ekrāna režīmu Izejiet pilna ekrāna režīmā 2.2.1.5. pielāgotas konfigurācijas struktūra : Tālāk minētais ir lapas konfigurācijas piemērs, kas ietver pielāgotu sadaļu. objektam, kuram var būt jebkura struktūra, ko pieprasa komponents. 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[], Ievadiet pilna ekrāna režīmu Izejiet pilna ekrāna režīmā 2.2.2 Pielāgotās sastāvdaļas piemērs 2 2 1 2 1 Dubultā prezentācija Dubultā prezentācija Tātad 2.2.1.1 Atjaunināt galvenos tipus Pirmkārt, pievienojiet jaunu sadaļas tipu Viņam ir. SectionType typescript // @/app/@right/(_service)/(_types)/page-wrapper-types.ts export type SectionType = | "hero-section" | "cta-section" | "double-presentation-section" Ievadiet pilna ekrāna režīmu Izejiet pilna ekrāna režīmā 2.2.1.2 Pievienot jaunu lietu PageHtmlTransformer PageHtmlTransformer Pēc tam pievienojiet atbilstošo Divi no Lai izveidotu sastāvdaļu. case PageHtmlTransformer case "double-presentation-section": return ( <DoublePresentation key={section.id} metaData={section.customComponentsAnyTypeData.metaData} leftItem={section.customComponentsAnyTypeData.leftItem} rightItem={section.customComponentsAnyTypeData.rightItem} /> ); Ievadiet pilna ekrāna režīmu Izejiet pilna ekrāna režīmā 2.2.1.4 Konfigurācijas piemērs Šeit ir piemērs, kā konfigurēt sastāvdaļas in . 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[]; Ievadiet pilna ekrāna režīmu Izejiet pilna ekrāna režīmā 2.2.1.5 Sastāvdaļas Pilns kods par Sastāvdaļas . 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[], }; Ievadiet pilna ekrāna režīmu Izejiet pilna ekrāna režīmā Tātad 2.2.1.3 page-wrapper-types.ts Page-wrapper-types.ts tīmekļa vietne Šeit ir pilns fails ar jauno tipu. 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> ); } Ievadiet pilna ekrāna režīmu Izejiet pilna ekrāna režīmā Secinājums: Kā iegūt vislabāko no šīs dokumentācijas Mēs saprotam, ka šeit izklāstītās instrukcijas un sastāvdaļas var šķist plašas vienam ziņojumam.Var pat justies, ka tas nav visvairāk aizraujošs lasījums, un jums būtu taisnība.Tas nav izklaide; tas ir detalizēts tehnisks ceļvedis, kas paredzēts, lai dotu jums pilnīgu kontroli pār jaudīgu sistēmu. Lai pārvērstu šīs sarežģītās sistēmas izpēti interaktīvā un produktīvā procesā, mēs iesakām šādu pieeju. Izmantojiet AI paātrinātai mācīšanai Tā vietā, lai pasīvi lasītu, izmantojiet šo dokumentāciju kā jūsu AI asistenta "smadzenes". Your Action Plan: Kopējiet visu šī raksta saturu, no ievada līdz šai sadaļai. Izmantojiet to kā sistēmas norādījumu ChatGPT. Tas sniegs AI ar pilnu kontekstu arhitektūras mēs apspriedām. 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 Šī metode palīdzēs jums saprast pieteikuma principus daudz ātrāk. Jūs varat atrast pilnu avota kodu šim projektam mūsu mājas lapā. . Github repozitorija Kas ir nākamais? Šajā rakstā mēs esam izveidojuši vienu no diviem mūsu vietņu radīšanas sistēmas kritiskajiem elementiem: file into ready-to-use React components. This paves the way for automated page creation, where an AI can generate the configuration, and our Tas padara to par skaistu interfeisu. a tool that transforms a Config Transformer To see our project in action, visit the live demo at . aifa.dev Iepazīšanās.dev A Glimpse into Future Posts: Nākamajā rakstā tiks pievērsta uzmanība otrajai galvenajai tehnoloģijai: lapu ģenerēšana (dokumentācija, apmācības, produktu lapas) no Markdown failiem. We will revisit the topic of this article and dive deeper into how a ChatGPT-generated configuration is transformed into React components and how this process can be extended. Part 3: From Config to UI. Nākamajā apmācībā mēs sāksim, atbildot uz galveno jautājumu: Palieciet pie tuneļa! Why was Markdown chosen for content management?
