Fix next export (#655)

* fix `next export` command

* replace `classnames` package with `clsx` as he's faster (#656)

* remove `locale` prop from theme config, forbid passing `locale` prop in `renderComponent()` (#658)

* remove `locale` prop from theme config, forbid passing in `renderComponent`

* fix ci

* fix `Warning: Prop `href` did not match. Server: "#" Client: ...` (#659)

* update snapshots

* update tests

* fix `Hydration failed because the initial UI...` while adding custom `404.mdx`/`500.mdx` custom error pages (#607)

* fix

* even yet better!

* remove unused things

* fix hasTitle

* move notFoundLink and serverSideErrorLink directly to components

* rebase fixes

* fix type check

.changeset/brown-feet-happen.md

@@ -0,0 +1,7 @@
+---
+'nextra': patch
+'nextra-theme-blog': patch
+'nextra-theme-docs': patch
+---
+
+fix `Warning: Prop `href` did not match. Server: "#" Client: ...`

.changeset/clean-ligers-sell.md

@@ -0,0 +1,6 @@
+---
+'nextra': patch
+'nextra-theme-docs': patch
+---
+
+fix `next export` command

.changeset/pretty-starfishes-check.md

@@ -0,0 +1,5 @@
+---
+'nextra-theme-docs': patch
+---
+
+replace `classnames` package with `clsx` as he's faster

.changeset/sharp-foxes-relate.md

@@ -0,0 +1,5 @@
+---
+'nextra-theme-docs': patch
+---
+
+remove `locale` prop from theme config, forbid passing in `renderComponent`

examples/docs/src/theme.config.js

@@ -65,10 +65,9 @@ export default {
   unstable_faviconGlyph: '✦',
   prevLinks: true,
   nextLinks: true,
-  floatTOC: true,
   footer: true,
   footerEditLink: 'Edit this page on GitHub',
-  footerText: <>MIT {new Date().getFullYear()} © Nextra.</>,
+  footerText: `MIT ${new Date().getFullYear()} © Nextra.`,
   darkMode: true,
   bannerKey: 'Nextra 2',
   banner: 'Nextra 2 Alpha'

examples/swr-site/middleware.js

@@ -1,2 +1 @@
-import { locales } from "nextra/locales";
-export const middleware = locales;
+export { locales as middleware } from "nextra/locales";

examples/swr-site/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/swr-site/next.config.js

@@ -1,6 +1,6 @@
 const withNextra = require("nextra")({
   theme: "nextra-theme-docs",
-  themeConfig: "./theme.config.js",
+  themeConfig: "./theme.config.tsx",
   unstable_flexsearch: {
     codeblocks: true,
   },

examples/swr-site/pages/404.mdx

@@ -0,0 +1,5 @@
+import { NotFoundPage } from 'nextra-theme-docs'
+
+# 404 - This page could not be found
+
+<NotFoundPage />

examples/swr-site/pages/500.mdx

@@ -0,0 +1,5 @@
+import { ServerSideErrorPage } from 'nextra-theme-docs'
+
+# 500 - Internal Server Error
+
+<ServerSideErrorPage />

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

@@ -3,7 +3,7 @@ image: https://assets.vercel.com/image/upload/v1630059453/swr/v1.png
 description: 'Almost 2 years ago we open sourced SWR, the tiny data-fetching React library that people love. Today we are reaching another milestone: the 1.0 version of SWR.'
 ---
 
-import Authors, { Author } from 'components/authors'
+import Authors, { Author } from '@components/authors'
 
 # Announcing SWR 1.0
 

examples/swr-site/pages/blog/swr-v1.ja.mdx

@@ -3,7 +3,7 @@ image: https://assets.vercel.com/image/upload/v1630059453/swr/v1.png
 description: 'ほぼ二年前、みんなが愛する小さなデータフェッチ React ライブラリである SWR をオープンソースにしました。そして本日、私たちは大きな節目を迎えました： SWR の 1.0 バージョンです。'
 ---
 
-import Authors, { Author } from 'components/authors'
+import Authors, { Author } from '@components/authors'
 
 # SWR 1.0 の発表
 

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

@@ -3,7 +3,7 @@ image: https://assets.vercel.com/image/upload/v1630059453/swr/v1.png
 description: 'Почти 2 года назад мы сделали SWR — крошечную React библиотеку с открытым исходным кодом для выборки данных, которую люди полюбили. Сегодня мы приближаемся к еще одной вехе: версии 1.0 SWR!'
 ---
 
-import Authors, { Author } from 'components/authors'
+import Authors, { Author } from '@components/authors'
 
 # Представляем SWR 1.0
 

examples/swr-site/pages/blog/swr-v1.zh-CN.mdx

@@ -3,7 +3,7 @@ image: https://assets.vercel.com/image/upload/v1630059453/swr/v1.png
 description: '大约两年前，我们开源了 SWR，大家喜爱的小型数据请求 React 库。今天，我们迎来了另一个里程碑：SWR 1.0 版本发布。'
 ---
 
-import Authors, { Author } from 'components/authors'
+import Authors, { Author } from '@components/authors'
 
 # SWR 1.0 发布
 

examples/swr-site/pages/docs/404-500.en-US.mdx

@@ -0,0 +1,57 @@
+# 404 / 500 pages
+
+Nextra support custom `404.mdx`/`500.mdx` pages.
+
+## 404
+
+To add `/404` page import `NotFoundPage`:
+
+```mdx filename="pages/404.mdx"
+import { NotFoundPage } from 'nextra-theme-docs'
+
+# 404 - This page could not be found
+
+<NotFoundPage />
+```
+
+[Click to try `/404` page.](/this-page-not-exist-trust-me)
+
+## 500
+
+To add `/500` page import `ServerSideErrorPage`:
+
+```mdx filename="pages/500.mdx"
+import { ServerSideErrorPage } from 'nextra-theme-docs'
+
+# 500 - Internal Server Error
+
+<ServerSideErrorPage />
+```
+
+[Click to try `/500` page.](/500)
+
+## Customize Theme Config Options
+
+Also, you can customize following options:
+
+```ts
+// ...
+notFoundLink?: ReactNode | FC
+notFoundLabels?: string
+serverSideErrorLink?: ReactNode | FC
+serverSideErrorLabels?: string
+```
+
+## Customize Layout
+
+```json filename="meta.json"
+"404": {
+  "type": "page"
+},
+"500": {
+  "type":"page",
+  "theme": {
+    "layout": "full"
+  }
+}
+```

examples/swr-site/pages/docs/advanced/cache.en-US.mdx

@@ -51,7 +51,7 @@ All SWR hooks inside `<Page/>` will read and write from that Map instance. You c
   In the example above, when the `<App/>` component is re-mounted, the provider will also be re-created. Cache providers should be put higher in the component tree, or outside of render.
 </Callout>
 
-import { Cache } from 'components/diagrams/cache'
+import { Cache } from '@components/diagrams/cache'
 
 <div className="my-8">
   <Cache/>

examples/swr-site/pages/docs/advanced/cache.ja.mdx

@@ -51,7 +51,7 @@ function App() {
   上記の例では、 `<App />` コンポーネントが再マウントされると、プロバイダーも再生成します。キャッシュプロバイダーは、コンポーネントツリーの上位、またはレンダリングの外部に配置する必要があります。
 </Callout>
 
-import { Cache } from 'components/diagrams/cache'
+import { Cache } from '@components/diagrams/cache'
 
 <div className="my-8">
   <Cache/>

examples/swr-site/pages/docs/advanced/cache.ko.mdx

@@ -51,7 +51,7 @@ function App() {
   위 예시에서는 `<App/>` 컴포넌트가 다시 마운트될 때, 공급자 또한 다시 생성됩니다. 캐시 공급자는 컴포넌트 트리의 상위 또는 렌더링의 외부에 배치해야 합니다.
 </Callout>
 
-import { Cache } from 'components/diagrams/cache'
+import { Cache } from '@components/diagrams/cache'
 
 <div className="my-8">
   <Cache/>

examples/swr-site/pages/docs/advanced/cache.ru.mdx

@@ -60,7 +60,7 @@ function App() {
   повторно создан. Провайдеры кеша должны быть размещены выше в дереве компонентов или вне рендеринга.
 </Callout>
 
-import { Cache } from 'components/diagrams/cache'
+import { Cache } from '@components/diagrams/cache'
 
 <div className="my-8">
   <Cache/>

examples/swr-site/pages/docs/advanced/cache.zh-CN.mdx

@@ -51,7 +51,7 @@ function App() {
   在上面的例子中，当 `<App/>` 组件重新挂载时，provider 也会被重新创建。缓存 provider 应该放在组件树的更高位置，或者放在渲染之外。
 </Callout>
 
-import { Cache } from 'components/diagrams/cache'
+import { Cache } from '@components/diagrams/cache'
 
 <div className="my-8">
   <Cache/>

examples/swr-site/pages/docs/advanced/markdown-import.en-US.mdx

@@ -1,12 +1,12 @@
-import External from '../../../components/external.mdx'
+import External from '@components/external.mdx'
 import IndexPage from '../../index.en-US.mdx'
 
 # Markdown import
 
 ## Import of markdown file
 
 ```mdx
-import External from '../../../components/external.mdx'
+import External from '@components/external.mdx'
 
 <External />
 ```

examples/swr-site/pages/docs/getting-started.en-US.mdx

@@ -86,7 +86,7 @@ Instead, your code is more declarative: you just need to specify what data is us
 
 In a real-world example, our website shows a navbar and the content, both depend on `user`:
 
-import { Welcome } from 'components/diagrams/welcome'
+import { Welcome } from '@components/diagrams/welcome'
 
 <div className="mt-8">
   <Welcome/>

examples/swr-site/pages/docs/getting-started.es-ES.mdx

@@ -87,7 +87,7 @@ que especificar qué datos utiliza el componente.
 En un ejemplo del mundo real, nuestro sitio web muestra una barra de navegación y el contenido,
 ambos dependen del `user`:
 
-import { Welcome } from 'components/diagrams/welcome'
+import { Welcome } from '@components/diagrams/welcome'
 
 <div className="mt-8">
   <Welcome/>

examples/swr-site/pages/docs/getting-started.ja.mdx

@@ -83,7 +83,7 @@ function Avatar ({ id }) {
 
 現実世界の例では、ウェブサイトにナビゲーションバーとコンテンツが表示されています。どちらも `user` に依存しています：
 
-import { Welcome } from 'components/diagrams/welcome'
+import { Welcome } from '@components/diagrams/welcome'
 
 <div className="mt-8">
   <Welcome/>

examples/swr-site/pages/docs/getting-started.ko.mdx

@@ -84,7 +84,7 @@ function Avatar ({ id }) {
 
 실제 예시로, 저희 웹 사이트는 모두 `user`에 의존하는 navbar와 그 콘텐츠를 보여줍니다.
 
-import { Welcome } from 'components/diagrams/welcome'
+import { Welcome } from '@components/diagrams/welcome'
 
 <div className="mt-8">
   <Welcome/>

examples/swr-site/pages/docs/getting-started.ru.mdx

@@ -87,7 +87,7 @@ function Avatar ({ id }) {
 
 В реальном примере наш веб-сайт показывает панель навигации и контент, оба зависят от `user`:
 
-import { Welcome } from 'components/diagrams/welcome'
+import { Welcome } from '@components/diagrams/welcome'
 
 <div className="mt-8">
   <Welcome/>

examples/swr-site/pages/docs/getting-started.zh-CN.mdx

@@ -80,7 +80,7 @@ function Avatar({ id }) {
 
 在一个真实的示例中，我们的网站显示一个导航条和内容，都取决于 `user`：
 
-import { Welcome } from 'components/diagrams/welcome'
+import { Welcome } from '@components/diagrams/welcome'
 
 <div className="mt-8">
   <Welcome/>

examples/swr-site/pages/docs/global-configuration.en-US.md

@@ -39,7 +39,7 @@ function App () {
 
 ### Cache Provider
 
-Besides all the [options](/docs/options) listed, `SWRConfig` also accepts an optional `provider` function. Please refer to the [Cache](/docs/cache) section for more details.
+Besides, all the [options](/docs/options) listed, `SWRConfig` also accepts an optional `provider` function. Please refer to the [Cache](/docs/cache) section for more details.
 
 ```jsx
 <SWRConfig value={{ provider: () => new Map() }}>

examples/swr-site/pages/docs/meta.en-US.json

@@ -40,5 +40,6 @@
     "type": "page",
     "newWindow": true
   },
-  "scroll-with-dynamic-height": "Scroll With Dynamic Height"
+  "scroll-with-dynamic-height": "Scroll With Dynamic Height",
+  "404-500": "404/500 Custom Error Pages"
 }

examples/swr-site/pages/docs/pagination.en-US.mdx

@@ -14,7 +14,7 @@ SWR provides a dedicated API `useSWRInfinite` to support common UI patterns such
 
 First of all, we might **NOT** need `useSWRInfinite` but can use just `useSWR` if we are building something like this:
 
-import { Pagination } from 'components/diagrams/pagination'
+import { Pagination } from '@components/diagrams/pagination'
 
 <div className="mt-8">
   <Pagination/>
@@ -86,7 +86,7 @@ that most scenarios are covered by it.
 Sometimes we want to build an **infinite loading** UI, with a "Load More" button that appends data
 to the list (or done automatically when you scroll):
 
-import { Infinite } from 'components/diagrams/infinite'
+import { Infinite } from '@components/diagrams/infinite'
 
 <div className="mt-8">
   <Infinite/>
@@ -95,7 +95,7 @@ import { Infinite } from 'components/diagrams/infinite'
 To implement this, we need to make **dynamic number of requests** on this page. React Hooks have [a couple of rules](https://reactjs.org/docs/hooks-rules.html),
 so we **CANNOT** do something like this:
 
-```jsx {5,6,7,8,9}
+```jsx {5-9}
 function App () {
   const [cnt, setCnt] = useState(1)
 

examples/swr-site/pages/docs/pagination.es-ES.mdx

@@ -15,7 +15,7 @@ SWR proporciona una API dedicada `useSWRInfinite` para admitir patrones de UI co
 En primer lugar, es posible que **NO** necesitemos `useSWRInfinite`, sino que podemos utilizar simplemente `useSWR`
 si estamos construyendo algo como esto:
 
-import { Pagination } from 'components/diagrams/pagination'
+import { Pagination } from '@components/diagrams/pagination'
 
 <div className="mt-8">
   <Pagination/>
@@ -88,7 +88,7 @@ que la mayoría de los escenarios están cubiertos por él.
 A veces queremos construir una UI de **carga infinita**, con un botón "Load More" que añada datos
 a la lista (o que lo haga automáticamente al desplazarse):
 
-import { Infinite } from 'components/diagrams/infinite'
+import { Infinite } from '@components/diagrams/infinite'
 
 <div className="mt-8">
   <Infinite/>

examples/swr-site/pages/docs/pagination.ja.mdx

@@ -14,7 +14,7 @@ SWR は、**ページネーション**や**無限ローディング**などの
 
 まず第一に、`useSWRInfinite` は必要**ない**かもしれませんが、次のようなものを構築しようとするときには `useSWR` を使用できます：
 
-import { Pagination } from 'components/diagrams/pagination'
+import { Pagination } from '@components/diagrams/pagination'
 
 <div className="mt-8">
   <Pagination/>
@@ -86,7 +86,7 @@ function App () {
 「さらに読み込む」ボタンを使用して（またはスクロールすると自動的に実行されて）リストにデータを
 追加する**無限ローディング** UI を構築したい場合があります：
 
-import { Infinite } from 'components/diagrams/infinite'
+import { Infinite } from '@components/diagrams/infinite'
 
 <div className="mt-8">
   <Infinite/>

examples/swr-site/pages/docs/pagination.ko.mdx

@@ -14,7 +14,7 @@ SWR은 **페이지네이션**과 **인피니트 로딩**과 같은 일반적인
 
 다음과 같은 무언가를 구축한다면 우선 `useSWRInfinite`은 필요하지 **않고** `useSWR`만 사용하면 됩니다.
 
-import { Pagination } from 'components/diagrams/pagination'
+import { Pagination } from '@components/diagrams/pagination'
 
 <div className="mt-8">
   <Pagination/>
@@ -86,7 +86,7 @@ function App () {
 리스트에 데이터를 이어 붙이는 "더 보기" 버튼(또는 스크롤할 때 자동으로 완료)으로
 **인피니트 로딩** UI를 구축하길 원하는 경우가 있습니다.
 
-import { Infinite } from 'components/diagrams/infinite'
+import { Infinite } from '@components/diagrams/infinite'
 
 <div className="mt-8">
   <Infinite/>

examples/swr-site/pages/docs/pagination.ru.mdx

@@ -14,7 +14,7 @@ SWR предоставляет специальный API `useSWRInfinite` дл
 
 Для начала, нам может **НЕ** понадобится `useSWRInfinite`, а вместо него использовать просто `useSWR`, если мы создаем что-то вроде этого:
 
-import { Pagination } from 'components/diagrams/pagination'
+import { Pagination } from '@components/diagrams/pagination'
 
 <div className="mt-8">
   <Pagination/>
@@ -86,7 +86,7 @@ function App () {
 Иногда мы хотим создать интерфейс **бесконечной загрузки** с кнопкой «Загрузить ещё»,
 которая добавляет данные в список (или делает это автоматически при прокрутке):
 
-import { Infinite } from 'components/diagrams/infinite'
+import { Infinite } from '@components/diagrams/infinite'
 
 <div className="mt-8">
   <Infinite/>