为 Next Js 项目反应头盔或 next/head？

Question

我正在制作下一个 js 应用程序 (React SSR)，现在我要在 head 中实现元标记。

所以现在我在 _app.tsx 文件中使用了 next/head，例如

import React from 'react';
import App from 'next/app';
import Head from 'next/head';
import { ThemeProvider } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import theme from '../src/theme';

export default class MyApp extends App {
  componentDidMount() {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentElement!.removeChild(jssStyles);
    }
  }

  render() {
    const { Component, pageProps } = this.props;

    return (
      <React.Fragment>
        <Head>
          <title>My page</title>
          <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
        </Head>
        <ThemeProvider theme={theme}>
          {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
          <CssBaseline />
          <Component {...pageProps} />
        </ThemeProvider>
      </React.Fragment>
    );
  }
}

完整的工作代码可以在沙箱中找到：https://codesandbox.io/s/interesting-tereshkova-217ks

我只是想知道在下一个 js 应用程序中使用 next/head 本身是否足够，否则需要实现 react-helmet ??

如果需要 react-helmet 那么请帮助我如何在提供的下一个 js 应用程序中实现。

我是 Next Js 和 SSR 的新手，所以请在正确的方向帮助我，这是实现结果的最佳方法。

Answer 1

I am just to know whether using next/head itself enough in next js application or else need to implement react-helmet ??

如果您正在滚动自己的服务器端渲染解决方案并且不使用 Next.js，那么使用 react-helmet 是有意义的。据我所知，next/head 基本上是 react-helmet 的内置版本，可以完成 react-helmet 所做的一切。

所以不，如果您正在使用 Next.js，则不需要使用 react-helmet。只需使用 next/head.

If the react-helmet is needed then kindly help me how to implement in the provided next js application.

就是说，如果您想将 react-helmet 与 Next.js 一起使用，这里有一个示例：https://github.com/zeit/next.js/tree/canary/examples/with-react-helmet. Not sure why you'd do this, but the example exists. There is some discussion 关于它。

顺便说一下，就像 react-helmet 一样，您可以在渲染树中的任何位置使用 next/head——而不仅仅是像示例中那样的 App 组件——所有标签都将被聚合进入顶部的 <head> 标签。

Answer 2

Next JS 的 Meta 标签也有很棒的包 next-seo

为 Next Js 项目反应头盔或 next/head？

React helmet or next/head for Next Js project?

reactjs

next.js

react-helmet