我安装了多个元标记,例如标题、描述、关键字等。
但是,它没有在查看源代码中显示这些标签。因此,Facebook 共享卡无法正常工作(我已经安装了标签,但在 Facebook 的Scraperog或我的查看源中似乎找不到它们。但是它填充在 Client Slide 上。
我的头格式(在客户端检查/开发工具中显示标签,但不在查看源代码中显示标签):
import Head from 'next/head';
export default () => (
<>
<Head>
<meta property="og:title" content={title} />
<meta property="og:url" content={url} />
</Head>
<Header />
<Body />
<Footer />
</>
)
Run Code Online (Sandbox Code Playgroud)
输出(编辑页面道具):
<!DOCTYPE html><html><head><style data-next-hide-fouc="true">body{display:none}</style><noscript data-next-hide-fouc="true"><style>body{display:block}</style></noscript><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/development/pages/_app.js?ts=1592258092029" as="script"/><link rel="preload" href="/_next/static/development/pages/Home.js?ts=1592258092029" as="script"/><link rel="preload" href="/_next/static/runtime/webpack.js?ts=1592258092029" as="script"/><link rel="preload" href="/_next/static/runtime/main.js?ts=1592258092029" as="script"/><noscript id="__next_css__DO_NOT_USE__"></noscript></head><body><div id="__next"></div><script src="/_next/static/runtime/react-refresh.js?ts=1592258092029"></script><script src="/_next/static/development/dll/dll_f9de5cbc314a1e41f91e.js?ts=1592258092029"></script><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps": "page":"/Home","query":{},"buildId":"development","isFallback":false,"gssp":true}</script><script nomodule="" src="/_next/static/runtime/polyfills.js?ts=1592258092029"></script><script async="" data-next-page="/_app" src="/_next/static/development/pages/_app.js?ts=1592258092029"></script><script async="" data-next-page="/Home" src="/_next/static/development/pages/Home.js?ts=1592258092029"></script><script src="/_next/static/runtime/webpack.js?ts=1592258092029" async=""></script><script src="/_next/static/runtime/main.js?ts=1592258092029" …Run Code Online (Sandbox Code Playgroud) 我在nextjs新和使用nextjs v9.3,next-redux-wrapper v5,@material-ui/core v4.2,和custom express server。
我正在尝试在我的 Nextjs 应用程序中更改路由时实现加载屏幕,因此我使用成帧器运动在页面之间进行转换并且工作正常,但现在如何在更改路由时使用加载组件?
我使用了这些方法,但没有用:
我目前的实现如下:
_app.js
import React, { useEffect } from "react";
import { ThemeProvider } from "@material-ui/core/styles";
import { CssBaseline } from "@material-ui/core";
import { theme } from "../lib/theme";
import withRedux from "next-redux-wrapper";
import { Provider } from "react-redux";
import reduxStore from "../store/store";
import { PersistGate } from "redux-persist/integration/react";
import { AnimatePresence } from …Run Code Online (Sandbox Code Playgroud)