16

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.

2 Answers2

24

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.

Dmitry Minkovsky
  • 36,185
  • 26
  • 116
  • 160
  • Thanks for your answer, and I would like to know whether to use ```react-helmet``` or ```next/head``` and based on your input I could confirm that ```next/head``` itself enough while using next js.. Am I right?? –  Apr 07 '20 at 01:21
  • @TestUser yep. I haven't come across a single use-case where `next/head` is insufficient. Just add things to `` anywhere in your tree, and `next/head` will aggregate them into the page ``. No need for `react-helmet`. – Dmitry Minkovsky Apr 07 '20 at 01:24
  • I added **bold** to the short version of my answer :). – Dmitry Minkovsky Apr 07 '20 at 01:28
  • Thanks for your answer.. It helps to understand that react-helmet is not needed in ```next/head``` .. –  Apr 07 '20 at 01:29
  • Also do you have any idea of adobe analytics implementation in next js project?? For which I already have a question https://stackoverflow.com/q/60376041/12856847 but none of the answer helps.. –  Apr 07 '20 at 01:31
  • I’ve never used Adobe Analytics but based on the answer by Tessaracter it looks very similar to Google Analytics and I bet his/her answer is on the right track, if not even entirely correct. – Dmitry Minkovsky Apr 07 '20 at 02:28
  • Do you have any idea here?? https://stackoverflow.com/q/61080276/12856847 –  Apr 07 '20 at 13:01
  • Nope, sorry! Not sure about that one. – Dmitry Minkovsky Apr 07 '20 at 13:30
  • 1
    One thing react-helmet can do that next/head cannot is add classes to the tag and the tag (i.e., `

    `) within each page component. This can be useful if you want to add classes to body tag based on current page. Next.js provides a custom Document (`pages/_document.js/tsx`) to add classes to and

    tags, which is different that the react-helmet approach.     – kimbaudi Jun 30 '21 at 07:12
3

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

Jatin Hemnani
  • 311
  • 2
  • 8