Skip to content

Commit ea1a736

Browse files
author
Dimitri POSTOLOV
authoredSep 24, 2023
[v3] remove next-seo and useNextSeoProps, use head option instead (#2337)
·
nextra-theme-docs@4.0.0-rc.0nextra@3.0.0-alpha.1
1 parent 6eb3118 commit ea1a736

File tree

20 files changed

+164
-235
lines changed

20 files changed

+164
-235
lines changed
 

‎.changeset/cool-terms-sniff.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'nextra-theme-docs': major
3+
---
4+
5+
remove `next-seo` and `useNextSeoProps`, use `head` option instead

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ from Next.js.
55

66
## Documentation
77

8-
[https://nextra.site](https://nextra.site)
8+
https://nextra.site
99

1010
## Development
1111

‎docs/pages/about.mdx

+1-2
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,8 @@ Nextra is powered by these incredible open source projects:
2626
- https://pnpm.io
2727
- https://tailwindcss.com
2828
- https://github.com/pacocoursey/next-themes
29-
- https://github.com/garmeeh/next-seo
3029
- https://github.com/hashicorp/next-mdx-remote
31-
- https://github.com/shikijs/shiki
30+
- https://github.com/antfu/shikiji
3231
- https://github.com/nextapps-de/flexsearch
3332
- https://github.com/atomiks/rehype-pretty-code
3433
- https://github.com/Brooooooklyn/simple-git

‎docs/pages/docs/docs-theme/api/use-config.mdx

-2
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,6 @@ context.
5050
- `sidebar`: data about [Sidebar](/docs/docs-theme/theme-configuration#sidebar)
5151
- `toc`: data about
5252
[Table of Contents Sidebar](/docs/docs-theme/theme-configuration#toc-sidebar)
53-
- `useNextSeoOptions`: a function that passes data to Next.js SEO component.
54-
(see [SEO Options](/docs/docs-theme/theme-configuration#seo-options))
5553
- `title`: title about current page
5654
- `frontMatter`: parsed [front matter](https://jekyllrb.com/docs/front-matter)
5755
data

‎docs/pages/docs/docs-theme/theme-configuration.mdx

-53
Original file line numberDiff line numberDiff line change
@@ -46,59 +46,6 @@ export default {
4646

4747
Then Nextra will automatically generate the correct file path for all pages.
4848

49-
### SEO Options
50-
51-
You can configure SEO related settings via the `useNextSeoProps` option. The
52-
`useNextSeoProps` function returns the props that will be passed to the
53-
[Next SEO](https://github.com/garmeeh/next-seo#add-seo-to-page) component.
54-
55-
It is also a hook, so you can use APIs like `useRouter` inside to return values
56-
conditionally.
57-
58-
<OptionTable
59-
options={[
60-
[
61-
'useNextSeoProps',
62-
'() => NextSeoProps',
63-
'A React hook function that returns options for Next SEO.'
64-
]
65-
]}
66-
/>
67-
68-
For example, we can have all pages rendering the same suffix for `<title>`:
69-
70-
import titleSuffixImage from '../../../public/assets/docs/title-suffix.png'
71-
72-
<Screenshot src={titleSuffixImage} alt="Title suffix" />
73-
74-
```js
75-
export default {
76-
useNextSeoProps() {
77-
return {
78-
titleTemplate: '%s – SWR'
79-
}
80-
}
81-
}
82-
```
83-
84-
The `%s` is a [placeholder](https://github.com/garmeeh/next-seo#title-template)
85-
that will be replaced by the page title.
86-
87-
You can also return it conditionally to avoid adding the suffix to the homepage:
88-
89-
```js
90-
export default {
91-
useNextSeoProps() {
92-
const { asPath } = useRouter()
93-
if (asPath !== '/') {
94-
return {
95-
titleTemplate: '%s – SWR'
96-
}
97-
}
98-
}
99-
}
100-
```
101-
10249
### Head Tags
10350

10451
Configure the `<head>` tags of the website. You can add meta tags, title,

‎docs/theme.config.tsx

+16-29
Original file line numberDiff line numberDiff line change
@@ -45,46 +45,33 @@ const config: DocsThemeConfig = {
4545
link: 'https://github.com/shuding/nextra'
4646
},
4747
docsRepositoryBase: 'https://github.com/shuding/nextra/tree/main/docs',
48-
useNextSeoProps() {
49-
const { asPath } = useRouter()
50-
if (asPath !== '/') {
51-
return {
52-
titleTemplate: '%s – Nextra'
53-
}
54-
}
55-
},
5648
logo,
5749
head: function useHead() {
58-
const { title } = useConfig()
50+
const config = useConfig()
5951
const { route } = useRouter()
60-
const socialCard =
61-
route === '/' || !title
62-
? 'https://nextra.site/og.jpeg'
63-
: `https://nextra.site/api/og?title=${title}`
52+
const isDefault = route === '/' || !config.title
53+
const image =
54+
'https://nextra.site/' +
55+
(isDefault ? 'og.jpeg' : `api/og?title=${config.title}`)
56+
57+
const description =
58+
config.frontMatter.description ||
59+
'Make beautiful websites with Next.js & MDX.'
60+
const title = config.title + (route === '/' ? '' : ' - Nextra')
6461

6562
return (
6663
<>
64+
<title>{title}</title>
65+
<meta property="og:title" content={title} />
66+
<meta name="description" content={description} />
67+
<meta property="og:description" content={description} />
68+
<meta property="og:image" content={image} />
69+
6770
<meta name="msapplication-TileColor" content="#fff" />
68-
<meta name="theme-color" content="#fff" />
69-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7071
<meta httpEquiv="Content-Language" content="en" />
71-
<meta
72-
name="description"
73-
content="Make beautiful websites with Next.js & MDX."
74-
/>
75-
<meta
76-
name="og:description"
77-
content="Make beautiful websites with Next.js & MDX."
78-
/>
7972
<meta name="twitter:card" content="summary_large_image" />
80-
<meta name="twitter:image" content={socialCard} />
8173
<meta name="twitter:site:domain" content="nextra.site" />
8274
<meta name="twitter:url" content="https://nextra.site" />
83-
<meta
84-
name="og:title"
85-
content={title ? title + ' – Nextra' : 'Nextra'}
86-
/>
87-
<meta name="og:image" content={socialCard} />
8875
<meta name="apple-mobile-web-app-title" content="Nextra" />
8976
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
9077
<link rel="icon" href="/favicon.png" type="image/png" />

‎examples/docs/next.config.mjs

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import nextra from 'nextra'
22

33
const withNextra = nextra({
44
theme: 'nextra-theme-docs',
5-
themeConfig: './src/theme.config.js',
5+
themeConfig: './src/theme.config.jsx',
66
latex: true,
77
search: {
88
codeblocks: false

‎examples/docs/src/pages/themes/docs/configuration.mdx

+2-4
Original file line numberDiff line numberDiff line change
@@ -385,11 +385,9 @@ The head that should be inserted into the html document.
385385
* @type {import('nextra-theme-docs').DocsThemeConfig}
386386
*/
387387
export default {
388-
head: ({ locale, title, config, meta }) => (
388+
head: (
389389
<>
390-
<meta name="msapplication-TileColor" content="#ffffff" />
391-
<meta name="theme-color" content="#ffffff" />
392-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
390+
<meta name="msapplication-TileColor" content="#fff" />
393391
<meta httpEquiv="Content-Language" content="en" />
394392
<meta name="description" content="Nextra: the next docs builder" />
395393
<meta name="twitter:card" content="summary_large_image" />

‎examples/docs/src/theme.config.js

-75
This file was deleted.

‎examples/docs/src/theme.config.jsx

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import { useConfig } from 'nextra-theme-docs'
2+
3+
/* eslint sort-keys: error */
4+
/**
5+
* @type {import('nextra-theme-docs').DocsThemeConfig}
6+
*/
7+
export default {
8+
banner: {
9+
content: 'Nextra 2 Alpha',
10+
key: 'Nextra 2'
11+
},
12+
chat: {
13+
link: 'https://discord.gg/hEM84NMkRv' // Next.js discord server,
14+
},
15+
docsRepositoryBase:
16+
'https://github.com/shuding/nextra/blob/core/examples/docs',
17+
editLink: {
18+
content: 'Edit this page on GitHub'
19+
},
20+
faviconGlyph: '✦',
21+
head: function useHead() {
22+
const config = useConfig()
23+
const title = `${config.title} – Nextra`
24+
const description =
25+
config.frontMatter.description || 'Nextra: the Next.js site builder'
26+
const image = config.frontMatter.image || 'https://nextra.site/og.jpeg'
27+
return (
28+
<>
29+
<title>{title}</title>
30+
<meta property="og:title" content={title} />
31+
<meta name="description" content={description} />
32+
<meta property="og:description" content={description} />
33+
<meta name="og:image" content={image} />
34+
35+
<meta name="msapplication-TileColor" content="#fff" />
36+
<meta httpEquiv="Content-Language" content="en" />
37+
<meta name="apple-mobile-web-app-title" content="Nextra" />
38+
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
39+
40+
<meta name="twitter:card" content="summary_large_image" />
41+
<meta name="twitter:site" content="https://nextra.site" />
42+
<link
43+
rel="apple-touch-icon"
44+
sizes="180x180"
45+
href="/apple-icon-180x180.png"
46+
/>
47+
<link
48+
rel="icon"
49+
type="image/png"
50+
sizes="192x192"
51+
href="/android-icon-192x192.png"
52+
/>
53+
<link
54+
rel="icon"
55+
type="image/png"
56+
sizes="32x32"
57+
href="/favicon-32x32.png"
58+
/>
59+
<link
60+
rel="icon"
61+
type="image/png"
62+
sizes="96x96"
63+
href="/favicon-96x96.png"
64+
/>
65+
<link
66+
rel="icon"
67+
type="image/png"
68+
sizes="16x16"
69+
href="/favicon-16x16.png"
70+
/>
71+
</>
72+
)
73+
}
74+
}

‎examples/swr-site/pages/en/blog/swr-v1.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -165,8 +165,8 @@ Since 0.x, we've made hundreds of small improvements and bugfixes. SWR now has
165165

166166
Thanks to our
167167
[contributors](https://github.com/vercel/swr-site/graphs/contributors) and
168-
Nextra’s [i18n feature](https://nextra.vercel.app/features/i18n), we now offer
169-
SWR documentation in six different languages:
168+
Nextra’s [i18n feature](https://nextra.site/docs/guide/i18n), we now offer SWR
169+
documentation in six different languages:
170170

171171
- [English](https://swr.vercel.app)
172172
- [Spanish](https://swr.vercel.app/es-ES)

‎examples/swr-site/pages/ru/blog/swr-v1.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,7 @@ useSWR(key, fetcher, { use: [...middleware] })
169169

170170
Благодаря нашим
171171
[контрибютерам](https://github.com/vercel/swr-site/graphs/contributors) и
172-
[функции i18n](https://nextra.vercel.app/features/i18n) от Nextra, теперь мы
172+
[функции i18n](https://nextra.site/docs/guide/i18n) от Nextra, теперь мы
173173
предлагаем документацию по SWR на шести разных языках:
174174

175175
- [Английский](https://swr.vercel.app)

‎examples/swr-site/theme.config.tsx

+8-12
Original file line numberDiff line numberDiff line change
@@ -105,14 +105,20 @@ const config: DocsThemeConfig = {
105105
},
106106
head: function useHead() {
107107
const config = useConfig<{ description?: string; image?: string }>()
108+
const { locale } = useRouter()
108109
const description =
109110
config.frontMatter.description ||
110111
'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.'
111112
const image =
112113
config.frontMatter.image ||
113114
'https://assets.vercel.com/image/upload/v1572282926/swr/twitter-card.jpg'
115+
const title = `${config.title} | SWR (${locale})`
114116
return (
115117
<>
118+
<title>{title}</title>
119+
<meta property="og:title" content={title} />
120+
<meta name="description" content={description} />
121+
<meta property="og:description" content={description} />
116122
{/* Favicons, meta */}
117123
<link
118124
rel="apple-touch-icon"
@@ -137,15 +143,11 @@ const config: DocsThemeConfig = {
137143
href="/favicon/safari-pinned-tab.svg"
138144
color="#000000"
139145
/>
140-
<meta name="msapplication-TileColor" content="#ffffff" />
146+
<meta name="msapplication-TileColor" content="#fff" />
141147
<meta httpEquiv="Content-Language" content="en" />
142-
<meta name="description" content={description} />
143-
<meta name="og:description" content={description} />
144148
<meta name="twitter:card" content="summary_large_image" />
145149
<meta name="twitter:site" content="@vercel" />
146-
<meta name="twitter:image" content={image} />
147-
<meta name="og:title" content={`${config.title} – SWR`} />
148-
<meta name="og:image" content={image} />
150+
<meta property="og:image" content={image} />
149151
<meta name="apple-mobile-web-app-title" content="SWR" />
150152
</>
151153
)
@@ -190,12 +192,6 @@ const config: DocsThemeConfig = {
190192
<img alt="placeholder cat" src="https://placekitten.com/g/300/200" />
191193
),
192194
float: true
193-
},
194-
useNextSeoProps() {
195-
const { locale } = useRouter()
196-
return {
197-
titleTemplate: `%s | SWR (${locale})`
198-
}
199195
}
200196
}
201197

‎packages/nextra-theme-docs/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,4 @@ A documentation site theme for [Nextra](https://github.com/shuding/nextra).
44

55
## Example
66

7-
[nextra.vercel.app](https://nextra.vercel.app/)
7+
https://nextra.site

‎packages/nextra-theme-docs/package.json

-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,6 @@
4343
"flexsearch": "^0.7.31",
4444
"focus-visible": "^5.2.0",
4545
"intersection-observer": "^0.12.2",
46-
"next-seo": "^6.0.0",
4746
"next-themes": "^0.2.1",
4847
"scroll-into-view-if-needed": "^3.0.0",
4948
"zod": "^3.20.2"

‎packages/nextra-theme-docs/src/components/head.tsx

+29-41
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import type { NextSeoProps } from 'next-seo'
2-
import { NextSeo } from 'next-seo'
31
import { useTheme } from 'next-themes'
42
import NextHead from 'next/head'
53
import { useMounted } from 'nextra/hooks'
@@ -21,48 +19,39 @@ export function Head(): ReactElement {
2119
typeof saturation === 'number'
2220
? { dark: saturation, light: saturation }
2321
: saturation
24-
const frontMatter = config.frontMatter as NextSeoProps
2522

2623
return (
27-
<>
28-
<NextSeo
29-
title={config.title}
30-
description={frontMatter.description}
31-
canonical={frontMatter.canonical}
32-
openGraph={frontMatter.openGraph}
33-
{...config.useNextSeoProps?.()}
34-
/>
35-
<NextHead>
36-
{config.faviconGlyph ? (
37-
<link
38-
rel="icon"
39-
href={`data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text x='50' y='.9em' font-size='90' text-anchor='middle'>${config.faviconGlyph}</text><style>text{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";fill:black}@media(prefers-color-scheme:dark){text{fill:white}}</style></svg>`}
24+
<NextHead>
25+
{config.faviconGlyph ? (
26+
<link
27+
rel="icon"
28+
href={`data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text x='50' y='.9em' font-size='90' text-anchor='middle'>${config.faviconGlyph}</text><style>text{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";fill:black}@media(prefers-color-scheme:dark){text{fill:white}}</style></svg>`}
29+
/>
30+
) : null}
31+
{mounted ? (
32+
<meta
33+
name="theme-color"
34+
content={resolvedTheme === 'dark' ? '#111' : '#fff'}
35+
/>
36+
) : (
37+
<>
38+
<meta
39+
name="theme-color"
40+
content="#fff"
41+
media="(prefers-color-scheme: light)"
4042
/>
41-
) : null}
42-
{mounted ? (
4343
<meta
4444
name="theme-color"
45-
content={resolvedTheme === 'dark' ? '#111' : '#fff'}
45+
content="#111"
46+
media="(prefers-color-scheme: dark)"
4647
/>
47-
) : (
48-
<>
49-
<meta
50-
name="theme-color"
51-
content="#fff"
52-
media="(prefers-color-scheme: light)"
53-
/>
54-
<meta
55-
name="theme-color"
56-
content="#111"
57-
media="(prefers-color-scheme: dark)"
58-
/>
59-
</>
60-
)}
61-
<meta
62-
name="viewport"
63-
content="width=device-width, initial-scale=1.0, viewport-fit=cover"
64-
/>
65-
<style>{`
48+
</>
49+
)}
50+
<meta
51+
name="viewport"
52+
content="width=device-width, initial-scale=1.0, viewport-fit=cover"
53+
/>
54+
<style>{`
6655
:root {
6756
--nextra-primary-hue: ${lightHue}deg;
6857
--nextra-primary-saturation: ${lightSaturation}%;
@@ -76,8 +65,7 @@ export function Head(): ReactElement {
7665
--nextra-primary-saturation: ${darkSaturation}%;
7766
}
7867
`}</style>
79-
{head}
80-
</NextHead>
81-
</>
68+
{head}
69+
</NextHead>
8270
)
8371
}

‎packages/nextra-theme-docs/src/constants.tsx

+21-3
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,26 @@ export const DEFAULT_THEME: DocsThemeConfig = {
104104
</>
105105
)
106106
},
107-
head: null,
107+
head: function useHead() {
108+
const config = useConfig()
109+
110+
const title = `${config.title} – Nextra`
111+
const { description, canonical, image } = config.frontMatter
112+
return (
113+
<>
114+
<title>{title}</title>
115+
<meta property="og:title" content={title} />
116+
{description && (
117+
<>
118+
<meta name="description" content={description} />
119+
<meta property="og:description" content={description} />
120+
</>
121+
)}
122+
{canonical && <link rel="canonical" href={canonical} />}
123+
{image && <meta name="og:image" content={image} />}
124+
</>
125+
)
126+
},
108127
i18n: [],
109128
logo: (
110129
<>
@@ -177,8 +196,7 @@ export const DEFAULT_THEME: DocsThemeConfig = {
177196
component: TOC,
178197
float: true,
179198
title: 'On This Page'
180-
},
181-
useNextSeoProps: () => ({ titleTemplate: '%s – Nextra' })
199+
}
182200
}
183201

184202
export const DEEP_OBJECT_KEYS = Object.entries(DEFAULT_THEME)

‎packages/nextra-theme-docs/src/schemas.ts

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import type { NextSeoProps } from 'next-seo'
21
import type { FC, ReactNode } from 'react'
32
import { isValidElement } from 'react'
43
import { z } from 'zod'
@@ -145,8 +144,7 @@ export const themeSchema = /* @__PURE__ */ (() =>
145144
extraContent: z.custom<ReactNode | FC>(...reactNode),
146145
float: z.boolean(),
147146
title: z.custom<ReactNode | FC>(...reactNode)
148-
}),
149-
useNextSeoProps: z.custom<() => NextSeoProps | void>(isFunction)
147+
})
150148
}))()
151149

152150
export const publicThemeSchema = /* @__PURE__ */ (() =>

‎packages/nextra/src/client/hooks/use-fs-route.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useRouter } from 'next/router'
22
import { useMemo } from 'react'
33
import { DEFAULT_LOCALE, ERROR_ROUTES } from '../../constants.js'
44

5-
const template = 'https://nextra.vercel.app'
5+
const template = 'https://nextra.site'
66

77
export const useFSRoute = () => {
88
const { locale = DEFAULT_LOCALE, asPath, route } = useRouter()

‎pnpm-lock.yaml

-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)
Please sign in to comment.