时间戳

首页 > 解决方案 > 使用 _document.js 和 _app.js 获取元信息（Next JS）

javascript - 使用 _document.js 和 _app.js 获取元信息（Next JS）

问题描述

我一直在用 React 开发我的 Next JS 应用程序。

基本上我的index.js文件中有 ff 代码：

import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          <meta charset="UTF-8" />
          <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0"
            crossorigin="anonymous"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

正如您在此处看到的，我添加了一个 Bootstrap CDN 和一个元信息。

然后在我的里面我_app.js添加了我的meta viewport：

import Head from "next/head";

function MyApp() {
  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </Head>
    </>
  );
}

export default MyApp;

当我运行时npm run dev，我在这里收到错误：

Warning: Invalid DOM property `charset`. Did you mean `charSet`?
    at meta
    at head
    at Head (C:\Users\D\Desktop\multiblog\frontend\.next\server\pages\_document.js:705:5)

我这样做对吗？将我的元信息和链接标签分离到我的index.js？

我想要的是在页面首先加载后加载我的所有元标记？

任何想法？

标签： javascriptreactjsnext.js

解决方案

推荐阅读