Next.js

Next.js пропонує як автоматичне так і ручне розгортання проєкту. Візьмемо автоматичне розгортання для спрощеного влаштування проєкту:

Команда запуску

Необхідно ввести слідуючу команду запуска в командному рядку:

npx create-next-app@latest

Та відповісти на ряд питань по конфігурації Next.js проєкту:

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

В результаті розгортання проєкту Next.js створить слідуючу файлову структуру:

my-app
├── node_modules
├── public
├── src
│   ├── app
│   │   ├── favicon.ico
│   │   ├── globals.css
│   │   ├── layout.tsx
│   │   ├── page.tsx
├── eslintrc.json
├── .gitignore
├── next.config.mjs
├── next-env.d.ts
├── package.json
├── package-lock.json
├── postcss.config.mjs
├── README.md
├── tailwind.config.ts
├── tsconfig.json

Встановлення пакету @x-fiber/display для приєднання ядра відображення:

npm install --save x-fiber/dispay@latest

Додати опис бізнес-схеми

import { setPointer, setService, setView } from "business-logic";

export const WorldService = setService('World', [
    setPointer('Country', {
        views: [
            setView(hello, (agents, context, props) => {
                    return <div>Hello world!</div>
            })
        ]
    })
])

Зареєструвати бізнес-схему та здійснити запуск ядра відображення:

// ** layout.tsx */
"use client";

import "./global.css";
import { initiator, setServices } from "@x-fiber/display";
import { WorldService } from "../web-client";

export default function RootLayout({
                                       children,
                                   }: {
    children: React.ReactNode;
}) {
    setServices([WorldService]);
    initiator.start();

    return (
        <html lang="en">
        <body>
        <NextUIProvider>{children}</NextUIProvider>
        </body>
        </html>
    );
}