_app.js 中的 Nextjs Head 覆盖子组件中的 Head

在我的 nextjs 应用程序中，我在 _app.js 中有一个 Head 标签，如下所示

<GoogleReCaptchaProvider reCaptchaKey={CAPTCHA_SECRET}>
  <Head>
    <html lang="en"></html>
  </Head>
  <DndProvider backend={HTML5Backend}>
    <HttpsRedirect>
      <Fragment>
        <Component {...pageProps} />
        <ToastContainer />
      </Fragment>
    </HttpsRedirect>
  </DndProvider>
</GoogleReCaptchaProvider>

Run Code Online (Sandbox Code Playgroud)

对于所有页面上的 html 中的 lang 属性，但在我的名为 Layout 的子组件中，它呈现所有页面的组件，我还有一个 Head 标签：

<Head>
    <head>
      <title>{title}</title>
      {inject_divs}
      <meta
        name="viewport"
        content="width=device-width,initial-scale=1,maximum-scale=1"
      />
    </head>
  </Head>

Run Code Online (Sandbox Code Playgroud)

每当我删除 _app.js 中的 Head 时，布局组件中的 Head 标签都会起作用，但是当我将 Head 保留在 _app.js 中时，布局 Head 会被覆盖，有没有办法可以同时使用两者？

归档时间：	4 年前
查看次数：	2026 次
最近记录：	3 年，4 月前