React helmet or next/head for Next Js project?

Admin 1
Viewed 13602

I am making a next js application (React SSR), and now I am into implementing the meta tags in head.

So for now I have used next/head in _app.tsx file like,

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>
    );
  }
}

And the whole working code can be found here at sandbox: https://codesandbox.io/s/interesting-tereshkova-217ks

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

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

I am new into Next Js and SSR, So please help me in right direction which is the best method to achieve the result.

react-helmet next.js reactjs
2 Answers

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

react-helmet makes sense to use if you're rolling your own server side rendering solution and are not using Next.js. As far as I know, next/head is bascially a built-in version of react-helmet and does everything react-helmet does.

So no, you don't need to use react-helmet if you are using Next.js. Just use next/head.

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

That said, if you want to use react-helmet with Next.js, here is an example: 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 about it.

By the way, just like react-helmet, you can use next/head anywhere in your render tree—not just the App component like in your example—and all the tags will be aggregated into the <head> tag at the top.

user_7419700

There is also a great package for Meta tags for Next JS next-seo

user_135985450
Related