Next.js 13（应用程序目录）- 在布局中访问页面元数据

Question

Next.js 13（应用程序目录）- 在布局中访问页面元数据

我正在appNext.js 13 项目中使用新的文件夹结构，并且我想在RootLayout包含页面标题值的子标题中显示一个子标题（我在每个页面上使用元数据来配置标题）。

有什么方法可以通过SSR直接访问该值吗？

示例布局.js：

export default function RootLayout({ children) {
    const pageTitle = "???"; // How to get this value?
    return (
      <html>
        <body>
          <HeaderComponent />
          <div className="subheader">
            <h3>{pageTitle}</h3>        <------ HERE
          </div>
          <div className="content">{children}</div>
          <FooterComponent />
        </body>
      </html>
    )
);

Run Code Online (Sandbox Code Playgroud)

示例 page.js：

export const metadata = {
    title: "Login"
};

export default function Login() {
    return (
        <div>Login form</div>
    );
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

You*_*mar 6

metadata不，至少到目前为止，您无法在 SSR 布局中实现这一点。当使用动态路由时，文件夹中的布局app将传递一个包含children和的对象。params就是这样。

它的作用是包装一个路线段的所有组件，不仅是page.js，而且loading.js，not-found.js...

任何特定于组件的内容都应该直接包含在其中。页面标题应该是page.js其本身。Next.js 决定项目应该如此构建。

这是一个公平的解释，我必须同意所有观点。我将重组该项目，将子标题的职责转移到页面级别。非常感谢，我接受这是正确答案。 (2认同)

归档时间：	2 年，9 月前
查看次数：	2726 次
最近记录：	2 年，6 月前