Question

我正在制作下一个js应用程序（React SSR），现在我要在头部实现meta标签。

所以到目前为止，我已经在_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

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

如果您正在滚动自己的服务器端渲染解决方案并且未使用Next.js，那么

react-helmet很有用。据我所知，next/head基本上是React-Helmet的内置版本，可以完成React-Helmet所做的一切。

因此，不，如果您使用的是Next.js，则无需使用react-helmet。只需使用next/head。

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

也就是说，如果您想对Next.js使用react-helmet，请举一个例子：https://github.com/zeit/next.js/tree/canary/examples/with-react-helmet。不知道为什么要这样做，但是存在示例。大约有some discussion。

顺便说一句，就像react-helmet一样，您可以在渲染树中的任何位置使用next/head，而不仅仅是示例中的App组件，并且所有标签都将汇总到顶部的<head>标签。

对Next Js项目反应头盔还是next / head？

1 个答案: