我的Next.js 13应用程序中有一个/demo路由，它使用的是App Router。但是我无法更改页面的标题（我得到的当前标题是localhost：3000/demo）。
我有以下代码。
/demo/page.js：

'use client'

 ....

export const metadata = {
  title: 'Demo - ModalJS',
};

export default Demo(){
 return ...
}

'use client'正在产生问题，因为当我删除它时，标题会发生变化，但问题是我无法删除它，因为这个组件使用onClick，它给出了一个错误，而没有'' use client '
Demo内部代码如下：

export default function Demo() {
    

    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()       //trigger this when you want to show modal
    }

    return <section id={styles.demosection}>
        <div className={styles.demotitle}>Demo</div>
        <div className={styles.form}>
            <label htmlFor="title" className={styles.label}>Title:</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}>Description:</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}>Theme:</label> <br />
            <select type="select" name="theme" id={styles.theme} className={styles.input} onChange={(e)=>setTheme(e.target.value)}>
                <option value="light">light</option>
                <option value="dark">dark</option>
            </select>
<br /><br />

        </div>
        <div className={styles.showbtndiv}>
            <button className={styles.showbtn} onClick={()=>handleclick()}>Show Modal</button>
        </div>
    </section>
}