web-dev-qa-db-ja.com

ReactヘルメットまたはNext Jsプロジェクトのnext / head？

次の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に慣れていないので、結果を達成するための最良の方法である正しい方向に私を助けてください。

reactjsnext.jsreact-helmet
2
user12856847

Next/head自体を次のjsアプリケーションで十分に使用するか、それとも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と同じように、例のようにAppコンポーネントだけでなく、next/headをレンダーツリーの任意の場所で使用でき、すべてのタグが上部の<head>タグに集約されます。

2
Dmitry Minkovsky