12

私は次の 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

next/head次のjsアプリケーションでそれ自体を十分に使用するか、 react-helmetを実装する必要があるかを知りたいだけです??

必要な場合はreact-helmet、提供されている次の js アプリケーションに実装する方法を教えてください。

私はNext JsとSSRに慣れていないので、結果を達成するための最良の方法である正しい方向に私を助けてください.

4

2 に答える 2

16

次の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>。

于 2020-04-06T15:38:30.053 に答える