Next.js App Router中客户端组件的元数据管理与优化实践

// app/demo/page.js (❌ 错误示例：整个页面都是客户端组件)
'use client'; // 标记为客户端组件

import { useState } from 'react';
// import ModalJS from 'path/to/ModalJS'; // 假设的模态框库

export const metadata = { // ❌ 此处的metadata将被忽略
  title: 'Demo - ModalJS',
  description: '一个交互式模态框演示页面。',
};

export default function DemoPage() {
    const [title, setTitle] = useState("Title of your modal");
    const [desc, setDesc] = useState("You description goes here");
    const [theme, setTheme] = useState("light");

    const handleclick = () => {
        // const modal = new ModalJS(...stuff related to this library);
        // modal.show();
        alert(`Modal will show with: Title="${title}", Description="${desc}", Theme="${theme}"`);
    };

    return (
        <section>
            <h1>模态框演示</h1>
            {/* ... 交互式表单元素 ... */}
            <button onClick={handleclick}>显示模态框</button>
        </section>
    );
}

// app/demo/demo-client-component.js
'use client'; // 明确标记为客户端组件

import { useState } from 'react';
// 假设 ModalJS 是一个外部库，需要客户端环境
// import ModalJS from 'path/to/ModalJS';

export default function DemoClientComponent() {
    const [title, setTitle] = useState("Title of your modal");
    const [desc, setDesc] = useState("You description goes here");
    const [theme, setTheme] = useState("light");

    const handleclick = () => {
        // 在这里执行依赖客户端环境的逻辑，例如初始化并显示模态框
        // const modal = new ModalJS(...stuff related to this library);
        // modal.show();
        alert(`Modal will show with: Title="${title}", Description="${desc}", Theme="${theme}"`);
    };

    return (
        <section>
            <h2>模态框配置</h2>
            <div>
                <label htmlFor="modalTitle">标题:</label>
                <input
                    type="text"
                    id="modalTitle"
                    value={title}
                    onChange={(e) => setTitle(e.target.value)}
                />
            </div>
            <div>
                <label htmlFor="modalDesc">描述:</label>
                <input
                    type="text"
                    id="modalDesc"
                    value={desc}
                    onChange={(e) => setDesc(e.target.value)}
                />
            </div>
            <div>
                <label htmlFor="modalTheme">主题:</label>
                <select
                    id="modalTheme"
                    value={theme}
                    onChange={(e) => setTheme(e.target.value)}
                >
                    <option value="light">light</option>
                    <option value="dark">dark</option>
                </select>
            </div>
            <button onClick={handleclick}>显示模态框</button>
        </section>
    );
}

// app/demo/page.js
import DemoClientComponent from "./demo-client-component"; // 导入客户端组件

export const metadata = { // ✅ 在服务器组件中定义元数据，它将正常工作
  title: 'Demo - ModalJS',
  description: '这是一个Next.js客户端组件元数据管理的示例。',
};

export default function DemoPage() {
  return (
    <div>
      <h1>欢迎来到演示页面</h1>
      {/* 渲染客户端组件，它将在客户端水合（hydrate）后变得可交互 */}
      <DemoClientComponent />
    </div>
  );
}