Next.js 13 App Router中'use client'导致metadata无法修改页面标题

在Next.js 13的App Router中，metadata只能在服务器组件中定义生效，而加了'use client'的组件会变成客户端组件，此时导出的metadata不会被识别，这就是你遇到页面标题无法修改的核心原因。

解决思路是拆分组件：用服务器组件负责定义页面元数据，把需要客户端特性（useState、第三方库交互）的逻辑抽成独立的客户端组件。

步骤1：修改 /demo/page.js 为服务器组件 #

移除'use client'，在这里定义metadata，并引入客户端组件：

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

import DemoClient from './DemoClient';

export default function DemoPage() {
  return <DemoClient />;
}

步骤2：创建客户端组件 /demo/DemoClient.js #

把原来的交互逻辑移到这个文件里，加上'use client'指令：

'use client';

import { useState } from 'react';
import styles from './page.module.css'; // 确保样式文件路径正确

export default function DemoClient() {
    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(/* 你的ModalJS配置参数 */);
        modal.show();
    };

    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 
                    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>
    );
}

原理说明 #

App Router的设计中，页面元数据（如标题、描述）属于服务器渲染范畴，只能由服务器组件导出；而客户端组件专注处理交互逻辑、浏览器API调用、React Hooks使用等场景。通过拆分组件，既满足了页面标题的配置需求，又保留了客户端交互功能。

内容的提问来源于stack exchange，提问作者Shlok Jain