为 Next Js 项目 React 头盔还是 next/head?

11 reactjs next.js react-helmet

我正在制作下一个 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>
    );
  }
}
Run Code Online (Sandbox Code Playgroud)

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

我只是想知道next/head在下一个 js 应用程序中是否足够使用它自己,否则需要实现react-helmet

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

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

Dmi*_*sky 14

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

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

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

如果需要反应头盔,请帮助我如何在提供的下一个 js 应用程序中实现。

也就是说,如果你想在 Next.js 中使用 react-helmet,这里有一个例子:https : //github.com/zeit/next.js/tree/canary/examples/with-react-helmet。不知道你为什么要这样做,但这个例子存在。有一些关于它的讨论

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

  • React-helmet 可以做而 next/head 不能做的一件事就是向 &lt;html&gt; 标签和 &lt;body&gt; 标签添加类(即 `&lt;Helmet&gt;&lt;html lang="en" /&gt;&lt;body class="root" /&gt;&lt;/Helmet&gt;`) 在每个页面组件中。如果您想根据当前页面将类添加到正文标记,这可能很有用。Next.js 提供了一个自定义文档(`pages/_document.js/tsx`)来将类添加到 &lt;html&gt; 和 &lt;body&gt; 标签,这与 React-helmet 方法不同。 (2认同)