Next 13 如何设置客户端组件的<title>？

Question

我正在将 Next 12 应用程序迁移到 Next 13 及其新/app目录。

我有一个<LoginPage>组件（呈现 @ /login），显然，它需要使用钩子来管理表单数据。因此，我已经用'use client'指令标记了它。

然而，这意味着新的元数据 API 不能用于设置<title>，理想情况下，我希望设置像 一样简单Login | ${process.env.NEXT_PUBLIC_APP_NAME}。

任何帮助表示赞赏！

Answer 1

Metadata您可以将<title>标签直接放入page.js组件之间，而不是。

export default function Page() {
  return (
    <>
      <title>Page title</title>

      <OtherComponent />
    </>
  )
}

Answer 2

您可以在目录中使用布局login。

内部布局：

import React from "react";
// this is server component. you could use `metadata` as well
const layout = ({ children }: { children: React.ReactNode }) => {
  return (
    <div>
      <title>Login to my app</title>
      {children}
    </div>
  );
};

export default layout;