configure seo and head with nextra

zeta-chain · May 7, 2024 · aedb37e · aedb37e
1 parent fa9067c
commit aedb37e
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 39 deletions.
diff --git a/package.json b/package.json
@@ -40,7 +40,7 @@
     "lodash-es": "4.17.21",
     "next": "14.0.4",
     "next-redux-wrapper": "8.1.0",
-    "next-seo": "5.15.0",
+    "next-seo": "6.0.0",
     "nextra": "2.13.4",
     "nextra-theme-docs": "2.13.4",
     "react": "18.2.0",
@@ -56,18 +56,18 @@
   },
   "devDependencies": {
     "@babel/core": "7.23.7",
-    "@babel/preset-env": "7.23.8",
-    "@babel/preset-typescript": "7.23.3",
     "@babel/plugin-proposal-throw-expressions": "7.23.3",
     "@babel/plugin-transform-react-jsx": "7.23.4",
+    "@babel/preset-env": "7.23.8",
+    "@babel/preset-typescript": "7.23.3",
     "@emotion/babel-plugin": "11.11.0",
     "@emotion/babel-plugin-jsx-pragmatic": "0.2.1",
+    "@next/eslint-plugin-next": "12.3.4",
+    "@types/eslint": "8.56.2",
     "@types/lodash-es": "4.17.12",
     "@types/node": "17.0.45",
     "@types/react": "18.2.48",
     "@types/react-dom": "18.2.18",
-    "@next/eslint-plugin-next": "12.3.4",
-    "@types/eslint": "8.56.2",
     "@types/swagger-ui-react": "4.18.3",
     "@typescript-eslint/eslint-plugin": "5.62.0",
     "@typescript-eslint/parser": "5.62.0",

diff --git a/src/components/shared/components/AppHead.tsx b/src/components/shared/components/AppHead.tsx
@@ -1,28 +1,23 @@
 import { darkMode } from "@zetachain/ui-toolkit/theme/mui.dark.theme";
-import Head from "next/head";
-import { DefaultSeo } from "next-seo";
 
-import SEO, { defaultBaseUrl, defaultTitle } from "~/config/next-seo.config";
+import { defaultTitle } from "~/config/next-seo.config";
 
 import { PreloadedFonts } from "./PreloadedFonts";
 
 export const AppHead: React.FC = () => (
   <>
-    <Head>
-      <meta charSet="UTF-8" />
-      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
-      <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png?v=2" />
-      <link rel="manifest" href="/favicon/site.webmanifest" />
-      <link rel="mask-icon" href="/favicon/safari-pinned-tab.svg?v=2" color={darkMode.palette.primary.main} />
-      <link rel="icon" type="image/png" href="/favicon/favicon.png?v=2" />
-      <meta name="apple-mobile-web-app-title" content={defaultTitle} />
-      <meta name="application-name" content={defaultTitle} />
-      <meta name="msapplication-TileColor" content={darkMode.palette.primary.main} />
-      <meta name="msapplication-config" content="/favicon/browserconfig.xml" />
-      <meta name="theme-color" content={darkMode.palette.primary.main} />
-      <PreloadedFonts />
-    </Head>
+    <meta charSet="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png?v=2" />
+    <link rel="manifest" href="/favicon/site.webmanifest" />
+    <link rel="mask-icon" href="/favicon/safari-pinned-tab.svg?v=2" color={darkMode.palette.primary.main} />
+    <link rel="icon" type="image/png" href="/favicon/favicon.png?v=2" />
+    <meta name="apple-mobile-web-app-title" content={defaultTitle} />
+    <meta name="application-name" content={defaultTitle} />
+    <meta name="msapplication-TileColor" content={darkMode.palette.primary.main} />
+    <meta name="msapplication-config" content="/favicon/browserconfig.xml" />
+    <meta name="theme-color" content={darkMode.palette.primary.main} />
 
-    <DefaultSeo {...SEO} canonical={typeof window !== "undefined" ? window.location.href : defaultBaseUrl} />
+    <PreloadedFonts />
   </>
 );
diff --git a/src/config/next-seo.config.ts b/src/config/next-seo.config.ts
@@ -1,10 +1,12 @@
+import { NextSeoProps } from "next-seo";
+
 export const defaultTitle = "ZetaDocs";
-export const defaultDescription = "ZetaChain documentation.";
-export const defaultBaseUrl = "https://docs.zetachain.com/";
+export const defaultDescription =
+  "ZetaChain Docs. ZetaChain is the only decentralized blockchain and smart contract platform built for omnichain interoperability.";
+export const defaultBaseUrl = "https://www.zetachain.com/docs/";
 
-// eslint-disable-next-line import/no-default-export
-export default {
-  title: defaultTitle,
+export const nextSeoProps: NextSeoProps = {
+  titleTemplate: `%s – ${defaultTitle}`,
   description: defaultDescription,
   openGraph: {
     title: defaultTitle,

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -6,7 +6,7 @@ import { compose } from "@reduxjs/toolkit";
 import type { AppProps } from "next/app";
 import Script from "next/script";
 
-import { AppHead, HeadProgressBar, Layout } from "~/components/shared";
+import { HeadProgressBar, Layout } from "~/components/shared";
 import { environment } from "~/env.cjs";
 import { useAppDispatch, wrapper } from "~/lib/app.store";
 import { createEmotionCache } from "~/lib/createEmotionCache";
@@ -25,7 +25,6 @@ const App = ({ Component, pageProps, ...rest }: AppProps & { emotionCache: Emoti
   return (
     <>
       <CacheProvider value={emotionCache}>
-        <AppHead />
         <ThemeProvider theme={theme}>
           <GlobalStyles />
           <HeadProgressBar />

diff --git a/src/theme.config.tsx b/src/theme.config.tsx
@@ -1,7 +1,7 @@
 import { DocsThemeConfig } from "nextra-theme-docs";
 
-import { Footer, IconZetaDocsLogo, ThemeToggle } from "~/components/shared";
-
+import { AppHead, Footer, IconZetaDocsLogo, ThemeToggle } from "~/components/shared";
+import { defaultBaseUrl, nextSeoProps } from "~/config/next-seo.config";
 /**
  * @description Custom Nextra Docs theme configuration
  * @see https://nextra.site/docs/docs-theme/theme-configuration
@@ -26,9 +26,16 @@ const nextraDocsThemeConfig: DocsThemeConfig = {
     icon: null,
   },
 
-  // Reset default head and SEO configs to use custom setup
-  head: () => null,
-  useNextSeoProps: () => {},
+  // Configure App Head component
+  head: <AppHead />,
+
+  // Configure next-seo props
+  useNextSeoProps: () => {
+    return {
+      ...nextSeoProps,
+      canonical: typeof window !== "undefined" ? window.location.href : defaultBaseUrl,
+    };
+  },
 
   // Edit search component in the navbar
   search: {

diff --git a/yarn.lock b/yarn.lock
@@ -9204,10 +9204,10 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/next-redux-wrapper/-/next-redux-wrapper-8.1.0.tgz#d9c135f1ceeb2478375bdacd356eb9db273d3a07"
   integrity sha512-2hIau0hcI6uQszOtrvAFqgc0NkZegKYhBB7ZAKiG3jk7zfuQb4E7OV9jfxViqqojh3SEHdnFfPkN9KErttUKuw==
 
-next-seo@5.15.0:
-  version "5.15.0"
-  resolved "https://registry.yarnpkg.com/next-seo/-/next-seo-5.15.0.tgz#b1a90508599774982909ea44803323c6fb7b50f4"
-  integrity sha512-LGbcY91yDKGMb7YI+28n3g+RuChUkt6pXNpa8FkfKkEmNiJkeRDEXTnnjVtwT9FmMhG6NH8qwHTelGrlYm9rgg==
+next-seo@6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/next-seo/-/next-seo-6.0.0.tgz#4568dc61a44dbdf5fe5ff44156cd0ff8804889a2"
+  integrity sha512-jKKt1p1z4otMA28AyeoAONixVjdYmgFCWwpEFtu+DwRHQDllVX3RjtyXbuCQiUZEfQ9rFPBpAI90vDeLZlMBdg==
 
 next-seo@^6.0.0:
   version "6.5.0"