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

Question

我正在将 Next 12 应用程序迁移到 Next 13 及其新的

/app

目录。

我有一个

<LoginPage>

组件（渲染@

/login

），显然，它需要使用钩子来管理表单数据。因此，我用

'use client'

指令标记了它。

但是，这意味着新的元数据 API 不能用于设置

<title>

，理想情况下，我希望像

Login | ${process.env.NEXT_PUBLIC_APP_NAME}

一样简单。

如有任何帮助，我们将不胜感激！

Answer 1

您可以在

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;

Answer 2

您可以将

Metadata

标签直接放入组件中的

<title>

中，而不是

page.js

。

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

      <OtherComponents />
    </>
  )
}