[v3] remove next-seo and useNextSeoProps, use head option inste…

…ad (#2337)
shuding · Sep 24, 2023 · ea1a736 · ea1a736
1 parent 6eb3118
commit ea1a736
Show file tree

Hide file tree

Showing 20 changed files with 164 additions and 235 deletions.
diff --git a/.changeset/cool-terms-sniff.md b/.changeset/cool-terms-sniff.md
@@ -0,0 +1,5 @@
+---
+'nextra-theme-docs': major
+---
+
+remove `next-seo` and `useNextSeoProps`, use `head` option instead
diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@ from Next.js.
 
 ## Documentation
 
-[https://nextra.site](https://nextra.site)
+https://nextra.site
 
 ## Development
 

diff --git a/docs/pages/about.mdx b/docs/pages/about.mdx
@@ -26,9 +26,8 @@ Nextra is powered by these incredible open source projects:
 - https://pnpm.io
 - https://tailwindcss.com
 - https://github.com/pacocoursey/next-themes
-- https://github.com/garmeeh/next-seo
 - https://github.com/hashicorp/next-mdx-remote
-- https://github.com/shikijs/shiki
+- https://github.com/antfu/shikiji
 - https://github.com/nextapps-de/flexsearch
 - https://github.com/atomiks/rehype-pretty-code
 - https://github.com/Brooooooklyn/simple-git

diff --git a/docs/pages/docs/docs-theme/api/use-config.mdx b/docs/pages/docs/docs-theme/api/use-config.mdx
@@ -50,8 +50,6 @@ context.
 - `sidebar`: data about [Sidebar](/docs/docs-theme/theme-configuration#sidebar)
 - `toc`: data about
   [Table of Contents Sidebar](/docs/docs-theme/theme-configuration#toc-sidebar)
-- `useNextSeoOptions`: a function that passes data to Next.js SEO component.
-  (see [SEO Options](/docs/docs-theme/theme-configuration#seo-options))
 - `title`: title about current page
 - `frontMatter`: parsed [front matter](https://jekyllrb.com/docs/front-matter)
   data
diff --git a/docs/pages/docs/docs-theme/theme-configuration.mdx b/docs/pages/docs/docs-theme/theme-configuration.mdx
@@ -46,59 +46,6 @@ export default {
 
 Then Nextra will automatically generate the correct file path for all pages.
 
-### SEO Options
-
-You can configure SEO related settings via the `useNextSeoProps` option. The
-`useNextSeoProps` function returns the props that will be passed to the
-[Next SEO](https://github.com/garmeeh/next-seo#add-seo-to-page) component.
-
-It is also a hook, so you can use APIs like `useRouter` inside to return values
-conditionally.
-
-<OptionTable
-  options={[
-    [
-      'useNextSeoProps',
-      '() => NextSeoProps',
-      'A React hook function that returns options for Next SEO.'
-    ]
-  ]}
-/>
-
-For example, we can have all pages rendering the same suffix for `<title>`:
-
-import titleSuffixImage from '../../../public/assets/docs/title-suffix.png'
-
-<Screenshot src={titleSuffixImage} alt="Title suffix" />
-
-```js
-export default {
-  useNextSeoProps() {
-    return {
-      titleTemplate: '%s – SWR'
-    }
-  }
-}
-```
-
-The `%s` is a [placeholder](https://github.com/garmeeh/next-seo#title-template)
-that will be replaced by the page title.
-
-You can also return it conditionally to avoid adding the suffix to the homepage:
-
-```js
-export default {
-  useNextSeoProps() {
-    const { asPath } = useRouter()
-    if (asPath !== '/') {
-      return {
-        titleTemplate: '%s – SWR'
-      }
-    }
-  }
-}
-```
-
 ### Head Tags
 
 Configure the `<head>` tags of the website. You can add meta tags, title,

diff --git a/docs/theme.config.tsx b/docs/theme.config.tsx
@@ -45,46 +45,33 @@ const config: DocsThemeConfig = {
     link: 'https://github.com/shuding/nextra'
   },
   docsRepositoryBase: 'https://github.com/shuding/nextra/tree/main/docs',
-  useNextSeoProps() {
-    const { asPath } = useRouter()
-    if (asPath !== '/') {
-      return {
-        titleTemplate: '%s – Nextra'
-      }
-    }
-  },
   logo,
   head: function useHead() {
-    const { title } = useConfig()
+    const config = useConfig()
     const { route } = useRouter()
-    const socialCard =
-      route === '/' || !title
-        ? 'https://nextra.site/og.jpeg'
-        : `https://nextra.site/api/og?title=${title}`
+    const isDefault = route === '/' || !config.title
+    const image =
+      'https://nextra.site/' +
+      (isDefault ? 'og.jpeg' : `api/og?title=${config.title}`)
+
+    const description =
+      config.frontMatter.description ||
+      'Make beautiful websites with Next.js & MDX.'
+    const title = config.title + (route === '/' ? '' : ' - Nextra')
 
     return (
       <>
+        <title>{title}</title>
+        <meta property="og:title" content={title} />
+        <meta name="description" content={description} />
+        <meta property="og:description" content={description} />
+        <meta property="og:image" content={image} />
+
         <meta name="msapplication-TileColor" content="#fff" />
-        <meta name="theme-color" content="#fff" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta httpEquiv="Content-Language" content="en" />
-        <meta
-          name="description"
-          content="Make beautiful websites with Next.js & MDX."
-        />
-        <meta
-          name="og:description"
-          content="Make beautiful websites with Next.js & MDX."
-        />
         <meta name="twitter:card" content="summary_large_image" />
-        <meta name="twitter:image" content={socialCard} />
         <meta name="twitter:site:domain" content="nextra.site" />
         <meta name="twitter:url" content="https://nextra.site" />
-        <meta
-          name="og:title"
-          content={title ? title + ' – Nextra' : 'Nextra'}
-        />
-        <meta name="og:image" content={socialCard} />
         <meta name="apple-mobile-web-app-title" content="Nextra" />
         <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
         <link rel="icon" href="/favicon.png" type="image/png" />

diff --git a/examples/docs/next.config.mjs b/examples/docs/next.config.mjs
@@ -2,7 +2,7 @@ import nextra from 'nextra'
 
 const withNextra = nextra({
   theme: 'nextra-theme-docs',
-  themeConfig: './src/theme.config.js',
+  themeConfig: './src/theme.config.jsx',
   latex: true,
   search: {
     codeblocks: false

diff --git a/examples/docs/src/pages/themes/docs/configuration.mdx b/examples/docs/src/pages/themes/docs/configuration.mdx
@@ -385,11 +385,9 @@ The head that should be inserted into the html document.
  * @type {import('nextra-theme-docs').DocsThemeConfig}
  */
 export default {
-  head: ({ locale, title, config, meta }) => (
+  head: (
     <>
-      <meta name="msapplication-TileColor" content="#ffffff" />
-      <meta name="theme-color" content="#ffffff" />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <meta name="msapplication-TileColor" content="#fff" />
       <meta httpEquiv="Content-Language" content="en" />
       <meta name="description" content="Nextra: the next docs builder" />
       <meta name="twitter:card" content="summary_large_image" />

diff --git a/examples/docs/src/theme.config.js b/examples/docs/src/theme.config.js
diff --git a/examples/docs/src/theme.config.jsx b/examples/docs/src/theme.config.jsx
@@ -0,0 +1,74 @@
+import { useConfig } from 'nextra-theme-docs'
+
+/* eslint sort-keys: error */
+/**
+ * @type {import('nextra-theme-docs').DocsThemeConfig}
+ */
+export default {
+  banner: {
+    content: 'Nextra 2 Alpha',
+    key: 'Nextra 2'
+  },
+  chat: {
+    link: 'https://discord.gg/hEM84NMkRv' // Next.js discord server,
+  },
+  docsRepositoryBase:
+    'https://github.com/shuding/nextra/blob/core/examples/docs',
+  editLink: {
+    content: 'Edit this page on GitHub'
+  },
+  faviconGlyph: '✦',
+  head: function useHead() {
+    const config = useConfig()
+    const title = `${config.title} – Nextra`
+    const description =
+      config.frontMatter.description || 'Nextra: the Next.js site builder'
+    const image = config.frontMatter.image || 'https://nextra.site/og.jpeg'
+    return (
+      <>
+        <title>{title}</title>
+        <meta property="og:title" content={title} />
+        <meta name="description" content={description} />
+        <meta property="og:description" content={description} />
+        <meta name="og:image" content={image} />
+
+        <meta name="msapplication-TileColor" content="#fff" />
+        <meta httpEquiv="Content-Language" content="en" />
+        <meta name="apple-mobile-web-app-title" content="Nextra" />
+        <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
+
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:site" content="https://nextra.site" />
+        <link
+          rel="apple-touch-icon"
+          sizes="180x180"
+          href="/apple-icon-180x180.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="192x192"
+          href="/android-icon-192x192.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="32x32"
+          href="/favicon-32x32.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="96x96"
+          href="/favicon-96x96.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="16x16"
+          href="/favicon-16x16.png"
+        />
+      </>
+    )
+  }
+}
diff --git a/examples/swr-site/pages/en/blog/swr-v1.mdx b/examples/swr-site/pages/en/blog/swr-v1.mdx
@@ -165,8 +165,8 @@ Since 0.x, we've made hundreds of small improvements and bugfixes. SWR now has
 
 Thanks to our
 [contributors](https://github.com/vercel/swr-site/graphs/contributors) and
-Nextra’s [i18n feature](https://nextra.vercel.app/features/i18n), we now offer
-SWR documentation in six different languages:
+Nextra’s [i18n feature](https://nextra.site/docs/guide/i18n), we now offer SWR
+documentation in six different languages:
 
 - [English](https://swr.vercel.app)
 - [Spanish](https://swr.vercel.app/es-ES)

diff --git a/examples/swr-site/pages/ru/blog/swr-v1.mdx b/examples/swr-site/pages/ru/blog/swr-v1.mdx
@@ -169,7 +169,7 @@ useSWR(key, fetcher, { use: [...middleware] })
 
 Благодаря нашим
 [контрибютерам](https://github.com/vercel/swr-site/graphs/contributors) и
-[функции i18n](https://nextra.vercel.app/features/i18n) от Nextra, теперь мы
+[функции i18n](https://nextra.site/docs/guide/i18n) от Nextra, теперь мы
 предлагаем документацию по SWR на шести разных языках:
 
 - [Английский](https://swr.vercel.app)