NextJS Head from string

user_1175948 0
Viewed 1128

I'm trying to set a next HEAD component to a string value (which is actually returned from woocommerce as a Yoast Head string)

Trouble is the content of the html string never gets added to the HEAD component!

There are other HEAD components above this but as I understand it it's additive?

 const Product = ({ product }) => {

  const classes = useStyles();
  const addToCart = useContext(BasketContext);

  return (
    <>
      <Head dangerouslySetInnerHTML={{ __html: product.yoast_head }} />
      <div className={classes.root}>

        <Grid container spacing={1}>
          <Grid item className={classes.grid} xs={6}>
            <Card addToCart={addToCart} product={product} />
          </Grid>
        </Grid>
        <TabPanel product={product} />
      </div>
    </>
  );
};

Update I've got a fix for this with html-react-parser but I'll leave this open on the off chance someone has a better way!

next.js reactjs
1 Answers

I was trying to do the same thing and I was able to convert the YOAS Head block to a be parsed to react element array using "html-react-parser"

import parse from 'html-react-parser'
...
const yoastHead = parse(bookDetail.yoast_head)
return (
    <Layout>
        <Head>
            {yoastHead}
        </Head>
        <h1 dangerouslySetInnerHTML={{ __html: bookDetail.title.rendered }} />
        <div dangerouslySetInnerHTML={{ __html: bookDetail.content.rendered }} />
    </Layout>
)
user_4359700
Related