Server-Side Rendering & Next.js

// scripts/use-client.mjs — chạy một lần: node scripts/use-client.mjs
import { readdirSync, readFileSync, writeFileSync } from "node:fs";
import { join } from "node:path";

const root = "src/components/ui";
for (const entry of readdirSync(root, { withFileTypes: true })) {
  if (!entry.isDirectory()) continue;
  for (const file of readdirSync(join(root, entry.name))) {
    if (!file.endsWith(".tsx")) continue;
    const path = join(root, entry.name, file);
    const source = readFileSync(path, "utf8");
    if (!source.startsWith('"use client"')) writeFileSync(path, '"use client";\n' + source);
  }
}

# Tailwind v4 trong Next.js chạy qua PostCSS
npm install -D tailwindcss @tailwindcss/postcss

// postcss.config.mjs
export default {
  plugins: { "@tailwindcss/postcss": {} },
};

/* src/app/globals.css — nội dung của src/index.css, chỉ sửa đường dẫn tokens */
@import "tailwindcss";
@import "../styles/tokens.css";

/* … giữ nguyên phần @theme, @theme inline, @utility, @keyframes và @layer base của index.css … */

// tsconfig.json — Next.js đọc paths trực tiếp, không cần cấu hình bundler
{
  "compilerOptions": {
    "paths": { "@/*": ["./src/*"] }
  }
}

// src/app/layout.tsx — Server Component
import type { Metadata } from "next";
import { yugenHtmlAttributes, yugenThemeScript } from "@/components/ui";
import "./globals.css";
import { Providers } from "./providers";

export const metadata: Metadata = { title: "Ứng dụng Yugen" };

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    // Script sửa attribute của <html> trước khi hydrate → tắt cảnh báo lệch attribute cho riêng thẻ này.
    <html lang="vi" {...yugenHtmlAttributes({ brand: "sakura" })} suppressHydrationWarning>
      <head>
        {/* Chạy trước khi trình duyệt vẽ trang: data-theme theo lựa chọn đã lưu, không có thì theo hệ điều hành. */}
        <script dangerouslySetInnerHTML={{ __html: yugenThemeScript({ storageKey: "yugen-ui-theme" }) }} />
      </head>
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

// src/app/providers.tsx
"use client";

import * as React from "react";
import { YugenProvider, type YugenTheme } from "@/components/ui";

const STORAGE_KEY = "yugen-ui-theme";

function readTheme(): YugenTheme {
  // Server không có document → "light"; client đọc lại giá trị script đã đặt.
  if (typeof document === "undefined") return "light";
  const theme = document.documentElement.getAttribute("data-theme");
  return theme === "dark" || theme === "high-contrast" ? theme : "light";
}

export const SetThemeContext = React.createContext<(theme: YugenTheme) => void>(() => {});

export function Providers({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = React.useState<YugenTheme>(readTheme);

  React.useEffect(() => {
    try {
      localStorage.setItem(STORAGE_KEY, theme);
    } catch {
      /* storage bị chặn */
    }
  }, [theme]);

  return (
    <SetThemeContext.Provider value={setTheme}>
      <YugenProvider applyToDocument theme={theme}>
        <Toaster />
        {children}
      </YugenProvider>
    </SetThemeContext.Provider>
  );
}

// Mỗi response một nonce ngẫu nhiên mới, đặt ở header và trên thẻ <script>:
// Content-Security-Policy: script-src 'self' 'nonce-<nonce>'
<script nonce={nonce} dangerouslySetInnerHTML={{ __html: yugenThemeScript() }} />

# yugenThemeScript() không tuỳ chọn, ở phiên bản này
Content-Security-Policy: script-src 'self' 'sha256-aQ5/7/M1H2ZEsd4PyJ7/nRi/VlDCe/SWLVR6JGIWbgM='

// Tuỳ chọn khác: tính hash ở server hoặc lúc build
import { createHash } from "node:crypto";
import { yugenThemeScript } from "@/components/ui";

const script = yugenThemeScript({ storageKey: "my-app-theme" }); // đúng chuỗi bạn render trong <head>
const hash = createHash("sha256").update(script).digest("base64");
// Content-Security-Policy: script-src 'self' 'sha256-${hash}'

// src/app/settings/page.tsx — Server Component: lấy dữ liệu, render component Yugen với props tuần tự hoá được
import { Card, CardContent, CardHeader } from "@/components/ui";
import { SettingsForm } from "./settings-form";

export default async function SettingsPage() {
  const user = await getCurrentUser();
  return (
    <Card className="max-w-lg">
      <CardHeader header="Hồ sơ" description={user.email} />
      <CardContent>
        <SettingsForm defaultName={user.name} />
      </CardContent>
    </Card>
  );
}

// src/app/settings/settings-form.tsx — mọi thứ có hàm (onClick, render-prop, toast) nằm ở đây
"use client";

import { Button, Field, Input, toast } from "@/components/ui";

export function SettingsForm({ defaultName }: { defaultName: string }) {
  return (
    <form
      className="flex flex-col gap-3"
      onSubmit={(e) => {
        e.preventDefault();
        toast({ intent: "success", title: "Đã lưu hồ sơ" });
      }}
    >
      <Field label="Tên hiển thị" required>
        <Input name="name" defaultValue={defaultName} />
      </Field>
      <Button appearance="primary" type="submit" className="self-start">
        Lưu
      </Button>
    </form>
  );
}