Ported SEO component

src/frontend/next/package.json

@@ -14,12 +14,14 @@
     "next": "^10.0.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-helmet": "^6.1.0",
     "react-use": "^15.3.8",
     "swr": "^0.4.0"
   },
   "devDependencies": {
     "@types/node": "^14.14.8",
     "@types/react": "^16.9.51",
+    "@types/react-helmet": "^6.1.0",
     "typescript": "^4.1.2"
   }
 }

src/frontend/next/src/components/SEO.tsx

@@ -0,0 +1,47 @@
+import { Helmet } from 'react-helmet';
+import useSiteMetadata from '../hooks/use-site-metadata';
+
+type SEOProps = {
+  description?: string;
+  lang?: string;
+  meta?: Array<any>;
+  title?: string;
+};
+const SEO = ({ description, lang, meta, title }: SEOProps) => {
+  const siteMetadata = useSiteMetadata();
+  const metaDescription = description || siteMetadata.description;
+  const concatMeta = [
+    {
+      name: `description`,
+      content: metaDescription,
+    },
+    {
+      property: `og:title`,
+      content: title,
+    },
+    {
+      property: `og:description`,
+      content: metaDescription,
+    },
+  ].concat(meta ?? []);
+
+  return (
+    <Helmet
+      htmlAttributes={{
+        lang,
+      }}
+      title={title}
+      titleTemplate={`%s | ${siteMetadata.title}`}
+      meta={concatMeta}
+    />
+  );
+};
+
+SEO.defaultProps = {
+  lang: 'en',
+  description: '',
+  title: '',
+  meta: [],
+};
+
+export default SEO;