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

// app/demo/page.js

import DemoClientComponent from "./DemoClientComponent"; // 导入客户端组件

export const metadata = {
  title: 'Demo - ModalJS', // 在服务器组件中定义页面标题
  description: '一个展示模态框功能的演示页面',
};

export default function DemoPage() {
  return (
    <div>
      <h1>欢迎来到演示页面</h1>
      <DemoClientComponent /> {/* 渲染客户端组件 */}
    </div>
  );
}

// app/demo/DemoClientComponent.js

'use client'; // 明确声明这是一个客户端组件

import React, { useState } from 'react';
// 假设 ModalJS 是一个需要客户端环境才能运行的库
// import ModalJS from 'your-modal-library'; 
import styles from './demo.module.css'; // 假设有对应的CSS模块

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 = () => {
        // 假设 ModalJS 库的使用方式
        // const modal = new ModalJS({ title, desc, theme });
        // modal.show(); // 触发显示模态框
        alert(`显示模态框：\n标题: ${title}\n描述: ${desc}\n主题: ${theme}`);
    };

    return (
        <section id={styles.demosection}>
            <div className={styles.demotitle}>Demo</div>
            <div className={styles.form}>
                <label htmlFor="title" className={styles.label}>标题:</label> <br />
                <input 
                    type="text" 
                    name="title" 
                    id={styles.title} 
                    className={styles.input} 
                    value={title} 
                    onChange={(e) => setTitle(e.target.value)}
                />
                <br /><br />
                <label htmlFor="desc" className={styles.label}>描述:</label> <br />
                <input 
                    type="text" 
                    name="desc" 
                    id={styles.desc} 
                    className={styles.input} 
                    value={desc} 
                    onChange={(e) => setDesc(e.target.value)}
                />
                <br /><br />
                <label htmlFor="theme" className={styles.label}>主题:</label> <br />
                <select 
                    name="theme" 
                    id={styles.theme} 
                    className={styles.input} 
                    onChange={(e) => setTheme(e.target.value)}
                    value={theme}
                >
                    <option value="light">亮色</option>
                    <option value="dark">暗色</option>
                </select>
                <br /><br />
            </div>
            <div className={styles.showbtndiv}>
                <button className={styles.showbtn} onClick={handleclick}>显示模态框</button>
            </div>
        </section>
    );
}