Next.js 是否为NextJS中的所有页面设置默认标题？_Next.js

Next.js 是否为NextJS中的所有页面设置默认标题？

next.js

Next.js 是否为NextJS中的所有页面设置默认标题？,next.js,Next.js,能否为NextJS中的Head组件设置一个默认值，其他页面将从中扩展在我的情况下，我需要在每个页面上加载字体： <Head> <link href="path-to-font" rel="stylesheet" /> </Head> 我可以用自定义文档文件来实现这一点，但是Head的默认值似乎更简单如果标题不需要经常更改，可以采用自定义文档方法。但是，如果您希望事物是动态的，比如不同页面的不同标题，我建

能否为NextJS中的

Head

组件设置一个默认值，其他页面将从中扩展

在我的情况下，我需要在每个页面上加载字体：

  <Head>
    <link
      href="path-to-font"
      rel="stylesheet"
    />
  </Head>

我可以用自定义文档文件来实现这一点，但是

Head

的默认值似乎更简单

如果

标题不需要经常更改，可以采用自定义文档方法。但是，如果您希望事物是动态的，比如不同页面的不同标题，我建议在custome文档中保持静态布局，在另一个组件中保持动态布局，比如
in_document.js

// this will define the default layout for the page

render() {
    return (
      <Html lang="en">
        <Head>
          <meta httpEquiv="Content-Type" content="text/html; charset=utf-8" />
          <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
          />
          // links for static assets
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }



//这将定义页面的默认布局
render（）{
返回(
//静态资产的链接
);
}

如果您希望像标题这样的内容是动态的，请创建一个新的布局组件，将所有组件包装到特定页面中
const Layout = ({children, title="default title", description="default-description"}) => {


  return (
    <>
      <Head>
        <meta name="description" content={description} />
        <title>{title}</title>
      </Head>
      // you can header component here
      <main>
        {children}
      </main>
      // you can add your footer component here
    </>
  );

}


const布局=（{children，title=“default title”，description=“default description”}）=>{
返回(
{title}
//您可以在这里查看标题组件
{儿童}
//您可以在此处添加页脚组件
);
}

现在你只需要用布局来包装你的页面，这样事情就会变得动态
const MyPage = (props) => {

  return (
    <Layout title="the-dynamic-title" description="the-dynamic-description">
      // all other components for your page goes here
    </Layout>
  )

} 


constmypage=（道具）=>{
返回(
//页面的所有其他组件都位于此处
)
}