From ea1a7362c0ba4d02e7edf6fefce19c40f165a5b8 Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Sat, 23 Sep 2023 22:27:48 -0700 Subject: [PATCH] [v3] remove `next-seo` and `useNextSeoProps`, use `head` option instead (#2337) --- .changeset/cool-terms-sniff.md | 5 ++ README.md | 2 +- docs/pages/about.mdx | 3 +- docs/pages/docs/docs-theme/api/use-config.mdx | 2 - .../docs/docs-theme/theme-configuration.mdx | 53 ------------- docs/theme.config.tsx | 45 ++++------- examples/docs/next.config.mjs | 2 +- .../src/pages/themes/docs/configuration.mdx | 6 +- examples/docs/src/theme.config.js | 75 ------------------- examples/docs/src/theme.config.jsx | 74 ++++++++++++++++++ examples/swr-site/pages/en/blog/swr-v1.mdx | 4 +- examples/swr-site/pages/ru/blog/swr-v1.mdx | 2 +- examples/swr-site/theme.config.tsx | 20 ++--- packages/nextra-theme-docs/README.md | 2 +- packages/nextra-theme-docs/package.json | 1 - .../nextra-theme-docs/src/components/head.tsx | 70 +++++++---------- packages/nextra-theme-docs/src/constants.tsx | 24 +++++- packages/nextra-theme-docs/src/schemas.ts | 4 +- .../nextra/src/client/hooks/use-fs-route.ts | 2 +- pnpm-lock.yaml | 3 - 20 files changed, 164 insertions(+), 235 deletions(-) create mode 100644 .changeset/cool-terms-sniff.md delete mode 100644 examples/docs/src/theme.config.js create mode 100644 examples/docs/src/theme.config.jsx diff --git a/.changeset/cool-terms-sniff.md b/.changeset/cool-terms-sniff.md new file mode 100644 index 00000000000..16bddb515e5 --- /dev/null +++ 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 index 27acc27c131..a6dfd99564a 100644 --- 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 index 53dfe8f8d22..5d840fc6700 100644 --- 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 index 85967d58897..6359d369c95 100644 --- 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 index f9a19bc3517..dd8217bf54e 100644 --- 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. - - NextSeoProps', - 'A React hook function that returns options for Next SEO.' - ] - ]} -/> - -For example, we can have all pages rendering the same suffix for ``: - -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 index db71b57aa50..3791c8cdcf7 100644 --- 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} + + + + + - - - - - - - diff --git a/examples/docs/next.config.mjs b/examples/docs/next.config.mjs index 7849f40b7e0..c679a1877d3 100644 --- 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 index dd81740cc96..65459752432 100644 --- 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: ( <> - - - + diff --git a/examples/docs/src/theme.config.js b/examples/docs/src/theme.config.js deleted file mode 100644 index 3538b5dbf31..00000000000 --- a/examples/docs/src/theme.config.js +++ /dev/null @@ -1,75 +0,0 @@ -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: '✦', - useNextSeoProps() { - const { frontMatter } = useConfig() - return { - additionalLinkTags: [ - { - href: '/apple-icon-180x180.png', - rel: 'apple-touch-icon', - sizes: '180x180' - }, - { - href: '/android-icon-192x192.png', - rel: 'icon', - sizes: '192x192', - type: 'image/png' - }, - { - href: '/favicon-96x96.png', - rel: 'icon', - sizes: '96x96', - type: 'image/png' - }, - { - href: '/favicon-32x32.png', - rel: 'icon', - sizes: '32x32', - type: 'image/png' - }, - { - href: '/favicon-16x16.png', - rel: 'icon', - sizes: '16x16', - type: 'image/png' - } - ], - additionalMetaTags: [ - { content: 'en', httpEquiv: 'Content-Language' }, - { content: 'Nextra', name: 'apple-mobile-web-app-title' }, - { content: '#fff', name: 'msapplication-TileColor' }, - { content: '/ms-icon-144x144.png', name: 'msapplication-TileImage' } - ], - description: - frontMatter.description || 'Nextra: the Next.js site builder', - openGraph: { - images: [ - { url: frontMatter.image || 'https://nextra.vercel.app/og.png' } - ] - }, - titleTemplate: '%s – Nextra', - twitter: { - cardType: 'summary_large_image', - site: 'https://nextra.vercel.app' - } - } - } -} diff --git a/examples/docs/src/theme.config.jsx b/examples/docs/src/theme.config.jsx new file mode 100644 index 00000000000..1a6447f523b --- /dev/null +++ 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} + + + + + + + + + + + + + + + + + + + ) + } +} diff --git a/examples/swr-site/pages/en/blog/swr-v1.mdx b/examples/swr-site/pages/en/blog/swr-v1.mdx index 3bad8caa33c..9aeda2add3f 100644 --- 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 index 5dd9200b755..c40b1fcb7d7 100644 --- 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) diff --git a/examples/swr-site/theme.config.tsx b/examples/swr-site/theme.config.tsx index d50bcb17909..2fa6a57c933 100644 --- a/examples/swr-site/theme.config.tsx +++ b/examples/swr-site/theme.config.tsx @@ -105,14 +105,20 @@ const config: DocsThemeConfig = { }, head: function useHead() { const config = useConfig<{ description?: string; image?: string }>() + const { locale } = useRouter() const description = config.frontMatter.description || 'SWR is a React Hooks library for data fetching. SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again.' const image = config.frontMatter.image || 'https://assets.vercel.com/image/upload/v1572282926/swr/twitter-card.jpg' + const title = `${config.title} | SWR (${locale})` return ( <> + {title} + + + {/* Favicons, meta */} - + - - - - - + ) @@ -190,12 +192,6 @@ const config: DocsThemeConfig = { placeholder cat ), float: true - }, - useNextSeoProps() { - const { locale } = useRouter() - return { - titleTemplate: `%s | SWR (${locale})` - } } } diff --git a/packages/nextra-theme-docs/README.md b/packages/nextra-theme-docs/README.md index 5976df56a8d..631e9a7754b 100644 --- a/packages/nextra-theme-docs/README.md +++ b/packages/nextra-theme-docs/README.md @@ -4,4 +4,4 @@ A documentation site theme for [Nextra](https://github.com/shuding/nextra). ## Example -[nextra.vercel.app](https://nextra.vercel.app/) +https://nextra.site diff --git a/packages/nextra-theme-docs/package.json b/packages/nextra-theme-docs/package.json index c3c99a4c47c..44141e6d931 100644 --- a/packages/nextra-theme-docs/package.json +++ b/packages/nextra-theme-docs/package.json @@ -43,7 +43,6 @@ "flexsearch": "^0.7.31", "focus-visible": "^5.2.0", "intersection-observer": "^0.12.2", - "next-seo": "^6.0.0", "next-themes": "^0.2.1", "scroll-into-view-if-needed": "^3.0.0", "zod": "^3.20.2" diff --git a/packages/nextra-theme-docs/src/components/head.tsx b/packages/nextra-theme-docs/src/components/head.tsx index c487863a728..c8534294291 100644 --- a/packages/nextra-theme-docs/src/components/head.tsx +++ b/packages/nextra-theme-docs/src/components/head.tsx @@ -1,5 +1,3 @@ -import type { NextSeoProps } from 'next-seo' -import { NextSeo } from 'next-seo' import { useTheme } from 'next-themes' import NextHead from 'next/head' import { useMounted } from 'nextra/hooks' @@ -21,48 +19,39 @@ export function Head(): ReactElement { typeof saturation === 'number' ? { dark: saturation, light: saturation } : saturation - const frontMatter = config.frontMatter as NextSeoProps return ( - <> - - - {config.faviconGlyph ? ( - ${config.faviconGlyph}`} + + {config.faviconGlyph ? ( + ${config.faviconGlyph}`} + /> + ) : null} + {mounted ? ( + + ) : ( + <> + - ) : null} - {mounted ? ( - ) : ( - <> - - - - )} - - - {head} - - + {head} + ) } diff --git a/packages/nextra-theme-docs/src/constants.tsx b/packages/nextra-theme-docs/src/constants.tsx index fdf7518bcc3..d5f2000a14a 100644 --- a/packages/nextra-theme-docs/src/constants.tsx +++ b/packages/nextra-theme-docs/src/constants.tsx @@ -104,7 +104,26 @@ export const DEFAULT_THEME: DocsThemeConfig = { ) }, - head: null, + head: function useHead() { + const config = useConfig() + + const title = `${config.title} – Nextra` + const { description, canonical, image } = config.frontMatter + return ( + <> + {title} + + {description && ( + <> + + + + )} + {canonical && } + {image && } + + ) + }, i18n: [], logo: ( <> @@ -177,8 +196,7 @@ export const DEFAULT_THEME: DocsThemeConfig = { component: TOC, float: true, title: 'On This Page' - }, - useNextSeoProps: () => ({ titleTemplate: '%s – Nextra' }) + } } export const DEEP_OBJECT_KEYS = Object.entries(DEFAULT_THEME) diff --git a/packages/nextra-theme-docs/src/schemas.ts b/packages/nextra-theme-docs/src/schemas.ts index 78729a7ba8d..6233e4c2258 100644 --- a/packages/nextra-theme-docs/src/schemas.ts +++ b/packages/nextra-theme-docs/src/schemas.ts @@ -1,4 +1,3 @@ -import type { NextSeoProps } from 'next-seo' import type { FC, ReactNode } from 'react' import { isValidElement } from 'react' import { z } from 'zod' @@ -145,8 +144,7 @@ export const themeSchema = /* @__PURE__ */ (() => extraContent: z.custom(...reactNode), float: z.boolean(), title: z.custom(...reactNode) - }), - useNextSeoProps: z.custom<() => NextSeoProps | void>(isFunction) + }) }))() export const publicThemeSchema = /* @__PURE__ */ (() => diff --git a/packages/nextra/src/client/hooks/use-fs-route.ts b/packages/nextra/src/client/hooks/use-fs-route.ts index 3d7e5b65132..59727e97cb9 100644 --- a/packages/nextra/src/client/hooks/use-fs-route.ts +++ b/packages/nextra/src/client/hooks/use-fs-route.ts @@ -2,7 +2,7 @@ import { useRouter } from 'next/router' import { useMemo } from 'react' import { DEFAULT_LOCALE, ERROR_ROUTES } from '../../constants.js' -const template = 'https://nextra.vercel.app' +const template = 'https://nextra.site' export const useFSRoute = () => { const { locale = DEFAULT_LOCALE, asPath, route } = useRouter() diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 36de3d5419a..ea3b3509655 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -444,9 +444,6 @@ importers: intersection-observer: specifier: ^0.12.2 version: 0.12.2 - next-seo: - specifier: ^6.0.0 - version: 6.0.0(next@13.5.2)(react-dom@18.2.0)(react@18.2.0) next-themes: specifier: ^0.2.1 version: 0.2.1(next@13.5.2)(react-dom@18.2.0)(react@18.2.0)