From e6771caf7221f3f7b6ad270f058aa7797716cef7 Mon Sep 17 00:00:00 2001
From: Dimitri POSTOLOV <en3m@ya.ru>
Date: Sun, 28 Aug 2022 15:19:55 +0300
Subject: [PATCH] fix search overlay styles on mobile (#718)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor toc, fix toc's styles on rtl, use `ref.current` instead `document.getElementsByClassName`

* group both `mask-image`

* fix search overlay styles on mobile

* fix

* split css to `hamburger`/`scrollbar`/`typesetting-article` css files (#719)

* split css to `hamburger`/`scrollbar`/`typesetting-article` css files

* fix edit on github button for cases when filename named as `index` (#720)

* fix edit on github button for cases when filename named as `index`

* fix typecheck

* [docs] ❗️BREAKING ❗️ various theme config options was renamed (#721)

* rename `meta.json` to `_meta.json` (#722)

* BREAKING! various theme config options was renamed

* add new options `toc.component` to override toc component #564

* rename editLink to editLinkText

* add helpful console warnings

* Update packages/nextra-theme-docs/src/contexts/config.tsx

* Update packages/nextra-theme-docs/src/components/footer.tsx

* fix project.link behaviour

* small fix

* fix

* rename `meta.json` to `_meta.json`

* update snapshots

* rename `PageOpts.meta` to `PageOpts.frontMatter` (#723)

* BREAKING! various theme config options was renamed

* add new options `toc.component` to override toc component #564

* rename editLink to editLinkText

* add helpful console warnings

* Update packages/nextra-theme-docs/src/contexts/config.tsx

* Update packages/nextra-theme-docs/src/components/footer.tsx

* fix project.link behaviour

* small fix

* fix

* rename `meta.json` to `_meta.json`

* update snapshots

* rename `PageOpts.meta` to `PageOpts.frontMatter`

* fix swr build

* small fix

* clicking on folder should navigate to first children if `index` page doesn't exist (#724)

* BREAKING! various theme config options was renamed

* add new options `toc.component` to override toc component #564

* rename editLink to editLinkText

* add helpful console warnings

* Update packages/nextra-theme-docs/src/contexts/config.tsx

* Update packages/nextra-theme-docs/src/components/footer.tsx

* fix project.link behaviour

* small fix

* fix

* rename `meta.json` to `_meta.json`

* update snapshots

* rename `PageOpts.meta` to `PageOpts.frontMatter`

* fix swr build

* small fix

* clicking on folder should navigate to first children if `index` page doesn't exist

* apply review changes

* rebase fixes

* adjust active breadcrumb color (#725)

* move `withLayout` logic directly in nextra loader (#726)

* adjust active breadcrumb color

* move `withLayout` logic directly in nextra loader

* better loader types, add `MetaJsonFile`, `MdxFile`, `Folder` types, add tests for `next/context` (#731)

* fix ci

* fix callout shrinking from children content (#746)

* Version Packages (beta) (#728)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* fix typecheck

* fix typecheck

* simplify

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/angry-dancers-juggle.md            |    5 +
 .changeset/brave-snails-remember.md           |    5 +
 .changeset/chatty-beans-bake.md               |    6 +
 .changeset/cuddly-insects-scream.md           |    5 +
 .changeset/curvy-tomatoes-worry.md            |    5 +
 .changeset/happy-crabs-hope.md                |    7 +
 .changeset/olive-brooms-behave.md             |    5 +
 .changeset/orange-bugs-sell.md                |    5 +
 .changeset/pink-chicken-exist.md              |    5 +
 .changeset/poor-rivers-develop.md             |    6 +
 .changeset/proud-phones-dress.md              |    5 +
 .changeset/silly-apricots-help.md             |    5 +
 .changeset/swift-drinks-relax.md              |    5 +
 .changeset/tall-cows-whisper.md               |    7 +
 .changeset/tough-turtles-scream.md            |    7 +
 .changeset/violet-pianos-know.md              |    5 +
 .changeset/young-cows-serve.md                |    5 +
 .eslintrc.cjs                                 |    1 +
 examples/blog/next.config.mjs                 |    3 +-
 examples/blog/theme.config.jsx                |    3 +-
 .../docs/src/pages/{meta.json => _meta.json}  |    0
 .../pages/advanced/{meta.json => _meta.json}  |    0
 .../pages/features/{meta.json => _meta.json}  |    0
 .../pages/themes/{meta.json => _meta.json}    |    0
 .../themes/blog/{meta.json => _meta.json}     |    0
 .../themes/docs/{meta.json => _meta.json}     |    0
 examples/docs/src/pages/themes/docs/bleed.mdx |    5 +-
 examples/docs/src/theme.config.js             |   33 +-
 examples/swr-site/next.config.js              |    1 +
 .../{meta.en-US.json => _meta.en-US.json}     |    0
 .../{meta.es-ES.json => _meta.es-ES.json}     |    0
 .../pages/{meta.ja.json => _meta.ja.json}     |    0
 .../pages/{meta.ko.json => _meta.ko.json}     |    0
 .../pages/{meta.ru.json => _meta.ru.json}     |    0
 .../{meta.zh-CN.json => _meta.zh-CN.json}     |    0
 .../{meta.en-US.json => _meta.en-US.json}     |    0
 .../{meta.en-US.json => _meta.en-US.json}     |    0
 .../{meta.es-ES.json => _meta.es-ES.json}     |    0
 .../blog/{meta.ja.json => _meta.ja.json}      |    0
 .../blog/{meta.ko.json => _meta.ko.json}      |    0
 .../blog/{meta.ru.json => _meta.ru.json}      |    0
 .../{meta.zh-CN.json => _meta.zh-CN.json}     |    0
 .../{meta.en-US.json => _meta.en-US.json}     |    0
 .../{meta.es-ES.json => _meta.es-ES.json}     |    0
 .../docs/{meta.ja.json => _meta.ja.json}      |    0
 .../docs/{meta.ko.json => _meta.ko.json}      |    0
 .../docs/{meta.ru.json => _meta.ru.json}      |    0
 .../{meta.zh-CN.json => _meta.zh-CN.json}     |    0
 .../{meta.en-US.json => _meta.en-US.json}     |    0
 .../{meta.es-ES.json => _meta.es-ES.json}     |    0
 .../advanced/{meta.ja.json => _meta.ja.json}  |    0
 .../advanced/{meta.ko.json => _meta.ko.json}  |    0
 .../advanced/{meta.ru.json => _meta.ru.json}  |    0
 .../{meta.zh-CN.json => _meta.zh-CN.json}     |    0
 .../{meta.en-US.json => _meta.en-US.json}     |    0
 .../{meta.es-ES.json => _meta.es-ES.json}     |    0
 .../examples/{meta.ja.json => _meta.ja.json}  |    0
 .../examples/{meta.ko.json => _meta.ko.json}  |    0
 .../examples/{meta.ru.json => _meta.ru.json}  |    0
 .../{meta.zh-CN.json => _meta.zh-CN.json}     |    0
 examples/swr-site/theme.config.tsx            |  240 +-
 package.json                                  |    1 +
 .../__test__/__fixture__/pageMap.ts           |   12 +-
 .../nextra-theme-blog/src/article-layout.tsx  |    2 +-
 .../nextra-theme-blog/src/basic-layout.tsx    |    2 +-
 .../nextra-theme-blog/src/blog-context.tsx    |    2 +-
 packages/nextra-theme-blog/src/constants.tsx  |    5 +-
 packages/nextra-theme-blog/src/env.d.ts       |   13 +
 packages/nextra-theme-blog/src/index.tsx      |   32 +-
 packages/nextra-theme-blog/src/mdx-theme.tsx  |   17 +-
 .../nextra-theme-blog/src/posts-layout.tsx    |    4 +-
 packages/nextra-theme-blog/src/types.ts       |   39 +-
 .../nextra-theme-blog/src/utils/collect.ts    |   18 +-
 packages/nextra-theme-blog/src/utils/date.ts  |    4 +-
 .../nextra-theme-blog/src/utils/get-tags.ts   |    4 +-
 .../nextra-theme-blog/src/utils/parent.ts     |   11 +-
 .../nextra-theme-blog/src/utils/traverse.ts   |    7 +-
 packages/nextra-theme-blog/tailwind.config.js |    2 +-
 .../__test__/__fixture__/pageMap.ts           |  120 +-
 .../__test__/normalize-page.spec.ts           |    4 +-
 packages/nextra-theme-docs/css/hamburger.css  |   39 +
 packages/nextra-theme-docs/css/scrollbar.css  |   41 +
 .../nextra-theme-docs/{src => css}/styles.css |  183 +-
 .../css/typesetting-article.css               |   26 +
 packages/nextra-theme-docs/package.json       |    4 +-
 .../src/components/banner.tsx                 |   42 +-
 .../src/components/breadcrumb.tsx             |   12 +-
 .../src/components/callout.tsx                |    2 +-
 .../src/components/flexsearch.tsx             |   11 +-
 .../src/components/footer.tsx                 |    7 +-
 .../nextra-theme-docs/src/components/head.tsx |    3 +-
 .../src/components/locale-switch.tsx          |   10 +-
 .../src/components/match-sorter-search.tsx    |   11 +-
 .../src/components/nav-links.tsx              |   20 +-
 .../src/components/navbar.tsx                 |   55 +-
 .../src/components/not-found.tsx              |   12 +-
 .../src/components/search.tsx                 |   19 +-
 .../src/components/server-side-error.tsx      |   12 +-
 .../src/components/sidebar.tsx                |   62 +-
 .../nextra-theme-docs/src/components/toc.tsx  |   71 +-
 packages/nextra-theme-docs/src/constants.tsx  |  180 +-
 .../nextra-theme-docs/src/contexts/config.tsx |   96 +-
 .../nextra-theme-docs/src/contexts/menu.ts    |    2 -
 packages/nextra-theme-docs/src/env.d.ts       |    7 +
 packages/nextra-theme-docs/src/index.tsx      |   78 +-
 .../nextra-theme-docs/src/mdx-components.tsx  |    7 +-
 packages/nextra-theme-docs/src/types.ts       |  146 +-
 .../src/utils/get-git-edit-url.ts             |   19 +
 packages/nextra-theme-docs/src/utils/index.ts |    1 +
 .../src/utils/normalize-pages.ts              |   22 +-
 .../nextra-theme-docs/src/utils/render.tsx    |    8 +-
 packages/nextra-theme-docs/tailwind.config.js |    6 +-
 .../__snapshots__/context.test.ts.snap        | 2893 +++++++++++++++++
 .../__snapshots__/page-map.test.ts.snap       |  500 ++-
 packages/nextra/__test__/context.test.ts      |   37 +
 packages/nextra/__test__/page-map.test.ts     |   52 +-
 packages/nextra/package.json                  |   22 +-
 packages/nextra/src/compile.ts                |   28 +-
 packages/nextra/src/components/code.tsx       |   13 +
 .../src/components/copy-to-clipboard.tsx      |   61 +
 packages/nextra/src/components/index.ts       |    3 +
 packages/nextra/src/components/pre.tsx        |   40 +
 packages/nextra/src/constants.ts              |   11 +-
 packages/nextra/src/content-dump.ts           |   26 +-
 packages/nextra/src/context.ts                |  106 +-
 packages/nextra/src/filter-route-locale.ts    |   36 +-
 packages/nextra/src/icons.ts                  |    1 -
 packages/nextra/src/icons/arrow-right.tsx     |    8 +-
 packages/nextra/src/icons/check.tsx           |   12 +-
 packages/nextra/src/icons/copy.tsx            |   34 +
 packages/nextra/src/icons/index.ts            |    1 +
 packages/nextra/src/index.js                  |    7 +-
 packages/nextra/src/loader.ts                 |  101 +-
 .../nextra/src/mdx-plugins/rehype-handler.js  |   62 +-
 packages/nextra/src/page-map.ts               |   56 +-
 packages/nextra/src/plugin.ts                 |  113 +-
 packages/nextra/src/ssg.ts                    |    1 +
 packages/nextra/src/types.ts                  |   80 +-
 packages/nextra/src/utils.ts                  |   17 +-
 packages/nextra/styles/code-block.css         |   24 +-
 packages/nextra/tsup.config.ts                |   20 +-
 pnpm-lock.yaml                                |  111 +
 142 files changed, 4935 insertions(+), 1433 deletions(-)
 create mode 100644 .changeset/angry-dancers-juggle.md
 create mode 100644 .changeset/brave-snails-remember.md
 create mode 100644 .changeset/chatty-beans-bake.md
 create mode 100644 .changeset/cuddly-insects-scream.md
 create mode 100644 .changeset/curvy-tomatoes-worry.md
 create mode 100644 .changeset/happy-crabs-hope.md
 create mode 100644 .changeset/olive-brooms-behave.md
 create mode 100644 .changeset/orange-bugs-sell.md
 create mode 100644 .changeset/pink-chicken-exist.md
 create mode 100644 .changeset/poor-rivers-develop.md
 create mode 100644 .changeset/proud-phones-dress.md
 create mode 100644 .changeset/silly-apricots-help.md
 create mode 100644 .changeset/swift-drinks-relax.md
 create mode 100644 .changeset/tall-cows-whisper.md
 create mode 100644 .changeset/tough-turtles-scream.md
 create mode 100644 .changeset/violet-pianos-know.md
 create mode 100644 .changeset/young-cows-serve.md
 rename examples/docs/src/pages/{meta.json => _meta.json} (100%)
 rename examples/docs/src/pages/advanced/{meta.json => _meta.json} (100%)
 rename examples/docs/src/pages/features/{meta.json => _meta.json} (100%)
 rename examples/docs/src/pages/themes/{meta.json => _meta.json} (100%)
 rename examples/docs/src/pages/themes/blog/{meta.json => _meta.json} (100%)
 rename examples/docs/src/pages/themes/docs/{meta.json => _meta.json} (100%)
 rename examples/swr-site/pages/{meta.en-US.json => _meta.en-US.json} (100%)
 rename examples/swr-site/pages/{meta.es-ES.json => _meta.es-ES.json} (100%)
 rename examples/swr-site/pages/{meta.ja.json => _meta.ja.json} (100%)
 rename examples/swr-site/pages/{meta.ko.json => _meta.ko.json} (100%)
 rename examples/swr-site/pages/{meta.ru.json => _meta.ru.json} (100%)
 rename examples/swr-site/pages/{meta.zh-CN.json => _meta.zh-CN.json} (100%)
 rename examples/swr-site/pages/about/{meta.en-US.json => _meta.en-US.json} (100%)
 rename examples/swr-site/pages/blog/{meta.en-US.json => _meta.en-US.json} (100%)
 rename examples/swr-site/pages/blog/{meta.es-ES.json => _meta.es-ES.json} (100%)
 rename examples/swr-site/pages/blog/{meta.ja.json => _meta.ja.json} (100%)
 rename examples/swr-site/pages/blog/{meta.ko.json => _meta.ko.json} (100%)
 rename examples/swr-site/pages/blog/{meta.ru.json => _meta.ru.json} (100%)
 rename examples/swr-site/pages/blog/{meta.zh-CN.json => _meta.zh-CN.json} (100%)
 rename examples/swr-site/pages/docs/{meta.en-US.json => _meta.en-US.json} (100%)
 rename examples/swr-site/pages/docs/{meta.es-ES.json => _meta.es-ES.json} (100%)
 rename examples/swr-site/pages/docs/{meta.ja.json => _meta.ja.json} (100%)
 rename examples/swr-site/pages/docs/{meta.ko.json => _meta.ko.json} (100%)
 rename examples/swr-site/pages/docs/{meta.ru.json => _meta.ru.json} (100%)
 rename examples/swr-site/pages/docs/{meta.zh-CN.json => _meta.zh-CN.json} (100%)
 rename examples/swr-site/pages/docs/advanced/{meta.en-US.json => _meta.en-US.json} (100%)
 rename examples/swr-site/pages/docs/advanced/{meta.es-ES.json => _meta.es-ES.json} (100%)
 rename examples/swr-site/pages/docs/advanced/{meta.ja.json => _meta.ja.json} (100%)
 rename examples/swr-site/pages/docs/advanced/{meta.ko.json => _meta.ko.json} (100%)
 rename examples/swr-site/pages/docs/advanced/{meta.ru.json => _meta.ru.json} (100%)
 rename examples/swr-site/pages/docs/advanced/{meta.zh-CN.json => _meta.zh-CN.json} (100%)
 rename examples/swr-site/pages/examples/{meta.en-US.json => _meta.en-US.json} (100%)
 rename examples/swr-site/pages/examples/{meta.es-ES.json => _meta.es-ES.json} (100%)
 rename examples/swr-site/pages/examples/{meta.ja.json => _meta.ja.json} (100%)
 rename examples/swr-site/pages/examples/{meta.ko.json => _meta.ko.json} (100%)
 rename examples/swr-site/pages/examples/{meta.ru.json => _meta.ru.json} (100%)
 rename examples/swr-site/pages/examples/{meta.zh-CN.json => _meta.zh-CN.json} (100%)
 create mode 100644 packages/nextra-theme-blog/src/env.d.ts
 create mode 100644 packages/nextra-theme-docs/css/hamburger.css
 create mode 100644 packages/nextra-theme-docs/css/scrollbar.css
 rename packages/nextra-theme-docs/{src => css}/styles.css (61%)
 create mode 100644 packages/nextra-theme-docs/css/typesetting-article.css
 create mode 100644 packages/nextra-theme-docs/src/utils/get-git-edit-url.ts
 create mode 100644 packages/nextra/__test__/__snapshots__/context.test.ts.snap
 create mode 100644 packages/nextra/__test__/context.test.ts
 create mode 100644 packages/nextra/src/components/code.tsx
 create mode 100644 packages/nextra/src/components/copy-to-clipboard.tsx
 create mode 100644 packages/nextra/src/components/index.ts
 create mode 100644 packages/nextra/src/components/pre.tsx
 delete mode 100644 packages/nextra/src/icons.ts
 create mode 100644 packages/nextra/src/icons/copy.tsx

diff --git a/.changeset/angry-dancers-juggle.md b/.changeset/angry-dancers-juggle.md
new file mode 100644
index 0000000000..f8d3ce2efd
--- /dev/null
+++ b/.changeset/angry-dancers-juggle.md
@@ -0,0 +1,5 @@
+---
+'nextra-theme-docs': patch
+---
+
+fix search overlay styles on mobile
diff --git a/.changeset/brave-snails-remember.md b/.changeset/brave-snails-remember.md
new file mode 100644
index 0000000000..7243a3ff8c
--- /dev/null
+++ b/.changeset/brave-snails-remember.md
@@ -0,0 +1,5 @@
+---
+'nextra-theme-docs': patch
+---
+
+split css to `hamburger`/`scrollbar`/`typesetting-article` css files
diff --git a/.changeset/chatty-beans-bake.md b/.changeset/chatty-beans-bake.md
new file mode 100644
index 0000000000..0d3c236f46
--- /dev/null
+++ b/.changeset/chatty-beans-bake.md
@@ -0,0 +1,6 @@
+---
+'nextra': patch
+'nextra-theme-docs': patch
+---
+
+fix edit on github button for cases when filename named as `index`
diff --git a/.changeset/cuddly-insects-scream.md b/.changeset/cuddly-insects-scream.md
new file mode 100644
index 0000000000..87b171e752
--- /dev/null
+++ b/.changeset/cuddly-insects-scream.md
@@ -0,0 +1,5 @@
+---
+'nextra': patch
+---
+
+fix `ReferenceError` when trying to access `__nextra_pageOpts__` inside MDX file
diff --git a/.changeset/curvy-tomatoes-worry.md b/.changeset/curvy-tomatoes-worry.md
new file mode 100644
index 0000000000..b5a121839c
--- /dev/null
+++ b/.changeset/curvy-tomatoes-worry.md
@@ -0,0 +1,5 @@
+---
+'nextra-theme-docs': patch
+---
+
+BREAKING! various theme config options was renamed, take a look of renamed options [here](https://github.com/shuding/nextra/blob/core/packages/nextra-theme-docs/src/constants.tsx)
diff --git a/.changeset/happy-crabs-hope.md b/.changeset/happy-crabs-hope.md
new file mode 100644
index 0000000000..d04a6d3d64
--- /dev/null
+++ b/.changeset/happy-crabs-hope.md
@@ -0,0 +1,7 @@
+---
+'nextra': patch
+'nextra-theme-blog': patch
+'nextra-theme-docs': patch
+---
+
+[Blog/Docs] Add copy to clipboard button for code-blocks. Add `NextraConfig.unstable_defaultShowCopyCode` option to show button by default, add `copy` and `copy=false` options for code-blocks
diff --git a/.changeset/olive-brooms-behave.md b/.changeset/olive-brooms-behave.md
new file mode 100644
index 0000000000..bea572c04f
--- /dev/null
+++ b/.changeset/olive-brooms-behave.md
@@ -0,0 +1,5 @@
+---
+'nextra-theme-docs': patch
+---
+
+hide search input in navbar on mobile
diff --git a/.changeset/orange-bugs-sell.md b/.changeset/orange-bugs-sell.md
new file mode 100644
index 0000000000..1556cf25ea
--- /dev/null
+++ b/.changeset/orange-bugs-sell.md
@@ -0,0 +1,5 @@
+---
+'nextra-theme-docs': patch
+---
+
+fix empty space in navbar when theme option `search.component: null`
diff --git a/.changeset/pink-chicken-exist.md b/.changeset/pink-chicken-exist.md
new file mode 100644
index 0000000000..19b33d3c38
--- /dev/null
+++ b/.changeset/pink-chicken-exist.md
@@ -0,0 +1,5 @@
+---
+'nextra-theme-docs': patch
+---
+
+add `editLink.component`
diff --git a/.changeset/poor-rivers-develop.md b/.changeset/poor-rivers-develop.md
new file mode 100644
index 0000000000..a737abfa8c
--- /dev/null
+++ b/.changeset/poor-rivers-develop.md
@@ -0,0 +1,6 @@
+---
+'nextra': patch
+'nextra-theme-docs': patch
+---
+
+rename `meta.json` to `_meta.json`
diff --git a/.changeset/proud-phones-dress.md b/.changeset/proud-phones-dress.md
new file mode 100644
index 0000000000..9e006d7696
--- /dev/null
+++ b/.changeset/proud-phones-dress.md
@@ -0,0 +1,5 @@
+---
+'nextra-theme-docs': patch
+---
+
+clicking on folder should navigate to first children if `index` page doesn't exist
diff --git a/.changeset/silly-apricots-help.md b/.changeset/silly-apricots-help.md
new file mode 100644
index 0000000000..e0d721ca6d
--- /dev/null
+++ b/.changeset/silly-apricots-help.md
@@ -0,0 +1,5 @@
+---
+'nextra': patch
+---
+
+better loader types, add `MetaJsonFile`, `MdxFile`, `Folder` types
diff --git a/.changeset/swift-drinks-relax.md b/.changeset/swift-drinks-relax.md
new file mode 100644
index 0000000000..f5daed83b6
--- /dev/null
+++ b/.changeset/swift-drinks-relax.md
@@ -0,0 +1,5 @@
+---
+'nextra-theme-docs': patch
+---
+
+fix callout shrinking from children content
diff --git a/.changeset/tall-cows-whisper.md b/.changeset/tall-cows-whisper.md
new file mode 100644
index 0000000000..57f09397a5
--- /dev/null
+++ b/.changeset/tall-cows-whisper.md
@@ -0,0 +1,7 @@
+---
+'nextra': patch
+'nextra-theme-blog': patch
+'nextra-theme-docs': patch
+---
+
+rename `PageOpts.meta` to `PageOpts.frontMatter`
diff --git a/.changeset/tough-turtles-scream.md b/.changeset/tough-turtles-scream.md
new file mode 100644
index 0000000000..55b22c51b9
--- /dev/null
+++ b/.changeset/tough-turtles-scream.md
@@ -0,0 +1,7 @@
+---
+'nextra': patch
+'nextra-theme-blog': patch
+'nextra-theme-docs': patch
+---
+
+move `withLayout` logic directly in nextra loader
diff --git a/.changeset/violet-pianos-know.md b/.changeset/violet-pianos-know.md
new file mode 100644
index 0000000000..65ae05dd01
--- /dev/null
+++ b/.changeset/violet-pianos-know.md
@@ -0,0 +1,5 @@
+---
+'nextra-theme-docs': patch
+---
+
+adjust active breadcrumb color
diff --git a/.changeset/young-cows-serve.md b/.changeset/young-cows-serve.md
new file mode 100644
index 0000000000..9a74de38b1
--- /dev/null
+++ b/.changeset/young-cows-serve.md
@@ -0,0 +1,5 @@
+---
+'nextra-theme-docs': patch
+---
+
+fix search input `ESC` icon vertical alignment
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 88c5bfd549..8767d37314 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -10,6 +10,7 @@ module.exports = {
     {
       // TODO: enable for `nextra-theme-blog` also
       files: 'packages/nextra-theme-docs/**/*.{js,jsx,mjs,cjs,ts,tsx,mts,cts}',
+      plugins: ['typescript-sort-keys'],
       rules: {
         'no-restricted-imports': [
           'error',
diff --git a/examples/blog/next.config.mjs b/examples/blog/next.config.mjs
index 6c1f3b59a9..aecd923d57 100644
--- a/examples/blog/next.config.mjs
+++ b/examples/blog/next.config.mjs
@@ -3,7 +3,8 @@ import nextra from 'nextra'
 const withNextra = nextra({
   theme: 'nextra-theme-blog',
   themeConfig: './theme.config.jsx',
-  unstable_staticImage: true
+  unstable_staticImage: true,
+  unstable_defaultShowCopyCode: true
 })
 
 export default withNextra({
diff --git a/examples/blog/theme.config.jsx b/examples/blog/theme.config.jsx
index 311170472c..54ca3e84d7 100644
--- a/examples/blog/theme.config.jsx
+++ b/examples/blog/theme.config.jsx
@@ -1,4 +1,6 @@
+/* eslint sort-keys: error */
 export default {
+  darkMode: true,
   footer: (
     <small style={{ display: 'block', marginTop: '8rem' }}>
       <abbr
@@ -22,5 +24,4 @@ export default {
       `}</style>
     </small>
   ),
-  darkMode: true
 }
diff --git a/examples/docs/src/pages/meta.json b/examples/docs/src/pages/_meta.json
similarity index 100%
rename from examples/docs/src/pages/meta.json
rename to examples/docs/src/pages/_meta.json
diff --git a/examples/docs/src/pages/advanced/meta.json b/examples/docs/src/pages/advanced/_meta.json
similarity index 100%
rename from examples/docs/src/pages/advanced/meta.json
rename to examples/docs/src/pages/advanced/_meta.json
diff --git a/examples/docs/src/pages/features/meta.json b/examples/docs/src/pages/features/_meta.json
similarity index 100%
rename from examples/docs/src/pages/features/meta.json
rename to examples/docs/src/pages/features/_meta.json
diff --git a/examples/docs/src/pages/themes/meta.json b/examples/docs/src/pages/themes/_meta.json
similarity index 100%
rename from examples/docs/src/pages/themes/meta.json
rename to examples/docs/src/pages/themes/_meta.json
diff --git a/examples/docs/src/pages/themes/blog/meta.json b/examples/docs/src/pages/themes/blog/_meta.json
similarity index 100%
rename from examples/docs/src/pages/themes/blog/meta.json
rename to examples/docs/src/pages/themes/blog/_meta.json
diff --git a/examples/docs/src/pages/themes/docs/meta.json b/examples/docs/src/pages/themes/docs/_meta.json
similarity index 100%
rename from examples/docs/src/pages/themes/docs/meta.json
rename to examples/docs/src/pages/themes/docs/_meta.json
diff --git a/examples/docs/src/pages/themes/docs/bleed.mdx b/examples/docs/src/pages/themes/docs/bleed.mdx
index 0f1e3abe29..dd79beae93 100644
--- a/examples/docs/src/pages/themes/docs/bleed.mdx
+++ b/examples/docs/src/pages/themes/docs/bleed.mdx
@@ -27,10 +27,9 @@ For example you can put text, image, video or any component inside:
   <iframe
     width="100%"
     height="430"
-    src="https://www.youtube.com/embed/3hccXiXI0u8"
-    frameBorder="0"
+    src="https://youtube.com/embed/3hccXiXI0u8"
     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-    allowFullscreen
+    allowFullScreen
   />
 </Bleed>
 
diff --git a/examples/docs/src/theme.config.js b/examples/docs/src/theme.config.js
index a2f04560bd..bfe712c17c 100644
--- a/examples/docs/src/theme.config.js
+++ b/examples/docs/src/theme.config.js
@@ -1,19 +1,16 @@
+/* eslint sort-keys: error */
 /**
  * @type {import('nextra-theme-docs').DocsThemeConfig}
  */
 export default {
-  projectLink: 'https://github.com/shuding/nextra',
-  docsRepositoryBase: 'https://github.com/shuding/nextra/blob/master',
-  projectChatLink: 'https://discord.gg/hEM84NMkRv', // Next.js discord server,
-  titleSuffix: ' – Nextra',
-  logo: (
-    <>
-      <span className="mr-2 font-extrabold hidden md:inline">Nextra</span>
-      <span className="text-gray-600 font-normal hidden md:inline">
-        The Next.js Static Site Generator
-      </span>
-    </>
-  ),
+  banner: {
+    key: 'Nextra 2',
+    text: 'Nextra 2 Alpha',
+  },
+  docsRepositoryBase: 'https://github.com/shuding/nextra/blob/core/examples/docs',
+  editLink: {
+    text: 'Edit this page on GitHub'
+  },
   head: () => (
     <>
       <meta name="msapplication-TileColor" content="#ffffff" />
@@ -61,14 +58,8 @@ export default {
       <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
     </>
   ),
-  search: true,
+  projectChat: {
+    link: 'https://discord.gg/hEM84NMkRv', // Next.js discord server,
+  },
   unstable_faviconGlyph: '✦',
-  prevLinks: true,
-  nextLinks: true,
-  footer: true,
-  footerEditLink: 'Edit this page on GitHub',
-  footerText: `MIT ${new Date().getFullYear()} © Nextra.`,
-  darkMode: true,
-  bannerKey: 'Nextra 2',
-  banner: 'Nextra 2 Alpha'
 }
diff --git a/examples/swr-site/next.config.js b/examples/swr-site/next.config.js
index 70cb70aee7..e08be49a31 100644
--- a/examples/swr-site/next.config.js
+++ b/examples/swr-site/next.config.js
@@ -5,6 +5,7 @@ const withNextra = require("nextra")({
     codeblocks: true,
   },
   unstable_staticImage: true,
+  unstable_defaultShowCopyCode: true
 });
 
 module.exports = withNextra({
diff --git a/examples/swr-site/pages/meta.en-US.json b/examples/swr-site/pages/_meta.en-US.json
similarity index 100%
rename from examples/swr-site/pages/meta.en-US.json
rename to examples/swr-site/pages/_meta.en-US.json
diff --git a/examples/swr-site/pages/meta.es-ES.json b/examples/swr-site/pages/_meta.es-ES.json
similarity index 100%
rename from examples/swr-site/pages/meta.es-ES.json
rename to examples/swr-site/pages/_meta.es-ES.json
diff --git a/examples/swr-site/pages/meta.ja.json b/examples/swr-site/pages/_meta.ja.json
similarity index 100%
rename from examples/swr-site/pages/meta.ja.json
rename to examples/swr-site/pages/_meta.ja.json
diff --git a/examples/swr-site/pages/meta.ko.json b/examples/swr-site/pages/_meta.ko.json
similarity index 100%
rename from examples/swr-site/pages/meta.ko.json
rename to examples/swr-site/pages/_meta.ko.json
diff --git a/examples/swr-site/pages/meta.ru.json b/examples/swr-site/pages/_meta.ru.json
similarity index 100%
rename from examples/swr-site/pages/meta.ru.json
rename to examples/swr-site/pages/_meta.ru.json
diff --git a/examples/swr-site/pages/meta.zh-CN.json b/examples/swr-site/pages/_meta.zh-CN.json
similarity index 100%
rename from examples/swr-site/pages/meta.zh-CN.json
rename to examples/swr-site/pages/_meta.zh-CN.json
diff --git a/examples/swr-site/pages/about/meta.en-US.json b/examples/swr-site/pages/about/_meta.en-US.json
similarity index 100%
rename from examples/swr-site/pages/about/meta.en-US.json
rename to examples/swr-site/pages/about/_meta.en-US.json
diff --git a/examples/swr-site/pages/blog/meta.en-US.json b/examples/swr-site/pages/blog/_meta.en-US.json
similarity index 100%
rename from examples/swr-site/pages/blog/meta.en-US.json
rename to examples/swr-site/pages/blog/_meta.en-US.json
diff --git a/examples/swr-site/pages/blog/meta.es-ES.json b/examples/swr-site/pages/blog/_meta.es-ES.json
similarity index 100%
rename from examples/swr-site/pages/blog/meta.es-ES.json
rename to examples/swr-site/pages/blog/_meta.es-ES.json
diff --git a/examples/swr-site/pages/blog/meta.ja.json b/examples/swr-site/pages/blog/_meta.ja.json
similarity index 100%
rename from examples/swr-site/pages/blog/meta.ja.json
rename to examples/swr-site/pages/blog/_meta.ja.json
diff --git a/examples/swr-site/pages/blog/meta.ko.json b/examples/swr-site/pages/blog/_meta.ko.json
similarity index 100%
rename from examples/swr-site/pages/blog/meta.ko.json
rename to examples/swr-site/pages/blog/_meta.ko.json
diff --git a/examples/swr-site/pages/blog/meta.ru.json b/examples/swr-site/pages/blog/_meta.ru.json
similarity index 100%
rename from examples/swr-site/pages/blog/meta.ru.json
rename to examples/swr-site/pages/blog/_meta.ru.json
diff --git a/examples/swr-site/pages/blog/meta.zh-CN.json b/examples/swr-site/pages/blog/_meta.zh-CN.json
similarity index 100%
rename from examples/swr-site/pages/blog/meta.zh-CN.json
rename to examples/swr-site/pages/blog/_meta.zh-CN.json
diff --git a/examples/swr-site/pages/docs/meta.en-US.json b/examples/swr-site/pages/docs/_meta.en-US.json
similarity index 100%
rename from examples/swr-site/pages/docs/meta.en-US.json
rename to examples/swr-site/pages/docs/_meta.en-US.json
diff --git a/examples/swr-site/pages/docs/meta.es-ES.json b/examples/swr-site/pages/docs/_meta.es-ES.json
similarity index 100%
rename from examples/swr-site/pages/docs/meta.es-ES.json
rename to examples/swr-site/pages/docs/_meta.es-ES.json
diff --git a/examples/swr-site/pages/docs/meta.ja.json b/examples/swr-site/pages/docs/_meta.ja.json
similarity index 100%
rename from examples/swr-site/pages/docs/meta.ja.json
rename to examples/swr-site/pages/docs/_meta.ja.json
diff --git a/examples/swr-site/pages/docs/meta.ko.json b/examples/swr-site/pages/docs/_meta.ko.json
similarity index 100%
rename from examples/swr-site/pages/docs/meta.ko.json
rename to examples/swr-site/pages/docs/_meta.ko.json
diff --git a/examples/swr-site/pages/docs/meta.ru.json b/examples/swr-site/pages/docs/_meta.ru.json
similarity index 100%
rename from examples/swr-site/pages/docs/meta.ru.json
rename to examples/swr-site/pages/docs/_meta.ru.json
diff --git a/examples/swr-site/pages/docs/meta.zh-CN.json b/examples/swr-site/pages/docs/_meta.zh-CN.json
similarity index 100%
rename from examples/swr-site/pages/docs/meta.zh-CN.json
rename to examples/swr-site/pages/docs/_meta.zh-CN.json
diff --git a/examples/swr-site/pages/docs/advanced/meta.en-US.json b/examples/swr-site/pages/docs/advanced/_meta.en-US.json
similarity index 100%
rename from examples/swr-site/pages/docs/advanced/meta.en-US.json
rename to examples/swr-site/pages/docs/advanced/_meta.en-US.json
diff --git a/examples/swr-site/pages/docs/advanced/meta.es-ES.json b/examples/swr-site/pages/docs/advanced/_meta.es-ES.json
similarity index 100%
rename from examples/swr-site/pages/docs/advanced/meta.es-ES.json
rename to examples/swr-site/pages/docs/advanced/_meta.es-ES.json
diff --git a/examples/swr-site/pages/docs/advanced/meta.ja.json b/examples/swr-site/pages/docs/advanced/_meta.ja.json
similarity index 100%
rename from examples/swr-site/pages/docs/advanced/meta.ja.json
rename to examples/swr-site/pages/docs/advanced/_meta.ja.json
diff --git a/examples/swr-site/pages/docs/advanced/meta.ko.json b/examples/swr-site/pages/docs/advanced/_meta.ko.json
similarity index 100%
rename from examples/swr-site/pages/docs/advanced/meta.ko.json
rename to examples/swr-site/pages/docs/advanced/_meta.ko.json
diff --git a/examples/swr-site/pages/docs/advanced/meta.ru.json b/examples/swr-site/pages/docs/advanced/_meta.ru.json
similarity index 100%
rename from examples/swr-site/pages/docs/advanced/meta.ru.json
rename to examples/swr-site/pages/docs/advanced/_meta.ru.json
diff --git a/examples/swr-site/pages/docs/advanced/meta.zh-CN.json b/examples/swr-site/pages/docs/advanced/_meta.zh-CN.json
similarity index 100%
rename from examples/swr-site/pages/docs/advanced/meta.zh-CN.json
rename to examples/swr-site/pages/docs/advanced/_meta.zh-CN.json
diff --git a/examples/swr-site/pages/examples/meta.en-US.json b/examples/swr-site/pages/examples/_meta.en-US.json
similarity index 100%
rename from examples/swr-site/pages/examples/meta.en-US.json
rename to examples/swr-site/pages/examples/_meta.en-US.json
diff --git a/examples/swr-site/pages/examples/meta.es-ES.json b/examples/swr-site/pages/examples/_meta.es-ES.json
similarity index 100%
rename from examples/swr-site/pages/examples/meta.es-ES.json
rename to examples/swr-site/pages/examples/_meta.es-ES.json
diff --git a/examples/swr-site/pages/examples/meta.ja.json b/examples/swr-site/pages/examples/_meta.ja.json
similarity index 100%
rename from examples/swr-site/pages/examples/meta.ja.json
rename to examples/swr-site/pages/examples/_meta.ja.json
diff --git a/examples/swr-site/pages/examples/meta.ko.json b/examples/swr-site/pages/examples/_meta.ko.json
similarity index 100%
rename from examples/swr-site/pages/examples/meta.ko.json
rename to examples/swr-site/pages/examples/_meta.ko.json
diff --git a/examples/swr-site/pages/examples/meta.ru.json b/examples/swr-site/pages/examples/_meta.ru.json
similarity index 100%
rename from examples/swr-site/pages/examples/meta.ru.json
rename to examples/swr-site/pages/examples/_meta.ru.json
diff --git a/examples/swr-site/pages/examples/meta.zh-CN.json b/examples/swr-site/pages/examples/_meta.zh-CN.json
similarity index 100%
rename from examples/swr-site/pages/examples/meta.zh-CN.json
rename to examples/swr-site/pages/examples/_meta.zh-CN.json
diff --git a/examples/swr-site/theme.config.tsx b/examples/swr-site/theme.config.tsx
index e876d5ed25..9ea2a05d36 100644
--- a/examples/swr-site/theme.config.tsx
+++ b/examples/swr-site/theme.config.tsx
@@ -1,5 +1,5 @@
+/* eslint sort-keys: error */
 import { useRouter } from "next/router";
-import NextHead from "next/head";
 import { DocsThemeConfig, useConfig } from "nextra-theme-docs";
 
 const Logo = ({ height }) => (
@@ -20,63 +20,123 @@ const Vercel = () => (
   </svg>
 );
 
-const TITLE_WITH_TRANSLATIONS = {
+const TITLE = {
   "en-US": "React Hooks for Data Fetching",
-  "zh-CN": "用于数据请求的 React Hooks 库",
   "es-ES": "Biblioteca React Hooks para la obtención de datos",
   ja: "データ取得のための React Hooks ライブラリ",
   ko: "데이터 가져오기를 위한 React Hooks",
   ru: "React хуки для выборки данных",
+  "zh-CN": "用于数据请求的 React Hooks 库",
 };
 
-const EDIT_LINK_WITH_TRANSLATIONS = {
-  "zh-CN": "在 GitHub 上编辑本页",
+const EDIT_TEXT = {
+  "en-US": "Edit this page on GitHub →",
   "es-ES": "Edite esta página en GitHub",
   ja: "Github で編集する",
   ko: "Github에서 이 페이지 편집하기",
   ru: "Редактировать на GitHub",
+  "zh-CN": "在 GitHub 上编辑本页",
+};
+
+const FOOTER_LINK = {
+  "en-US": "https://vercel.com/?utm_source=swr",
+  "es-ES": "https://vercel.com/?utm_source=swr_es-es",
+  ja: "https://vercel.com/?utm_source=swr_ja",
+  ko: "https://vercel.com/?utm_source=swr_ko",
+  ru: "https://vercel.com/?utm_source=swr_ru",
+  "zh-CN": "https://vercel.com/?utm_source=swr_zh-cn",
+};
+
+const FOOTER_LINK_TEXT = {
+  "en-US": (
+    <>
+      Powered by
+      <Vercel />
+    </>
+  ),
+  "es-ES": (
+    <>
+      Desarrollado por
+      <Vercel />
+    </>
+  ),
+  ja: (
+    <>
+      提供
+      <Vercel />
+    </>
+  ),
+  ko: (
+    <>
+      Powered by
+      <Vercel />
+    </>
+  ),
+  ru: (
+    <>
+      Работает на
+      <Vercel />
+    </>
+  ),
+  "zh-CN": (
+    <>
+      由
+      <Vercel />
+      驱动
+    </>
+  ),
 };
 
 const config: DocsThemeConfig = {
-  github: "https://github.com/vercel/swr",
-  docsRepositoryBase: "https://github.com/vercel/swr-site/blob/master/pages",
-  titleSuffix() {
-    const { locale } = useRouter();
-    return ` – SWR (${locale})`;
+  banner: {
+    key: "swr-2",
+    text: "SWR 2.0 is out! Read more →",
+  },
+  bodyExtraContent() {
+    const router = useRouter();
+    return (
+      router.route.startsWith("/docs") && (
+        <>💪 content from `config.bodyExtraContent`</>
+      )
+    );
   },
-  search: true,
-  floatTOC: true,
   darkMode: true,
-  defaultMenuCollapsed: true,
-  nextThemes: {
-    defaultTheme: "dark",
+  docsRepositoryBase:
+    "https://github.com/shuding/nextra/blob/core/examples/swr-site",
+  editLink: {
+    text() {
+      const { locale } = useRouter();
+      return EDIT_TEXT[locale];
+    },
   },
-  feedbackLink: "Question? Give us feedback →",
-  feedbackLabels: "feedback",
-  bannerKey: "swr-2",
-  banner: "SWR 2.0 is out! Read more →",
-  tocExtraContent: <img src="https://placekitten.com/g/300/200" />,
-  logo() {
-    const { locale } = useRouter();
-    return (
-      <>
-        <Logo height={12} />
-        <span
-          className="ltr:ml-2 rtl:mr-2 font-extrabold hidden md:inline select-none"
-          title={"SWR: " + (TITLE_WITH_TRANSLATIONS[locale] || "")}
+  feedback: {
+    labels: "feedback",
+    link: "Question? Give us feedback →",
+  },
+  footer: {
+    text() {
+      const { locale } = useRouter();
+      return (
+        <a
+          rel="noopener"
+          target="_blank"
+          className="inline-flex items-center font-semibold gap-2"
+          href={FOOTER_LINK[locale]}
         >
-          SWR
-        </span>
-      </>
-    );
+          {FOOTER_LINK_TEXT[locale]}
+        </a>
+      );
+    },
   },
+  gitTimestamp: "Last updated on",
+  github: "https://github.com/vercel/swr",
   head() {
     const config = useConfig();
     const description =
-      config.meta.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.meta.image ||
+      config.frontMatter.image ||
       "https://assets.vercel.com/image/upload/v1572282926/swr/twitter-card.jpg";
     return (
       <>
@@ -117,96 +177,48 @@ const config: DocsThemeConfig = {
       </>
     );
   },
-  sidebarSubtitle: ({ title }) => (
-    <div className="flex items-center gap-2">
-      <Logo height={6} />
-      {title}
-    </div>
-  ),
-  footerEditLink() {
-    const { locale } = useRouter();
-    return EDIT_LINK_WITH_TRANSLATIONS[locale] || "Edit this page on GitHub →";
-  },
-  footerText() {
-    const { locale } = useRouter();
-
-    const linkProps = {
-      target: "_blank",
-      rel: "noopener",
-      className: "inline-flex items-center font-semibold gap-2",
-      href:
-        {
-          "zh-CN": "https://vercel.com/?utm_source=swr_zh-cn",
-          "es-ES": "https://vercel.com/?utm_source=swr_es-es",
-          ja: "https://vercel.com/?utm_source=swr_ja",
-          ko: "https://vercel.com/?utm_source=swr_ko",
-          ru: "https://vercel.com/?utm_source=swr_ru",
-        }[locale] || "https://vercel.com/?utm_source=swr",
-    };
-
-    switch (locale) {
-      case "zh-CN":
-        return (
-          <a {...linkProps}>
-            由
-            <Vercel />
-            驱动
-          </a>
-        );
-      case "es-ES":
-        return (
-          <a {...linkProps}>
-            Desarrollado por
-            <Vercel />
-          </a>
-        );
-      case "ja":
-        return (
-          <a {...linkProps}>
-            提供
-            <Vercel />
-          </a>
-        );
-      case "ko":
-        return (
-          <a {...linkProps}>
-            Powered by
-            <Vercel />
-          </a>
-        );
-      case "ru":
-        return (
-          <a {...linkProps}>
-            Работает на
-            <Vercel />
-          </a>
-        );
-      default:
-        return (
-          <a {...linkProps}>
-            Powered by
-            <Vercel />
-          </a>
-        );
-    }
-  },
   i18n: [
     { locale: "en-US", text: "English" },
-    { locale: "es-ES", text: "Español RTL", direction: "rtl" },
+    { direction: "rtl", locale: "es-ES", text: "Español RTL" },
     { locale: "zh-CN", text: "简体中文" },
     { locale: "ja", text: "日本語" },
     { locale: "ko", text: "한국어" },
     { locale: "ru", text: "Русский" },
   ],
-  gitTimestamp: "Last updated on",
-  bodyExtraContent() {
-    const router = useRouter();
+  logo() {
+    const { locale } = useRouter();
     return (
-      router.route.startsWith("/docs") && (
-        <>💪 content from `config.bodyExtraContent`</>
-      )
+      <>
+        <Logo height={12} />
+        <span
+          className="ltr:ml-2 rtl:mr-2 font-extrabold hidden md:inline select-none"
+          title={"SWR: " + (TITLE[locale] || "")}
+        >
+          SWR
+        </span>
+      </>
     );
   },
+  nextThemes: {
+    defaultTheme: "dark",
+  },
+  sidebar: {
+    defaultMenuCollapsed: true,
+    subtitle: ({ title }) => (
+      <div className="flex items-center gap-2">
+        <Logo height={6} />
+        {title}
+      </div>
+    ),
+  },
+  titleSuffix() {
+    const { locale } = useRouter();
+    return ` – SWR (${locale})`;
+  },
+  toc: {
+    extraContent: <img src="https://placekitten.com/g/300/200" />,
+    float: true,
+  },
 };
 
 export default config;
diff --git a/package.json b/package.json
index da7088c0dd..eae39b5038 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "@edge-runtime/vm": "1.1.0-beta.23",
     "@typescript-eslint/parser": "^5.32.0",
     "eslint": "^8.21.0",
+    "eslint-plugin-typescript-sort-keys": "^2.1.0",
     "prettier": "^2.7.1",
     "prettier-plugin-tailwindcss": "^0.1.13",
     "rimraf": "^3.0.2",
diff --git a/packages/nextra-theme-blog/__test__/__fixture__/pageMap.ts b/packages/nextra-theme-blog/__test__/__fixture__/pageMap.ts
index c644f67be9..1fae0758e8 100644
--- a/packages/nextra-theme-blog/__test__/__fixture__/pageMap.ts
+++ b/packages/nextra-theme-blog/__test__/__fixture__/pageMap.ts
@@ -1,8 +1,8 @@
 import { BlogPageOpts } from '../../src/types'
 export const indexOpts: BlogPageOpts = {
-  filename: 'index.mdx',
+  filePath: 'index.mdx',
   route: '/',
-  meta: {
+  frontMatter: {
     type: 'page',
     title: 'About',
     date: '2020-01-01T00:00:00.000Z'
@@ -103,9 +103,9 @@ export const indexOpts: BlogPageOpts = {
 }
 
 export const postsOpts: BlogPageOpts = {
-  filename: 'index.md',
+  filePath: 'index.md',
   route: '/posts',
-  meta: {
+  frontMatter: {
     type: 'posts',
     title: 'Random Thoughts',
     date: '2020-01-03T00:00:00.000Z'
@@ -206,9 +206,9 @@ export const postsOpts: BlogPageOpts = {
 }
 
 export const articleOpts: BlogPageOpts = {
-  filename: 'aaron-swartz-a-programmable-web.mdx',
+  filePath: 'aaron-swartz-a-programmable-web.mdx',
   route: '/posts/aaron-swartz-a-programmable-web',
-  meta: {
+  frontMatter: {
     title: 'Notes on A Programmable Web by Aaron Swartz',
     date: '2016/5/21',
     description:
diff --git a/packages/nextra-theme-blog/src/article-layout.tsx b/packages/nextra-theme-blog/src/article-layout.tsx
index 881bf9de7a..66c267c4c1 100644
--- a/packages/nextra-theme-blog/src/article-layout.tsx
+++ b/packages/nextra-theme-blog/src/article-layout.tsx
@@ -10,7 +10,7 @@ export const ArticleLayout = ({ children }: { children: ReactNode }) => {
   const { back } = getParent({ opts, config })
   return (
     <BasicLayout>
-      <Meta {...opts.meta} back={back} config={config} />
+      <Meta {...opts.frontMatter} back={back} config={config} />
       <MDXTheme>
         {children}
         {config.postFooter}
diff --git a/packages/nextra-theme-blog/src/basic-layout.tsx b/packages/nextra-theme-blog/src/basic-layout.tsx
index 317ce6710b..35ce18e32e 100644
--- a/packages/nextra-theme-blog/src/basic-layout.tsx
+++ b/packages/nextra-theme-blog/src/basic-layout.tsx
@@ -11,7 +11,7 @@ export const BasicLayout = ({ children }: { children: ReactNode }) => {
     <article className="container prose prose-sm dark:prose-dark md:prose">
       <Head>
         <title>{title}</title>
-        {config.head?.({ title, meta: opts.meta })}
+        {config.head?.({ title, meta: opts.frontMatter })}
       </Head>
       <HeadingContext.Provider value={ref}>
         {opts.hasJsxInH1 ? <h1 ref={ref} /> : null}
diff --git a/packages/nextra-theme-blog/src/blog-context.tsx b/packages/nextra-theme-blog/src/blog-context.tsx
index d9a0c876f1..2623ff77fe 100644
--- a/packages/nextra-theme-blog/src/blog-context.tsx
+++ b/packages/nextra-theme-blog/src/blog-context.tsx
@@ -14,7 +14,7 @@ export const BlogProvider = ({
   children,
   opts
 }: LayoutProps & { children: ReactNode }): ReactElement => {
-  const { date } = opts.meta
+  const { date } = opts.frontMatter
 
   if (date && !isValidDate(date)) {
     throw new Error(
diff --git a/packages/nextra-theme-blog/src/constants.tsx b/packages/nextra-theme-blog/src/constants.tsx
index 97f771665b..e93951dd50 100644
--- a/packages/nextra-theme-blog/src/constants.tsx
+++ b/packages/nextra-theme-blog/src/constants.tsx
@@ -1,11 +1,12 @@
+/* eslint sort-keys: error */
 import React from 'react'
 import { NextraBlogTheme } from './types'
 
 export const DEFAULT_THEME: NextraBlogTheme = {
-  readMore: 'Read More →',
   footer: (
     <small className="block mt-32">
       CC BY-NC 4.0 {new Date().getFullYear()} © Shu Ding.
     </small>
-  )
+  ),
+  readMore: 'Read More →',
 }
diff --git a/packages/nextra-theme-blog/src/env.d.ts b/packages/nextra-theme-blog/src/env.d.ts
new file mode 100644
index 0000000000..bdd77c14e8
--- /dev/null
+++ b/packages/nextra-theme-blog/src/env.d.ts
@@ -0,0 +1,13 @@
+declare module globalThis {
+  import { NextraBlogTheme } from './types'
+  import { FC } from 'react'
+  import { PageOpts } from 'nextra'
+
+  var __nextra_pageContext__: {
+    [route: string]: {
+      Content: FC
+      pageOpts: PageOpts
+      themeConfig: NextraBlogTheme
+    }
+  }
+}
diff --git a/packages/nextra-theme-blog/src/index.tsx b/packages/nextra-theme-blog/src/index.tsx
index 2edca5662d..0eb4e4eacb 100644
--- a/packages/nextra-theme-blog/src/index.tsx
+++ b/packages/nextra-theme-blog/src/index.tsx
@@ -21,7 +21,7 @@ const BlogLayout = ({
   children,
   opts
 }: LayoutProps & { children: ReactNode }): ReactElement => {
-  const type = opts.meta.type || 'post'
+  const type = opts.frontMatter.type || 'post'
   const Layout = layoutMap[type]
   if (!Layout) {
     throw new Error(
@@ -35,17 +35,9 @@ const BlogLayout = ({
   )
 }
 
-const nextraPageContext: {
-  [key: string]: {
-    Content: FC
-    pageOpts: PageOpts
-    themeConfig: NextraBlogTheme
-  }
-} = {}
-
-function Layout(props: any) {
+export default function Layout(props: any) {
   const { route } = useRouter()
-  const context = nextraPageContext[route]
+  const context = globalThis.__nextra_pageContext__[route]
   if (!context) throw new Error(`No content found for ${route}.`)
 
   const extendedConfig = { ...DEFAULT_THEME, ...context.themeConfig }
@@ -59,24 +51,6 @@ function Layout(props: any) {
   )
 }
 
-// Make sure the same component is always returned so Next.js will render the
-// stable layout. We then put the actual content into a global store and use
-// the route to identify it.
-export default function withLayout(
-  route: string,
-  Content: FC,
-  pageOpts: PageOpts,
-  themeConfig: NextraBlogTheme
-) {
-  nextraPageContext[route] = {
-    Content,
-    pageOpts,
-    themeConfig
-  }
-
-  return Layout
-}
-
 export { useTheme } from 'next-themes'
 export { useBlogContext } from './blog-context'
 export * from './types'
diff --git a/packages/nextra-theme-blog/src/mdx-theme.tsx b/packages/nextra-theme-blog/src/mdx-theme.tsx
index a3652b1f64..62c83f3d06 100644
--- a/packages/nextra-theme-blog/src/mdx-theme.tsx
+++ b/packages/nextra-theme-blog/src/mdx-theme.tsx
@@ -10,6 +10,7 @@ import React, {
 import { MDXProvider } from '@mdx-js/react'
 import Link from 'next/link'
 import ReactDOM from 'react-dom'
+import { Code, Pre } from 'nextra/components'
 import { useBlogContext } from './blog-context'
 
 export const HeadingContext = createContext<
@@ -71,13 +72,6 @@ const A = ({
   )
 }
 
-const Pre = ({ children }: { children?: ReactNode }): ReactElement => {
-  return (
-    <div className="not-prose">
-      <pre>{children}</pre>
-    </div>
-  )
-}
 const components = {
   h1: H1,
   h2: createHeaderLink('h2'),
@@ -86,7 +80,14 @@ const components = {
   h5: createHeaderLink('h5'),
   h6: createHeaderLink('h6'),
   a: A,
-  pre: Pre
+  pre({ children, ...props }: ComponentProps<'pre'>) {
+    return (
+      <div className="not-prose">
+        <Pre {...props}>{children}</Pre>
+      </div>
+    )
+  },
+  code: Code
 }
 
 const MDXTheme = ({ children }: { children: ReactNode }): ReactElement => {
diff --git a/packages/nextra-theme-blog/src/posts-layout.tsx b/packages/nextra-theme-blog/src/posts-layout.tsx
index c869c996b6..486a42821f 100644
--- a/packages/nextra-theme-blog/src/posts-layout.tsx
+++ b/packages/nextra-theme-blog/src/posts-layout.tsx
@@ -12,9 +12,7 @@ export const PostsLayout = ({ children }: { children: ReactNode }) => {
   const { config, opts } = useBlogContext()
   const { posts } = collectPostsAndNavs({ config, opts })
   const router = useRouter()
-  const {
-    meta: { type }
-  } = opts
+  const { type } = opts.frontMatter
   const tagName = type === 'tag' ? router.query.tag : null
   const postList = posts.map(post => {
     if (tagName) {
diff --git a/packages/nextra-theme-blog/src/types.ts b/packages/nextra-theme-blog/src/types.ts
index ba1d580b1f..f8b45da5f0 100644
--- a/packages/nextra-theme-blog/src/types.ts
+++ b/packages/nextra-theme-blog/src/types.ts
@@ -1,43 +1,44 @@
+/* eslint typescript-sort-keys/interface: error */
 import { PageOpts } from 'nextra'
-import React from 'react'
+import { ReactNode } from 'react'
 
 export interface NextraBlogTheme {
-  readMore?: string
-  footer?: React.ReactNode
-  titleSuffix?: string
-  postFooter?: string
-  head?: ({
-    title,
-    meta
-  }: {
-    title: string
-    meta: Record<string, any>
-  }) => React.ReactNode
+  comments?: ReactNode
   cusdis?: {
     appId: string
     host?: string
     lang: string
   }
   darkMode?: boolean
+  footer?: ReactNode
+  head?: ({
+    meta,
+    title,
+  }: {
+    meta: Record<string, any>
+    title: string
+  }) => ReactNode
   navs?: {
-    url: string
     name: string
+    url: string
   }[]
-  comments?: React.ReactNode
+  postFooter?: string
+  readMore?: string
+  titleSuffix?: string
 }
 
 export interface BlogPageOpts extends PageOpts {
-  meta: Meta
+  frontMatter: Meta
 }
 
 type Meta = {
-  title?: string
-  type?: 'post' | 'page' | 'posts' | 'tag'
-  tag?: string | string[]
+  author?: string
   back?: string
   date?: string
   description?: string
-  author?: string
+  tag?: string | string[]
+  title?: string
+  type?: 'post' | 'page' | 'posts' | 'tag'
 }
 
 export interface LayoutProps {
diff --git a/packages/nextra-theme-blog/src/utils/collect.ts b/packages/nextra-theme-blog/src/utils/collect.ts
index b6b79d0c19..125920cf98 100644
--- a/packages/nextra-theme-blog/src/utils/collect.ts
+++ b/packages/nextra-theme-blog/src/utils/collect.ts
@@ -1,20 +1,22 @@
-import { PageMapItem } from 'nextra'
+import { PageMapItem, MdxFile } from 'nextra'
 import { LayoutProps } from '../types'
 import { sortDate } from './date'
 import traverse from './traverse'
 
-const isNav = (page: PageMapItem) => {
-  return page.frontMatter && ['page', 'posts'].includes(page.frontMatter.type)
+const isNav = (page: PageMapItem): page is MdxFile => {
+  const type = 'frontMatter' in page && page.frontMatter?.type
+  return type && ['page', 'posts'].includes(type)
 }
-const isPost = (page: PageMapItem) => {
-  if (page.children) return false
+const isPost = (page: PageMapItem): page is MdxFile => {
+  if ('children' in page && page.children) return false
   if (page.name.startsWith('_')) return false
-  return !page.frontMatter?.type || page.frontMatter.type === 'post'
+  const type = 'frontMatter' in page && page.frontMatter?.type
+  return !type || type === 'post'
 }
 
 export const collectPostsAndNavs = ({ opts }: LayoutProps) => {
-  const posts: PageMapItem[] = []
-  const navPages: PageMapItem[] = []
+  const posts: MdxFile[] = []
+  const navPages: (MdxFile & { active: boolean })[] = []
   const { route } = opts
   traverse(opts.pageMap, page => {
     if (isNav(page)) {
diff --git a/packages/nextra-theme-blog/src/utils/date.ts b/packages/nextra-theme-blog/src/utils/date.ts
index 674fa4f260..2f14ef7a1a 100644
--- a/packages/nextra-theme-blog/src/utils/date.ts
+++ b/packages/nextra-theme-blog/src/utils/date.ts
@@ -1,6 +1,6 @@
-import { PageMapItem } from 'nextra'
+import { MdxFile } from 'nextra'
 
-export const sortDate = (a: PageMapItem, b: PageMapItem): number => {
+export const sortDate = (a: MdxFile, b: MdxFile): number => {
   if (!a.frontMatter?.date || !b.frontMatter?.date) return -1
 
   return (
diff --git a/packages/nextra-theme-blog/src/utils/get-tags.ts b/packages/nextra-theme-blog/src/utils/get-tags.ts
index db6906994f..f305d47764 100644
--- a/packages/nextra-theme-blog/src/utils/get-tags.ts
+++ b/packages/nextra-theme-blog/src/utils/get-tags.ts
@@ -1,10 +1,10 @@
-import { PageMapItem } from 'nextra'
+import { MdxFile } from 'nextra'
 
 export function split(tags: string | string[]): string[] {
   return (Array.isArray(tags) ? tags : tags.split(',')).map(s => s.trim())
 }
 
-export default function getTags(page: PageMapItem) {
+export default function getTags(page: MdxFile) {
   if (!page.frontMatter) {
     return []
   }
diff --git a/packages/nextra-theme-blog/src/utils/parent.ts b/packages/nextra-theme-blog/src/utils/parent.ts
index 25475cfa51..dc3987090a 100644
--- a/packages/nextra-theme-blog/src/utils/parent.ts
+++ b/packages/nextra-theme-blog/src/utils/parent.ts
@@ -1,25 +1,30 @@
-import { PageMapItem } from 'nextra'
+import { MdxFile } from 'nextra'
 import { LayoutProps } from '../types'
 import traverse from './traverse'
 
 export const getParent = ({ opts }: LayoutProps) => {
   let back: string | null = null
-  const parentPages: PageMapItem[] = []
-  const route = opts.route
+  const parentPages: MdxFile[] = []
+  const { route } = opts
+
   traverse(opts.pageMap, page => {
     if (
+      'route' in page &&
       route !== page.route &&
       (route + '/').startsWith(page.route === '/' ? '/' : page.route + '/')
     ) {
       parentPages.push(page)
     }
   })
+
   const parentPage = parentPages
     .reverse()
     .find(page => page.frontMatter && page.frontMatter.type === 'posts')
+
   if (parentPage) {
     back = parentPage.route
   }
+
   return {
     parentPage,
     back
diff --git a/packages/nextra-theme-blog/src/utils/traverse.ts b/packages/nextra-theme-blog/src/utils/traverse.ts
index 577442ae96..c90f8d2bab 100644
--- a/packages/nextra-theme-blog/src/utils/traverse.ts
+++ b/packages/nextra-theme-blog/src/utils/traverse.ts
@@ -11,10 +11,9 @@ export default function traverse(
     }
   }
 
-  for (const pageMapItem of pageMap) {
-    const { children } = pageMapItem
-    if (children) {
-      const matched = traverse(children, matcher)
+  for (const item of pageMap) {
+    if ('children' in item && item.children) {
+      const matched = traverse(item.children, matcher)
       if (matched) {
         return matched
       }
diff --git a/packages/nextra-theme-blog/tailwind.config.js b/packages/nextra-theme-blog/tailwind.config.js
index 61480495ba..3b79e53cc1 100644
--- a/packages/nextra-theme-blog/tailwind.config.js
+++ b/packages/nextra-theme-blog/tailwind.config.js
@@ -1,6 +1,6 @@
 const colors = require('tailwindcss/colors')
 module.exports = {
-  content: ['./src/**/*.{js,tsx,jsx}'],
+  content: ['./src/**/*.{js,tsx,jsx}', '../nextra/src/components/*.tsx'],
   theme: {
     colors: {
       transparent: 'transparent',
diff --git a/packages/nextra-theme-docs/__test__/__fixture__/pageMap.ts b/packages/nextra-theme-docs/__test__/__fixture__/pageMap.ts
index a1c498f67b..aee529b325 100644
--- a/packages/nextra-theme-docs/__test__/__fixture__/pageMap.ts
+++ b/packages/nextra-theme-docs/__test__/__fixture__/pageMap.ts
@@ -3,42 +3,42 @@ export const cnPageMap: any[] = [
     name: 'blog',
     children: [
       {
-        name: 'meta.json',
+        name: '_meta.json',
         meta: {
           'swr-v1': 'Announcing SWR 1.0'
         },
         locale: 'en-US'
       },
       {
-        name: 'meta.json',
+        name: '_meta.json',
         meta: {
           'swr-v1': 'Announcing SWR 1.0'
         },
         locale: 'es-ES'
       },
       {
-        name: 'meta.json',
+        name: '_meta.json',
         meta: {
           'swr-v1': 'SWR 1.0 の発表'
         },
         locale: 'ja'
       },
       {
-        name: 'meta.json',
+        name: '_meta.json',
         meta: {
           'swr-v1': 'Announcing SWR 1.0'
         },
         locale: 'ko'
       },
       {
-        name: 'meta.json',
+        name: '_meta.json',
         meta: {
           'swr-v1': 'Представляем SWR 1.0'
         },
         locale: 'ru'
       },
       {
-        name: 'meta.json',
+        name: '_meta.json',
         meta: {
           'swr-v1': 'SWR 1.0 发布'
         },
@@ -70,7 +70,7 @@ export const cnPageMap: any[] = [
             locale: 'zh-CN'
           },
           {
-            name: 'meta.json',
+            name: '_meta.json',
             meta: {
               cache: 'Cache',
               performance: 'Performance',
@@ -79,7 +79,7 @@ export const cnPageMap: any[] = [
             locale: 'en-US'
           },
           {
-            name: 'meta.json',
+            name: '_meta.json',
             meta: {
               cache: 'Cache',
               performance: 'Rendimiento',
@@ -88,7 +88,7 @@ export const cnPageMap: any[] = [
             locale: 'es-ES'
           },
           {
-            name: 'meta.json',
+            name: '_meta.json',
             meta: {
               cache: 'キャッシュ',
               performance: 'パフォーマンス',
@@ -97,7 +97,7 @@ export const cnPageMap: any[] = [
             locale: 'ja'
           },
           {
-            name: 'meta.json',
+            name: '_meta.json',
             meta: {
               cache: '캐시',
               performance: '성능',
@@ -106,7 +106,7 @@ export const cnPageMap: any[] = [
             locale: 'ko'
           },
           {
-            name: 'meta.json',
+            name: '_meta.json',
             meta: {
               cache: 'Кеш',
               performance: 'Производительность',
@@ -115,7 +115,7 @@ export const cnPageMap: any[] = [
             locale: 'ru'
           },
           {
-            name: 'meta.json',
+            name: '_meta.json',
             meta: {
               cache: '缓存',
               performance: '性能',
@@ -172,7 +172,7 @@ export const cnPageMap: any[] = [
         locale: 'zh-CN'
       },
       {
-        name: 'meta.json',
+        name: '_meta.json',
         meta: {
           'getting-started': 'Getting Started',
           options: 'Options',
@@ -195,7 +195,7 @@ export const cnPageMap: any[] = [
         locale: 'en-US'
       },
       {
-        name: 'meta.json',
+        name: '_meta.json',
         meta: {
           'getting-started': 'Comienza',
           options: 'Opciones',
@@ -218,7 +218,7 @@ export const cnPageMap: any[] = [
         locale: 'es-ES'
       },
       {
-        name: 'meta.json',
+        name: '_meta.json',
         meta: {
           'getting-started': 'はじめに',
           options: 'オプション',
@@ -241,7 +241,7 @@ export const cnPageMap: any[] = [
         locale: 'ja'
       },
       {
-        name: 'meta.json',
+        name: '_meta.json',
         meta: {
           'getting-started': '시작하기',
           options: '옵션',
@@ -264,7 +264,7 @@ export const cnPageMap: any[] = [
         locale: 'ko'
       },
       {
-        name: 'meta.json',
+        name: '_meta.json',
         meta: {
           'getting-started': 'Начало работы',
           options: 'Опции',
@@ -287,7 +287,7 @@ export const cnPageMap: any[] = [
         locale: 'ru'
       },
       {
-        name: 'meta.json',
+        name: '_meta.json',
         meta: {
           'getting-started': '入门',
           options: '选项',
@@ -397,7 +397,7 @@ export const cnPageMap: any[] = [
         locale: 'zh-CN'
       },
       {
-        name: 'meta.json',
+        name: '_meta.json',
         meta: {
           basic: 'Basic Usage',
           auth: 'Authentication',
@@ -408,7 +408,7 @@ export const cnPageMap: any[] = [
         locale: 'en-US'
       },
       {
-        name: 'meta.json',
+        name: '_meta.json',
         meta: {
           basic: 'Uso Básico',
           auth: 'Autenticación',
@@ -419,7 +419,7 @@ export const cnPageMap: any[] = [
         locale: 'es-ES'
       },
       {
-        name: 'meta.json',
+        name: '_meta.json',
         meta: {
           basic: '基本的な使用法',
           auth: '認証',
@@ -430,7 +430,7 @@ export const cnPageMap: any[] = [
         locale: 'ja'
       },
       {
-        name: 'meta.json',
+        name: '_meta.json',
         meta: {
           basic: '기본 사용법',
           auth: '인증',
@@ -441,7 +441,7 @@ export const cnPageMap: any[] = [
         locale: 'ko'
       },
       {
-        name: 'meta.json',
+        name: '_meta.json',
         meta: {
           basic: 'Основное использование',
           auth: 'Аутентификация',
@@ -452,7 +452,7 @@ export const cnPageMap: any[] = [
         locale: 'ru'
       },
       {
-        name: 'meta.json',
+        name: '_meta.json',
         meta: {
           basic: '基本用法',
           auth: '身份验证',
@@ -483,7 +483,7 @@ export const cnPageMap: any[] = [
     locale: 'zh-CN'
   },
   {
-    name: 'meta.json',
+    name: '_meta.json',
     meta: {
       index: {
         title: 'Introduction',
@@ -506,7 +506,7 @@ export const cnPageMap: any[] = [
     locale: 'en-US'
   },
   {
-    name: 'meta.json',
+    name: '_meta.json',
     meta: {
       index: {
         title: 'Introducción',
@@ -529,7 +529,7 @@ export const cnPageMap: any[] = [
     locale: 'es-ES'
   },
   {
-    name: 'meta.json',
+    name: '_meta.json',
     meta: {
       index: {
         title: '前書き',
@@ -552,7 +552,7 @@ export const cnPageMap: any[] = [
     locale: 'ja'
   },
   {
-    name: 'meta.json',
+    name: '_meta.json',
     meta: {
       index: {
         title: '소개',
@@ -575,7 +575,7 @@ export const cnPageMap: any[] = [
     locale: 'ko'
   },
   {
-    name: 'meta.json',
+    name: '_meta.json',
     meta: {
       index: {
         title: 'Введение',
@@ -598,7 +598,7 @@ export const cnPageMap: any[] = [
     locale: 'ru'
   },
   {
-    name: 'meta.json',
+    name: '_meta.json',
     meta: {
       index: {
         title: '简介',
@@ -627,42 +627,42 @@ export const usPageMap: any[] = [
     name: 'blog',
     children: [
       {
-        name: 'meta.json',
+        name: '_meta.json',
         meta: {
           'swr-v1': 'Announcing SWR 1.0'
         },
         locale: 'en-US'
       },
       {
-        name: 'meta.json',
+        name: '_meta.json',
         meta: {
           'swr-v1': 'Announcing SWR 1.0'
         },
         locale: 'es-ES'
       },
       {
-        name: 'meta.json',
+        name: '_meta.json',
         meta: {
           'swr-v1': 'SWR 1.0 の発表'
         },
         locale: 'ja'
       },
       {
-        name: 'meta.json',
+        name: '_meta.json',
         meta: {
           'swr-v1': 'Announcing SWR 1.0'
         },
         locale: 'ko'
       },
       {
-        name: 'meta.json',
+        name: '_meta.json',
         meta: {
           'swr-v1': 'Представляем SWR 1.0'
         },
         locale: 'ru'
       },
       {
-        name: 'meta.json',
+        name: '_meta.json',
         meta: {
           'swr-v1': 'SWR 1.0 发布'
         },
@@ -694,7 +694,7 @@ export const usPageMap: any[] = [
             locale: 'en-US'
           },
           {
-            name: 'meta.json',
+            name: '_meta.json',
             meta: {
               cache: 'Cache',
               performance: 'Performance',
@@ -703,7 +703,7 @@ export const usPageMap: any[] = [
             locale: 'en-US'
           },
           {
-            name: 'meta.json',
+            name: '_meta.json',
             meta: {
               cache: 'Cache',
               performance: 'Rendimiento',
@@ -712,7 +712,7 @@ export const usPageMap: any[] = [
             locale: 'es-ES'
           },
           {
-            name: 'meta.json',
+            name: '_meta.json',
             meta: {
               cache: 'キャッシュ',
               performance: 'パフォーマンス',
@@ -721,7 +721,7 @@ export const usPageMap: any[] = [
             locale: 'ja'
           },
           {
-            name: 'meta.json',
+            name: '_meta.json',
             meta: {
               cache: '캐시',
               performance: '성능',
@@ -730,7 +730,7 @@ export const usPageMap: any[] = [
             locale: 'ko'
           },
           {
-            name: 'meta.json',
+            name: '_meta.json',
             meta: {
               cache: 'Кеш',
               performance: 'Производительность',
@@ -739,7 +739,7 @@ export const usPageMap: any[] = [
             locale: 'ru'
           },
           {
-            name: 'meta.json',
+            name: '_meta.json',
             meta: {
               cache: '缓存',
               performance: '性能',
@@ -796,7 +796,7 @@ export const usPageMap: any[] = [
         locale: 'en-US'
       },
       {
-        name: 'meta.json',
+        name: '_meta.json',
         meta: {
           'getting-started': 'Getting Started',
           options: 'Options',
@@ -819,7 +819,7 @@ export const usPageMap: any[] = [
         locale: 'en-US'
       },
       {
-        name: 'meta.json',
+        name: '_meta.json',
         meta: {
           'getting-started': 'Comienza',
           options: 'Opciones',
@@ -842,7 +842,7 @@ export const usPageMap: any[] = [
         locale: 'es-ES'
       },
       {
-        name: 'meta.json',
+        name: '_meta.json',
         meta: {
           'getting-started': 'はじめに',
           options: 'オプション',
@@ -865,7 +865,7 @@ export const usPageMap: any[] = [
         locale: 'ja'
       },
       {
-        name: 'meta.json',
+        name: '_meta.json',
         meta: {
           'getting-started': '시작하기',
           options: '옵션',
@@ -888,7 +888,7 @@ export const usPageMap: any[] = [
         locale: 'ko'
       },
       {
-        name: 'meta.json',
+        name: '_meta.json',
         meta: {
           'getting-started': 'Начало работы',
           options: 'Опции',
@@ -911,7 +911,7 @@ export const usPageMap: any[] = [
         locale: 'ru'
       },
       {
-        name: 'meta.json',
+        name: '_meta.json',
         meta: {
           'getting-started': '入门',
           options: '选项',
@@ -1021,7 +1021,7 @@ export const usPageMap: any[] = [
         locale: 'en-US'
       },
       {
-        name: 'meta.json',
+        name: '_meta.json',
         meta: {
           basic: 'Basic Usage',
           auth: 'Authentication',
@@ -1032,7 +1032,7 @@ export const usPageMap: any[] = [
         locale: 'en-US'
       },
       {
-        name: 'meta.json',
+        name: '_meta.json',
         meta: {
           basic: 'Uso Básico',
           auth: 'Autenticación',
@@ -1043,7 +1043,7 @@ export const usPageMap: any[] = [
         locale: 'es-ES'
       },
       {
-        name: 'meta.json',
+        name: '_meta.json',
         meta: {
           basic: '基本的な使用法',
           auth: '認証',
@@ -1054,7 +1054,7 @@ export const usPageMap: any[] = [
         locale: 'ja'
       },
       {
-        name: 'meta.json',
+        name: '_meta.json',
         meta: {
           basic: '기본 사용법',
           auth: '인증',
@@ -1065,7 +1065,7 @@ export const usPageMap: any[] = [
         locale: 'ko'
       },
       {
-        name: 'meta.json',
+        name: '_meta.json',
         meta: {
           basic: 'Основное использование',
           auth: 'Аутентификация',
@@ -1076,7 +1076,7 @@ export const usPageMap: any[] = [
         locale: 'ru'
       },
       {
-        name: 'meta.json',
+        name: '_meta.json',
         meta: {
           basic: '基本用法',
           auth: '身份验证',
@@ -1107,7 +1107,7 @@ export const usPageMap: any[] = [
     locale: 'en-US'
   },
   {
-    name: 'meta.json',
+    name: '_meta.json',
     meta: {
       index: {
         title: 'Introduction',
@@ -1130,7 +1130,7 @@ export const usPageMap: any[] = [
     locale: 'en-US'
   },
   {
-    name: 'meta.json',
+    name: '_meta.json',
     meta: {
       index: {
         title: 'Introducción',
@@ -1153,7 +1153,7 @@ export const usPageMap: any[] = [
     locale: 'es-ES'
   },
   {
-    name: 'meta.json',
+    name: '_meta.json',
     meta: {
       index: {
         title: '前書き',
@@ -1176,7 +1176,7 @@ export const usPageMap: any[] = [
     locale: 'ja'
   },
   {
-    name: 'meta.json',
+    name: '_meta.json',
     meta: {
       index: {
         title: '소개',
@@ -1199,7 +1199,7 @@ export const usPageMap: any[] = [
     locale: 'ko'
   },
   {
-    name: 'meta.json',
+    name: '_meta.json',
     meta: {
       index: {
         title: 'Введение',
@@ -1222,7 +1222,7 @@ export const usPageMap: any[] = [
     locale: 'ru'
   },
   {
-    name: 'meta.json',
+    name: '_meta.json',
     meta: {
       index: {
         title: '简介',
diff --git a/packages/nextra-theme-docs/__test__/normalize-page.spec.ts b/packages/nextra-theme-docs/__test__/normalize-page.spec.ts
index 0136ba7362..f8d96553ff 100644
--- a/packages/nextra-theme-docs/__test__/normalize-page.spec.ts
+++ b/packages/nextra-theme-docs/__test__/normalize-page.spec.ts
@@ -56,7 +56,7 @@ describe('normalize-page', () => {
         { name: 'get-started', route: '/get-started' },
         { name: 'index', route: '/' },
         {
-          name: 'meta.json',
+          name: '_meta.json',
           route: '',
           meta: {
             '404': {
@@ -89,7 +89,7 @@ describe('normalize-page', () => {
         { name: 'get-started', route: '/get-started' },
         { name: 'index', route: '/' },
         {
-          name: 'meta.json',
+          name: '_meta.json',
           route: '',
           meta: {
             '500': {
diff --git a/packages/nextra-theme-docs/css/hamburger.css b/packages/nextra-theme-docs/css/hamburger.css
new file mode 100644
index 0000000000..36edd926e2
--- /dev/null
+++ b/packages/nextra-theme-docs/css/hamburger.css
@@ -0,0 +1,39 @@
+.nextra-hamburger svg {
+  g {
+    transform-origin: center;
+    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
+  }
+  path {
+    opacity: 1;
+    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s,
+    opacity 0.2s ease 0.2s;
+  }
+
+  &.open {
+    path {
+      transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1),
+      opacity 0s ease 0.2s;
+    }
+    g {
+      transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s;
+    }
+  }
+
+  &.open > {
+    path {
+      opacity: 0;
+    }
+    g:nth-of-type(1) {
+      transform: rotate(45deg);
+      path {
+        transform: translate3d(0, 6px, 0);
+      }
+    }
+    g:nth-of-type(2) {
+      transform: rotate(-45deg);
+      path {
+        transform: translate3d(0, -6px, 0);
+      }
+    }
+  }
+}
diff --git a/packages/nextra-theme-docs/css/scrollbar.css b/packages/nextra-theme-docs/css/scrollbar.css
new file mode 100644
index 0000000000..25a426d740
--- /dev/null
+++ b/packages/nextra-theme-docs/css/scrollbar.css
@@ -0,0 +1,41 @@
+.nextra-scrollbar {
+  scrollbar-gutter: stable;
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  &::-webkit-scrollbar-track {
+    margin-top: 20px;
+    margin-bottom: 16px;
+    background-color: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    box-shadow: inset 0 0 0 5px rgba(128, 128, 128, 0);
+    border-radius: 20px;
+  }
+  &:hover::-webkit-scrollbar-thumb {
+    box-shadow: inset 0 0 0 5px rgba(128, 128, 128, 0.2);
+    &:hover {
+      box-shadow: inset 0 0 0 5px rgba(128, 128, 128, 0.4);
+    }
+  }
+}
+
+.nextra-sidebar-container.with-menu.nextra-scrollbar::-webkit-scrollbar-track {
+  margin-bottom: 76px;
+}
+
+@media (max-width: 767px) {
+  .nextra-container .nextra-scrollbar {
+    scrollbar-gutter: auto;
+  }
+}
+
+/* Hide scrollbar */
+.no-scrollbar {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+
+  &::-webkit-scrollbar {
+    display: none; /* Chrome, Safari and Opera */
+  }
+}
diff --git a/packages/nextra-theme-docs/src/styles.css b/packages/nextra-theme-docs/css/styles.css
similarity index 61%
rename from packages/nextra-theme-docs/src/styles.css
rename to packages/nextra-theme-docs/css/styles.css
index c74e35b0db..7ac7f6e44c 100644
--- a/packages/nextra-theme-docs/src/styles.css
+++ b/packages/nextra-theme-docs/css/styles.css
@@ -4,6 +4,9 @@
 @import 'nextra/styles/variables.css';
 @import 'nextra/styles/code-block.css';
 @import 'nextra/styles/subheading-anchor.css';
+@import './hamburger.css';
+@import './scrollbar.css';
+@import './typesetting-article.css';
 
 :root {
   --nextra-primary-hue: 212deg;
@@ -42,67 +45,19 @@ body {
         box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.1) inset;
       }
     }
-    @supports (
-      (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
-    ) {
-      .nextra-nav-container-blur {
-        backdrop-filter: blur(12px);
-        @apply bg-opacity-[.85] dark:bg-opacity-80;
-      }
-    }
 
     .nextra-nav-link {
       @apply text-sm;
     }
     .nextra-menu-icon {
-      @apply select-none rounded outline-none;
-      &:active {
-        @apply bg-gray-400/20;
-      }
-    }
-    .nextra-menu-icon svg {
-      g {
-        transform-origin: center;
-        transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
-      }
-      path {
-        opacity: 1;
-        transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s,
-          opacity 0.2s ease 0.2s;
-      }
-      &.open {
-        path {
-          transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1),
-            opacity 0s ease 0.2s;
-        }
-        g {
-          transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s;
-        }
-      }
-      &.open > {
-        path {
-          opacity: 0;
-        }
-        g:nth-of-type(1) {
-          transform: rotate(45deg);
-          path {
-            transform: translate3d(0, 6px, 0);
-          }
-        }
-        g:nth-of-type(2) {
-          transform: rotate(-45deg);
-          path {
-            transform: translate3d(0, -6px, 0);
-          }
-        }
-      }
+      @apply select-none rounded outline-none active:bg-gray-400/20;
     }
   }
 
   /* Sidebar */
   .nextra-sidebar {
     -webkit-touch-callout: none;
-    ul {
+    ul.nextra-sidebar-list {
       a, button {
         &:focus-visible {
           @apply ring ring-primary-200;
@@ -146,48 +101,6 @@ body {
         @apply ltr:md:border-l ltr:pl-3 ltr:ml-1 rtl:md:border-r rtl:pr-3 rtl:mr-1;
       }
     }
-    .nextra-sidebar-search {
-      @apply sticky top-0 -mt-4 bg-white pt-4 dark:bg-dark;
-      box-shadow: 0 2px 14px 6px white;
-      z-index: 1;
-      .dark & {
-        box-shadow: 0 2px 14px 6px #111;
-      }
-    }
-
-    .nextra-sidebar-menu {
-      @apply sticky bottom-0;
-      @media (prefers-contrast: more) {
-        & {
-          box-shadow: none;
-          border-top: 1px solid #999;
-        }
-      }
-    }
-  }
-
-  .nextra-scrollbar {
-    scrollbar-gutter: stable;
-    &::-webkit-scrollbar {
-      width: 6px;
-    }
-    &::-webkit-scrollbar-track {
-      margin-top: 20px;
-      margin-bottom: 16px;
-      background-color: transparent;
-    }
-    &::-webkit-scrollbar-thumb {
-      box-shadow: inset 0 0 0 5px rgba(128, 128, 128, 0);
-      border-radius: 20px;
-    }
-    &:hover {
-      &::-webkit-scrollbar-thumb {
-        box-shadow: inset 0 0 0 5px rgba(128, 128, 128, 0.2);
-        &:hover {
-          box-shadow: inset 0 0 0 5px rgba(128, 128, 128, 0.4);
-        }
-      }
-    }
   }
 }
 
@@ -244,11 +157,6 @@ body {
   .nextra-banner-hidden div.nextra-nav-container {
     @apply top-0;
   }
-  .nextra-container {
-    .nextra-scrollbar {
-      scrollbar-gutter: auto;
-    }
-  }
 }
 
 @media (prefers-reduced-motion: reduce) and (max-width: 767px) {
@@ -304,34 +212,6 @@ article {
       vertical-align: -4px;
     }
   }
-
-  /* Typesettings */
-  &.nextra-body-typesetting-article {
-    font-size: 17px;
-    font-feature-settings: 'rlig' 1, 'calt' 1;
-    h1 {
-      @apply mt-6 mb-4 text-center;
-      font-size: 2.5rem;
-    }
-    h2 {
-      @apply border-none;
-    }
-    a {
-      @apply no-underline hover:underline;
-    }
-    p {
-      @apply leading-8;
-    }
-    code {
-      @apply border-none dark:bg-neutral-700;
-    }
-    pre code {
-      @apply dark:bg-transparent;
-    }
-    .subheading-anchor + a {
-      @apply no-underline hover:no-underline after:hidden;
-    }
-  }
 }
 
 .nextra-toc, .nextra-sidebar-container {
@@ -339,37 +219,25 @@ article {
   linear-gradient(to left, #000 10px, transparent 10px);
 }
 
-.nextra-sidebar-container.with-menu.nextra-scrollbar::-webkit-scrollbar-track {
-   margin-bottom: 76px;
- }
-
-/* Search */
-.nextra-search ul {
-  max-height: min(calc(100vh - 5rem - env(safe-area-inset-bottom)), 400px);
-  transition: max-height 0.2s ease;
-  @supports (
-    (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
-  ) {
-    & {
-      backdrop-filter: blur(16px);
-      @apply bg-opacity-70 dark:bg-opacity-80;
-    }
+@supports (
+  (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
+) {
+  .nextra-search ul {
+    @apply backdrop-blur-lg bg-opacity-70 dark:bg-opacity-80;
+  }
+  .nextra-nav-container-blur {
+    @apply backdrop-blur-md bg-opacity-[.85] dark:bg-opacity-80;
   }
 }
 
 @media screen and (max-width: 767px) {
-  .nextra-search {
-    .excerpt {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: -webkit-box;
-      -webkit-line-clamp: 1;
-      line-clamp: 1;
-      -webkit-box-orient: vertical;
-    }
-    ul {
-      max-height: min(calc(50vh - 11rem - env(safe-area-inset-bottom)), 400px);
-    }
+  .nextra-search .excerpt {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    line-clamp: 1;
+    -webkit-box-orient: vertical;
   }
 }
 
@@ -403,17 +271,6 @@ input[type='search']::-webkit-search-results-decoration {
   @apply mr-1;
 }
 
-/* Hide scrollbar for Chrome, Safari and Opera */
-.no-scrollbar::-webkit-scrollbar {
-  display: none;
-}
-
-/* Hide scrollbar for IE, Edge and Firefox */
-.no-scrollbar {
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
-}
-
 .nextra-banner-hidden .nextra-banner-container {
   display: none;
 }
diff --git a/packages/nextra-theme-docs/css/typesetting-article.css b/packages/nextra-theme-docs/css/typesetting-article.css
new file mode 100644
index 0000000000..e50a3db17e
--- /dev/null
+++ b/packages/nextra-theme-docs/css/typesetting-article.css
@@ -0,0 +1,26 @@
+article.nextra-body-typesetting-article {
+  font-size: 17px;
+  font-feature-settings: 'rlig' 1, 'calt' 1;
+  h1 {
+    @apply mt-6 mb-4 text-center;
+    font-size: 2.5rem;
+  }
+  h2 {
+    @apply border-none;
+  }
+  a {
+    @apply no-underline hover:underline;
+  }
+  p {
+    @apply leading-8;
+  }
+  code {
+    @apply border-none dark:bg-neutral-700;
+  }
+  pre code {
+    @apply dark:bg-transparent;
+  }
+  .subheading-anchor + a {
+    @apply no-underline hover:no-underline after:hidden;
+  }
+}
diff --git a/packages/nextra-theme-docs/package.json b/packages/nextra-theme-docs/package.json
index 13f82411a9..133ce09bae 100644
--- a/packages/nextra-theme-docs/package.json
+++ b/packages/nextra-theme-docs/package.json
@@ -31,11 +31,11 @@
     "dev": "concurrently \"pnpm dev:layout\" \"pnpm dev:tailwind\"",
     "build": "tsup",
     "build:all": "pnpm build && pnpm run build:tailwind",
-    "build:tailwind": "cross-env NODE_ENV=production pnpm postcss src/styles.css -o style.css --verbose",
+    "build:tailwind": "cross-env NODE_ENV=production pnpm postcss css/styles.css -o style.css --verbose",
     "types": "tsup --dts-only",
     "types:check": "tsc --noEmit",
     "dev:layout": "tsup --watch",
-    "dev:tailwind": "cross-env TAILWIND_MODE=watch pnpm postcss src/styles.css -o style.css --watch",
+    "dev:tailwind": "cross-env TAILWIND_MODE=watch pnpm postcss css/styles.css -o style.css --watch",
     "prepublishOnly": "pnpm build:all",
     "test": "vitest --run",
     "clean": "rimraf ./dist ./style.css",
diff --git a/packages/nextra-theme-docs/src/components/banner.tsx b/packages/nextra-theme-docs/src/components/banner.tsx
index 24c31be79e..2c1c4996d9 100644
--- a/packages/nextra-theme-docs/src/components/banner.tsx
+++ b/packages/nextra-theme-docs/src/components/banner.tsx
@@ -3,36 +3,36 @@ import { XIcon } from 'nextra/icons'
 import { useConfig } from '../contexts'
 import { renderComponent } from '../utils'
 
-export function Banner(): ReactElement {
-  const { bannerKey, banner } = useConfig()
-
+export function Banner(): ReactElement | null {
+  const { banner } = useConfig()
+  if (!banner.text) {
+    return null
+  }
   return (
     <>
       <script
         dangerouslySetInnerHTML={{
           __html: `try{if(localStorage.getItem(${JSON.stringify(
-            bannerKey
+            banner.key
           )})==='0'){document.body.classList.add('nextra-banner-hidden')}}catch(e){}`
         }}
       />
-      {banner && bannerKey ? (
-        <div className="nextra-banner-container sticky top-0 z-20 flex h-10 items-center bg-neutral-900 pl-10 text-sm text-slate-50  dark:bg-[linear-gradient(1deg,#383838,#212121)] dark:text-white md:relative">
-          <div className="mx-auto w-full max-w-[90rem] truncate whitespace-nowrap py-1 pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)] text-center font-medium">
-            {renderComponent(banner)}
-          </div>
-          <button
-            className="mr-2 w-8 opacity-80 hover:opacity-100"
-            onClick={() => {
-              try {
-                localStorage.setItem(bannerKey, '0')
-              } catch {}
-              document.body.classList.add('nextra-banner-hidden')
-            }}
-          >
-            <XIcon className="h4 mx-auto w-4" />
-          </button>
+      <div className="nextra-banner-container sticky top-0 z-20 flex h-10 items-center bg-neutral-900 pl-10 text-sm text-slate-50  dark:bg-[linear-gradient(1deg,#383838,#212121)] dark:text-white md:relative">
+        <div className="mx-auto w-full max-w-[90rem] truncate whitespace-nowrap py-1 pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)] text-center font-medium">
+          {renderComponent(banner.text)}
         </div>
-      ) : null}
+        <button
+          className="mr-2 w-8 opacity-80 hover:opacity-100"
+          onClick={() => {
+            try {
+              localStorage.setItem(banner.key, '0')
+            } catch {}
+            document.body.classList.add('nextra-banner-hidden')
+          }}
+        >
+          <XIcon className="h4 mx-auto w-4" />
+        </button>
+      </div>
     </>
   )
 }
diff --git a/packages/nextra-theme-docs/src/components/breadcrumb.tsx b/packages/nextra-theme-docs/src/components/breadcrumb.tsx
index 227100f98b..480cc1d55e 100644
--- a/packages/nextra-theme-docs/src/components/breadcrumb.tsx
+++ b/packages/nextra-theme-docs/src/components/breadcrumb.tsx
@@ -10,19 +10,19 @@ export function Breadcrumb({
   activePath: Item[]
 }): ReactElement {
   return (
-    <div className="nextra-breadcrumb mt-2.5 flex items-center gap-1 overflow-hidden text-sm text-gray-500 contrast-more:text-current">
+    <ul className="nextra-breadcrumb mt-2.5 flex items-center gap-1 overflow-hidden text-sm text-gray-500 contrast-more:text-current">
       {activePath.map((item, index) => {
         const isLink = !item.children || item.withIndexPage
         const isActive = index === activePath.length - 1
 
         return (
           <React.Fragment key={item.route + item.name}>
-            {index > 0 && <ArrowRightIcon className="w-3.5" />}
-            <div
+            {index > 0 && <ArrowRightIcon className="w-3.5 shrink-0" />}
+            <li
               className={cn(
                 'transition-colors whitespace-nowrap',
                 isActive
-                  ? 'text-gray-600 dark:text-gray-400 contrast-more:font-bold contrast-more:text-current contrast-more:dark:text-current'
+                  ? 'text-gray-700 dark:text-gray-400 font-medium contrast-more:font-bold contrast-more:text-current contrast-more:dark:text-current'
                   : [
                       'min-w-[24px] overflow-hidden text-ellipsis',
                       isLink && 'hover:text-gray-900 dark:hover:text-gray-200'
@@ -35,10 +35,10 @@ export function Breadcrumb({
               ) : (
                 item.title
               )}
-            </div>
+            </li>
           </React.Fragment>
         )
       })}
-    </div>
+    </ul>
   )
 }
diff --git a/packages/nextra-theme-docs/src/components/callout.tsx b/packages/nextra-theme-docs/src/components/callout.tsx
index c57a776c9c..9274b5b2cf 100644
--- a/packages/nextra-theme-docs/src/components/callout.tsx
+++ b/packages/nextra-theme-docs/src/components/callout.tsx
@@ -39,7 +39,7 @@ export function Callout({
       >
         {emoji}
       </div>
-      <span>
+      <span className="w-[calc(100%-2.5rem)]">
         {children}
       </span>
     </div>
diff --git a/packages/nextra-theme-docs/src/components/flexsearch.tsx b/packages/nextra-theme-docs/src/components/flexsearch.tsx
index 641cbcc66e..4096eaa5cb 100644
--- a/packages/nextra-theme-docs/src/components/flexsearch.tsx
+++ b/packages/nextra-theme-docs/src/components/flexsearch.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, ReactElement, ReactNode } from 'react'
+import React, { useState, ReactElement, ReactNode } from 'react'
 import { useRouter } from 'next/router'
 import FlexSearch from 'flexsearch'
 import cn from 'clsx'
@@ -48,7 +48,11 @@ const indexes: {
   [locale: string]: [PageIndex, SectionIndex]
 } = {}
 
-export function Flexsearch(): ReactElement {
+export function Flexsearch({
+  className
+}: {
+  className?: string
+}): ReactElement {
   const router = useRouter()
   const { locale = DEFAULT_LOCALE } = router
   const [loading, setLoading] = useState(false)
@@ -246,7 +250,8 @@ export function Flexsearch(): ReactElement {
     <Search
       loading={loading}
       onChange={handleChange}
-      className="w-screen min-h-[100px] max-w-[min(calc(100vw-2rem),calc(100%+20rem))]"
+      className={className}
+      overlayClassName="w-screen min-h-[100px] max-w-[min(calc(100vw-2rem),calc(100%+20rem))]"
       results={results}
     />
   )
diff --git a/packages/nextra-theme-docs/src/components/footer.tsx b/packages/nextra-theme-docs/src/components/footer.tsx
index 1172b08da9..450612fabd 100644
--- a/packages/nextra-theme-docs/src/components/footer.tsx
+++ b/packages/nextra-theme-docs/src/components/footer.tsx
@@ -7,7 +7,6 @@ import { renderComponent } from '../utils'
 
 export function Footer({ menu }: { menu?: boolean }): ReactElement {
   const config = useConfig()
-
   return (
     <footer className="bg-gray-100 pb-[env(safe-area-inset-bottom)] dark:bg-neutral-900">
       <div
@@ -18,11 +17,11 @@ export function Footer({ menu }: { menu?: boolean }): ReactElement {
       >
         <div className="mx-auto max-w-[90rem]">
           <div className="inline-flex px-4">
-            {config.i18n ? (
+            {config.i18n.length > 0 && (
               <div className="relative flex-1">
                 <LocaleSwitch options={config.i18n} />
               </div>
-            ) : null}
+            )}
             {config.darkMode ? (
               <div className="relative grow-0">
                 <ThemeSwitch lite={false} />
@@ -34,7 +33,7 @@ export function Footer({ menu }: { menu?: boolean }): ReactElement {
       <div className="mx-auto max-w-[90rem] py-12 pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)]">
         <div className="flex flex-col-reverse items-center justify-between md:flex-row md:items-end">
           <span className="text-gray-600 dark:text-gray-400">
-            {renderComponent(config.footerText)}
+            {renderComponent(config.footer.text)}
           </span>
           <div className="mt-6" />
         </div>
diff --git a/packages/nextra-theme-docs/src/components/head.tsx b/packages/nextra-theme-docs/src/components/head.tsx
index 0a2dd894a2..ef05c4ede4 100644
--- a/packages/nextra-theme-docs/src/components/head.tsx
+++ b/packages/nextra-theme-docs/src/components/head.tsx
@@ -12,8 +12,7 @@ export function Head(): ReactElement {
 
   // `head` can be either FC or ReactNode. We have to directly call it if it's a
   // FC because hooks like Next.js' `useRouter` aren't allowed inside NextHead.
-  const head =
-    typeof config.head === 'function' ? config.head({}) : config.head || null
+  const head = typeof config.head === 'function' ? config.head({}) : config.head
 
   return (
     <NextHead>
diff --git a/packages/nextra-theme-docs/src/components/locale-switch.tsx b/packages/nextra-theme-docs/src/components/locale-switch.tsx
index c701a90b3f..30961c6470 100644
--- a/packages/nextra-theme-docs/src/components/locale-switch.tsx
+++ b/packages/nextra-theme-docs/src/components/locale-switch.tsx
@@ -3,16 +3,14 @@ import { useRouter } from 'next/router'
 import { Select } from './select'
 import { DocsThemeConfig } from '../types'
 import { GlobeIcon } from 'nextra/icons'
-import { DEFAULT_LOCALE } from '../constants'
 
 interface LocaleSwitchProps {
   options: NonNullable<DocsThemeConfig['i18n']>
 }
 
 export function LocaleSwitch({ options }: LocaleSwitchProps): ReactElement {
-  const { locale = DEFAULT_LOCALE, asPath } = useRouter()
-  const selected = options.find(l => locale === l.locale)!
-
+  const { locale, asPath } = useRouter()
+  const selected = options.find(l => locale === l.locale)
   return (
     <Select
       onChange={option => {
@@ -23,11 +21,11 @@ export function LocaleSwitch({ options }: LocaleSwitchProps): ReactElement {
         location.href = asPath
       }}
       selected={{
-        key: selected.locale,
+        key: selected?.locale || '',
         name: (
           <div className="flex items-center gap-2">
             <GlobeIcon />
-            <span>{selected.text}</span>
+            <span>{selected?.text}</span>
           </div>
         )
       }}
diff --git a/packages/nextra-theme-docs/src/components/match-sorter-search.tsx b/packages/nextra-theme-docs/src/components/match-sorter-search.tsx
index d361dbae52..ee70add4e3 100644
--- a/packages/nextra-theme-docs/src/components/match-sorter-search.tsx
+++ b/packages/nextra-theme-docs/src/components/match-sorter-search.tsx
@@ -6,8 +6,10 @@ import { HighlightMatches } from './highlight-matches'
 import { SearchResult } from '../types'
 
 export function MatchSorterSearch({
+  className,
   directories = []
 }: {
+  className?: string
   directories: NormalItem[]
 }): ReactElement {
   const [search, setSearch] = useState('')
@@ -28,5 +30,12 @@ export function MatchSorterSearch({
     [search]
   )
 
-  return <Search onChange={setSearch} className="w-full" results={results} />
+  return (
+    <Search
+      onChange={setSearch}
+      className={className}
+      overlayClassName="w-full"
+      results={results}
+    />
+  )
 }
diff --git a/packages/nextra-theme-docs/src/components/nav-links.tsx b/packages/nextra-theme-docs/src/components/nav-links.tsx
index 861d772b0b..c552a80626 100644
--- a/packages/nextra-theme-docs/src/components/nav-links.tsx
+++ b/packages/nextra-theme-docs/src/components/nav-links.tsx
@@ -15,8 +15,8 @@ export const NavLinks = ({
   currentIndex
 }: NavLinkProps): ReactElement | null => {
   const config = useConfig()
-  const prev = config.prevLinks ? flatDirectories[currentIndex - 1] : null
-  const next = config.nextLinks ? flatDirectories[currentIndex + 1] : null
+  const prev = config.navigation.prev ? flatDirectories[currentIndex - 1] : null
+  const next = config.navigation.next ? flatDirectories[currentIndex + 1] : null
 
   if (!prev && !next) return null
 
@@ -32,13 +32,7 @@ export const NavLinks = ({
               'rtl:ml-2 ltr:mr-2'
             )}
           >
-            <ArrowRightIcon
-              height={20}
-              className={cn(
-                'inline flex-shrink-0 transform',
-                'rtl:ml-1 ltr:mr-1 ltr:rotate-180'
-              )}
-            />
+            <ArrowRightIcon className="h-5 inline flex-shrink-0 transform rtl:ml-1 ltr:mr-1 ltr:rotate-180" />
             {prev.title}
           </Anchor>
         ) : null}
@@ -54,13 +48,7 @@ export const NavLinks = ({
             )}
           >
             {next.title}
-            <ArrowRightIcon
-              height={20}
-              className={cn(
-                'inline flex-shrink-0 transform',
-                'rtl:mr-1 rtl:rotate-180 ltr:ml-1'
-              )}
-            />
+            <ArrowRightIcon className="h-5 inline flex-shrink-0 transform rtl:mr-1 rtl:rotate-180 ltr:ml-1" />
           </Anchor>
         ) : null}
       </div>
diff --git a/packages/nextra-theme-docs/src/components/navbar.tsx b/packages/nextra-theme-docs/src/components/navbar.tsx
index a7c9cf223d..2538ec9432 100644
--- a/packages/nextra-theme-docs/src/components/navbar.tsx
+++ b/packages/nextra-theme-docs/src/components/navbar.tsx
@@ -5,9 +5,7 @@ import { Menu, Transition } from '@headlessui/react'
 import { ArrowRightIcon } from 'nextra/icons'
 
 import { useConfig, useMenu } from '../contexts'
-import { MatchSorterSearch } from './match-sorter-search'
-import { Flexsearch } from './flexsearch'
-import { GitHubIcon, DiscordIcon, MenuIcon } from 'nextra/icons'
+import { MenuIcon } from 'nextra/icons'
 import { Item, PageItem, MenuItem, renderComponent, getFSRoute } from '../utils'
 import { Anchor } from './anchor'
 import { DEFAULT_LOCALE } from '../constants'
@@ -113,11 +111,8 @@ export function Navbar({ flatDirectories, items }: NavBarProps): ReactElement {
                 >
                   {menu.title}
                   <ArrowRightIcon
-                    height="1em"
-                    className={cn(
-                      'h-[18px] min-w-[18px] rounded-sm p-0.5',
-                      '[&>path]:origin-center [&>path]:transition-transform [&>path]:rotate-90'
-                    )}
+                    className="h-[18px] min-w-[18px] rounded-sm p-0.5"
+                    pathClassName="origin-center transition-transform rotate-90"
                   />
                 </NavbarMenu>
               </div>
@@ -155,53 +150,33 @@ export function Navbar({ flatDirectories, items }: NavBarProps): ReactElement {
           )
         })}
 
-        <div className="hidden md:inline-block min-w-[200px]">
-          {config.customSearch ||
-            (config.search ? (
-              config.unstable_flexsearch ? (
-                <Flexsearch />
-              ) : (
-                <MatchSorterSearch directories={flatDirectories} />
-              )
-            ) : null)}
-        </div>
-
-        {config.projectLink || config.github ? (
+        {renderComponent(config.search.component, {
+          directories: flatDirectories,
+          className: 'hidden md:inline-block min-w-[200px]'
+        })}
+
+        {config.project.link || config.github ? (
           <Anchor
             className="p-2 text-current"
-            href={config.projectLink || config.github}
+            href={config.project.link || config.github}
             newWindow
           >
-            {config.projectLinkIcon ? (
-              renderComponent(config.projectLinkIcon)
-            ) : (
-              <>
-                <GitHubIcon />
-                <span className="sr-only">GitHub</span>
-              </>
-            )}
+            {renderComponent(config.project.icon)}
           </Anchor>
         ) : null}
 
-        {config.projectChatLink ? (
+        {config.projectChat.link ? (
           <Anchor
             className="p-2 text-current"
-            href={config.projectChatLink}
+            href={config.projectChat.link}
             newWindow
           >
-            {config.projectChatLinkIcon ? (
-              renderComponent(config.projectChatLinkIcon)
-            ) : (
-              <>
-                <DiscordIcon />
-                <span className="sr-only">Discord</span>
-              </>
-            )}
+            {renderComponent(config.projectChat.icon)}
           </Anchor>
         ) : null}
 
         <button
-          className="nextra-menu-icon block p-2 -mr-2 md:hidden"
+          className="nextra-hamburger block p-2 -mr-2 md:hidden"
           onClick={() => setMenu(!menu)}
         >
           <MenuIcon className={cn({ open: menu })} />
diff --git a/packages/nextra-theme-docs/src/components/not-found.tsx b/packages/nextra-theme-docs/src/components/not-found.tsx
index 284be4a3a9..24176b90cd 100644
--- a/packages/nextra-theme-docs/src/components/not-found.tsx
+++ b/packages/nextra-theme-docs/src/components/not-found.tsx
@@ -1,14 +1,15 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import { useConfig } from '../contexts'
 import { renderComponent, useMounted, getGitIssueUrl } from '../utils'
 import { useRouter } from 'next/router'
 import { Anchor } from './anchor'
 
-export function NotFoundPage() {
+export function NotFoundPage(): ReactElement | null {
   const config = useConfig()
   const mounted = useMounted()
   const { asPath } = useRouter()
-  if (!config.notFoundLink) {
+  const { link, labels } = config.notFound
+  if (!link) {
     return null
   }
 
@@ -18,11 +19,12 @@ export function NotFoundPage() {
         href={getGitIssueUrl({
           repository: config.docsRepositoryBase,
           title: `Found broken \`${mounted ? asPath : ''}\` link. Please fix!`,
-          labels: config.notFoundLabels
+          labels
         })}
         newWindow
+        className="ring-primary-500/30 focus:outline-none focus-visible:ring text-primary-500 underline decoration-from-font [text-underline-position:under]"
       >
-        {renderComponent(config.notFoundLink)}
+        {renderComponent(link)}
       </Anchor>
     </p>
   )
diff --git a/packages/nextra-theme-docs/src/components/search.tsx b/packages/nextra-theme-docs/src/components/search.tsx
index d06943d122..300203cd04 100644
--- a/packages/nextra-theme-docs/src/components/search.tsx
+++ b/packages/nextra-theme-docs/src/components/search.tsx
@@ -19,6 +19,7 @@ import { SearchResult } from '../types'
 
 type SearchProps = {
   className?: string
+  overlayClassName?: string
   value?: string
   onChange: (newValue: string) => void
   loading?: boolean
@@ -29,6 +30,7 @@ const INPUTS = ['input', 'select', 'button', 'textarea']
 
 export function Search({
   className,
+  overlayClassName,
   value,
   onChange,
   loading,
@@ -139,7 +141,7 @@ export function Search({
     >
       <kbd
         className={cn(
-          'absolute ltr:right-1.5 rtl:left-1.5 top-0 my-1.5 select-none',
+          'absolute ltr:right-1.5 rtl:left-1.5 my-1.5 select-none',
           'rounded bg-white px-1.5 h-5 font-mono font-medium text-gray-500 text-[10px]',
           'border dark:bg-dark/50 dark:border-gray-100/20',
           'contrast-more:border-current contrast-more:text-current contrast-more:dark:border-current',
@@ -153,7 +155,7 @@ export function Search({
           onChange('')
         }}
       >
-        {value
+        {hasValue
           ? 'ESC'
           : mounted &&
             (navigator.userAgent.includes('Macintosh') ? (
@@ -182,7 +184,7 @@ export function Search({
   }, [])
 
   return (
-    <div className="nextra-search relative md:w-64">
+    <div className={cn('nextra-search relative md:w-64', className)}>
       {renderList && (
         <div className="fixed inset-0 z-10" onClick={() => setShow(false)} />
       )}
@@ -196,7 +198,7 @@ export function Search({
           setShow(Boolean(value))
         }}
         type="search"
-        placeholder={renderString(config.searchPlaceholder)}
+        placeholder={renderString(config.search.placeholder)}
         onKeyDown={handleKeyDown}
         onFocus={handleFocusAndBlur}
         onBlur={handleFocusAndBlur}
@@ -218,11 +220,16 @@ export function Search({
               'bg-white text-gray-100 ring-1 ring-black/5',
               'dark:bg-neutral-900 dark:ring-white/10',
               'absolute top-full z-20 mt-2 overscroll-contain rounded-xl py-2.5 shadow-xl overflow-auto',
+              'max-h-[min(calc(50vh-11rem-env(safe-area-inset-bottom)),400px)]',
+              'md:max-h-[min(calc(100vh-5rem-env(safe-area-inset-bottom)),400px)]',
               'right-0 left-0 ltr:md:left-auto rtl:md:right-auto',
               'contrast-more:border contrast-more:border-gray-900 contrast-more:dark:border-gray-50',
-              className
+              overlayClassName
             )}
             ref={ulRef}
+            style={{
+              transition: 'max-height .2s ease' // don't work with tailwindcss
+            }}
           >
             {loading ? (
               <span className="flex select-none justify-center p-8 text-center text-sm text-gray-400 gap-2">
@@ -255,7 +262,7 @@ export function Search({
                 </Fragment>
               ))
             ) : (
-              renderComponent(config.unstable_searchResultEmpty)
+              renderComponent(config.search.emptyResult)
             )}
           </ul>
         </Transition.Child>
diff --git a/packages/nextra-theme-docs/src/components/server-side-error.tsx b/packages/nextra-theme-docs/src/components/server-side-error.tsx
index 28a353b932..8a119d0a01 100644
--- a/packages/nextra-theme-docs/src/components/server-side-error.tsx
+++ b/packages/nextra-theme-docs/src/components/server-side-error.tsx
@@ -1,14 +1,15 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import { useConfig } from '../contexts'
 import { renderComponent, useMounted, getGitIssueUrl } from '../utils'
 import { useRouter } from 'next/router'
 import { Anchor } from './anchor'
 
-export function ServerSideErrorPage() {
+export function ServerSideErrorPage(): ReactElement | null {
   const config = useConfig()
   const mounted = useMounted()
   const { asPath } = useRouter()
-  if (!config.serverSideErrorLink) {
+  const { link, labels } = config.serverSideError
+  if (!link) {
     return null
   }
 
@@ -20,11 +21,12 @@ export function ServerSideErrorPage() {
           title: `Got server-side error in \`${
             mounted ? asPath : ''
           }\` url. Please fix!`,
-          labels: config.serverSideErrorLabels
+          labels
         })}
         newWindow
+        className="ring-primary-500/30 focus:outline-none focus-visible:ring text-primary-500 underline decoration-from-font [text-underline-position:under]"
       >
-        {renderComponent(config.serverSideErrorLink)}
+        {renderComponent(link)}
       </Anchor>
     </p>
   )
diff --git a/packages/nextra-theme-docs/src/components/sidebar.tsx b/packages/nextra-theme-docs/src/components/sidebar.tsx
index 4033089194..618882bf6a 100644
--- a/packages/nextra-theme-docs/src/components/sidebar.tsx
+++ b/packages/nextra-theme-docs/src/components/sidebar.tsx
@@ -12,8 +12,6 @@ import { useRouter } from 'next/router'
 import { Heading } from 'nextra'
 import scrollIntoView from 'scroll-into-view-if-needed'
 
-import { MatchSorterSearch } from './match-sorter-search'
-import { Flexsearch } from './flexsearch'
 import { useConfig, useMenu, useActiveAnchor } from '../contexts'
 import {
   Item,
@@ -46,11 +44,12 @@ function FolderImpl({ item, anchors }: FolderProps) {
   const active = [route, route + '/'].includes(item.route + '/')
   const activeRouteInside = active || route.startsWith(item.route + '/')
 
-  const { defaultMenuCollapsed, setMenu } = useMenu()
+  const { setMenu } = useMenu()
+  const config = useConfig()
   const open =
     TreeState[item.route] !== undefined
       ? TreeState[item.route]
-      : active || activeRouteInside || !defaultMenuCollapsed
+      : active || activeRouteInside || !config.sidebar.defaultMenuCollapsed
 
   const rerender = useState({})[1]
 
@@ -77,11 +76,14 @@ function FolderImpl({ item, anchors }: FolderProps) {
       }
     })
   }
-
   return (
     <li className={cn({ open, active })}>
       <Anchor
-        href={(item as Item).withIndexPage ? item.route : ''}
+        href={
+          (item as Item).withIndexPage
+            ? item.route
+            : item.children?.find(child => child.route)?.route
+        }
         className="cursor-pointer !flex gap-2 items-center justify-between [word-break:break-word]"
         onClick={e => {
           const clickedToggleIcon = ['svg', 'path'].includes(
@@ -108,11 +110,10 @@ function FolderImpl({ item, anchors }: FolderProps) {
       >
         {item.title}
         <ArrowRightIcon
-          height="1em"
-          className={cn(
-            'h-[18px] min-w-[18px] rounded-sm p-0.5 hover:bg-gray-800/5 dark:hover:bg-gray-100/5',
-            '[&>path]:origin-center [&>path]:transition-transform rtl:[&>path]:-rotate-180',
-            open && 'ltr:[&>path]:rotate-90 rtl:[&>path]:rotate-[-270deg]'
+          className="h-[18px] min-w-[18px] rounded-sm p-0.5 hover:bg-gray-800/5 dark:hover:bg-gray-100/5"
+          pathClassName={cn(
+            'origin-center transition-transform rtl:-rotate-180',
+            open && 'ltr:rotate-90 rtl:rotate-[-270deg]'
           )}
         />
       </Anchor>
@@ -138,7 +139,7 @@ interface SeparatorProps {
 function Separator({ title, topLevel }: SeparatorProps): ReactElement {
   // since title can be empty string ''
   const hasTitle = title !== undefined
-  const { sidebarSubtitle } = useConfig()
+  const config = useConfig()
   return (
     <li
       className={cn(
@@ -149,9 +150,7 @@ function Separator({ title, topLevel }: SeparatorProps): ReactElement {
     >
       {hasTitle ? (
         <div className="mx-2 py-1.5 text-sm font-semibold text-gray-900 dark:text-gray-100">
-          {sidebarSubtitle
-            ? renderComponent(sidebarSubtitle, { title })
-            : title}
+          {renderComponent(config.sidebar.subtitle, { title })}
         </div>
       ) : (
         <hr className="mx-2 border-t border-gray-200 dark:border-primary-100/10" />
@@ -228,7 +227,7 @@ interface MenuProps {
 
 function Menu({ directories, anchors, submenu }: MenuProps): ReactElement {
   return (
-    <ul>
+    <ul className="nextra-sidebar-list">
       {directories.map(item => {
         if (
           item.type === 'menu' ||
@@ -323,15 +322,15 @@ export function Sidebar({
           ref={sidebarRef}
         >
           <div className="min-h-[calc(100vh-4rem-61px)] p-4">
-            <div className="nextra-sidebar-search mb-4 block md:hidden">
-              {config.customSearch ||
-                (config.search ? (
-                  config.unstable_flexsearch ? (
-                    <Flexsearch />
-                  ) : (
-                    <MatchSorterSearch directories={flatDirectories} />
-                  )
-                ) : null)}
+            <div
+              className={cn(
+                'sticky top-0 z-[1] block md:hidden -mt-4 mb-4 bg-white pt-4',
+                'dark:bg-dark shadow-[0_2px_14px_6px_#fff] dark:shadow-[0_2px_14px_6px_#111]'
+              )}
+            >
+              {renderComponent(config.search.component, {
+                directories: flatDirectories
+              })}
             </div>
             <div className="hidden md:block">
               <Menu
@@ -339,7 +338,7 @@ export function Sidebar({
                 directories={docsDirectories}
                 // When the viewport size is larger than `md`, hide the anchors in
                 // the sidebar when `floatTOC` is enabled.
-                anchors={config.floatTOC ? [] : anchors}
+                anchors={config.toc.float ? [] : anchors}
               />
             </div>
             <div className="md:hidden">
@@ -353,13 +352,18 @@ export function Sidebar({
           </div>
 
           {hasMenu && (
-            <div className="nextra-sidebar-menu mx-4 border-t shadow-[0_-12px_16px_white] dark:border-neutral-800 dark:shadow-[0_-12px_16px_#111]">
+            <div
+              className={cn(
+                'sticky bottom-0 mx-4 border-t shadow-[0_-12px_16px_#fff] dark:border-neutral-800 dark:shadow-[0_-12px_16px_#111]',
+                'contrast-more:shadow-none contrast-more:dark:shadow-none contrast-more:border-neutral-400'
+              )}
+            >
               <div className="flex gap-1 bg-white py-4 pb-4 dark:bg-dark justify-between">
-                {config.i18n ? (
+                {config.i18n.length > 0 && (
                   <div className="relative">
                     <LocaleSwitch options={config.i18n} />
                   </div>
-                ) : null}
+                )}
                 {config.darkMode ? (
                   <div className="relative">
                     <ThemeSwitch lite={!!config.i18n} />
diff --git a/packages/nextra-theme-docs/src/components/toc.tsx b/packages/nextra-theme-docs/src/components/toc.tsx
index d2f4d2aff3..46519ac67a 100644
--- a/packages/nextra-theme-docs/src/components/toc.tsx
+++ b/packages/nextra-theme-docs/src/components/toc.tsx
@@ -2,41 +2,18 @@ import React, { ReactElement, useEffect, useRef, useMemo } from 'react'
 import cn from 'clsx'
 import Slugger from 'github-slugger'
 import { Heading } from 'nextra'
-import parseGitUrl from 'parse-git-url'
 import scrollIntoView from 'scroll-into-view-if-needed'
 
 import { renderComponent, getHeadingText, getGitIssueUrl } from '../utils'
 import { useConfig, useActiveAnchor } from '../contexts'
 import { Anchor } from './anchor'
 
-const getEditUrl = (filepath?: string): string => {
-  const config = useConfig()
-  const repo = parseGitUrl(config.docsRepositoryBase || '')
-  if (!repo) throw new Error('Invalid `docsRepositoryBase` URL!')
-
-  switch (repo.type) {
-    case 'github':
-      return `https://github.com/${repo.owner}/${repo.name}/blob/${
-        repo.branch || 'main'
-      }/${repo.subdir || 'pages'}${filepath}`
-    case 'gitlab':
-      return `https://gitlab.com/${repo.owner}/${repo.name}/-/blob/${
-        repo.branch || 'main'
-      }/${repo.subdir || 'pages'}${filepath}`
-  }
-
-  return '#'
+export type TOCProps = {
+  headings: Heading[]
+  filePath: string
 }
 
-export function TOC({
-  headings,
-  filepathWithName,
-  className
-}: {
-  headings: Heading[]
-  filepathWithName: string
-  className: string
-}): ReactElement {
+export function TOC({ headings, filePath }: TOCProps): ReactElement {
   const slugger = new Slugger()
   const activeAnchor = useActiveAnchor()
   const config = useConfig()
@@ -60,8 +37,9 @@ export function TOC({
   )
 
   const hasHeadings = items.length > 0
-  const hasMetaInfo =
-    config.feedbackLink || config.footerEditLink || config.tocExtraContent
+  const hasMetaInfo = Boolean(
+    config.feedback.link || config.editLink.component || config.toc.extraContent
+  )
 
   const activeSlug = Object.entries(activeAnchor).find(
     ([, { isActive }]) => isActive
@@ -88,8 +66,8 @@ export function TOC({
   )
 
   return (
-    <div ref={tocRef} className={cn('mx-4', className)}>
       <div
+        ref={tocRef}
         className={cn(
           'sticky top-16 overflow-y-auto pr-4 pt-8 text-sm [hyphens:auto]',
           'ltr:-mr-4 rtl:-ml-4 max-h-[calc(100vh-4rem-env(safe-area-inset-bottom))]'
@@ -97,7 +75,9 @@ export function TOC({
       >
         {hasHeadings && (
           <>
-            <p className="mb-4 font-semibold tracking-tight">On This Page</p>
+            <p className="mb-4 font-semibold tracking-tight">
+              {renderComponent(config.toc.title)}
+            </p>
             <ul>
               {items.map(({ slug, text, depth }) => (
                 <li className="my-2 scroll-my-6 scroll-py-6" key={slug}>
@@ -125,7 +105,7 @@ export function TOC({
           </>
         )}
 
-        {hasMetaInfo ? (
+        {hasMetaInfo && (
           <div
             className={cn(
               hasHeadings &&
@@ -134,36 +114,29 @@ export function TOC({
               'contrast-more:shadow-none contrast-more:border-t contrast-more:border-neutral-400 contrast-more:dark:border-neutral-400'
             )}
           >
-            {config.feedbackLink ? (
+            {config.feedback.link ? (
               <Anchor
                 className={linkClassName}
                 href={getGitIssueUrl({
                   repository: config.docsRepositoryBase,
                   title: `Feedback for “${config.title}”`,
-                  labels: config.feedbackLabels
+                  labels: config.feedback.labels
                 })}
                 newWindow
               >
-                {renderComponent(config.feedbackLink)}
+                {renderComponent(config.feedback.link)}
               </Anchor>
             ) : null}
 
-            {config.footerEditLink ? (
-              <Anchor
-                className={linkClassName}
-                href={getEditUrl(filepathWithName)}
-                newWindow
-              >
-                {renderComponent(config.footerEditLink)}
-              </Anchor>
-            ) : null}
+            {renderComponent(config.editLink.component, {
+              filePath,
+              className: linkClassName,
+              children: renderComponent(config.editLink.text)
+            })}
 
-            {config.tocExtraContent
-              ? renderComponent(config.tocExtraContent)
-              : null}
+            {renderComponent(config.toc.extraContent)}
           </div>
-        ) : null}
+        )}
       </div>
-    </div>
   )
 }
diff --git a/packages/nextra-theme-docs/src/constants.tsx b/packages/nextra-theme-docs/src/constants.tsx
index 1f6f90b478..837170d431 100644
--- a/packages/nextra-theme-docs/src/constants.tsx
+++ b/packages/nextra-theme-docs/src/constants.tsx
@@ -1,39 +1,68 @@
+/* eslint sort-keys: error */
 import React from 'react'
 import { DocsThemeConfig, PageTheme } from './types'
 import { useRouter } from 'next/router'
+import { Anchor, Flexsearch, Footer, TOC } from './components'
+import { DiscordIcon, GitHubIcon } from 'nextra/icons'
+import { MatchSorterSearch } from './components/match-sorter-search'
+import { useConfig } from './contexts'
+import { getGitEditUrl } from './utils'
 
 export const DEFAULT_LOCALE = 'en-US'
 
 export const IS_BROWSER = typeof window !== 'undefined'
 
+export const META_FILENAME = '_meta.json'
+
 export const DEFAULT_THEME: DocsThemeConfig = {
-  projectLink: 'https://github.com/shuding/nextra',
-  docsRepositoryBase: 'https://github.com/shuding/nextra',
-  titleSuffix: ' – Nextra',
-  nextLinks: true,
-  prevLinks: true,
-  search: true,
+  banner: {
+    key: 'nextra-banner',
+    text: ''
+  },
+  bodyExtraContent: null,
+  components: {},
   darkMode: true,
-  nextThemes: {
-    defaultTheme: 'system',
-    storageKey: 'theme'
+  direction: 'ltr',
+  docsRepositoryBase: 'https://github.com/shuding/nextra',
+  editLink: {
+    component({ className, filePath, children }) {
+      const editUrl = getGitEditUrl(filePath)
+      if (!editUrl) {
+        return null
+      }
+      return (
+        <Anchor className={className} href={editUrl}>
+          {children}
+        </Anchor>
+      )
+    },
+    text: 'Edit this page'
+  },
+  feedback: {
+    labels: '',
+    link: null
   },
-  defaultMenuCollapsed: false,
   // @TODO: Can probably introduce a set of options to use Google Fonts directly
-  // font: true,
-  footer: true,
-  footerText: `MIT ${new Date().getFullYear()} © Nextra.`,
-  footerEditLink: 'Edit this page',
-  gitTimestamp: 'Last updated on',
-  logo: (
-    <>
-      <span className="mr-2 hidden font-extrabold md:inline">Nextra</span>
-      <span className="hidden font-normal text-gray-600 md:inline">
-        The Next Docs Builder
-      </span>
-    </>
-  ),
-  head: () => (
+  font: false,
+  footer: {
+    component: Footer,
+    text: `MIT ${new Date().getFullYear()} © Nextra.`
+  },
+  gitTimestamp({ timestamp }) {
+    const { locale = DEFAULT_LOCALE } = useRouter()
+    return (
+      <>
+        Last updated on{' '}
+        {timestamp.toLocaleDateString(locale, {
+          day: 'numeric',
+          month: 'long',
+          year: 'numeric'
+        })}
+      </>
+    )
+  },
+  github: '',
+  head: (
     <>
       <meta name="msapplication-TileColor" content="#fff" />
       <meta httpEquiv="Content-Language" content="en" />
@@ -45,33 +74,92 @@ export const DEFAULT_THEME: DocsThemeConfig = {
       <meta name="apple-mobile-web-app-title" content="Nextra" />
     </>
   ),
-  searchPlaceholder() {
-    const { locale } = useRouter()
-    if (locale === 'zh-CN') return '搜索文档...'
-    return 'Search documentation...'
-  },
-  unstable_searchResultEmpty: (
-    <span className="block select-none p-8 text-center text-sm text-gray-400">
-      No results found.
-    </span>
+  i18n: [],
+  logo: (
+    <>
+      <span className="mr-2 hidden font-extrabold md:inline">Nextra</span>
+      <span className="hidden font-normal text-gray-600 md:inline">
+        The Next Docs Builder
+      </span>
+    </>
   ),
-  bannerKey: 'nextra-banner',
-  notFoundLink: 'Submit an issue about broken link →',
-  notFoundLabels: 'bug',
-  serverSideErrorLink: 'Submit an issue about error in url →',
-  serverSideErrorLabels: 'bug'
-  // direction: 'ltr',
-  // i18n: [{ locale: 'en-US', text: 'English', direction: 'ltr' }],
+  navigation: {
+    next: true,
+    prev: true
+  },
+  nextThemes: {
+    defaultTheme: 'system',
+    storageKey: 'theme'
+  },
+  notFound: {
+    labels: 'bug',
+    link: 'Submit an issue about broken link →'
+  },
+  project: {
+    icon: (
+      <>
+        <GitHubIcon />
+        <span className="sr-only">GitHub</span>
+      </>
+    ),
+    // by default should be empty so clicking on project link will go to the github link
+    link: ''
+  },
+  projectChat: {
+    icon: (
+      <>
+        <DiscordIcon />
+        <span className="sr-only">Discord</span>
+      </>
+    ),
+    link: ''
+  },
+  search: {
+    component({ className, directories }) {
+      const config = useConfig()
+      return config.unstable_flexsearch ? (
+        <Flexsearch className={className} />
+      ) : (
+        <MatchSorterSearch className={className} directories={directories} />
+      )
+    },
+    emptyResult: (
+      <span className="block select-none p-8 text-center text-sm text-gray-400">
+        No results found.
+      </span>
+    ),
+    placeholder() {
+      const { locale } = useRouter()
+      if (locale === 'zh-CN') return '搜索文档...'
+      return 'Search documentation...'
+    }
+  },
+  serverSideError: {
+    labels: 'bug',
+    link: 'Submit an issue about error in url →'
+  },
+  sidebar: {
+    defaultMenuCollapsed: false,
+    subtitle: null
+  },
+  titleSuffix: ' – Nextra',
+  toc: {
+    component: TOC,
+    extraContent: null,
+    float: true,
+    title: 'On This Page'
+  },
+  unstable_faviconGlyph: ''
 }
 
 export const DEFAULT_PAGE_THEME: PageTheme = {
+  breadcrumb: true,
+  footer: true,
+  layout: 'default',
   navbar: true,
+  pagination: true,
   sidebar: true,
+  timestamp: true,
   toc: true,
-  pagination: true,
-  footer: true,
-  layout: 'default',
-  typesetting: 'default',
-  breadcrumb: true,
-  timestamp: true
+  typesetting: 'default'
 }
diff --git a/packages/nextra-theme-docs/src/contexts/config.tsx b/packages/nextra-theme-docs/src/contexts/config.tsx
index 686a421db6..1caa64d7aa 100644
--- a/packages/nextra-theme-docs/src/contexts/config.tsx
+++ b/packages/nextra-theme-docs/src/contexts/config.tsx
@@ -14,16 +14,57 @@ import { MenuProvider } from './menu'
 type Config = DocsThemeConfig &
   Pick<
     PageOpts,
-    'unstable_flexsearch' | 'newNextLinkBehavior' | 'title' | 'meta'
+    'unstable_flexsearch' | 'newNextLinkBehavior' | 'title' | 'frontMatter'
   >
 
 const ConfigContext = createContext<Config>({
   title: '',
-  meta: {}
+  frontMatter: {},
+  ...DEFAULT_THEME
 })
 
 export const useConfig = () => useContext(ConfigContext)
 
+const DEEP_OBJECT_KEYS = [
+  'banner',
+  'feedback',
+  'footer',
+  'navigation',
+  'nextThemes',
+  'notFound',
+  'project',
+  'projectChat',
+  'search',
+  'serverSideError',
+  'sidebar',
+  'toc'
+] as const
+
+const LegacyOptions: Record<string, string> = {
+  projectLink: 'project.link',
+  projectLinkIcon: 'project.icon',
+  nextLinks: 'navigation.next',
+  prevLinks: 'navigation.prev',
+  defaultMenuCollapsed: 'sidebar.defaultMenuCollapsed',
+  footerText: 'footer.text',
+  footerEditLink: 'editLink.text',
+  floatTOC: 'toc.float',
+  feedbackLink: 'feedback.link',
+  feedbackLabels: 'feedback.labels',
+  customSearch: 'search.component',
+  searchPlaceholder: 'search.placeholder',
+  projectChatLink: 'projectChat.link',
+  projectChatLinkIcon: 'projectChat.icon',
+  sidebarSubtitle: 'sidebar.subtitle',
+  bannerKey: 'banner.key',
+  tocExtraContent: 'toc.extraContent',
+  unstable_searchResultEmpty: 'search.emptyResult',
+  notFoundLink: 'notFound.link',
+  notFoundLabels: 'notFound.labels',
+  serverSideErrorLink: 'serverSideError.link',
+  serverSideErrorLabels: 'serverSideError.labels'
+}
+
 export const ConfigProvider = ({
   children,
   value
@@ -33,15 +74,50 @@ export const ConfigProvider = ({
 }): ReactElement => {
   const [menu, setMenu] = useState(false)
   const { themeConfig, pageOpts } = value
-  const extendedConfig = {
+  const extendedConfig: Config = {
     ...DEFAULT_THEME,
     ...themeConfig,
     unstable_flexsearch: pageOpts.unstable_flexsearch,
     newNextLinkBehavior: pageOpts.newNextLinkBehavior,
     title: pageOpts.title,
-    meta: pageOpts.meta
+    frontMatter: pageOpts.frontMatter,
+    ...Object.fromEntries(
+      DEEP_OBJECT_KEYS.map(key => [
+        key,
+        { ...DEFAULT_THEME[key], ...themeConfig[key] }
+      ])
+    )
+  }
+
+  const { nextThemes } = extendedConfig
+
+  if (process.env.NODE_ENV === 'development') {
+    const notice =
+      '[nextra-theme-docs] ⚠️ You are using legacy theme config option'
+
+    for (const [legacyOption, newPath] of Object.entries(LegacyOptions)) {
+      if (legacyOption in themeConfig) {
+        const [obj, key] = newPath.split('.')
+        const renameTo = key ? `${obj}: { ${key}: ... }` : obj
+        console.warn(`${notice} "${legacyOption}". Rename it to ${renameTo}`)
+      }
+    }
+
+    for (const key of ['search', 'footer'] as const) {
+      if (key in themeConfig) {
+        const option = themeConfig[key]
+        if (typeof option === 'boolean' || option == null) {
+          console.warn(
+            `${notice} "${key}".`,
+            option ? 'Remove it' : `Rename it to ${key}: { component: null }`
+          )
+        }
+      }
+    }
+    if (typeof themeConfig.banner === 'string') {
+      console.warn(notice, '"banner". Rename it to banner: { text: ... }')
+    }
   }
-  const nextThemes = extendedConfig.nextThemes || {}
 
   return (
     <ThemeProvider
@@ -52,15 +128,7 @@ export const ConfigProvider = ({
       forcedTheme={nextThemes.forcedTheme}
     >
       <ConfigContext.Provider value={extendedConfig}>
-        <MenuProvider
-          value={{
-            menu,
-            setMenu,
-            defaultMenuCollapsed: !!extendedConfig.defaultMenuCollapsed
-          }}
-        >
-          {children}
-        </MenuProvider>
+        <MenuProvider value={{ menu, setMenu }}>{children}</MenuProvider>
       </ConfigContext.Provider>
     </ThemeProvider>
   )
diff --git a/packages/nextra-theme-docs/src/contexts/menu.ts b/packages/nextra-theme-docs/src/contexts/menu.ts
index 5c5ef24e42..53703b5e95 100644
--- a/packages/nextra-theme-docs/src/contexts/menu.ts
+++ b/packages/nextra-theme-docs/src/contexts/menu.ts
@@ -3,13 +3,11 @@ import { useContext, createContext, Dispatch, SetStateAction } from 'react'
 interface Menu {
   menu: boolean
   setMenu: Dispatch<SetStateAction<boolean>>
-  defaultMenuCollapsed: boolean
 }
 
 const MenuContext = createContext<Menu>({
   menu: false,
   setMenu: () => {},
-  defaultMenuCollapsed: true
 })
 
 export const useMenu = () => useContext(MenuContext)
diff --git a/packages/nextra-theme-docs/src/env.d.ts b/packages/nextra-theme-docs/src/env.d.ts
index 2bf90a1bcb..da3e88972e 100644
--- a/packages/nextra-theme-docs/src/env.d.ts
+++ b/packages/nextra-theme-docs/src/env.d.ts
@@ -6,3 +6,10 @@ declare module 'title' {
     }
   )
 }
+
+declare module globalThis {
+  import { Context } from './types'
+  var __nextra_pageContext__: {
+    [route: string]: Context
+  }
+}
diff --git a/packages/nextra-theme-docs/src/index.tsx b/packages/nextra-theme-docs/src/index.tsx
index 85cb112a93..fd04113a6f 100644
--- a/packages/nextra-theme-docs/src/index.tsx
+++ b/packages/nextra-theme-docs/src/index.tsx
@@ -13,10 +13,8 @@ import './polyfill'
 import {
   Head,
   Navbar,
-  Footer,
   NavLinks,
   Sidebar,
-  TOC,
   Breadcrumb,
   Banner
 } from './components'
@@ -29,7 +27,7 @@ import {
 } from './contexts'
 import { DEFAULT_LOCALE, IS_BROWSER } from './constants'
 import { getFSRoute, normalizePages, renderComponent } from './utils'
-import { Context, DocsThemeConfig, PageTheme } from './types'
+import { DocsThemeConfig, PageTheme, RecursivePartial } from './types'
 
 let resizeObserver: ResizeObserver
 if (IS_BROWSER) {
@@ -75,7 +73,6 @@ const Body = ({
 }: BodyProps): ReactElement => {
   const mainElement = useRef<HTMLElement>(null)
   const config = useConfig()
-  const { locale = DEFAULT_LOCALE } = useRouter()
 
   useEffect(() => {
     if (mainElement.current) {
@@ -98,13 +95,7 @@ const Body = ({
 
   const gitTimestampEl = date ? (
     <div className="pointer-default mt-12 mb-8 block ltr:text-right rtl:text-left text-xs text-gray-500 dark:text-gray-400">
-      {typeof config.gitTimestamp === 'string'
-        ? `${config.gitTimestamp} ${date.toLocaleDateString(locale, {
-            year: 'numeric',
-            month: 'long',
-            day: 'numeric'
-          })}`
-        : renderComponent(config.gitTimestamp, { timestamp: date })}
+      {renderComponent(config.gitTimestamp, { timestamp: date })}
     </div>
   ) : (
     <div className="mt-16" />
@@ -147,14 +138,14 @@ const Body = ({
 }
 
 const InnerLayout = ({
-  filename,
+  filePath,
   pageMap,
-  meta,
+  frontMatter,
   headings,
   timestamp,
   children
 }: PageOpts & { children: ReactNode }): ReactElement => {
-  const { route, locale = DEFAULT_LOCALE } = useRouter()
+  const { locale = DEFAULT_LOCALE } = useRouter()
   const config = useConfig()
   const { menu } = useMenu()
   const {
@@ -169,7 +160,7 @@ const InnerLayout = ({
     directories
   } = useDirectoryInfo(pageMap)
 
-  const localeConfig = config.i18n?.find(l => l.locale === locale)
+  const localeConfig = config.i18n.find(l => l.locale === locale)
   const isRTL = localeConfig
     ? localeConfig.direction === 'rtl'
     : config.direction === 'rtl'
@@ -181,26 +172,26 @@ const InnerLayout = ({
     document.documentElement.setAttribute('dir', direction)
   }, [])
 
-  const filepath = route.slice(0, route.lastIndexOf('/') + 1)
-  const themeContext = { ...activeThemeContext, ...meta }
+  const themeContext = { ...activeThemeContext, ...frontMatter }
   const hideSidebar = !themeContext.sidebar || themeContext.layout === 'raw'
   const asPopover = activeType === 'page' || hideSidebar
 
-  const tocClassName = 'nextra-toc order-last hidden w-64 flex-shrink-0 xl:block'
+  const tocClassName =
+    'nextra-toc order-last hidden w-64 flex-shrink-0 xl:block'
 
   const tocEl =
     activeType === 'page' ||
     !themeContext.toc ||
     themeContext.layout !== 'default' ? (
-      themeContext.layout === 'full' || themeContext.layout === 'raw' ? null : (
-        <div className={tocClassName} />
-      )
+      themeContext.layout !== 'full' &&
+      themeContext.layout !== 'raw' && <div className={tocClassName} />
     ) : (
-      <TOC
-        headings={config.floatTOC ? headings : []}
-        filepathWithName={filepath + filename}
-        className={tocClassName}
-      />
+      <div className={cn(tocClassName, 'mx-4')}>
+        {renderComponent(config.toc.component, {
+          headings: config.toc.float ? headings : [],
+          filePath
+        })}
+      </div>
     )
 
   return (
@@ -260,20 +251,18 @@ const InnerLayout = ({
           </Body>
         </ActiveAnchorProvider>
       </div>
-      {themeContext.footer && config.footer ? (
-        <Footer menu={asPopover} />
-      ) : null}
+      {themeContext.footer
+        ? renderComponent(config.footer.component, { menu: asPopover })
+        : null}
     </div>
   )
 }
 
-const nextraPageContext: Record<string, Context> = {}
-
-function Layout(props: any): ReactElement {
+export default function Layout(props: any): ReactElement {
   const { route } = useRouter()
-  const context = nextraPageContext[route]
-
+  const context = globalThis.__nextra_pageContext__[route]
   if (!context) throw new Error(`No content found for ${route}.`)
+
   const { pageOpts, Content } = context
   return (
     <ConfigProvider value={context}>
@@ -284,27 +273,10 @@ function Layout(props: any): ReactElement {
   )
 }
 
-// Make sure the same component is always returned so Next.js will render the
-// stable layout. We then put the actual content into a global store and use
-// the route to identify it.
-export default function withLayout(
-  route: string,
-  Content: FC,
-  pageOpts: PageOpts,
-  themeConfig: DocsThemeConfig
-) {
-  nextraPageContext[route] = {
-    Content,
-    pageOpts,
-    themeConfig
-  }
-
-  return Layout
-}
+type PartialDocsThemeConfig = RecursivePartial<DocsThemeConfig>
 
-export { useConfig, getComponents }
+export { useConfig, getComponents, PartialDocsThemeConfig as DocsThemeConfig }
 export { useTheme } from 'next-themes'
-export * from './types'
 export {
   Bleed,
   Callout,
diff --git a/packages/nextra-theme-docs/src/mdx-components.tsx b/packages/nextra-theme-docs/src/mdx-components.tsx
index 8e657e712e..6cd3b55155 100644
--- a/packages/nextra-theme-docs/src/mdx-components.tsx
+++ b/packages/nextra-theme-docs/src/mdx-components.tsx
@@ -14,6 +14,7 @@ import { Collapse, Anchor } from './components'
 import { IS_BROWSER } from './constants'
 import cn from 'clsx'
 import { DocsThemeConfig } from './types'
+import { Pre, Code } from 'nextra/components'
 
 let observer: IntersectionObserver
 let setActiveAnchor: ReturnType<typeof useSetActiveAnchor>
@@ -283,12 +284,10 @@ export const getComponents = ({
         {...props}
       />
     ),
-    code: (props: ComponentProps<'code'>) => (
-      // always show code blocks in ltr
-      <code dir="ltr" {...props} />
-    ),
     details: Details,
     summary: Summary,
+    pre: Pre,
+    code: Code,
     ...components
   }
 }
diff --git a/packages/nextra-theme-docs/src/types.ts b/packages/nextra-theme-docs/src/types.ts
index 770d013f15..b7838049f9 100644
--- a/packages/nextra-theme-docs/src/types.ts
+++ b/packages/nextra-theme-docs/src/types.ts
@@ -1,64 +1,112 @@
-import { FC, ReactElement, ReactNode } from 'react'
+/* eslint typescript-sort-keys/interface: error */
+import { FC, ReactNode } from 'react'
 import { ThemeProviderProps } from 'next-themes/dist/types'
 import { PageOpts } from 'nextra'
+import { Item } from './utils'
+import { TOCProps } from './components/toc'
+
+export type RecursivePartial<T> = {
+  [P in keyof T]?: T[P] extends (infer U)[]
+    ? RecursivePartial<U>[]
+    : T[P] extends FC // do not change properties for optional in FC type
+    ? T[P]
+    : T[P] extends object
+    ? RecursivePartial<T[P]>
+    : T[P]
+}
 
 export interface DocsThemeConfig {
-  components?: Record<string, FC>
-  projectLink?: string
-  github?: string
-  projectLinkIcon?: ReactNode | FC
-  docsRepositoryBase?: string
-  // Can't be React component, otherwise will get Warning: A title element received an array with more than 1 element as children.
-  titleSuffix?: string | (() => string)
-  nextLinks?: boolean
-  prevLinks?: boolean
-  search?: boolean
-  darkMode?: boolean
-  nextThemes?: Pick<
+  banner: {
+    key: string
+    text: ReactNode | FC
+  }
+  bodyExtraContent: ReactNode | FC
+  components: Record<string, FC>
+  darkMode: boolean
+  direction: 'ltr' | 'rtl'
+  docsRepositoryBase: string
+  editLink: {
+    component: FC<{
+      children: ReactNode
+      className?: string
+      filePath?: string
+    }>
+    text: ReactNode | FC
+  }
+  feedback: {
+    labels: string
+    link: ReactNode | FC
+  }
+  font: boolean
+  footer: {
+    component: ReactNode | FC<{ menu: boolean }>
+    text: ReactNode | FC
+  }
+  gitTimestamp: ReactNode | FC<{ timestamp: Date }>
+  github: string
+  head: ReactNode | FC
+  i18n: { direction?: string; locale: string; text: string }[]
+  logo: ReactNode | FC
+  navigation: {
+    next: boolean
+    prev: boolean
+  }
+  nextThemes: Pick<
     ThemeProviderProps,
     'defaultTheme' | 'storageKey' | 'forcedTheme'
   >
-  defaultMenuCollapsed?: boolean
-  font?: boolean
-  footer?: boolean
-  footerText?: ReactNode | FC
-  footerEditLink?: ReactNode | FC
-  logo?: ReactNode | FC
-  head?: ReactNode | FC
-  direction?: 'ltr' | 'rtl'
-  i18n?: { locale: string; text: string; direction?: string }[]
-  floatTOC?: boolean
-  unstable_faviconGlyph?: string
-  feedbackLink?: ReactNode | FC
-  feedbackLabels?: string
-  customSearch?: ReactNode | false
-  // Can't be React component
-  searchPlaceholder?: string | (() => string)
-  projectChatLink?: string
-  projectChatLinkIcon?: ReactNode | FC
-  sidebarSubtitle?: ReactNode | FC<{ title: string }>
-  banner?: ReactNode | FC
-  bannerKey?: string
-  gitTimestamp?: string | FC<{ timestamp: Date }>
-  tocExtraContent?: ReactNode | FC
-  unstable_searchResultEmpty?: ReactNode | FC
-  notFoundLink?: ReactNode | FC
-  notFoundLabels?: string
-  serverSideErrorLink?: ReactNode | FC
-  serverSideErrorLabels?: string
-  bodyExtraContent?: ReactNode | FC
+  notFound: {
+    labels: string
+    link: ReactNode | FC
+  }
+  project: {
+    icon: ReactNode | FC
+    link: string
+  }
+  projectChat: {
+    icon: ReactNode | FC
+    link: string
+  }
+  search: {
+    component:
+      | ReactNode
+      | FC<{
+          className?: string
+          directories: Item[]
+        }>
+    emptyResult: ReactNode | FC
+    // Can't be React component
+    placeholder: string | (() => string)
+  }
+  serverSideError: {
+    labels: string
+    link: ReactNode | FC
+  }
+  sidebar: {
+    defaultMenuCollapsed: boolean
+    subtitle: ReactNode | FC<{ title: string }>
+  }
+  // Can't be React component, otherwise will get Warning: A title element received an array with more than 1 element as children.
+  titleSuffix: string | (() => string)
+  toc: {
+    component: ReactNode | FC<TOCProps>
+    extraContent: ReactNode | FC
+    float: boolean
+    title: ReactNode | FC
+  }
+  unstable_faviconGlyph: string
 }
 
 export type PageTheme = {
+  breadcrumb: boolean
+  footer: boolean
+  layout: 'default' | 'full' | 'raw'
   navbar: boolean
+  pagination: boolean
   sidebar: boolean
+  timestamp: boolean
   toc: boolean
-  pagination: boolean
-  footer: boolean
-  layout: 'default' | 'full' | 'raw'
   typesetting: 'default' | 'article'
-  breadcrumb: boolean
-  timestamp: boolean
 }
 
 export type Context = {
@@ -68,8 +116,8 @@ export type Context = {
 }
 
 export type SearchResult = {
+  children: ReactNode
   id: string
-  route: string
   prefix?: ReactNode
-  children: ReactNode
+  route: string
 }
diff --git a/packages/nextra-theme-docs/src/utils/get-git-edit-url.ts b/packages/nextra-theme-docs/src/utils/get-git-edit-url.ts
new file mode 100644
index 0000000000..4488ec4ae6
--- /dev/null
+++ b/packages/nextra-theme-docs/src/utils/get-git-edit-url.ts
@@ -0,0 +1,19 @@
+import { useConfig } from '../contexts'
+import parseGitUrl from 'parse-git-url'
+
+export const getGitEditUrl = (filePath?: string): string => {
+  const config = useConfig()
+  const repo = parseGitUrl(config.docsRepositoryBase || '')
+  if (!repo) throw new Error('Invalid `docsRepositoryBase` URL!')
+
+  const subdir = repo.subdir ? `${repo.subdir}/` : ''
+  const path = `blob/${repo.branch || 'main'}/${subdir}${filePath}`
+
+  switch (repo.type) {
+    case 'github':
+      return `https://github.com/${repo.owner}/${repo.name}/${path}`
+    case 'gitlab':
+      return `https://gitlab.com/${repo.owner}/${repo.name}/-/${path}`
+  }
+  return ''
+}
diff --git a/packages/nextra-theme-docs/src/utils/index.ts b/packages/nextra-theme-docs/src/utils/index.ts
index 30c72ebbc1..5515a637e6 100644
--- a/packages/nextra-theme-docs/src/utils/index.ts
+++ b/packages/nextra-theme-docs/src/utils/index.ts
@@ -1,4 +1,5 @@
 export { getFSRoute } from './get-fs-route'
+export { getGitEditUrl } from './get-git-edit-url'
 export { getGitIssueUrl } from './get-git-issue-url'
 export { getHeadingText } from './get-heading-text'
 export { Item, PageItem, MenuItem, normalizePages } from './normalize-pages'
diff --git a/packages/nextra-theme-docs/src/utils/normalize-pages.ts b/packages/nextra-theme-docs/src/utils/normalize-pages.ts
index 49882306ad..7faa6a91fe 100644
--- a/packages/nextra-theme-docs/src/utils/normalize-pages.ts
+++ b/packages/nextra-theme-docs/src/utils/normalize-pages.ts
@@ -1,7 +1,8 @@
 import { PageMapItem } from 'nextra'
 import getTitle from 'title'
-import { DEFAULT_PAGE_THEME } from '../constants'
+import { DEFAULT_PAGE_THEME, META_FILENAME } from '../constants'
 import { PageTheme } from '../types'
+import { MdxFile, MetaJsonFile } from 'nextra/src/types'
 
 function extendMeta(
   meta: string | Record<string, any> = {},
@@ -14,7 +15,7 @@ function extendMeta(
   return Object.assign({}, fallback, meta, { theme })
 }
 
-export interface Item extends Omit<PageMapItem, 'children'> {
+export interface Item extends MdxFile {
   title: string
   type: string
   children?: Item[]
@@ -22,7 +23,7 @@ export interface Item extends Omit<PageMapItem, 'children'> {
   withIndexPage?: boolean
 }
 
-export interface PageItem extends Omit<PageMapItem, 'children'> {
+export interface PageItem extends MdxFile {
   title: string
   type: string
   href?: string
@@ -33,7 +34,7 @@ export interface PageItem extends Omit<PageMapItem, 'children'> {
   withIndexPage?: boolean
 }
 
-export interface MenuItem extends Omit<PageMapItem, 'children'> {
+export interface MenuItem extends MdxFile {
   title: string
   type: 'menu'
   hidden?: boolean
@@ -48,7 +49,7 @@ export interface MenuItem extends Omit<PageMapItem, 'children'> {
   >
 }
 
-interface DocsItem extends Omit<PageMapItem, 'children'> {
+interface DocsItem extends MdxFile {
   title: string
   type: string
   children?: DocsItem[]
@@ -87,8 +88,10 @@ export function normalizePages({
 }) {
   let _meta: Record<string, any> | undefined
   for (let item of list) {
-    if (item.name === 'meta.json') {
-      if (locale === item.locale) {
+    if (item.name === META_FILENAME) {
+      item = item as MetaJsonFile
+
+      if (item.locale === locale) {
         _meta = item.meta
         break
       }
@@ -133,15 +136,16 @@ export function normalizePages({
   delete fallbackMeta.title
   delete fallbackMeta.href
 
-  // Normalize items based on files and meta.json.
+  // Normalize items based on files and _meta.json.
   const items = list
     .filter(
       a =>
         // not meta
-        a.name !== 'meta.json' &&
+        a.name !== META_FILENAME &&
         // not hidden routes
         !a.name.startsWith('_') &&
         // locale matches, or fallback to default locale
+        // @ts-expect-error
         (a.locale === locale || a.locale === defaultLocale || !a.locale)
     )
     .sort((a, b) => {
diff --git a/packages/nextra-theme-docs/src/utils/render.tsx b/packages/nextra-theme-docs/src/utils/render.tsx
index 65228e2b45..4fb86e71de 100644
--- a/packages/nextra-theme-docs/src/utils/render.tsx
+++ b/packages/nextra-theme-docs/src/utils/render.tsx
@@ -1,11 +1,7 @@
 import React, { FC, ReactNode } from 'react'
 
-// Forbid to have `locale` prop
-// since it can be retrieved via `const { locale } = useRouter()` call
-type WithoutLocale<T> = T & { locale?: never }
-
 export function renderComponent<T>(
-  ComponentOrNode: FC<WithoutLocale<T>> | ReactNode,
+  ComponentOrNode: FC<T> | ReactNode,
   props?: T
 ) {
   if (!ComponentOrNode) return null
@@ -15,7 +11,7 @@ export function renderComponent<T>(
 }
 
 export function renderString<T>(
-  stringOrFunction?: string | ((props: WithoutLocale<T>) => string),
+  stringOrFunction?: string | ((props: T) => string),
   // @ts-expect-error TS2322: Type '{}' is not assignable to type 'T'.
   props: T = {}
 ): string {
diff --git a/packages/nextra-theme-docs/tailwind.config.js b/packages/nextra-theme-docs/tailwind.config.js
index a0c8eaa4bb..d1e5fc114b 100644
--- a/packages/nextra-theme-docs/tailwind.config.js
+++ b/packages/nextra-theme-docs/tailwind.config.js
@@ -10,7 +10,11 @@ const makePrimaryColor =
   }
 
 module.exports = {
-  content: ['./src/**/*.tsx', '../nextra/src/icons/*.tsx'],
+  content: [
+    './src/**/*.tsx',
+    '../nextra/src/icons/*.tsx',
+    '../nextra/src/components/*.tsx'
+  ],
   theme: {
     screens: {
       sm: '640px',
diff --git a/packages/nextra/__test__/__snapshots__/context.test.ts.snap b/packages/nextra/__test__/__snapshots__/context.test.ts.snap
new file mode 100644
index 0000000000..dcd34aca23
--- /dev/null
+++ b/packages/nextra/__test__/__snapshots__/context.test.ts.snap
@@ -0,0 +1,2893 @@
+// Vitest Snapshot v1
+
+exports[`context > getAllPages() > should work 1`] = `
+[
+  {
+    "meta": {
+      "theme": {
+        "timestamp": false,
+      },
+      "type": "page",
+    },
+    "name": "404",
+    "route": "/404",
+  },
+  {
+    "meta": {
+      "theme": {
+        "layout": "full",
+        "timestamp": false,
+      },
+      "type": "page",
+    },
+    "name": "500",
+    "route": "/500",
+  },
+  {
+    "frontMatter": {
+      "searchable": false,
+      "title": "React Hooks for Data Fetching",
+    },
+    "locale": "en-US",
+    "meta": {
+      "hidden": true,
+      "title": "Introduction",
+      "type": "page",
+    },
+    "name": "index",
+    "route": "/",
+  },
+  {
+    "frontMatter": {
+      "title": "Biblioteca React Hooks para la obtención de datos",
+    },
+    "locale": "es-ES",
+    "meta": {
+      "hidden": true,
+      "title": "Introduction",
+      "type": "page",
+    },
+    "name": "index",
+    "route": "/",
+  },
+  {
+    "frontMatter": {
+      "title": "データ取得のための React Hooks ライブラリ",
+    },
+    "locale": "ja",
+    "meta": {
+      "hidden": true,
+      "title": "Introduction",
+      "type": "page",
+    },
+    "name": "index",
+    "route": "/",
+  },
+  {
+    "frontMatter": {
+      "title": "데이터 가져오기를 위한 React Hooks",
+    },
+    "locale": "ko",
+    "meta": {
+      "hidden": true,
+      "title": "Introduction",
+      "type": "page",
+    },
+    "name": "index",
+    "route": "/",
+  },
+  {
+    "frontMatter": {
+      "title": "React хуки для получения данных",
+    },
+    "locale": "ru",
+    "meta": {
+      "hidden": true,
+      "title": "Introduction",
+      "type": "page",
+    },
+    "name": "index",
+    "route": "/",
+  },
+  {
+    "frontMatter": {
+      "title": "用于数据请求的 React Hooks 库",
+    },
+    "locale": "zh-CN",
+    "meta": {
+      "hidden": true,
+      "title": "Introduction",
+      "type": "page",
+    },
+    "name": "index",
+    "route": "/",
+  },
+  {
+    "children": [
+      {
+        "locale": "en-US",
+        "meta": {
+          "title": "Getting Started",
+        },
+        "name": "getting-started",
+        "route": "/docs/getting-started",
+      },
+      {
+        "locale": "es-ES",
+        "meta": {
+          "title": "Getting Started",
+        },
+        "name": "getting-started",
+        "route": "/docs/getting-started",
+      },
+      {
+        "locale": "ja",
+        "meta": {
+          "title": "Getting Started",
+        },
+        "name": "getting-started",
+        "route": "/docs/getting-started",
+      },
+      {
+        "locale": "ko",
+        "meta": {
+          "title": "Getting Started",
+        },
+        "name": "getting-started",
+        "route": "/docs/getting-started",
+      },
+      {
+        "locale": "ru",
+        "meta": {
+          "title": "Getting Started",
+        },
+        "name": "getting-started",
+        "route": "/docs/getting-started",
+      },
+      {
+        "locale": "zh-CN",
+        "meta": {
+          "title": "Getting Started",
+        },
+        "name": "getting-started",
+        "route": "/docs/getting-started",
+      },
+      {
+        "locale": "en-US",
+        "meta": {
+          "title": "Options",
+        },
+        "name": "options",
+        "route": "/docs/options",
+      },
+      {
+        "locale": "es-ES",
+        "meta": {
+          "title": "Options",
+        },
+        "name": "options",
+        "route": "/docs/options",
+      },
+      {
+        "locale": "ja",
+        "meta": {
+          "title": "Options",
+        },
+        "name": "options",
+        "route": "/docs/options",
+      },
+      {
+        "locale": "ko",
+        "meta": {
+          "title": "Options",
+        },
+        "name": "options",
+        "route": "/docs/options",
+      },
+      {
+        "locale": "ru",
+        "meta": {
+          "title": "Options",
+        },
+        "name": "options",
+        "route": "/docs/options",
+      },
+      {
+        "locale": "zh-CN",
+        "meta": {
+          "title": "Options",
+        },
+        "name": "options",
+        "route": "/docs/options",
+      },
+      {
+        "locale": "en-US",
+        "meta": {
+          "title": "Global Configuration",
+        },
+        "name": "global-configuration",
+        "route": "/docs/global-configuration",
+      },
+      {
+        "locale": "es-ES",
+        "meta": {
+          "title": "Global Configuration",
+        },
+        "name": "global-configuration",
+        "route": "/docs/global-configuration",
+      },
+      {
+        "locale": "ja",
+        "meta": {
+          "title": "Global Configuration",
+        },
+        "name": "global-configuration",
+        "route": "/docs/global-configuration",
+      },
+      {
+        "locale": "ko",
+        "meta": {
+          "title": "Global Configuration",
+        },
+        "name": "global-configuration",
+        "route": "/docs/global-configuration",
+      },
+      {
+        "locale": "ru",
+        "meta": {
+          "title": "Global Configuration",
+        },
+        "name": "global-configuration",
+        "route": "/docs/global-configuration",
+      },
+      {
+        "locale": "zh-CN",
+        "meta": {
+          "title": "Global Configuration",
+        },
+        "name": "global-configuration",
+        "route": "/docs/global-configuration",
+      },
+      {
+        "locale": "en-US",
+        "meta": {
+          "title": "Data Fetching",
+        },
+        "name": "data-fetching",
+        "route": "/docs/data-fetching",
+      },
+      {
+        "locale": "es-ES",
+        "meta": {
+          "title": "Data Fetching",
+        },
+        "name": "data-fetching",
+        "route": "/docs/data-fetching",
+      },
+      {
+        "locale": "ja",
+        "meta": {
+          "title": "Data Fetching",
+        },
+        "name": "data-fetching",
+        "route": "/docs/data-fetching",
+      },
+      {
+        "locale": "ko",
+        "meta": {
+          "title": "Data Fetching",
+        },
+        "name": "data-fetching",
+        "route": "/docs/data-fetching",
+      },
+      {
+        "locale": "ru",
+        "meta": {
+          "title": "Data Fetching",
+        },
+        "name": "data-fetching",
+        "route": "/docs/data-fetching",
+      },
+      {
+        "locale": "zh-CN",
+        "meta": {
+          "title": "Data Fetching",
+        },
+        "name": "data-fetching",
+        "route": "/docs/data-fetching",
+      },
+      {
+        "locale": "en-US",
+        "meta": {
+          "hidden": true,
+          "title": "Error Handling",
+        },
+        "name": "error-handling",
+        "route": "/docs/error-handling",
+      },
+      {
+        "locale": "es-ES",
+        "meta": {
+          "hidden": true,
+          "title": "Error Handling",
+        },
+        "name": "error-handling",
+        "route": "/docs/error-handling",
+      },
+      {
+        "locale": "ja",
+        "meta": {
+          "hidden": true,
+          "title": "Error Handling",
+        },
+        "name": "error-handling",
+        "route": "/docs/error-handling",
+      },
+      {
+        "locale": "ko",
+        "meta": {
+          "hidden": true,
+          "title": "Error Handling",
+        },
+        "name": "error-handling",
+        "route": "/docs/error-handling",
+      },
+      {
+        "locale": "ru",
+        "meta": {
+          "hidden": true,
+          "title": "Error Handling",
+        },
+        "name": "error-handling",
+        "route": "/docs/error-handling",
+      },
+      {
+        "locale": "zh-CN",
+        "meta": {
+          "hidden": true,
+          "title": "Error Handling",
+        },
+        "name": "error-handling",
+        "route": "/docs/error-handling",
+      },
+      {
+        "locale": "en-US",
+        "meta": {
+          "title": "Auto Revalidation",
+        },
+        "name": "revalidation",
+        "route": "/docs/revalidation",
+      },
+      {
+        "locale": "es-ES",
+        "meta": {
+          "title": "Auto Revalidation",
+        },
+        "name": "revalidation",
+        "route": "/docs/revalidation",
+      },
+      {
+        "locale": "ja",
+        "meta": {
+          "title": "Auto Revalidation",
+        },
+        "name": "revalidation",
+        "route": "/docs/revalidation",
+      },
+      {
+        "locale": "ko",
+        "meta": {
+          "title": "Auto Revalidation",
+        },
+        "name": "revalidation",
+        "route": "/docs/revalidation",
+      },
+      {
+        "locale": "ru",
+        "meta": {
+          "title": "Auto Revalidation",
+        },
+        "name": "revalidation",
+        "route": "/docs/revalidation",
+      },
+      {
+        "locale": "zh-CN",
+        "meta": {
+          "title": "Auto Revalidation",
+        },
+        "name": "revalidation",
+        "route": "/docs/revalidation",
+      },
+      {
+        "locale": "en-US",
+        "meta": {
+          "title": "Conditional Data Fetching",
+        },
+        "name": "conditional-fetching",
+        "route": "/docs/conditional-fetching",
+      },
+      {
+        "locale": "es-ES",
+        "meta": {
+          "title": "Conditional Data Fetching",
+        },
+        "name": "conditional-fetching",
+        "route": "/docs/conditional-fetching",
+      },
+      {
+        "locale": "ja",
+        "meta": {
+          "title": "Conditional Data Fetching",
+        },
+        "name": "conditional-fetching",
+        "route": "/docs/conditional-fetching",
+      },
+      {
+        "locale": "ko",
+        "meta": {
+          "title": "Conditional Data Fetching",
+        },
+        "name": "conditional-fetching",
+        "route": "/docs/conditional-fetching",
+      },
+      {
+        "locale": "ru",
+        "meta": {
+          "title": "Conditional Data Fetching",
+        },
+        "name": "conditional-fetching",
+        "route": "/docs/conditional-fetching",
+      },
+      {
+        "locale": "zh-CN",
+        "meta": {
+          "title": "Conditional Data Fetching",
+        },
+        "name": "conditional-fetching",
+        "route": "/docs/conditional-fetching",
+      },
+      {
+        "locale": "en-US",
+        "meta": {
+          "title": "Arguments",
+        },
+        "name": "arguments",
+        "route": "/docs/arguments",
+      },
+      {
+        "locale": "es-ES",
+        "meta": {
+          "title": "Arguments",
+        },
+        "name": "arguments",
+        "route": "/docs/arguments",
+      },
+      {
+        "locale": "ja",
+        "meta": {
+          "title": "Arguments",
+        },
+        "name": "arguments",
+        "route": "/docs/arguments",
+      },
+      {
+        "locale": "ko",
+        "meta": {
+          "title": "Arguments",
+        },
+        "name": "arguments",
+        "route": "/docs/arguments",
+      },
+      {
+        "locale": "ru",
+        "meta": {
+          "title": "Arguments",
+        },
+        "name": "arguments",
+        "route": "/docs/arguments",
+      },
+      {
+        "locale": "zh-CN",
+        "meta": {
+          "title": "Arguments",
+        },
+        "name": "arguments",
+        "route": "/docs/arguments",
+      },
+      {
+        "locale": "en-US",
+        "meta": {
+          "title": "Mutation",
+        },
+        "name": "mutation",
+        "route": "/docs/mutation",
+      },
+      {
+        "locale": "es-ES",
+        "meta": {
+          "title": "Mutation",
+        },
+        "name": "mutation",
+        "route": "/docs/mutation",
+      },
+      {
+        "locale": "ja",
+        "meta": {
+          "title": "Mutation",
+        },
+        "name": "mutation",
+        "route": "/docs/mutation",
+      },
+      {
+        "locale": "ko",
+        "meta": {
+          "title": "Mutation",
+        },
+        "name": "mutation",
+        "route": "/docs/mutation",
+      },
+      {
+        "locale": "ru",
+        "meta": {
+          "title": "Mutation",
+        },
+        "name": "mutation",
+        "route": "/docs/mutation",
+      },
+      {
+        "locale": "zh-CN",
+        "meta": {
+          "title": "Mutation",
+        },
+        "name": "mutation",
+        "route": "/docs/mutation",
+      },
+      {
+        "locale": "en-US",
+        "meta": {
+          "title": "Pagination",
+        },
+        "name": "pagination",
+        "route": "/docs/pagination",
+      },
+      {
+        "locale": "es-ES",
+        "meta": {
+          "title": "Pagination",
+        },
+        "name": "pagination",
+        "route": "/docs/pagination",
+      },
+      {
+        "locale": "ja",
+        "meta": {
+          "title": "Pagination",
+        },
+        "name": "pagination",
+        "route": "/docs/pagination",
+      },
+      {
+        "locale": "ko",
+        "meta": {
+          "title": "Pagination",
+        },
+        "name": "pagination",
+        "route": "/docs/pagination",
+      },
+      {
+        "locale": "ru",
+        "meta": {
+          "title": "Pagination",
+        },
+        "name": "pagination",
+        "route": "/docs/pagination",
+      },
+      {
+        "locale": "zh-CN",
+        "meta": {
+          "title": "Pagination",
+        },
+        "name": "pagination",
+        "route": "/docs/pagination",
+      },
+      {
+        "locale": "en-US",
+        "meta": {
+          "title": "Prefetching",
+        },
+        "name": "prefetching",
+        "route": "/docs/prefetching",
+      },
+      {
+        "locale": "es-ES",
+        "meta": {
+          "title": "Prefetching",
+        },
+        "name": "prefetching",
+        "route": "/docs/prefetching",
+      },
+      {
+        "locale": "ja",
+        "meta": {
+          "title": "Prefetching",
+        },
+        "name": "prefetching",
+        "route": "/docs/prefetching",
+      },
+      {
+        "locale": "ko",
+        "meta": {
+          "title": "Prefetching",
+        },
+        "name": "prefetching",
+        "route": "/docs/prefetching",
+      },
+      {
+        "locale": "ru",
+        "meta": {
+          "title": "Prefetching",
+        },
+        "name": "prefetching",
+        "route": "/docs/prefetching",
+      },
+      {
+        "locale": "zh-CN",
+        "meta": {
+          "title": "Prefetching",
+        },
+        "name": "prefetching",
+        "route": "/docs/prefetching",
+      },
+      {
+        "locale": "en-US",
+        "meta": {
+          "title": "Next.js SSG and SSR",
+        },
+        "name": "with-nextjs",
+        "route": "/docs/with-nextjs",
+      },
+      {
+        "locale": "es-ES",
+        "meta": {
+          "title": "Next.js SSG and SSR",
+        },
+        "name": "with-nextjs",
+        "route": "/docs/with-nextjs",
+      },
+      {
+        "locale": "ja",
+        "meta": {
+          "title": "Next.js SSG and SSR",
+        },
+        "name": "with-nextjs",
+        "route": "/docs/with-nextjs",
+      },
+      {
+        "locale": "ko",
+        "meta": {
+          "title": "Next.js SSG and SSR",
+        },
+        "name": "with-nextjs",
+        "route": "/docs/with-nextjs",
+      },
+      {
+        "locale": "ru",
+        "meta": {
+          "title": "Next.js SSG and SSR",
+        },
+        "name": "with-nextjs",
+        "route": "/docs/with-nextjs",
+      },
+      {
+        "locale": "zh-CN",
+        "meta": {
+          "title": "Next.js SSG and SSR",
+        },
+        "name": "with-nextjs",
+        "route": "/docs/with-nextjs",
+      },
+      {
+        "locale": "en-US",
+        "meta": {
+          "title": "TypeScript :)",
+        },
+        "name": "typescript",
+        "route": "/docs/typescript",
+      },
+      {
+        "locale": "en-US",
+        "meta": {
+          "title": "Suspense",
+        },
+        "name": "suspense",
+        "route": "/docs/suspense",
+      },
+      {
+        "locale": "es-ES",
+        "meta": {
+          "title": "Suspense",
+        },
+        "name": "suspense",
+        "route": "/docs/suspense",
+      },
+      {
+        "locale": "ja",
+        "meta": {
+          "title": "Suspense",
+        },
+        "name": "suspense",
+        "route": "/docs/suspense",
+      },
+      {
+        "locale": "ko",
+        "meta": {
+          "title": "Suspense",
+        },
+        "name": "suspense",
+        "route": "/docs/suspense",
+      },
+      {
+        "locale": "ru",
+        "meta": {
+          "title": "Suspense",
+        },
+        "name": "suspense",
+        "route": "/docs/suspense",
+      },
+      {
+        "locale": "zh-CN",
+        "meta": {
+          "title": "Suspense",
+        },
+        "name": "suspense",
+        "route": "/docs/suspense",
+      },
+      {
+        "locale": "en-US",
+        "meta": {
+          "title": "Middleware",
+        },
+        "name": "middleware",
+        "route": "/docs/middleware",
+      },
+      {
+        "locale": "ja",
+        "meta": {
+          "title": "Middleware",
+        },
+        "name": "middleware",
+        "route": "/docs/middleware",
+      },
+      {
+        "locale": "ko",
+        "meta": {
+          "title": "Middleware",
+        },
+        "name": "middleware",
+        "route": "/docs/middleware",
+      },
+      {
+        "locale": "ru",
+        "meta": {
+          "title": "Middleware",
+        },
+        "name": "middleware",
+        "route": "/docs/middleware",
+      },
+      {
+        "locale": "zh-CN",
+        "meta": {
+          "title": "Middleware",
+        },
+        "name": "middleware",
+        "route": "/docs/middleware",
+      },
+      {
+        "children": [
+          {
+            "locale": "en-US",
+            "meta": {
+              "title": "Cache",
+            },
+            "name": "cache",
+            "route": "/docs/advanced/cache",
+          },
+          {
+            "locale": "ja",
+            "meta": {
+              "title": "Cache",
+            },
+            "name": "cache",
+            "route": "/docs/advanced/cache",
+          },
+          {
+            "locale": "ko",
+            "meta": {
+              "title": "Cache",
+            },
+            "name": "cache",
+            "route": "/docs/advanced/cache",
+          },
+          {
+            "locale": "ru",
+            "meta": {
+              "title": "Cache",
+            },
+            "name": "cache",
+            "route": "/docs/advanced/cache",
+          },
+          {
+            "locale": "zh-CN",
+            "meta": {
+              "title": "Cache",
+            },
+            "name": "cache",
+            "route": "/docs/advanced/cache",
+          },
+          {
+            "locale": "en-US",
+            "meta": {
+              "title": "Performance",
+            },
+            "name": "performance",
+            "route": "/docs/advanced/performance",
+          },
+          {
+            "locale": "es-ES",
+            "meta": {
+              "title": "Performance",
+            },
+            "name": "performance",
+            "route": "/docs/advanced/performance",
+          },
+          {
+            "locale": "ja",
+            "meta": {
+              "title": "Performance",
+            },
+            "name": "performance",
+            "route": "/docs/advanced/performance",
+          },
+          {
+            "locale": "ko",
+            "meta": {
+              "title": "Performance",
+            },
+            "name": "performance",
+            "route": "/docs/advanced/performance",
+          },
+          {
+            "locale": "ru",
+            "meta": {
+              "title": "Performance",
+            },
+            "name": "performance",
+            "route": "/docs/advanced/performance",
+          },
+          {
+            "locale": "zh-CN",
+            "meta": {
+              "title": "Performance",
+            },
+            "name": "performance",
+            "route": "/docs/advanced/performance",
+          },
+          {
+            "locale": "en-US",
+            "meta": {
+              "title": "React Native",
+            },
+            "name": "react-native",
+            "route": "/docs/advanced/react-native",
+          },
+          {
+            "locale": "ja",
+            "meta": {
+              "title": "React Native",
+            },
+            "name": "react-native",
+            "route": "/docs/advanced/react-native",
+          },
+          {
+            "locale": "ko",
+            "meta": {
+              "title": "React Native",
+            },
+            "name": "react-native",
+            "route": "/docs/advanced/react-native",
+          },
+          {
+            "locale": "ru",
+            "meta": {
+              "title": "React Native",
+            },
+            "name": "react-native",
+            "route": "/docs/advanced/react-native",
+          },
+          {
+            "locale": "zh-CN",
+            "meta": {
+              "title": "React Native",
+            },
+            "name": "react-native",
+            "route": "/docs/advanced/react-native",
+          },
+          {
+            "locale": "en-US",
+            "meta": {
+              "title": "Markdown import",
+            },
+            "name": "markdown-import",
+            "route": "/docs/advanced/markdown-import",
+          },
+          {
+            "children": [
+              {
+                "locale": "en-US",
+                "meta": undefined,
+                "name": "loooooooooooooooooooong-title",
+                "route": "/docs/advanced/more/loooooooooooooooooooong-title",
+              },
+            ],
+            "meta": {
+              "title": "More: A Super Super Super Super Long Directory",
+            },
+            "name": "more",
+            "route": "/docs/advanced/more",
+          },
+          {
+            "locale": "en-US",
+            "meta": {
+              "title": "Filenames with dots",
+            },
+            "name": "file-name.with.DOTS",
+            "route": "/docs/advanced/file-name.with.DOTS",
+          },
+          {
+            "locale": "es-ES",
+            "meta": {
+              "title": "Filenames with dots",
+            },
+            "name": "file-name.with.DOTS",
+            "route": "/docs/advanced/file-name.with.DOTS",
+          },
+          {
+            "locale": "ja",
+            "meta": {
+              "title": "Filenames with dots",
+            },
+            "name": "file-name.with.DOTS",
+            "route": "/docs/advanced/file-name.with.DOTS",
+          },
+          {
+            "locale": "ko",
+            "meta": {
+              "title": "Filenames with dots",
+            },
+            "name": "file-name.with.DOTS",
+            "route": "/docs/advanced/file-name.with.DOTS",
+          },
+          {
+            "locale": "ru",
+            "meta": {
+              "title": "Filenames with dots",
+            },
+            "name": "file-name.with.DOTS",
+            "route": "/docs/advanced/file-name.with.DOTS",
+          },
+          {
+            "locale": "zh-CN",
+            "meta": {
+              "title": "Filenames with dots",
+            },
+            "name": "file-name.with.DOTS",
+            "route": "/docs/advanced/file-name.with.DOTS",
+          },
+          {
+            "locale": "en-US",
+            "meta": {
+              "title": "Code highlighting",
+            },
+            "name": "code-highlighting",
+            "route": "/docs/advanced/code-highlighting",
+          },
+        ],
+        "meta": {
+          "title": "Advanced",
+        },
+        "name": "advanced",
+        "route": "/docs/advanced",
+      },
+      {
+        "locale": "en-US",
+        "meta": {
+          "title": "Advanced",
+        },
+        "name": "advanced",
+        "route": "/docs/advanced",
+      },
+      {
+        "locale": "en-US",
+        "meta": {
+          "theme": {
+            "sidebar": false,
+          },
+          "title": "Change Log",
+        },
+        "name": "change-log",
+        "route": "/docs/change-log",
+      },
+      {
+        "locale": "es-ES",
+        "meta": {
+          "theme": {
+            "sidebar": false,
+          },
+          "title": "Change Log",
+        },
+        "name": "change-log",
+        "route": "/docs/change-log",
+      },
+      {
+        "locale": "ja",
+        "meta": {
+          "theme": {
+            "sidebar": false,
+          },
+          "title": "Change Log",
+        },
+        "name": "change-log",
+        "route": "/docs/change-log",
+      },
+      {
+        "locale": "ko",
+        "meta": {
+          "theme": {
+            "sidebar": false,
+          },
+          "title": "Change Log",
+        },
+        "name": "change-log",
+        "route": "/docs/change-log",
+      },
+      {
+        "locale": "ru",
+        "meta": {
+          "theme": {
+            "sidebar": false,
+          },
+          "title": "Change Log",
+        },
+        "name": "change-log",
+        "route": "/docs/change-log",
+      },
+      {
+        "locale": "zh-CN",
+        "meta": {
+          "theme": {
+            "sidebar": false,
+          },
+          "title": "Change Log",
+        },
+        "name": "change-log",
+        "route": "/docs/change-log",
+      },
+      {
+        "locale": "en-US",
+        "meta": {
+          "title": "Scroll With Dynamic Height",
+        },
+        "name": "scroll-with-dynamic-height",
+        "route": "/docs/scroll-with-dynamic-height",
+      },
+      {
+        "locale": "es-ES",
+        "meta": {
+          "title": "Scroll With Dynamic Height",
+        },
+        "name": "scroll-with-dynamic-height",
+        "route": "/docs/scroll-with-dynamic-height",
+      },
+      {
+        "locale": "ja",
+        "meta": {
+          "title": "Scroll With Dynamic Height",
+        },
+        "name": "scroll-with-dynamic-height",
+        "route": "/docs/scroll-with-dynamic-height",
+      },
+      {
+        "locale": "ko",
+        "meta": {
+          "title": "Scroll With Dynamic Height",
+        },
+        "name": "scroll-with-dynamic-height",
+        "route": "/docs/scroll-with-dynamic-height",
+      },
+      {
+        "locale": "ru",
+        "meta": {
+          "title": "Scroll With Dynamic Height",
+        },
+        "name": "scroll-with-dynamic-height",
+        "route": "/docs/scroll-with-dynamic-height",
+      },
+      {
+        "locale": "zh-CN",
+        "meta": {
+          "title": "Scroll With Dynamic Height",
+        },
+        "name": "scroll-with-dynamic-height",
+        "route": "/docs/scroll-with-dynamic-height",
+      },
+      {
+        "locale": "en-US",
+        "meta": {
+          "title": "404/500 Custom Error Pages",
+        },
+        "name": "404-500",
+        "route": "/docs/404-500",
+      },
+      {
+        "locale": "en-US",
+        "meta": {
+          "theme": {
+            "layout": "raw",
+          },
+          "title": "Raw Layout",
+        },
+        "name": "raw-layout",
+        "route": "/docs/raw-layout",
+      },
+    ],
+    "meta": {
+      "theme": {
+        "toc": true,
+      },
+      "title": "Docs",
+      "type": "page",
+    },
+    "name": "docs",
+    "route": "/docs",
+  },
+  {
+    "children": [
+      {
+        "locale": "en-US",
+        "meta": {
+          "title": "👥 Team",
+        },
+        "name": "team",
+        "route": "/about/team",
+      },
+      {
+        "locale": "en-US",
+        "meta": {
+          "title": "🧩 Acknowledgement",
+        },
+        "name": "acknowledgement",
+        "route": "/about/acknowledgement",
+      },
+      {
+        "locale": "en-US",
+        "meta": {
+          "hidden": true,
+          "theme": {
+            "layout": "raw",
+          },
+          "title": "A Page",
+          "type": "page",
+        },
+        "name": "a-page",
+        "route": "/about/a-page",
+      },
+    ],
+    "meta": {
+      "items": {
+        "a-page": {
+          "title": "A Page",
+        },
+        "acknowledgement": {
+          "title": "Acknowledgement",
+        },
+        "contributors": {
+          "href": "https://github.com/vercel/swr/graphs/contributors",
+          "newWindow": true,
+          "title": "Contributors",
+        },
+        "team": {
+          "title": "Team",
+        },
+      },
+      "title": "About",
+      "type": "menu",
+    },
+    "name": "about",
+    "route": "/about",
+  },
+  {
+    "children": [
+      {
+        "frontMatter": {
+          "full": true,
+          "title": "Basic Usage",
+        },
+        "locale": "en-US",
+        "meta": {
+          "title": "Basic Usage",
+        },
+        "name": "basic",
+        "route": "/examples/basic",
+      },
+      {
+        "frontMatter": {
+          "full": true,
+          "title": "Uso Básico",
+        },
+        "locale": "es-ES",
+        "meta": {
+          "title": "Basic Usage",
+        },
+        "name": "basic",
+        "route": "/examples/basic",
+      },
+      {
+        "frontMatter": {
+          "full": true,
+          "title": "基本的な使用法",
+        },
+        "locale": "ja",
+        "meta": {
+          "title": "Basic Usage",
+        },
+        "name": "basic",
+        "route": "/examples/basic",
+      },
+      {
+        "frontMatter": {
+          "full": true,
+          "title": "기본 사용법",
+        },
+        "locale": "ko",
+        "meta": {
+          "title": "Basic Usage",
+        },
+        "name": "basic",
+        "route": "/examples/basic",
+      },
+      {
+        "frontMatter": {
+          "full": true,
+          "title": "Основное использование",
+        },
+        "locale": "ru",
+        "meta": {
+          "title": "Basic Usage",
+        },
+        "name": "basic",
+        "route": "/examples/basic",
+      },
+      {
+        "frontMatter": {
+          "full": true,
+          "title": "基本用法",
+        },
+        "locale": "zh-CN",
+        "meta": {
+          "title": "Basic Usage",
+        },
+        "name": "basic",
+        "route": "/examples/basic",
+      },
+      {
+        "frontMatter": {
+          "full": true,
+          "title": "Authentication",
+        },
+        "locale": "en-US",
+        "meta": {
+          "title": "Authentication",
+        },
+        "name": "auth",
+        "route": "/examples/auth",
+      },
+      {
+        "frontMatter": {
+          "full": true,
+          "title": "Autenticación",
+        },
+        "locale": "es-ES",
+        "meta": {
+          "title": "Authentication",
+        },
+        "name": "auth",
+        "route": "/examples/auth",
+      },
+      {
+        "frontMatter": {
+          "full": true,
+          "title": "認証",
+        },
+        "locale": "ja",
+        "meta": {
+          "title": "Authentication",
+        },
+        "name": "auth",
+        "route": "/examples/auth",
+      },
+      {
+        "frontMatter": {
+          "full": true,
+          "title": "인증",
+        },
+        "locale": "ko",
+        "meta": {
+          "title": "Authentication",
+        },
+        "name": "auth",
+        "route": "/examples/auth",
+      },
+      {
+        "frontMatter": {
+          "full": true,
+          "title": "Аутентификация",
+        },
+        "locale": "ru",
+        "meta": {
+          "title": "Authentication",
+        },
+        "name": "auth",
+        "route": "/examples/auth",
+      },
+      {
+        "frontMatter": {
+          "full": true,
+          "title": "身份验证",
+        },
+        "locale": "zh-CN",
+        "meta": {
+          "title": "Authentication",
+        },
+        "name": "auth",
+        "route": "/examples/auth",
+      },
+      {
+        "frontMatter": {
+          "full": true,
+          "title": "Infinite Loading",
+        },
+        "locale": "en-US",
+        "meta": {
+          "title": "Infinite Loading",
+        },
+        "name": "infinite-loading",
+        "route": "/examples/infinite-loading",
+      },
+      {
+        "frontMatter": {
+          "full": true,
+          "title": "Carga Infinita",
+        },
+        "locale": "es-ES",
+        "meta": {
+          "title": "Infinite Loading",
+        },
+        "name": "infinite-loading",
+        "route": "/examples/infinite-loading",
+      },
+      {
+        "frontMatter": {
+          "full": true,
+          "title": "無限ローディング",
+        },
+        "locale": "ja",
+        "meta": {
+          "title": "Infinite Loading",
+        },
+        "name": "infinite-loading",
+        "route": "/examples/infinite-loading",
+      },
+      {
+        "frontMatter": {
+          "full": true,
+          "title": "인피니트 로딩",
+        },
+        "locale": "ko",
+        "meta": {
+          "title": "Infinite Loading",
+        },
+        "name": "infinite-loading",
+        "route": "/examples/infinite-loading",
+      },
+      {
+        "frontMatter": {
+          "full": true,
+          "title": "Бесконечная загрузка",
+        },
+        "locale": "ru",
+        "meta": {
+          "title": "Infinite Loading",
+        },
+        "name": "infinite-loading",
+        "route": "/examples/infinite-loading",
+      },
+      {
+        "frontMatter": {
+          "full": true,
+          "title": "无限加载",
+        },
+        "locale": "zh-CN",
+        "meta": {
+          "title": "Infinite Loading",
+        },
+        "name": "infinite-loading",
+        "route": "/examples/infinite-loading",
+      },
+      {
+        "frontMatter": {
+          "full": true,
+          "title": "Error Handling",
+        },
+        "locale": "en-US",
+        "meta": {
+          "title": "Error Handling",
+        },
+        "name": "error-handling",
+        "route": "/examples/error-handling",
+      },
+      {
+        "frontMatter": {
+          "full": true,
+          "title": "Manejo De Errores",
+        },
+        "locale": "es-ES",
+        "meta": {
+          "title": "Error Handling",
+        },
+        "name": "error-handling",
+        "route": "/examples/error-handling",
+      },
+      {
+        "frontMatter": {
+          "full": true,
+          "title": "エラーハンドリング",
+        },
+        "locale": "ja",
+        "meta": {
+          "title": "Error Handling",
+        },
+        "name": "error-handling",
+        "route": "/examples/error-handling",
+      },
+      {
+        "frontMatter": {
+          "full": true,
+          "title": "에러 처리",
+        },
+        "locale": "ko",
+        "meta": {
+          "title": "Error Handling",
+        },
+        "name": "error-handling",
+        "route": "/examples/error-handling",
+      },
+      {
+        "frontMatter": {
+          "full": true,
+          "title": "Обработка ошибок",
+        },
+        "locale": "ru",
+        "meta": {
+          "title": "Error Handling",
+        },
+        "name": "error-handling",
+        "route": "/examples/error-handling",
+      },
+      {
+        "frontMatter": {
+          "full": true,
+          "title": "错误处理",
+        },
+        "locale": "zh-CN",
+        "meta": {
+          "title": "Error Handling",
+        },
+        "name": "error-handling",
+        "route": "/examples/error-handling",
+      },
+      {
+        "frontMatter": {
+          "full": true,
+          "title": "Next.js SSR",
+        },
+        "locale": "en-US",
+        "meta": {
+          "title": "Next.js SSR",
+        },
+        "name": "ssr",
+        "route": "/examples/ssr",
+      },
+      {
+        "frontMatter": {
+          "full": true,
+          "title": "Next.js SSR",
+        },
+        "locale": "ru",
+        "meta": {
+          "title": "Next.js SSR",
+        },
+        "name": "ssr",
+        "route": "/examples/ssr",
+      },
+      {
+        "locale": "en-US",
+        "meta": {
+          "theme": {
+            "layout": "raw",
+          },
+          "title": "Full",
+        },
+        "name": "full",
+        "route": "/examples/full",
+      },
+    ],
+    "meta": {
+      "theme": {
+        "layout": "full",
+      },
+      "title": "Examples",
+      "type": "page",
+    },
+    "name": "examples",
+    "route": "/examples",
+  },
+  {
+    "children": [
+      {
+        "frontMatter": {
+          "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.",
+          "image": "https://assets.vercel.com/image/upload/v1630059453/swr/v1.png",
+        },
+        "locale": "en-US",
+        "meta": {
+          "theme": {
+            "breadcrumb": true,
+          },
+          "title": "Announcing SWR 1.0",
+        },
+        "name": "swr-v1",
+        "route": "/blog/swr-v1",
+      },
+      {
+        "frontMatter": {
+          "description": "ほぼ二年前、みんなが愛する小さなデータフェッチ React ライブラリである SWR をオープンソースにしました。そして本日、私たちは大きな節目を迎えました： SWR の 1.0 バージョンです。",
+          "image": "https://assets.vercel.com/image/upload/v1630059453/swr/v1.png",
+        },
+        "locale": "ja",
+        "meta": {
+          "theme": {
+            "breadcrumb": true,
+          },
+          "title": "Announcing SWR 1.0",
+        },
+        "name": "swr-v1",
+        "route": "/blog/swr-v1",
+      },
+      {
+        "frontMatter": {
+          "description": "Почти 2 года назад мы сделали SWR — крошечную React библиотеку с открытым исходным кодом для выборки данных, которую люди полюбили. Сегодня мы приближаемся к еще одной вехе: версии 1.0 SWR!",
+          "image": "https://assets.vercel.com/image/upload/v1630059453/swr/v1.png",
+        },
+        "locale": "ru",
+        "meta": {
+          "theme": {
+            "breadcrumb": true,
+          },
+          "title": "Announcing SWR 1.0",
+        },
+        "name": "swr-v1",
+        "route": "/blog/swr-v1",
+      },
+      {
+        "frontMatter": {
+          "description": "大约两年前，我们开源了 SWR，大家喜爱的小型数据请求 React 库。今天，我们迎来了另一个里程碑：SWR 1.0 版本发布。",
+          "image": "https://assets.vercel.com/image/upload/v1630059453/swr/v1.png",
+        },
+        "locale": "zh-CN",
+        "meta": {
+          "theme": {
+            "breadcrumb": true,
+          },
+          "title": "Announcing SWR 1.0",
+        },
+        "name": "swr-v1",
+        "route": "/blog/swr-v1",
+      },
+    ],
+    "meta": {
+      "theme": {
+        "breadcrumb": false,
+        "footer": true,
+        "sidebar": false,
+        "toc": true,
+        "typesetting": "article",
+      },
+      "title": "Blog",
+      "type": "page",
+    },
+    "name": "blog",
+    "route": "/blog",
+  },
+  {
+    "frontMatter": {
+      "searchable": false,
+    },
+    "locale": "en-US",
+    "meta": {
+      "theme": {
+        "breadcrumb": false,
+        "footer": true,
+        "sidebar": false,
+        "toc": true,
+        "typesetting": "article",
+      },
+      "title": "Blog",
+      "type": "page",
+    },
+    "name": "blog",
+    "route": "/blog",
+  },
+]
+`;
+
+exports[`context > getCurrentLevelPages() > should work 1`] = `
+[
+  {
+    "locale": "en-US",
+    "meta": {
+      "title": "Getting Started",
+    },
+    "name": "getting-started",
+    "route": "/docs/getting-started",
+  },
+  {
+    "locale": "es-ES",
+    "meta": {
+      "title": "Getting Started",
+    },
+    "name": "getting-started",
+    "route": "/docs/getting-started",
+  },
+  {
+    "locale": "ja",
+    "meta": {
+      "title": "Getting Started",
+    },
+    "name": "getting-started",
+    "route": "/docs/getting-started",
+  },
+  {
+    "locale": "ko",
+    "meta": {
+      "title": "Getting Started",
+    },
+    "name": "getting-started",
+    "route": "/docs/getting-started",
+  },
+  {
+    "locale": "ru",
+    "meta": {
+      "title": "Getting Started",
+    },
+    "name": "getting-started",
+    "route": "/docs/getting-started",
+  },
+  {
+    "locale": "zh-CN",
+    "meta": {
+      "title": "Getting Started",
+    },
+    "name": "getting-started",
+    "route": "/docs/getting-started",
+  },
+  {
+    "locale": "en-US",
+    "meta": {
+      "title": "Options",
+    },
+    "name": "options",
+    "route": "/docs/options",
+  },
+  {
+    "locale": "es-ES",
+    "meta": {
+      "title": "Options",
+    },
+    "name": "options",
+    "route": "/docs/options",
+  },
+  {
+    "locale": "ja",
+    "meta": {
+      "title": "Options",
+    },
+    "name": "options",
+    "route": "/docs/options",
+  },
+  {
+    "locale": "ko",
+    "meta": {
+      "title": "Options",
+    },
+    "name": "options",
+    "route": "/docs/options",
+  },
+  {
+    "locale": "ru",
+    "meta": {
+      "title": "Options",
+    },
+    "name": "options",
+    "route": "/docs/options",
+  },
+  {
+    "locale": "zh-CN",
+    "meta": {
+      "title": "Options",
+    },
+    "name": "options",
+    "route": "/docs/options",
+  },
+  {
+    "locale": "en-US",
+    "meta": {
+      "title": "Global Configuration",
+    },
+    "name": "global-configuration",
+    "route": "/docs/global-configuration",
+  },
+  {
+    "locale": "es-ES",
+    "meta": {
+      "title": "Global Configuration",
+    },
+    "name": "global-configuration",
+    "route": "/docs/global-configuration",
+  },
+  {
+    "locale": "ja",
+    "meta": {
+      "title": "Global Configuration",
+    },
+    "name": "global-configuration",
+    "route": "/docs/global-configuration",
+  },
+  {
+    "locale": "ko",
+    "meta": {
+      "title": "Global Configuration",
+    },
+    "name": "global-configuration",
+    "route": "/docs/global-configuration",
+  },
+  {
+    "locale": "ru",
+    "meta": {
+      "title": "Global Configuration",
+    },
+    "name": "global-configuration",
+    "route": "/docs/global-configuration",
+  },
+  {
+    "locale": "zh-CN",
+    "meta": {
+      "title": "Global Configuration",
+    },
+    "name": "global-configuration",
+    "route": "/docs/global-configuration",
+  },
+  {
+    "locale": "en-US",
+    "meta": {
+      "title": "Data Fetching",
+    },
+    "name": "data-fetching",
+    "route": "/docs/data-fetching",
+  },
+  {
+    "locale": "es-ES",
+    "meta": {
+      "title": "Data Fetching",
+    },
+    "name": "data-fetching",
+    "route": "/docs/data-fetching",
+  },
+  {
+    "locale": "ja",
+    "meta": {
+      "title": "Data Fetching",
+    },
+    "name": "data-fetching",
+    "route": "/docs/data-fetching",
+  },
+  {
+    "locale": "ko",
+    "meta": {
+      "title": "Data Fetching",
+    },
+    "name": "data-fetching",
+    "route": "/docs/data-fetching",
+  },
+  {
+    "locale": "ru",
+    "meta": {
+      "title": "Data Fetching",
+    },
+    "name": "data-fetching",
+    "route": "/docs/data-fetching",
+  },
+  {
+    "locale": "zh-CN",
+    "meta": {
+      "title": "Data Fetching",
+    },
+    "name": "data-fetching",
+    "route": "/docs/data-fetching",
+  },
+  {
+    "locale": "en-US",
+    "meta": {
+      "hidden": true,
+      "title": "Error Handling",
+    },
+    "name": "error-handling",
+    "route": "/docs/error-handling",
+  },
+  {
+    "locale": "es-ES",
+    "meta": {
+      "hidden": true,
+      "title": "Error Handling",
+    },
+    "name": "error-handling",
+    "route": "/docs/error-handling",
+  },
+  {
+    "locale": "ja",
+    "meta": {
+      "hidden": true,
+      "title": "Error Handling",
+    },
+    "name": "error-handling",
+    "route": "/docs/error-handling",
+  },
+  {
+    "locale": "ko",
+    "meta": {
+      "hidden": true,
+      "title": "Error Handling",
+    },
+    "name": "error-handling",
+    "route": "/docs/error-handling",
+  },
+  {
+    "locale": "ru",
+    "meta": {
+      "hidden": true,
+      "title": "Error Handling",
+    },
+    "name": "error-handling",
+    "route": "/docs/error-handling",
+  },
+  {
+    "locale": "zh-CN",
+    "meta": {
+      "hidden": true,
+      "title": "Error Handling",
+    },
+    "name": "error-handling",
+    "route": "/docs/error-handling",
+  },
+  {
+    "locale": "en-US",
+    "meta": {
+      "title": "Auto Revalidation",
+    },
+    "name": "revalidation",
+    "route": "/docs/revalidation",
+  },
+  {
+    "locale": "es-ES",
+    "meta": {
+      "title": "Auto Revalidation",
+    },
+    "name": "revalidation",
+    "route": "/docs/revalidation",
+  },
+  {
+    "locale": "ja",
+    "meta": {
+      "title": "Auto Revalidation",
+    },
+    "name": "revalidation",
+    "route": "/docs/revalidation",
+  },
+  {
+    "locale": "ko",
+    "meta": {
+      "title": "Auto Revalidation",
+    },
+    "name": "revalidation",
+    "route": "/docs/revalidation",
+  },
+  {
+    "locale": "ru",
+    "meta": {
+      "title": "Auto Revalidation",
+    },
+    "name": "revalidation",
+    "route": "/docs/revalidation",
+  },
+  {
+    "locale": "zh-CN",
+    "meta": {
+      "title": "Auto Revalidation",
+    },
+    "name": "revalidation",
+    "route": "/docs/revalidation",
+  },
+  {
+    "locale": "en-US",
+    "meta": {
+      "title": "Conditional Data Fetching",
+    },
+    "name": "conditional-fetching",
+    "route": "/docs/conditional-fetching",
+  },
+  {
+    "locale": "es-ES",
+    "meta": {
+      "title": "Conditional Data Fetching",
+    },
+    "name": "conditional-fetching",
+    "route": "/docs/conditional-fetching",
+  },
+  {
+    "locale": "ja",
+    "meta": {
+      "title": "Conditional Data Fetching",
+    },
+    "name": "conditional-fetching",
+    "route": "/docs/conditional-fetching",
+  },
+  {
+    "locale": "ko",
+    "meta": {
+      "title": "Conditional Data Fetching",
+    },
+    "name": "conditional-fetching",
+    "route": "/docs/conditional-fetching",
+  },
+  {
+    "locale": "ru",
+    "meta": {
+      "title": "Conditional Data Fetching",
+    },
+    "name": "conditional-fetching",
+    "route": "/docs/conditional-fetching",
+  },
+  {
+    "locale": "zh-CN",
+    "meta": {
+      "title": "Conditional Data Fetching",
+    },
+    "name": "conditional-fetching",
+    "route": "/docs/conditional-fetching",
+  },
+  {
+    "locale": "en-US",
+    "meta": {
+      "title": "Arguments",
+    },
+    "name": "arguments",
+    "route": "/docs/arguments",
+  },
+  {
+    "locale": "es-ES",
+    "meta": {
+      "title": "Arguments",
+    },
+    "name": "arguments",
+    "route": "/docs/arguments",
+  },
+  {
+    "locale": "ja",
+    "meta": {
+      "title": "Arguments",
+    },
+    "name": "arguments",
+    "route": "/docs/arguments",
+  },
+  {
+    "locale": "ko",
+    "meta": {
+      "title": "Arguments",
+    },
+    "name": "arguments",
+    "route": "/docs/arguments",
+  },
+  {
+    "locale": "ru",
+    "meta": {
+      "title": "Arguments",
+    },
+    "name": "arguments",
+    "route": "/docs/arguments",
+  },
+  {
+    "locale": "zh-CN",
+    "meta": {
+      "title": "Arguments",
+    },
+    "name": "arguments",
+    "route": "/docs/arguments",
+  },
+  {
+    "locale": "en-US",
+    "meta": {
+      "title": "Mutation",
+    },
+    "name": "mutation",
+    "route": "/docs/mutation",
+  },
+  {
+    "locale": "es-ES",
+    "meta": {
+      "title": "Mutation",
+    },
+    "name": "mutation",
+    "route": "/docs/mutation",
+  },
+  {
+    "locale": "ja",
+    "meta": {
+      "title": "Mutation",
+    },
+    "name": "mutation",
+    "route": "/docs/mutation",
+  },
+  {
+    "locale": "ko",
+    "meta": {
+      "title": "Mutation",
+    },
+    "name": "mutation",
+    "route": "/docs/mutation",
+  },
+  {
+    "locale": "ru",
+    "meta": {
+      "title": "Mutation",
+    },
+    "name": "mutation",
+    "route": "/docs/mutation",
+  },
+  {
+    "locale": "zh-CN",
+    "meta": {
+      "title": "Mutation",
+    },
+    "name": "mutation",
+    "route": "/docs/mutation",
+  },
+  {
+    "locale": "en-US",
+    "meta": {
+      "title": "Pagination",
+    },
+    "name": "pagination",
+    "route": "/docs/pagination",
+  },
+  {
+    "locale": "es-ES",
+    "meta": {
+      "title": "Pagination",
+    },
+    "name": "pagination",
+    "route": "/docs/pagination",
+  },
+  {
+    "locale": "ja",
+    "meta": {
+      "title": "Pagination",
+    },
+    "name": "pagination",
+    "route": "/docs/pagination",
+  },
+  {
+    "locale": "ko",
+    "meta": {
+      "title": "Pagination",
+    },
+    "name": "pagination",
+    "route": "/docs/pagination",
+  },
+  {
+    "locale": "ru",
+    "meta": {
+      "title": "Pagination",
+    },
+    "name": "pagination",
+    "route": "/docs/pagination",
+  },
+  {
+    "locale": "zh-CN",
+    "meta": {
+      "title": "Pagination",
+    },
+    "name": "pagination",
+    "route": "/docs/pagination",
+  },
+  {
+    "locale": "en-US",
+    "meta": {
+      "title": "Prefetching",
+    },
+    "name": "prefetching",
+    "route": "/docs/prefetching",
+  },
+  {
+    "locale": "es-ES",
+    "meta": {
+      "title": "Prefetching",
+    },
+    "name": "prefetching",
+    "route": "/docs/prefetching",
+  },
+  {
+    "locale": "ja",
+    "meta": {
+      "title": "Prefetching",
+    },
+    "name": "prefetching",
+    "route": "/docs/prefetching",
+  },
+  {
+    "locale": "ko",
+    "meta": {
+      "title": "Prefetching",
+    },
+    "name": "prefetching",
+    "route": "/docs/prefetching",
+  },
+  {
+    "locale": "ru",
+    "meta": {
+      "title": "Prefetching",
+    },
+    "name": "prefetching",
+    "route": "/docs/prefetching",
+  },
+  {
+    "locale": "zh-CN",
+    "meta": {
+      "title": "Prefetching",
+    },
+    "name": "prefetching",
+    "route": "/docs/prefetching",
+  },
+  {
+    "locale": "en-US",
+    "meta": {
+      "title": "Next.js SSG and SSR",
+    },
+    "name": "with-nextjs",
+    "route": "/docs/with-nextjs",
+  },
+  {
+    "locale": "es-ES",
+    "meta": {
+      "title": "Next.js SSG and SSR",
+    },
+    "name": "with-nextjs",
+    "route": "/docs/with-nextjs",
+  },
+  {
+    "locale": "ja",
+    "meta": {
+      "title": "Next.js SSG and SSR",
+    },
+    "name": "with-nextjs",
+    "route": "/docs/with-nextjs",
+  },
+  {
+    "locale": "ko",
+    "meta": {
+      "title": "Next.js SSG and SSR",
+    },
+    "name": "with-nextjs",
+    "route": "/docs/with-nextjs",
+  },
+  {
+    "locale": "ru",
+    "meta": {
+      "title": "Next.js SSG and SSR",
+    },
+    "name": "with-nextjs",
+    "route": "/docs/with-nextjs",
+  },
+  {
+    "locale": "zh-CN",
+    "meta": {
+      "title": "Next.js SSG and SSR",
+    },
+    "name": "with-nextjs",
+    "route": "/docs/with-nextjs",
+  },
+  {
+    "locale": "en-US",
+    "meta": {
+      "title": "TypeScript :)",
+    },
+    "name": "typescript",
+    "route": "/docs/typescript",
+  },
+  {
+    "locale": "en-US",
+    "meta": {
+      "title": "Suspense",
+    },
+    "name": "suspense",
+    "route": "/docs/suspense",
+  },
+  {
+    "locale": "es-ES",
+    "meta": {
+      "title": "Suspense",
+    },
+    "name": "suspense",
+    "route": "/docs/suspense",
+  },
+  {
+    "locale": "ja",
+    "meta": {
+      "title": "Suspense",
+    },
+    "name": "suspense",
+    "route": "/docs/suspense",
+  },
+  {
+    "locale": "ko",
+    "meta": {
+      "title": "Suspense",
+    },
+    "name": "suspense",
+    "route": "/docs/suspense",
+  },
+  {
+    "locale": "ru",
+    "meta": {
+      "title": "Suspense",
+    },
+    "name": "suspense",
+    "route": "/docs/suspense",
+  },
+  {
+    "locale": "zh-CN",
+    "meta": {
+      "title": "Suspense",
+    },
+    "name": "suspense",
+    "route": "/docs/suspense",
+  },
+  {
+    "locale": "en-US",
+    "meta": {
+      "title": "Middleware",
+    },
+    "name": "middleware",
+    "route": "/docs/middleware",
+  },
+  {
+    "locale": "ja",
+    "meta": {
+      "title": "Middleware",
+    },
+    "name": "middleware",
+    "route": "/docs/middleware",
+  },
+  {
+    "locale": "ko",
+    "meta": {
+      "title": "Middleware",
+    },
+    "name": "middleware",
+    "route": "/docs/middleware",
+  },
+  {
+    "locale": "ru",
+    "meta": {
+      "title": "Middleware",
+    },
+    "name": "middleware",
+    "route": "/docs/middleware",
+  },
+  {
+    "locale": "zh-CN",
+    "meta": {
+      "title": "Middleware",
+    },
+    "name": "middleware",
+    "route": "/docs/middleware",
+  },
+  {
+    "children": [
+      {
+        "locale": "en-US",
+        "meta": {
+          "title": "Cache",
+        },
+        "name": "cache",
+        "route": "/docs/advanced/cache",
+      },
+      {
+        "locale": "ja",
+        "meta": {
+          "title": "Cache",
+        },
+        "name": "cache",
+        "route": "/docs/advanced/cache",
+      },
+      {
+        "locale": "ko",
+        "meta": {
+          "title": "Cache",
+        },
+        "name": "cache",
+        "route": "/docs/advanced/cache",
+      },
+      {
+        "locale": "ru",
+        "meta": {
+          "title": "Cache",
+        },
+        "name": "cache",
+        "route": "/docs/advanced/cache",
+      },
+      {
+        "locale": "zh-CN",
+        "meta": {
+          "title": "Cache",
+        },
+        "name": "cache",
+        "route": "/docs/advanced/cache",
+      },
+      {
+        "locale": "en-US",
+        "meta": {
+          "title": "Performance",
+        },
+        "name": "performance",
+        "route": "/docs/advanced/performance",
+      },
+      {
+        "locale": "es-ES",
+        "meta": {
+          "title": "Performance",
+        },
+        "name": "performance",
+        "route": "/docs/advanced/performance",
+      },
+      {
+        "locale": "ja",
+        "meta": {
+          "title": "Performance",
+        },
+        "name": "performance",
+        "route": "/docs/advanced/performance",
+      },
+      {
+        "locale": "ko",
+        "meta": {
+          "title": "Performance",
+        },
+        "name": "performance",
+        "route": "/docs/advanced/performance",
+      },
+      {
+        "locale": "ru",
+        "meta": {
+          "title": "Performance",
+        },
+        "name": "performance",
+        "route": "/docs/advanced/performance",
+      },
+      {
+        "locale": "zh-CN",
+        "meta": {
+          "title": "Performance",
+        },
+        "name": "performance",
+        "route": "/docs/advanced/performance",
+      },
+      {
+        "locale": "en-US",
+        "meta": {
+          "title": "React Native",
+        },
+        "name": "react-native",
+        "route": "/docs/advanced/react-native",
+      },
+      {
+        "locale": "ja",
+        "meta": {
+          "title": "React Native",
+        },
+        "name": "react-native",
+        "route": "/docs/advanced/react-native",
+      },
+      {
+        "locale": "ko",
+        "meta": {
+          "title": "React Native",
+        },
+        "name": "react-native",
+        "route": "/docs/advanced/react-native",
+      },
+      {
+        "locale": "ru",
+        "meta": {
+          "title": "React Native",
+        },
+        "name": "react-native",
+        "route": "/docs/advanced/react-native",
+      },
+      {
+        "locale": "zh-CN",
+        "meta": {
+          "title": "React Native",
+        },
+        "name": "react-native",
+        "route": "/docs/advanced/react-native",
+      },
+      {
+        "locale": "en-US",
+        "meta": {
+          "title": "Markdown import",
+        },
+        "name": "markdown-import",
+        "route": "/docs/advanced/markdown-import",
+      },
+      {
+        "children": [
+          {
+            "locale": "en-US",
+            "meta": undefined,
+            "name": "loooooooooooooooooooong-title",
+            "route": "/docs/advanced/more/loooooooooooooooooooong-title",
+          },
+        ],
+        "meta": {
+          "title": "More: A Super Super Super Super Long Directory",
+        },
+        "name": "more",
+        "route": "/docs/advanced/more",
+      },
+      {
+        "locale": "en-US",
+        "meta": {
+          "title": "Filenames with dots",
+        },
+        "name": "file-name.with.DOTS",
+        "route": "/docs/advanced/file-name.with.DOTS",
+      },
+      {
+        "locale": "es-ES",
+        "meta": {
+          "title": "Filenames with dots",
+        },
+        "name": "file-name.with.DOTS",
+        "route": "/docs/advanced/file-name.with.DOTS",
+      },
+      {
+        "locale": "ja",
+        "meta": {
+          "title": "Filenames with dots",
+        },
+        "name": "file-name.with.DOTS",
+        "route": "/docs/advanced/file-name.with.DOTS",
+      },
+      {
+        "locale": "ko",
+        "meta": {
+          "title": "Filenames with dots",
+        },
+        "name": "file-name.with.DOTS",
+        "route": "/docs/advanced/file-name.with.DOTS",
+      },
+      {
+        "locale": "ru",
+        "meta": {
+          "title": "Filenames with dots",
+        },
+        "name": "file-name.with.DOTS",
+        "route": "/docs/advanced/file-name.with.DOTS",
+      },
+      {
+        "locale": "zh-CN",
+        "meta": {
+          "title": "Filenames with dots",
+        },
+        "name": "file-name.with.DOTS",
+        "route": "/docs/advanced/file-name.with.DOTS",
+      },
+      {
+        "locale": "en-US",
+        "meta": {
+          "title": "Code highlighting",
+        },
+        "name": "code-highlighting",
+        "route": "/docs/advanced/code-highlighting",
+      },
+    ],
+    "meta": {
+      "title": "Advanced",
+    },
+    "name": "advanced",
+    "route": "/docs/advanced",
+  },
+  {
+    "locale": "en-US",
+    "meta": {
+      "title": "Advanced",
+    },
+    "name": "advanced",
+    "route": "/docs/advanced",
+  },
+  {
+    "locale": "en-US",
+    "meta": {
+      "theme": {
+        "sidebar": false,
+      },
+      "title": "Change Log",
+    },
+    "name": "change-log",
+    "route": "/docs/change-log",
+  },
+  {
+    "locale": "es-ES",
+    "meta": {
+      "theme": {
+        "sidebar": false,
+      },
+      "title": "Change Log",
+    },
+    "name": "change-log",
+    "route": "/docs/change-log",
+  },
+  {
+    "locale": "ja",
+    "meta": {
+      "theme": {
+        "sidebar": false,
+      },
+      "title": "Change Log",
+    },
+    "name": "change-log",
+    "route": "/docs/change-log",
+  },
+  {
+    "locale": "ko",
+    "meta": {
+      "theme": {
+        "sidebar": false,
+      },
+      "title": "Change Log",
+    },
+    "name": "change-log",
+    "route": "/docs/change-log",
+  },
+  {
+    "locale": "ru",
+    "meta": {
+      "theme": {
+        "sidebar": false,
+      },
+      "title": "Change Log",
+    },
+    "name": "change-log",
+    "route": "/docs/change-log",
+  },
+  {
+    "locale": "zh-CN",
+    "meta": {
+      "theme": {
+        "sidebar": false,
+      },
+      "title": "Change Log",
+    },
+    "name": "change-log",
+    "route": "/docs/change-log",
+  },
+  {
+    "locale": "en-US",
+    "meta": {
+      "title": "Scroll With Dynamic Height",
+    },
+    "name": "scroll-with-dynamic-height",
+    "route": "/docs/scroll-with-dynamic-height",
+  },
+  {
+    "locale": "es-ES",
+    "meta": {
+      "title": "Scroll With Dynamic Height",
+    },
+    "name": "scroll-with-dynamic-height",
+    "route": "/docs/scroll-with-dynamic-height",
+  },
+  {
+    "locale": "ja",
+    "meta": {
+      "title": "Scroll With Dynamic Height",
+    },
+    "name": "scroll-with-dynamic-height",
+    "route": "/docs/scroll-with-dynamic-height",
+  },
+  {
+    "locale": "ko",
+    "meta": {
+      "title": "Scroll With Dynamic Height",
+    },
+    "name": "scroll-with-dynamic-height",
+    "route": "/docs/scroll-with-dynamic-height",
+  },
+  {
+    "locale": "ru",
+    "meta": {
+      "title": "Scroll With Dynamic Height",
+    },
+    "name": "scroll-with-dynamic-height",
+    "route": "/docs/scroll-with-dynamic-height",
+  },
+  {
+    "locale": "zh-CN",
+    "meta": {
+      "title": "Scroll With Dynamic Height",
+    },
+    "name": "scroll-with-dynamic-height",
+    "route": "/docs/scroll-with-dynamic-height",
+  },
+  {
+    "locale": "en-US",
+    "meta": {
+      "title": "404/500 Custom Error Pages",
+    },
+    "name": "404-500",
+    "route": "/docs/404-500",
+  },
+  {
+    "locale": "en-US",
+    "meta": {
+      "theme": {
+        "layout": "raw",
+      },
+      "title": "Raw Layout",
+    },
+    "name": "raw-layout",
+    "route": "/docs/raw-layout",
+  },
+]
+`;
+
+exports[`context > getPagesUnderRoute() > should work 1`] = `
+[
+  {
+    "locale": "en-US",
+    "meta": {
+      "title": "Cache",
+    },
+    "name": "cache",
+    "route": "/docs/advanced/cache",
+  },
+  {
+    "locale": "ja",
+    "meta": {
+      "title": "Cache",
+    },
+    "name": "cache",
+    "route": "/docs/advanced/cache",
+  },
+  {
+    "locale": "ko",
+    "meta": {
+      "title": "Cache",
+    },
+    "name": "cache",
+    "route": "/docs/advanced/cache",
+  },
+  {
+    "locale": "ru",
+    "meta": {
+      "title": "Cache",
+    },
+    "name": "cache",
+    "route": "/docs/advanced/cache",
+  },
+  {
+    "locale": "zh-CN",
+    "meta": {
+      "title": "Cache",
+    },
+    "name": "cache",
+    "route": "/docs/advanced/cache",
+  },
+  {
+    "locale": "en-US",
+    "meta": {
+      "title": "Performance",
+    },
+    "name": "performance",
+    "route": "/docs/advanced/performance",
+  },
+  {
+    "locale": "es-ES",
+    "meta": {
+      "title": "Performance",
+    },
+    "name": "performance",
+    "route": "/docs/advanced/performance",
+  },
+  {
+    "locale": "ja",
+    "meta": {
+      "title": "Performance",
+    },
+    "name": "performance",
+    "route": "/docs/advanced/performance",
+  },
+  {
+    "locale": "ko",
+    "meta": {
+      "title": "Performance",
+    },
+    "name": "performance",
+    "route": "/docs/advanced/performance",
+  },
+  {
+    "locale": "ru",
+    "meta": {
+      "title": "Performance",
+    },
+    "name": "performance",
+    "route": "/docs/advanced/performance",
+  },
+  {
+    "locale": "zh-CN",
+    "meta": {
+      "title": "Performance",
+    },
+    "name": "performance",
+    "route": "/docs/advanced/performance",
+  },
+  {
+    "locale": "en-US",
+    "meta": {
+      "title": "React Native",
+    },
+    "name": "react-native",
+    "route": "/docs/advanced/react-native",
+  },
+  {
+    "locale": "ja",
+    "meta": {
+      "title": "React Native",
+    },
+    "name": "react-native",
+    "route": "/docs/advanced/react-native",
+  },
+  {
+    "locale": "ko",
+    "meta": {
+      "title": "React Native",
+    },
+    "name": "react-native",
+    "route": "/docs/advanced/react-native",
+  },
+  {
+    "locale": "ru",
+    "meta": {
+      "title": "React Native",
+    },
+    "name": "react-native",
+    "route": "/docs/advanced/react-native",
+  },
+  {
+    "locale": "zh-CN",
+    "meta": {
+      "title": "React Native",
+    },
+    "name": "react-native",
+    "route": "/docs/advanced/react-native",
+  },
+  {
+    "locale": "en-US",
+    "meta": {
+      "title": "Markdown import",
+    },
+    "name": "markdown-import",
+    "route": "/docs/advanced/markdown-import",
+  },
+  {
+    "children": [
+      {
+        "locale": "en-US",
+        "meta": undefined,
+        "name": "loooooooooooooooooooong-title",
+        "route": "/docs/advanced/more/loooooooooooooooooooong-title",
+      },
+    ],
+    "meta": {
+      "title": "More: A Super Super Super Super Long Directory",
+    },
+    "name": "more",
+    "route": "/docs/advanced/more",
+  },
+  {
+    "locale": "en-US",
+    "meta": {
+      "title": "Filenames with dots",
+    },
+    "name": "file-name.with.DOTS",
+    "route": "/docs/advanced/file-name.with.DOTS",
+  },
+  {
+    "locale": "es-ES",
+    "meta": {
+      "title": "Filenames with dots",
+    },
+    "name": "file-name.with.DOTS",
+    "route": "/docs/advanced/file-name.with.DOTS",
+  },
+  {
+    "locale": "ja",
+    "meta": {
+      "title": "Filenames with dots",
+    },
+    "name": "file-name.with.DOTS",
+    "route": "/docs/advanced/file-name.with.DOTS",
+  },
+  {
+    "locale": "ko",
+    "meta": {
+      "title": "Filenames with dots",
+    },
+    "name": "file-name.with.DOTS",
+    "route": "/docs/advanced/file-name.with.DOTS",
+  },
+  {
+    "locale": "ru",
+    "meta": {
+      "title": "Filenames with dots",
+    },
+    "name": "file-name.with.DOTS",
+    "route": "/docs/advanced/file-name.with.DOTS",
+  },
+  {
+    "locale": "zh-CN",
+    "meta": {
+      "title": "Filenames with dots",
+    },
+    "name": "file-name.with.DOTS",
+    "route": "/docs/advanced/file-name.with.DOTS",
+  },
+  {
+    "locale": "en-US",
+    "meta": {
+      "title": "Code highlighting",
+    },
+    "name": "code-highlighting",
+    "route": "/docs/advanced/code-highlighting",
+  },
+]
+`;
diff --git a/packages/nextra/__test__/__snapshots__/page-map.test.ts.snap b/packages/nextra/__test__/__snapshots__/page-map.test.ts.snap
index 4ac26514b8..f96f15b080 100644
--- a/packages/nextra/__test__/__snapshots__/page-map.test.ts.snap
+++ b/packages/nextra/__test__/__snapshots__/page-map.test.ts.snap
@@ -4,27 +4,90 @@ exports[`Page Process > pageMap en-US 1`] = `
 [
   [
     {
-      "locale": "",
       "name": "404",
       "route": "/404",
     },
     {
-      "locale": "",
       "name": "500",
       "route": "/500",
     },
     {
-      "children": [
-        {
-          "locale": "en-US",
-          "name": "a-page",
-          "route": "/about/a-page",
+      "locale": "en-US",
+      "meta": {
+        "404": {
+          "theme": {
+            "timestamp": false,
+          },
+          "type": "page",
         },
-        {
-          "locale": "en-US",
-          "name": "acknowledgement",
-          "route": "/about/acknowledgement",
+        "500": {
+          "theme": {
+            "layout": "full",
+            "timestamp": false,
+          },
+          "type": "page",
+        },
+        "about": {
+          "items": {
+            "a-page": {
+              "title": "A Page",
+            },
+            "acknowledgement": {
+              "title": "Acknowledgement",
+            },
+            "contributors": {
+              "href": "https://github.com/vercel/swr/graphs/contributors",
+              "newWindow": true,
+              "title": "Contributors",
+            },
+            "team": {
+              "title": "Team",
+            },
+          },
+          "title": "About",
+          "type": "menu",
+        },
+        "blog": {
+          "theme": {
+            "breadcrumb": false,
+            "footer": true,
+            "sidebar": false,
+            "toc": true,
+            "typesetting": "article",
+          },
+          "title": "Blog",
+          "type": "page",
+        },
+        "docs": {
+          "theme": {
+            "toc": true,
+          },
+          "title": "Docs",
+          "type": "page",
+        },
+        "examples": {
+          "theme": {
+            "layout": "full",
+          },
+          "title": "Examples",
+          "type": "page",
+        },
+        "index": {
+          "hidden": true,
+          "title": "Introduction",
+          "type": "page",
+        },
+        "nextra_link": {
+          "href": "https://github.com/shuding/nextra",
+          "newWindow": true,
+          "title": "Nextra ↗",
+          "type": "page",
         },
+      },
+      "name": "_meta.json",
+    },
+    {
+      "children": [
         {
           "locale": "en-US",
           "meta": {
@@ -39,7 +102,17 @@ exports[`Page Process > pageMap en-US 1`] = `
             "acknowledgement": "🧩 Acknowledgement",
             "team": "👥 Team",
           },
-          "name": "meta.json",
+          "name": "_meta.json",
+        },
+        {
+          "locale": "en-US",
+          "name": "a-page",
+          "route": "/about/a-page",
+        },
+        {
+          "locale": "en-US",
+          "name": "acknowledgement",
+          "route": "/about/acknowledgement",
         },
         {
           "locale": "en-US",
@@ -62,7 +135,7 @@ exports[`Page Process > pageMap en-US 1`] = `
               "title": "Announcing SWR 1.0",
             },
           },
-          "name": "meta.json",
+          "name": "_meta.json",
         },
         {
           "frontMatter": {
@@ -93,27 +166,62 @@ exports[`Page Process > pageMap en-US 1`] = `
           "route": "/docs/404-500",
         },
         {
-          "children": [
-            {
-              "locale": "en-US",
-              "name": "cache",
-              "route": "/docs/advanced/cache",
+          "locale": "en-US",
+          "meta": {
+            "--- hey": {
+              "title": "Getting Started",
+              "type": "separator",
             },
-            {
-              "locale": "en-US",
-              "name": "code-highlighting",
-              "route": "/docs/advanced/code-highlighting",
+            "--- my_new_separator": {
+              "title": "Advanced",
+              "type": "separator",
             },
-            {
-              "locale": "en-US",
-              "name": "file-name.with.DOTS",
-              "route": "/docs/advanced/file-name.with.DOTS",
+            "404-500": "404/500 Custom Error Pages",
+            "advanced": {
+              "title": "Advanced",
             },
-            {
-              "locale": "en-US",
-              "name": "markdown-import",
-              "route": "/docs/advanced/markdown-import",
+            "arguments": "Arguments",
+            "change-log": {
+              "theme": {
+                "sidebar": false,
+              },
+              "title": "Change Log",
+            },
+            "conditional-fetching": "Conditional Data Fetching",
+            "data-fetching": "Data Fetching",
+            "error-handling": {
+              "hidden": true,
+              "title": "Error Handling",
+            },
+            "getting-started": "Getting Started",
+            "github_link": {
+              "href": "https://github.com/shuding/nextra",
+              "newWindow": true,
+              "title": "GitHub 🐙 →",
+              "type": "page",
             },
+            "global-configuration": "Global Configuration",
+            "middleware": "Middleware",
+            "mutation": "Mutation",
+            "options": "Options",
+            "pagination": "Pagination",
+            "prefetching": "Prefetching",
+            "raw-layout": {
+              "theme": {
+                "layout": "raw",
+              },
+              "title": "Raw Layout",
+            },
+            "revalidation": "Auto Revalidation",
+            "scroll-with-dynamic-height": "Scroll With Dynamic Height",
+            "suspense": "Suspense",
+            "typescript": "TypeScript :)",
+            "with-nextjs": "Next.js SSG and SSR",
+          },
+          "name": "_meta.json",
+        },
+        {
+          "children": [
             {
               "locale": "en-US",
               "meta": {
@@ -134,7 +242,27 @@ exports[`Page Process > pageMap en-US 1`] = `
                 "performance": "Performance",
                 "react-native": "React Native",
               },
-              "name": "meta.json",
+              "name": "_meta.json",
+            },
+            {
+              "locale": "en-US",
+              "name": "cache",
+              "route": "/docs/advanced/cache",
+            },
+            {
+              "locale": "en-US",
+              "name": "code-highlighting",
+              "route": "/docs/advanced/code-highlighting",
+            },
+            {
+              "locale": "en-US",
+              "name": "file-name.with.DOTS",
+              "route": "/docs/advanced/file-name.with.DOTS",
+            },
+            {
+              "locale": "en-US",
+              "name": "markdown-import",
+              "route": "/docs/advanced/markdown-import",
             },
             {
               "children": [
@@ -201,61 +329,6 @@ exports[`Page Process > pageMap en-US 1`] = `
           "name": "global-configuration",
           "route": "/docs/global-configuration",
         },
-        {
-          "locale": "en-US",
-          "meta": {
-            "--- hey": {
-              "title": "Getting Started",
-              "type": "separator",
-            },
-            "--- my_new_separator": {
-              "title": "Advanced",
-              "type": "separator",
-            },
-            "404-500": "404/500 Custom Error Pages",
-            "advanced": {
-              "title": "Advanced",
-            },
-            "arguments": "Arguments",
-            "change-log": {
-              "theme": {
-                "sidebar": false,
-              },
-              "title": "Change Log",
-            },
-            "conditional-fetching": "Conditional Data Fetching",
-            "data-fetching": "Data Fetching",
-            "error-handling": {
-              "hidden": true,
-              "title": "Error Handling",
-            },
-            "getting-started": "Getting Started",
-            "github_link": {
-              "href": "https://github.com/shuding/nextra",
-              "newWindow": true,
-              "title": "GitHub 🐙 →",
-              "type": "page",
-            },
-            "global-configuration": "Global Configuration",
-            "middleware": "Middleware",
-            "mutation": "Mutation",
-            "options": "Options",
-            "pagination": "Pagination",
-            "prefetching": "Prefetching",
-            "raw-layout": {
-              "theme": {
-                "layout": "raw",
-              },
-              "title": "Raw Layout",
-            },
-            "revalidation": "Auto Revalidation",
-            "scroll-with-dynamic-height": "Scroll With Dynamic Height",
-            "suspense": "Suspense",
-            "typescript": "TypeScript :)",
-            "with-nextjs": "Next.js SSG and SSR",
-          },
-          "name": "meta.json",
-        },
         {
           "locale": "en-US",
           "name": "middleware",
@@ -317,6 +390,23 @@ exports[`Page Process > pageMap en-US 1`] = `
     },
     {
       "children": [
+        {
+          "locale": "en-US",
+          "meta": {
+            "auth": "Authentication",
+            "basic": "Basic Usage",
+            "error-handling": "Error Handling",
+            "full": {
+              "theme": {
+                "layout": "raw",
+              },
+              "title": "Full",
+            },
+            "infinite-loading": "Infinite Loading",
+            "ssr": "Next.js SSR",
+          },
+          "name": "_meta.json",
+        },
         {
           "frontMatter": {
             "full": true,
@@ -358,23 +448,6 @@ exports[`Page Process > pageMap en-US 1`] = `
           "name": "infinite-loading",
           "route": "/examples/infinite-loading",
         },
-        {
-          "locale": "en-US",
-          "meta": {
-            "auth": "Authentication",
-            "basic": "Basic Usage",
-            "error-handling": "Error Handling",
-            "full": {
-              "theme": {
-                "layout": "raw",
-              },
-              "title": "Full",
-            },
-            "infinite-loading": "Infinite Loading",
-            "ssr": "Next.js SSR",
-          },
-          "name": "meta.json",
-        },
         {
           "frontMatter": {
             "full": true,
@@ -397,102 +470,40 @@ exports[`Page Process > pageMap en-US 1`] = `
       "name": "index",
       "route": "/",
     },
+  ],
+  "/docs/data-fetching",
+  "Data Fetching",
+]
+`;
+
+exports[`Page Process > pageMap zh-CN 1`] = `
+[
+  [
     {
-      "locale": "en-US",
+      "locale": "zh-CN",
       "meta": {
-        "404": {
-          "theme": {
-            "timestamp": false,
-          },
-          "type": "page",
-        },
-        "500": {
-          "theme": {
-            "layout": "full",
-            "timestamp": false,
-          },
-          "type": "page",
-        },
-        "about": {
-          "items": {
-            "a-page": {
-              "title": "A Page",
-            },
-            "acknowledgement": {
-              "title": "Acknowledgement",
-            },
-            "contributors": {
-              "href": "https://github.com/vercel/swr/graphs/contributors",
-              "newWindow": true,
-              "title": "Contributors",
-            },
-            "team": {
-              "title": "Team",
-            },
-          },
-          "title": "About",
-          "type": "menu",
-        },
         "blog": {
-          "theme": {
-            "breadcrumb": false,
-            "footer": true,
-            "sidebar": false,
-            "toc": true,
-            "typesetting": "article",
-          },
-          "title": "Blog",
+          "title": "博客",
           "type": "page",
         },
         "docs": {
-          "theme": {
-            "toc": true,
-          },
-          "title": "Docs",
+          "title": "文档",
           "type": "page",
         },
         "examples": {
-          "theme": {
-            "layout": "full",
-          },
-          "title": "Examples",
+          "title": "示例",
           "type": "page",
         },
         "index": {
           "hidden": true,
-          "title": "Introduction",
-          "type": "page",
-        },
-        "nextra_link": {
-          "href": "https://github.com/shuding/nextra",
-          "newWindow": true,
-          "title": "Nextra ↗",
+          "title": "简介",
           "type": "page",
         },
       },
-      "name": "meta.json",
+      "name": "_meta.json",
     },
-  ],
-  "/docs/data-fetching",
-  "Data Fetching",
-]
-`;
-
-exports[`Page Process > pageMap zh-CN 1`] = `
-[
-  [
     {
       "children": [
-        {
-          "locale": "en-US",
-          "name": "a-page",
-          "route": "/about/a-page",
-        },
-        {
-          "locale": "en-US",
-          "name": "acknowledgement",
-          "route": "/about/acknowledgement",
-        },
         {
           "locale": "en-US",
           "meta": {
@@ -507,7 +518,17 @@ exports[`Page Process > pageMap zh-CN 1`] = `
             "acknowledgement": "🧩 Acknowledgement",
             "team": "👥 Team",
           },
-          "name": "meta.json",
+          "name": "_meta.json",
+        },
+        {
+          "locale": "en-US",
+          "name": "a-page",
+          "route": "/about/a-page",
+        },
+        {
+          "locale": "en-US",
+          "name": "acknowledgement",
+          "route": "/about/acknowledgement",
         },
         {
           "locale": "en-US",
@@ -525,7 +546,7 @@ exports[`Page Process > pageMap zh-CN 1`] = `
           "meta": {
             "swr-v1": "SWR 1.0 发布",
           },
-          "name": "meta.json",
+          "name": "_meta.json",
         },
         {
           "frontMatter": {
@@ -542,8 +563,42 @@ exports[`Page Process > pageMap zh-CN 1`] = `
     },
     {
       "children": [
+        {
+          "locale": "zh-CN",
+          "meta": {
+            "advanced": "高级",
+            "arguments": "传入参数",
+            "change-log": "更新日志",
+            "conditional-fetching": "条件数据请求",
+            "data-fetching": "数据请求",
+            "error-handling": "错误处理",
+            "getting-started": "入门",
+            "global-configuration": "全局配置",
+            "middleware": "中间件",
+            "mutation": "数据更改",
+            "options": "选项",
+            "pagination": "分页",
+            "prefetching": "预请求",
+            "revalidation": "自动重新请求",
+            "scroll-with-dynamic-height": "以動態高度滾動",
+            "suspense": "Suspense",
+            "typescript": "Typescript",
+            "with-nextjs": "Next.js SSG 和 SSR",
+          },
+          "name": "_meta.json",
+        },
         {
           "children": [
+            {
+              "locale": "zh-CN",
+              "meta": {
+                "cache": "缓存",
+                "file-name.with.DOTS": "带点的文件名",
+                "performance": "性能",
+                "react-native": "React Native",
+              },
+              "name": "_meta.json",
+            },
             {
               "locale": "zh-CN",
               "name": "cache",
@@ -554,16 +609,6 @@ exports[`Page Process > pageMap zh-CN 1`] = `
               "name": "file-name.with.DOTS",
               "route": "/docs/advanced/file-name.with.DOTS",
             },
-            {
-              "locale": "zh-CN",
-              "meta": {
-                "cache": "缓存",
-                "file-name.with.DOTS": "带点的文件名",
-                "performance": "性能",
-                "react-native": "React Native",
-              },
-              "name": "meta.json",
-            },
             {
               "children": [
                 {
@@ -634,30 +679,6 @@ exports[`Page Process > pageMap zh-CN 1`] = `
           "name": "global-configuration",
           "route": "/docs/global-configuration",
         },
-        {
-          "locale": "zh-CN",
-          "meta": {
-            "advanced": "高级",
-            "arguments": "传入参数",
-            "change-log": "更新日志",
-            "conditional-fetching": "条件数据请求",
-            "data-fetching": "数据请求",
-            "error-handling": "错误处理",
-            "getting-started": "入门",
-            "global-configuration": "全局配置",
-            "middleware": "中间件",
-            "mutation": "数据更改",
-            "options": "选项",
-            "pagination": "分页",
-            "prefetching": "预请求",
-            "revalidation": "自动重新请求",
-            "scroll-with-dynamic-height": "以動態高度滾動",
-            "suspense": "Suspense",
-            "typescript": "Typescript",
-            "with-nextjs": "Next.js SSG 和 SSR",
-          },
-          "name": "meta.json",
-        },
         {
           "locale": "zh-CN",
           "name": "middleware",
@@ -729,6 +750,17 @@ exports[`Page Process > pageMap zh-CN 1`] = `
     },
     {
       "children": [
+        {
+          "locale": "zh-CN",
+          "meta": {
+            "auth": "身份验证",
+            "basic": "基本用法",
+            "error-handling": "错误处理",
+            "infinite-loading": "无限加载",
+            "ssr": "Next.js SSR",
+          },
+          "name": "_meta.json",
+        },
         {
           "frontMatter": {
             "full": true,
@@ -765,17 +797,6 @@ exports[`Page Process > pageMap zh-CN 1`] = `
           "name": "infinite-loading",
           "route": "/examples/infinite-loading",
         },
-        {
-          "locale": "zh-CN",
-          "meta": {
-            "auth": "身份验证",
-            "basic": "基本用法",
-            "error-handling": "错误处理",
-            "infinite-loading": "无限加载",
-            "ssr": "Next.js SSR",
-          },
-          "name": "meta.json",
-        },
         {
           "locale": "en-US",
           "name": "full",
@@ -803,35 +824,10 @@ exports[`Page Process > pageMap zh-CN 1`] = `
       "route": "/",
     },
     {
-      "locale": "zh-CN",
-      "meta": {
-        "blog": {
-          "title": "博客",
-          "type": "page",
-        },
-        "docs": {
-          "title": "文档",
-          "type": "page",
-        },
-        "examples": {
-          "title": "示例",
-          "type": "page",
-        },
-        "index": {
-          "hidden": true,
-          "title": "简介",
-          "type": "page",
-        },
-      },
-      "name": "meta.json",
-    },
-    {
-      "locale": "",
       "name": "404",
       "route": "/404",
     },
     {
-      "locale": "",
       "name": "500",
       "route": "/500",
     },
diff --git a/packages/nextra/__test__/context.test.ts b/packages/nextra/__test__/context.test.ts
new file mode 100644
index 0000000000..676d0adce2
--- /dev/null
+++ b/packages/nextra/__test__/context.test.ts
@@ -0,0 +1,37 @@
+import { describe, it, expect, beforeAll } from 'vitest'
+import {
+  getAllPages,
+  getCurrentLevelPages,
+  getPagesUnderRoute
+} from '../src/context'
+import { collectFiles } from '../src/plugin'
+import path from 'node:path'
+
+describe('context', () => {
+  beforeAll(async () => {
+    const PAGES_DIR = path.join(process.cwd(), '../../examples/swr-site/pages')
+    const { items } = await collectFiles(PAGES_DIR)
+    globalThis.__nextra_internal__ = {
+      pageMap: items,
+      route: '/docs'
+    }
+  })
+
+  describe('getAllPages()', () => {
+    it('should work', () => {
+      expect(getAllPages()).toMatchSnapshot()
+    })
+  })
+
+  describe('getCurrentLevelPages()', () => {
+    it('should work', () => {
+      expect(getCurrentLevelPages()).toMatchSnapshot()
+    })
+  })
+
+  describe('getPagesUnderRoute()', () => {
+    it('should work', () => {
+      expect(getPagesUnderRoute('/docs/advanced')).toMatchSnapshot()
+    })
+  })
+})
diff --git a/packages/nextra/__test__/page-map.test.ts b/packages/nextra/__test__/page-map.test.ts
index 4b237dc3e8..82307352eb 100644
--- a/packages/nextra/__test__/page-map.test.ts
+++ b/packages/nextra/__test__/page-map.test.ts
@@ -1,55 +1,57 @@
 import { describe, it, expect, beforeAll } from 'vitest'
-import path from 'path'
+import path from 'node:path'
 import { getPageMap } from '../src/page-map'
 import { collectFiles } from '../src/plugin'
-const pagesDir = () => '../../examples/swr-site/pages'
-const filePath = (name: string) => path.join(process.cwd(), pagesDir(), name)
+import { FileMap, PageMapItem } from '../src/types'
+import { CWD } from '../src/constants'
+
+const PAGES_DIR = path.join(CWD, '../../examples/swr-site/pages')
+const filePath = (name: string) => path.join(PAGES_DIR, name)
+
 const defaultLocale = 'en-US'
 
 describe('Page Process', () => {
-  let pageMap: any = {}
-  let fileMap: any = {}
+  let pageMap: PageMapItem[]
+  let fileMap: FileMap
   beforeAll(async () => {
-    const { items, fileMap: data } = await collectFiles(
-      path.join(process.cwd(), pagesDir()),
-      '/'
-    )
+    const { items, fileMap: data } = await collectFiles(PAGES_DIR)
     pageMap = items
     fileMap = data
   })
+
   it('pageMap en-US', async () => {
-    const indexData = await getPageMap(
-      filePath('docs/data-fetching.en-US.mdx'),
+    const indexData = await getPageMap({
+      filePath: filePath('docs/data-fetching.en-US.mdx'),
       pageMap,
       fileMap,
       defaultLocale
-    )
-    expect(indexData).toMatchSnapshot()
+    })
+    expect([indexData.pageMap, indexData.route, indexData.title]).toMatchSnapshot()
 
-    const gettingStartData = await getPageMap(
-      filePath('docs/getting-started.en-US.mdx'),
+    const gettingStartData = await getPageMap({
+      filePath: filePath('docs/getting-started.en-US.mdx'),
       pageMap,
       fileMap,
       defaultLocale
-    )
-    expect(gettingStartData[0]).toEqual(indexData[0])
+    })
+    expect(gettingStartData.pageMap).toEqual(indexData.pageMap)
   })
 
   it('pageMap zh-CN', async () => {
-    const indexData = await getPageMap(
-      filePath('docs/data-fetching.zh-CN.mdx'),
+    const indexData = await getPageMap({
+      filePath: filePath('docs/data-fetching.zh-CN.mdx'),
       pageMap,
       fileMap,
       defaultLocale
-    )
-    expect(indexData).toMatchSnapshot()
+    })
+    expect([indexData.pageMap, indexData.route, indexData.title]).toMatchSnapshot()
 
-    const gettingStartData = await getPageMap(
-      filePath('docs/getting-started.zh-CN.mdx'),
+    const gettingStartData = await getPageMap({
+      filePath: filePath('docs/getting-started.zh-CN.mdx'),
       pageMap,
       fileMap,
       defaultLocale
-    )
-    expect(gettingStartData[0]).toEqual(indexData[0])
+    })
+    expect(gettingStartData.pageMap).toEqual(indexData.pageMap)
   })
 })
diff --git a/packages/nextra/package.json b/packages/nextra/package.json
index 8975a209a0..319e9a9f47 100644
--- a/packages/nextra/package.json
+++ b/packages/nextra/package.json
@@ -28,17 +28,16 @@
         "./dist/locales.d.ts"
       ],
       "icons": [
-        "./dist/icons.d.ts"
+        "./dist/icons/index.d.ts"
+      ],
+      "components": [
+        "./dist/components/index.d.ts"
       ]
     }
   },
   "exports": {
     "./package.json": "./package.json",
     ".": "./dist/index.js",
-    "./compile": {
-      "import": "./dist/compile.mjs",
-      "types": "./dist/compile.d.ts"
-    },
     "./context": {
       "import": "./dist/context.js",
       "types": "./dist/context.d.ts"
@@ -57,8 +56,16 @@
       "types": "./dist/locales.d.ts"
     },
     "./icons": {
-      "import": "./dist/icons.mjs",
-      "types": "./dist/icons.d.ts"
+      "import": "./dist/icons/index.mjs",
+      "types": "./dist/icons/index.d.ts"
+    },
+    "./components": {
+      "import": "./dist/components/index.mjs",
+      "types": "./dist/components/index.d.ts"
+    },
+    "./*": {
+      "import": "./dist/*.mjs",
+      "types": "./dist/*.d.ts"
     }
   },
   "repository": "https://github.com/shuding/nextra",
@@ -79,6 +86,7 @@
     "github-slugger": "^1.4.0",
     "graceful-fs": "^4.2.10",
     "gray-matter": "^4.0.3",
+    "react-children-utilities": "^2.8.0",
     "rehype-mdx-title": "^1.0.0",
     "rehype-pretty-code": "0.2.4",
     "remark-gfm": "^3.0.1",
diff --git a/packages/nextra/src/compile.ts b/packages/nextra/src/compile.ts
index a1d3c0c0d5..a22c830ef3 100644
--- a/packages/nextra/src/compile.ts
+++ b/packages/nextra/src/compile.ts
@@ -9,6 +9,7 @@ import { LoaderOptions, PageOpts } from './types'
 import structurize from './mdx-plugins/structurize'
 import { parseMeta, attachMeta } from './mdx-plugins/rehype-handler'
 import theme from './theme.json'
+import { truthy } from './utils'
 
 const createCompiler = (mdxOptions: ProcessorOptions): Processor => {
   const compiler = createProcessor(mdxOptions)
@@ -41,11 +42,13 @@ export async function compileMdx(
     Pick<ProcessorOptions, 'jsx' | 'outputFormat'> = {},
   nextraOptions: Pick<
     LoaderOptions,
-    'unstable_staticImage' | 'unstable_flexsearch'
+    | 'unstable_staticImage'
+    | 'unstable_flexsearch'
+    | 'unstable_defaultShowCopyCode'
   > = {},
-  resourcePath = ''
+  filePath = ''
 ) {
-  const structurizedData = {}
+  const structurizedData = Object.create(null)
   const compiler = createCompiler({
     jsx: mdxOptions.jsx ?? true,
     outputFormat: mdxOptions.outputFormat,
@@ -54,22 +57,23 @@ export async function compileMdx(
       ...(mdxOptions.remarkPlugins || []),
       remarkGfm,
       remarkHeadings,
-      ...(nextraOptions.unstable_staticImage ? [remarkStaticImage] : []),
-      ...(nextraOptions.unstable_flexsearch
-        ? [structurize(structurizedData, nextraOptions.unstable_flexsearch)]
-        : [])
-    ].filter(Boolean),
-    // @ts-ignore
+      nextraOptions.unstable_staticImage && remarkStaticImage,
+      nextraOptions.unstable_flexsearch &&
+        structurize(structurizedData, nextraOptions.unstable_flexsearch)
+    ].filter(truthy),
     rehypePlugins: [
       ...(mdxOptions.rehypePlugins || []),
-      parseMeta,
+      [
+        parseMeta,
+        { defaultShowCopyCode: nextraOptions.unstable_defaultShowCopyCode }
+      ],
       [
         rehypePrettyCode,
         { ...rehypePrettyCodeOptions, ...mdxOptions.rehypePrettyCodeOptions }
       ],
       [rehypeMdxTitle, { name: '__nextra_title__' }],
       attachMeta
-    ].filter(Boolean)
+    ]
   })
   try {
     const result = String(await compiler.process(source))
@@ -85,7 +89,7 @@ export async function compileMdx(
       structurizedData
     }
   } catch (err) {
-    console.error(`[nextra] Error compiling ${resourcePath}.`)
+    console.error(`[nextra] Error compiling ${filePath}.`)
     throw err
   }
 }
diff --git a/packages/nextra/src/components/code.tsx b/packages/nextra/src/components/code.tsx
new file mode 100644
index 0000000000..5f987613b2
--- /dev/null
+++ b/packages/nextra/src/components/code.tsx
@@ -0,0 +1,13 @@
+import React, { ComponentProps, ReactElement } from 'react'
+
+export const Code = ({
+  children,
+  ...props
+}: ComponentProps<'code'>): ReactElement => {
+  return (
+    // always show code blocks in ltr
+    <code dir="ltr" {...props}>
+      {children}
+    </code>
+  )
+}
diff --git a/packages/nextra/src/components/copy-to-clipboard.tsx b/packages/nextra/src/components/copy-to-clipboard.tsx
new file mode 100644
index 0000000000..db711b2d4b
--- /dev/null
+++ b/packages/nextra/src/components/copy-to-clipboard.tsx
@@ -0,0 +1,61 @@
+import React, {
+  ComponentProps,
+  ReactElement,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useState
+} from 'react'
+import { onlyText } from 'react-children-utilities'
+import { CheckIcon, CopyIcon } from '../icons'
+
+export const CopyToClipboard = ({
+  value,
+  className
+}: {
+  value: ReactNode
+  className?: string
+}): ReactElement => {
+  const [isCopied, setCopied] = useState(false)
+
+  useEffect(() => {
+    if (!isCopied) return
+    const timerId = setTimeout(() => {
+      setCopied(false)
+    }, 2000)
+
+    return () => {
+      clearTimeout(timerId)
+    }
+  }, [isCopied])
+
+  const handleClick = useCallback<
+    NonNullable<ComponentProps<'button'>['onClick']>
+  >(async () => {
+    setCopied(true)
+    if (!navigator?.clipboard) {
+      console.error('Access to clipboard rejected!')
+    }
+    try {
+      await navigator.clipboard.writeText(onlyText(value))
+    } catch {
+      console.error('Failed to copy!')
+    }
+  }, [value])
+
+  const IconToUse = isCopied ? CheckIcon : CopyIcon
+
+  return (
+    <button
+      onClick={handleClick}
+      className={[
+        'nextra-copy-button rounded-md p-2 transition-colors',
+        'bg-primary-700/5 dark:bg-primary-300/10 border border-black/5 dark:border-white/10',
+        'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-50',
+        className || ''
+      ].join(' ')}
+    >
+      <IconToUse className="pointer-events-none h-4 w-4" />
+    </button>
+  )
+}
diff --git a/packages/nextra/src/components/index.ts b/packages/nextra/src/components/index.ts
new file mode 100644
index 0000000000..01a3b1fb10
--- /dev/null
+++ b/packages/nextra/src/components/index.ts
@@ -0,0 +1,3 @@
+export { CopyToClipboard } from './copy-to-clipboard'
+export { Code } from './code'
+export { Pre } from './pre'
diff --git a/packages/nextra/src/components/pre.tsx b/packages/nextra/src/components/pre.tsx
new file mode 100644
index 0000000000..80b75e322d
--- /dev/null
+++ b/packages/nextra/src/components/pre.tsx
@@ -0,0 +1,40 @@
+import React, { ComponentProps, ReactElement } from 'react'
+import { CopyToClipboard } from './copy-to-clipboard'
+
+export const Pre = ({
+  children,
+  className,
+  ...props
+}: ComponentProps<'pre'> & {
+  'data-filename'?: string
+  'data-nextra-copy'?: ''
+}): ReactElement => {
+  const hasCopy = 'data-nextra-copy' in props
+  const filename = props['data-filename']
+
+  return (
+    <>
+      {filename && (
+        <div className="bg-primary-700/5 text-gray-700 absolute top-0 z-[1] w-full truncate rounded-t-xl py-2 px-4 text-xs dark:bg-primary-300/10 dark:text-gray-200">
+          {filename}
+        </div>
+      )}
+      <pre
+        className={[
+          'bg-primary-700/5 mt-6 mb-4 overflow-x-auto rounded-xl font-medium subpixel-antialiased dark:bg-primary-300/10',
+          filename ? 'pt-12 pb-4' : 'py-4',
+          className || ''
+        ].join(' ')}
+        {...props}
+      >
+        {children}
+      </pre>
+      {hasCopy && (
+        <CopyToClipboard
+          value={children}
+          className={'absolute m-2 right-0 ' + (filename ? 'top-8' : 'top-0')}
+        />
+      )}
+    </>
+  )
+}
diff --git a/packages/nextra/src/constants.ts b/packages/nextra/src/constants.ts
index 69d322aa8e..e60f898f1b 100644
--- a/packages/nextra/src/constants.ts
+++ b/packages/nextra/src/constants.ts
@@ -6,4 +6,13 @@ export const LOCALE_REGEX = /\.([a-z]{2}(-[A-Z]{2})?)$/
 
 export const DEFAULT_LOCALE = 'en-US'
 
-export const OFFICIAL_THEMES = ['nextra-theme-docs', 'nextra-theme-blog']
+export const OFFICIAL_THEMES = [
+  'nextra-theme-docs',
+  'nextra-theme-blog'
+] as const
+
+export const META_FILENAME = '_meta.json'
+
+export const CWD = process.cwd()
+
+export const MARKDOWN_EXTENSIONS = ['md', 'mdx'] as const
diff --git a/packages/nextra/src/content-dump.ts b/packages/nextra/src/content-dump.ts
index 9fc53e7842..4b76b4eb18 100644
--- a/packages/nextra/src/content-dump.ts
+++ b/packages/nextra/src/content-dump.ts
@@ -1,12 +1,14 @@
 import fs from 'graceful-fs'
 import path from 'path'
+import { FrontMatter } from './types'
+import { CWD } from './constants'
 
 const { statSync, mkdirSync } = fs
 
-const cacheDir = path.join(process.cwd(), '.next', 'cache')
-const assetDir = path.join(process.cwd(), '.next', 'static', 'chunks')
+const cacheDir = path.join(CWD, '.next', 'cache')
+const assetDir = path.join(CWD, '.next', 'static', 'chunks')
 
-const asset: { [locale: string]: any } = {}
+const asset: { [locale: string]: any } = Object.create(null)
 const cached = new Map<string, boolean>()
 
 try {
@@ -37,30 +39,30 @@ function initFromCache(filename: string) {
 }
 
 export function addPage({
-  fileLocale,
+  locale,
   route,
   title,
-  meta,
+  frontMatter,
   structurizedData
 }: {
-  fileLocale: string
+  locale: string
   route: string
   title: string
-  meta: Record<string, any>
+  frontMatter: FrontMatter
   structurizedData: any
 }): void {
-  const dataFilename = `nextra-data-${fileLocale}.json`
+  const dataFilename = `nextra-data-${locale}.json`
 
-  asset[fileLocale] ||= initFromCache(dataFilename)
-  asset[fileLocale][route] = {
-    title: title || meta.title,
+  asset[locale] ||= initFromCache(dataFilename)
+  asset[locale][route] = {
+    title: title || frontMatter.title,
     data: structurizedData
   }
 
   // To prevent race conditions, we temporarily use the sync method to flush.
   // @TODO: introduce mutex lock, or only generate the asset when finishing the
   // entire build.
-  const content = JSON.stringify(asset[fileLocale])
+  const content = JSON.stringify(asset[locale])
   fs.writeFileSync(path.join(assetDir, dataFilename), content)
   fs.writeFileSync(path.join(cacheDir, dataFilename), content)
 }
diff --git a/packages/nextra/src/context.ts b/packages/nextra/src/context.ts
index 7b8381e434..06285a6575 100644
--- a/packages/nextra/src/context.ts
+++ b/packages/nextra/src/context.ts
@@ -1,16 +1,11 @@
-interface Page {
-  name: string
-  route: string
-  children?: Page[]
-  meta: {
-    type?: string
-    title?: string
-    hidden?: boolean
-  }
-  frontMatter?: any
-}
+import { META_FILENAME } from './constants'
+import { normalizeMeta } from './utils'
+import { MetaJsonFile, PageMapItem, Page } from './types'
 
-function getContext(name: string) {
+function getContext(name: string): {
+  pageMap: PageMapItem[]
+  route: string
+} {
   const context = globalThis.__nextra_internal__
   if (!context) {
     throw new Error(
@@ -20,63 +15,64 @@ function getContext(name: string) {
   return context
 }
 
-function normalizeMeta(meta: any) {
-  if (typeof meta === 'string') {
-    meta = {
-      title: meta
-    }
-  }
-  return meta
-}
-
-function filter(pageMap: any, activeLevel?: string) {
-  let activeLevelPages: Page[] | undefined
-  let meta = pageMap.find((item: any) => item.name === 'meta.json')?.meta || {}
-  const metaKeys = Object.keys(meta)
-
+function filter(
+  pageMap: PageMapItem[],
+  activeLevel?: string
+): {
+  items: Page[]
+  activeLevelPages: Page[]
+} {
+  let activeLevelPages: Page[] = []
   const items: Page[] = []
+  const meta =
+    pageMap.find((item): item is MetaJsonFile => item.name === META_FILENAME)
+      ?.meta || {}
+
   for (const item of pageMap) {
-    if (item.name === 'meta.json') continue
-    const page: Page = {
+    if (item.name === META_FILENAME) continue
+    const page = {
       ...item,
       meta: normalizeMeta(meta[item.name])
-    }
-    if (item.children) {
-      const filteredChildren = filter(item.children, activeLevel)
-      page.children = filteredChildren[0]
-      if (filteredChildren[1]) {
-        activeLevelPages = filteredChildren[1]
+    } as Page
+
+    if ('children' in page && page.children) {
+      const filtered = filter(page.children, activeLevel)
+      page.children = filtered.items
+      if (filtered.activeLevelPages.length) {
+        activeLevelPages = filtered.activeLevelPages
       } else if (page.route === activeLevel) {
-        activeLevelPages = activeLevelPages || page.children
+        if (!activeLevelPages.length) {
+          activeLevelPages = page.children
+        }
       }
     }
     items.push(page)
   }
 
-  return [
-    items.sort((a, b) => {
-      const indexA = metaKeys.indexOf(a.name)
-      const indexB = metaKeys.indexOf(b.name)
-      if (indexA === -1 && indexB === -1) return a.name < b.name ? -1 : 1
-      if (indexA === -1) return 1
-      if (indexB === -1) return -1
-      return indexA - indexB
-    }),
-    activeLevelPages
-  ]
+  const metaKeys = Object.keys(meta)
+  items.sort((a, b) => {
+    const indexA = metaKeys.indexOf(a.name)
+    const indexB = metaKeys.indexOf(b.name)
+    if (indexA === -1 && indexB === -1) return a.name < b.name ? -1 : 1
+    if (indexA === -1) return 1
+    if (indexB === -1) return -1
+    return indexA - indexB
+  })
+
+  return { items, activeLevelPages }
 }
 
-export function getAllPages() {
-  const internal = getContext('getAllPages')
-  return filter(internal.pageMap)[0]
+export function getAllPages(): Page[] {
+  const { pageMap } = getContext('getAllPages')
+  return filter(pageMap).items
 }
 
-export function getCurrentLevelPages() {
-  const internal = getContext('getCurrentLevelPages')
-  return filter(internal.pageMap, internal.route)[1] || []
+export function getCurrentLevelPages(): Page[] {
+  const { pageMap, route } = getContext('getCurrentLevelPages')
+  return filter(pageMap, route).activeLevelPages
 }
 
-export function getPagesUnderRoute(route: string) {
-  const internal = getContext('getPagesUnderRoute')
-  return filter(internal.pageMap, route)[1] || []
+export function getPagesUnderRoute(route: string): Page[] {
+  const { pageMap } = getContext('getPagesUnderRoute')
+  return filter(pageMap, route).activeLevelPages
 }
diff --git a/packages/nextra/src/filter-route-locale.ts b/packages/nextra/src/filter-route-locale.ts
index abdf86e7f3..2aa86ca28d 100644
--- a/packages/nextra/src/filter-route-locale.ts
+++ b/packages/nextra/src/filter-route-locale.ts
@@ -1,4 +1,5 @@
-import type { PageMapItem } from './types'
+import type { MdxFile, MetaJsonFile, PageMapItem } from './types'
+import { truthy } from './utils'
 
 export default function filterRouteLocale(
   pageMap: PageMapItem[],
@@ -7,41 +8,36 @@ export default function filterRouteLocale(
 ): PageMapItem[] {
   const isDefaultLocale = !locale || locale === defaultLocale
 
-  const filteredPageMap = []
+  const filteredPageMap: PageMapItem[] = []
 
   // We fallback to the default locale
-  const fallbackPages: Record<string, PageMapItem | null> = {}
+  const fallbackPages: Record<string, PageMapItem | null> = Object.create(null)
 
-  for (const page of pageMap) {
-    if (page.children) {
+  for (let page of pageMap) {
+    if ('children' in page && page.children) {
       filteredPageMap.push({
         ...page,
         children: filterRouteLocale(page.children, locale, defaultLocale)
       })
       continue
     }
-
+    page = page as MdxFile | MetaJsonFile
     const localDoesMatch =
       (!page.locale && isDefaultLocale) || page.locale === locale
 
     if (localDoesMatch) {
       fallbackPages[page.name] = null
       filteredPageMap.push(page)
-    } else {
-      if (
-        fallbackPages[page.name] !== null &&
-        (!page.locale || page.locale === defaultLocale)
-      ) {
-        fallbackPages[page.name] = page
-      }
-    }
-  }
-
-  for (const name in fallbackPages) {
-    if (fallbackPages[name]) {
-      filteredPageMap.push(fallbackPages[name] as PageMapItem)
+    } else if (
+      fallbackPages[page.name] !== null &&
+      (!page.locale || page.locale === defaultLocale)
+    ) {
+      fallbackPages[page.name] = page
     }
   }
 
-  return filteredPageMap
+  return [
+    ...filteredPageMap,
+    ...Object.values(fallbackPages).filter(truthy)
+  ]
 }
diff --git a/packages/nextra/src/icons.ts b/packages/nextra/src/icons.ts
deleted file mode 100644
index f0ce4cad23..0000000000
--- a/packages/nextra/src/icons.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './icons/index'
diff --git a/packages/nextra/src/icons/arrow-right.tsx b/packages/nextra/src/icons/arrow-right.tsx
index 9699025971..d35b5d8963 100644
--- a/packages/nextra/src/icons/arrow-right.tsx
+++ b/packages/nextra/src/icons/arrow-right.tsx
@@ -1,6 +1,9 @@
-import React, { ComponentProps } from 'react'
+import React, { ComponentProps, ReactElement } from 'react'
 
-export function ArrowRightIcon(props: ComponentProps<'svg'>) {
+export function ArrowRightIcon({
+  pathClassName,
+  ...props
+}: ComponentProps<'svg'> & { pathClassName?: string }): ReactElement {
   return (
     <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
       <path
@@ -8,6 +11,7 @@ export function ArrowRightIcon(props: ComponentProps<'svg'>) {
         strokeLinejoin="round"
         strokeWidth="2"
         d="M9 5l7 7-7 7"
+        className={pathClassName}
       />
     </svg>
   )
diff --git a/packages/nextra/src/icons/check.tsx b/packages/nextra/src/icons/check.tsx
index 8c49d47d8b..b00e9b0b1d 100644
--- a/packages/nextra/src/icons/check.tsx
+++ b/packages/nextra/src/icons/check.tsx
@@ -1,8 +1,14 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 
-export function CheckIcon() {
+export function CheckIcon({ className }: { className?: string }): ReactElement {
   return (
-    <svg viewBox="0 0 20 20" width="1em" height="1em" fill="currentColor">
+    <svg
+      viewBox="0 0 20 20"
+      width="1em"
+      height="1em"
+      fill="currentColor"
+      className={className}
+    >
       <path
         fillRule="evenodd"
         d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
diff --git a/packages/nextra/src/icons/copy.tsx b/packages/nextra/src/icons/copy.tsx
new file mode 100644
index 0000000000..c71c5b42c3
--- /dev/null
+++ b/packages/nextra/src/icons/copy.tsx
@@ -0,0 +1,34 @@
+import React, { ReactElement } from 'react'
+
+export const CopyIcon = ({
+  className
+}: {
+  className?: string
+}): ReactElement => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    stroke="currentColor"
+    className={className}
+  >
+    <rect
+      x="9"
+      y="9"
+      width="13"
+      height="13"
+      rx="2"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
diff --git a/packages/nextra/src/icons/index.ts b/packages/nextra/src/icons/index.ts
index 93171d51f8..82f06a0fc7 100644
--- a/packages/nextra/src/icons/index.ts
+++ b/packages/nextra/src/icons/index.ts
@@ -1,5 +1,6 @@
 export * from './arrow-right'
 export * from './check'
+export * from './copy'
 export * from './discord'
 export * from './github'
 export * from './globe'
diff --git a/packages/nextra/src/index.js b/packages/nextra/src/index.js
index 18b3bc60df..ba05cb9c92 100644
--- a/packages/nextra/src/index.js
+++ b/packages/nextra/src/index.js
@@ -1,8 +1,11 @@
 import { NextraPlugin, pageMapCache } from './plugin'
-import { DEFAULT_LOCALE, MARKDOWN_EXTENSION_REGEX } from './constants'
+import {
+  DEFAULT_LOCALE,
+  MARKDOWN_EXTENSION_REGEX,
+  MARKDOWN_EXTENSIONS
+} from './constants'
 
 const DEFAULT_EXTENSIONS = ['js', 'jsx', 'ts', 'tsx']
-const MARKDOWN_EXTENSIONS = ['md', 'mdx']
 
 const nextra = (...config) =>
   function withNextra(nextConfig = {}) {
diff --git a/packages/nextra/src/loader.ts b/packages/nextra/src/loader.ts
index 72fdd3eedd..ef3184c46d 100644
--- a/packages/nextra/src/loader.ts
+++ b/packages/nextra/src/loader.ts
@@ -1,4 +1,4 @@
-import type { LoaderOptions, PageOpts } from './types'
+import type { LoaderOptions, MdxPath, PageOpts } from './types'
 
 import path from 'path'
 import grayMatter from 'gray-matter'
@@ -16,17 +16,19 @@ import {
   IS_PRODUCTION,
   DEFAULT_LOCALE,
   OFFICIAL_THEMES,
-  MARKDOWN_EXTENSION_REGEX
+  MARKDOWN_EXTENSION_REGEX,
+  META_FILENAME,
+  CWD
 } from './constants'
 
 // TODO: create this as a webpack plugin.
 const indexContentEmitted = new Set<string>()
 
-const pagesDir = findPagesDir(process.cwd()).pages
+const pagesDir = findPagesDir(CWD).pages
 
 const [repository, gitRoot] = (function () {
   try {
-    const repo = Repository.discover(process.cwd())
+    const repo = Repository.discover(CWD)
     if (repo.isShallow()) {
       if (process.env.VERCEL) {
         console.warn(
@@ -56,12 +58,12 @@ async function loader(
   context: LoaderContext<LoaderOptions>,
   source: string
 ): Promise<string> {
-  const { resourcePath } = context
   const {
     pageImport,
     theme,
     themeConfig,
     defaultLocale,
+    unstable_defaultShowCopyCode,
     unstable_flexsearch,
     unstable_staticImage,
     mdxOptions,
@@ -76,28 +78,29 @@ async function loader(
     throw new Error('No Nextra theme found!')
   }
 
-  if (resourcePath.includes('/pages/api/')) {
+  const mdxPath = context.resourcePath as MdxPath
+
+  if (mdxPath.includes('/pages/api/')) {
     console.warn(
-      `[nextra] Ignoring ${resourcePath} because it is located in the "pages/api" folder.`
+      `[nextra] Ignoring ${mdxPath} because it is located in the "pages/api" folder.`
     )
     return ''
   }
 
-  const { items: pageMapResult, fileMap } = IS_PRODUCTION
+  const { items, fileMap } = IS_PRODUCTION
     ? pageMapCache.get()!
-    : await collectFiles(pagesDir, '/')
+    : await collectFiles(pagesDir)
 
   // mdx is imported but is outside the `pages` directory
-  if (!fileMap[resourcePath]) {
-    fileMap[resourcePath] = await collectMdx(resourcePath)
-    context.addMissingDependency(resourcePath)
+  if (!fileMap[mdxPath]) {
+    fileMap[mdxPath] = await collectMdx(mdxPath)
+    context.addMissingDependency(mdxPath)
   }
 
-  const filename = path.basename(resourcePath)
-  const fileLocale = parseFileName(filename).locale
+  const { locale } = parseFileName(mdxPath)
 
-  for (const [filePath, { name, locale }] of Object.entries(fileMap)) {
-    if (name === 'meta.json' && (!fileLocale || locale === fileLocale)) {
+  for (const [filePath, file] of Object.entries(fileMap)) {
+    if (file.name === META_FILENAME && (!locale || file.locale === locale)) {
       context.addDependency(filePath)
     }
   }
@@ -106,17 +109,19 @@ async function loader(
   context.addContextDependency(pagesDir)
 
   // Extract frontMatter information if it exists
-  const { data: meta, content } = grayMatter(source)
+  const { data: frontMatter, content } = grayMatter(source)
 
   const { result, headings, structurizedData, hasJsxInH1 } = await compileMdx(
     content,
     mdxOptions,
     {
+      unstable_defaultShowCopyCode,
       unstable_staticImage,
       unstable_flexsearch
     },
-    resourcePath
+    mdxPath
   )
+  // @ts-expect-error
   const cssImport = OFFICIAL_THEMES.includes(theme)
     ? `import '${theme}/style.css'`
     : ''
@@ -129,33 +134,33 @@ ${result}
 export default MDXContent`.trimStart()
   }
 
-  const [pageMap, route, title] = getPageMap(
-    resourcePath,
-    pageMapResult,
+  const { route, title, pageMap } = getPageMap({
+    filePath: mdxPath,
     fileMap,
-    defaultLocale
-  )
+    defaultLocale,
+    pageMap: items
+  })
 
   const skipFlexsearchIndexing =
-    IS_PRODUCTION && indexContentEmitted.has(filename)
+    IS_PRODUCTION && indexContentEmitted.has(mdxPath)
   if (unstable_flexsearch && !skipFlexsearchIndexing) {
-    if (meta.searchable !== false) {
+    if (frontMatter.searchable !== false) {
       addPage({
-        fileLocale: fileLocale || DEFAULT_LOCALE,
+        locale: locale || DEFAULT_LOCALE,
         route,
         title,
-        meta,
+        frontMatter,
         structurizedData
       })
     }
-    indexContentEmitted.add(filename)
+    indexContentEmitted.add(mdxPath)
   }
 
   let timestamp: PageOpts['timestamp']
   if (repository && gitRoot) {
     try {
       timestamp = await repository.getFileLatestModifiedDateAsync(
-        path.relative(gitRoot, resourcePath)
+        path.relative(gitRoot, mdxPath)
       )
     } catch {
       // Failed to get timestamp for this file. Silently ignore it.
@@ -169,10 +174,11 @@ export default MDXContent`.trimStart()
   const themeConfigImport = themeConfig
     ? `import __nextra_themeConfig__ from '${slash(path.resolve(themeConfig))}'`
     : ''
+
   const pageOpts: Omit<PageOpts, 'title'> = {
-    filename,
+    filePath: slash(path.relative(CWD, mdxPath)),
     route: slash(route),
-    meta,
+    frontMatter,
     pageMap,
     headings,
     hasJsxInH1,
@@ -183,7 +189,7 @@ export default MDXContent`.trimStart()
 
   const pageNextRoute =
     '/' +
-    slash(path.relative(pagesDir, resourcePath))
+    slash(path.relative(pagesDir, mdxPath))
       // Remove the `mdx?` extension
       .replace(MARKDOWN_EXTENSION_REGEX, '')
       // Remove the `*/index` suffix
@@ -193,12 +199,9 @@ export default MDXContent`.trimStart()
 
   return `
 import { SSGContext as __nextra_SSGContext__ } from 'nextra/ssg'
-import __nextra_withLayout__ from '${layout}'
 ${themeConfigImport}
 ${cssImport}
 
-${result}
-
 const __nextra_pageOpts__ = ${JSON.stringify(pageOpts)}
 
 globalThis.__nextra_internal__ = {
@@ -206,23 +209,31 @@ globalThis.__nextra_internal__ = {
   route: __nextra_pageOpts__.route
 }
 
+${result}
+
+__nextra_pageOpts__.title =
+  ${JSON.stringify(frontMatter.title)} ||
+  (typeof __nextra_title__ === 'string' && __nextra_title__) ||
+  'Untitled'
+
 const Content = props => (
   <__nextra_SSGContext__.Provider value={props}>
     <MDXContent />
   </__nextra_SSGContext__.Provider>
 )
 
-export default __nextra_withLayout__(
-  ${JSON.stringify(pageNextRoute)},
+globalThis.__nextra_pageContext__ ||= Object.create(null)
+
+// Make sure the same component is always returned so Next.js will render the
+// stable layout. We then put the actual content into a global store and use
+// the route to identify it.
+globalThis.__nextra_pageContext__[${JSON.stringify(pageNextRoute)}] = {
   Content,
-  {
-    title: __nextra_pageOpts__.meta.title
-      || (typeof __nextra_title__ === 'string' && __nextra_title__)
-      || 'Untitled',
-    ...__nextra_pageOpts__
-  },
-  ${themeConfigImport ? '__nextra_themeConfig__' : 'null'},
-)`.trimStart()
+  pageOpts: __nextra_pageOpts__,
+  themeConfig: ${themeConfigImport ? '__nextra_themeConfig__' : 'null'}
+}
+
+export { default } from '${layout}'`.trimStart()
 }
 
 export default function syncLoader(
diff --git a/packages/nextra/src/mdx-plugins/rehype-handler.js b/packages/nextra/src/mdx-plugins/rehype-handler.js
index 0476c70327..97e7305c2d 100644
--- a/packages/nextra/src/mdx-plugins/rehype-handler.js
+++ b/packages/nextra/src/mdx-plugins/rehype-handler.js
@@ -9,8 +9,9 @@ function visit(node, tagNames, handler) {
   node.children?.forEach(n => visit(n, tagNames, handler))
 }
 
-export function parseMeta() {
-  return tree => {
+export const parseMeta =
+  ({ defaultShowCopyCode }) =>
+  tree => {
     visit(tree, ['pre'], node => {
       if (
         // Block code
@@ -22,33 +23,44 @@ export function parseMeta() {
         const meta =
           node.children[0].data?.meta ?? node.children[0].properties.metastring
 
-        if (meta) {
-          const filename = meta.match(/filename="([^"]+)"/)?.[1]
-          if (filename) {
-            node.__nextra_filename__ = filename
-          }
+        const hasCopy = meta
+          ? (defaultShowCopyCode && !/( |^)copy=false($| )/.test(meta)) ||
+            /( |^)copy($| )/.test(meta)
+          : defaultShowCopyCode
+        if (hasCopy) {
+          node.__nextra_copy__ = true
         }
-      }
-    })
-  }
-}
 
-export function attachMeta() {
-  return tree => {
-    const slugger = new Slugger()
-
-    visit(tree, ['div', 'h2', 'h3', 'h4', 'h5', 'h6'], node => {
-      if (node.tagName === 'div') {
-        // Attach filename
-        if (!('data-rehype-pretty-code-fragment' in node.properties)) return
-        node.properties['data-nextra-code'] = ''
-        if ('__nextra_filename__' in node) {
-          node.properties['data-filename'] = node.__nextra_filename__
+        if (!meta) {
+          return
+        }
+        const filename = meta.match(/filename="([^"]+)"/)?.[1]
+        if (filename) {
+          node.__nextra_filename__ = filename
         }
-      } else {
-        // Attach slug
-        node.properties.id ||= slugger.slug(getFlattenedValue(node))
       }
     })
   }
+
+export const attachMeta = () => tree => {
+  const slugger = new Slugger()
+
+  visit(tree, ['div', 'h2', 'h3', 'h4', 'h5', 'h6'], node => {
+    if (node.tagName !== 'div') {
+      // Attach slug
+      node.properties.id ||= slugger.slug(getFlattenedValue(node))
+      return
+    }
+    if (!('data-rehype-pretty-code-fragment' in node.properties)) {
+      return
+    }
+    const preElement = node.children[0]
+    if ('__nextra_copy__' in node) {
+      preElement.properties['data-nextra-copy'] = ''
+    }
+    // Attach filename
+    if ('__nextra_filename__' in node) {
+      preElement.properties['data-filename'] = node.__nextra_filename__
+    }
+  })
 }
diff --git a/packages/nextra/src/page-map.ts b/packages/nextra/src/page-map.ts
index 1a2a881a5e..0f753808ca 100644
--- a/packages/nextra/src/page-map.ts
+++ b/packages/nextra/src/page-map.ts
@@ -1,28 +1,44 @@
-import { PageMapItem } from './types'
-import { parseFileName } from './utils'
+import { FileMap, MdxPath, MetaJsonPath, PageMapItem } from './types'
 import path from 'path'
+import { META_FILENAME } from './constants'
+import { normalizeMeta, parseFileName } from './utils'
 import filterRouteLocale from './filter-route-locale'
 
-export function getPageMap(
-  currentResourcePath: string,
-  pageMap: PageMapItem[],
-  fileMap: Record<string, PageMapItem>,
+type PageMapProps = {
+  filePath: string
+  pageMap: PageMapItem[]
+  fileMap: FileMap
   defaultLocale: string
-): [PageMapItem[], string, string] {
-  const activeRouteLocale = parseFileName(currentResourcePath).locale
-  const pageItem = fileMap[currentResourcePath]
-  const metaPath = path.dirname(currentResourcePath)
-  const metaExtension = activeRouteLocale ? `${activeRouteLocale}.json` : `json`
+}
+
+export function getPageMap({
+  filePath,
+  pageMap,
+  fileMap,
+  defaultLocale
+}: PageMapProps): {
+  title: string
+  route: string
+  pageMap: PageMapItem[]
+} {
+  const { locale } = parseFileName(filePath)
+  const pageItem = fileMap[filePath as MdxPath]
+
+  const metaPath = path.dirname(filePath)
+  const metaFilename = locale
+    ? META_FILENAME.replace('.', `.${locale}.`)
+    : META_FILENAME
+
   const pageMeta =
-    fileMap[`${metaPath}/meta.${metaExtension}`]?.meta?.[pageItem.name]
-  const title =
-    (typeof pageMeta === 'string' ? pageMeta : pageMeta?.title) || pageItem.name
+    fileMap[`${metaPath}/${metaFilename}` as MetaJsonPath]?.meta?.[
+      pageItem.name
+    ]
 
-  return [
-    activeRouteLocale
-      ? filterRouteLocale(pageMap, activeRouteLocale, defaultLocale)
+  return {
+    pageMap: locale
+      ? filterRouteLocale(pageMap, locale, defaultLocale)
       : pageMap,
-    pageItem.route,
-    title
-  ]
+    title: normalizeMeta(pageMeta)?.title || pageItem.name,
+    route: pageItem.route
+  }
 }
diff --git a/packages/nextra/src/plugin.ts b/packages/nextra/src/plugin.ts
index 3d59d5932a..1344c4c49f 100644
--- a/packages/nextra/src/plugin.ts
+++ b/packages/nextra/src/plugin.ts
@@ -1,7 +1,15 @@
-import { NextraConfig, PageMapItem, NextraPluginCache } from './types'
+import {
+  NextraConfig,
+  FileMap,
+  MdxPath,
+  MetaJsonPath,
+  PageMapItem,
+  Folder,
+  MdxFile
+} from './types'
 import fs from 'graceful-fs'
 import { promisify } from 'util'
-import { parseFileName, parseJsonFile } from './utils'
+import { parseFileName, parseJsonFile, truthy } from './utils'
 import path from 'path'
 import slash from 'slash'
 import grayMatter from 'gray-matter'
@@ -9,12 +17,15 @@ import { findPagesDir } from 'next/dist/lib/find-pages-dir.js'
 import { Compiler } from 'webpack'
 
 import { restoreCache } from './content-dump'
-import { MARKDOWN_EXTENSION_REGEX } from './constants'
+import { CWD, MARKDOWN_EXTENSION_REGEX, META_FILENAME } from './constants'
 
 const readdir = promisify(fs.readdir)
 const readFile = promisify(fs.readFile)
 
-export const collectMdx = async (filePath: string, route = '') => {
+export const collectMdx = async (
+  filePath: string,
+  route = ''
+): Promise<MdxFile> => {
   const { name, locale } = parseFileName(filePath)
 
   const content = await readFile(filePath, 'utf8')
@@ -22,7 +33,7 @@ export const collectMdx = async (filePath: string, route = '') => {
   return {
     name,
     route,
-    locale,
+    ...(locale && { locale }),
     ...(Object.keys(data).length && { frontMatter: data })
   }
 }
@@ -30,60 +41,67 @@ export const collectMdx = async (filePath: string, route = '') => {
 export async function collectFiles(
   dir: string,
   route = '/',
-  fileMap: Record<string, any> = {}
-): Promise<{ items: PageMapItem[]; fileMap: Record<string, any> }> {
+  fileMap: FileMap = Object.create(null)
+): Promise<{ items: PageMapItem[]; fileMap: FileMap }> {
   const files = await readdir(dir, { withFileTypes: true })
 
-  const items = (
-    await Promise.all(
-      files.map(async f => {
-        const filePath = path.resolve(dir, f.name)
-        const { name, locale, ext } = parseFileName(filePath)
-        const fileRoute = slash(path.join(route, name.replace(/^index$/, '')))
-
-        if (f.isDirectory()) {
-          if (fileRoute === '/api') return
-          const { items } = await collectFiles(filePath, fileRoute, fileMap)
-          if (!items.length) return
-          return {
-            name: f.name,
-            children: items,
-            route: fileRoute
-          }
+  const items = await Promise.all(
+    files.map(async f => {
+      const filePath = path.resolve(dir, f.name)
+      const { name, locale, ext } = parseFileName(filePath)
+      const fileRoute = slash(path.join(route, name.replace(/^index$/, '')))
+
+      if (f.isDirectory()) {
+        if (fileRoute === '/api') return
+        const { items } = await collectFiles(filePath, fileRoute, fileMap)
+        if (!items.length) return
+        return <Folder>{
+          name: f.name,
+          route: fileRoute,
+          children: items
         }
+      }
 
-        if (MARKDOWN_EXTENSION_REGEX.test(ext)) {
-          fileMap[filePath] = await collectMdx(filePath, fileRoute)
-          return fileMap[filePath]
+      if (MARKDOWN_EXTENSION_REGEX.test(ext)) {
+        const fp = filePath as MdxPath
+        fileMap[fp] = await collectMdx(fp, fileRoute)
+        return fileMap[fp]
+      }
+      const fileName = name + ext
+
+      if (fileName === META_FILENAME) {
+        const fp = filePath as MetaJsonPath
+        const content = await readFile(fp, 'utf8')
+        fileMap[fp] = {
+          name: META_FILENAME,
+          ...(locale && { locale }),
+          meta: parseJsonFile(content, fp)
         }
+        return fileMap[fp]
+      }
 
-        if (ext === '.json' && name === 'meta') {
-          const content = await readFile(filePath, 'utf8')
-          fileMap[filePath] = {
-            name: 'meta.json',
-            locale,
-            meta: parseJsonFile(content, filePath)
-          }
-          return fileMap[filePath]
-        }
-      })
-    )
-  ).filter(Boolean)
+      if (fileName === 'meta.json') {
+        console.warn(
+          `[nextra] "meta.json" was renamed to "_meta.json". Rename the following file:`,
+          path.relative(CWD, filePath)
+        )
+      }
+    })
+  )
 
   return {
-    items,
+    items: items.filter(truthy),
     fileMap
   }
 }
 
-class PageMapCache implements NextraPluginCache {
-  public cache: { items: PageMapItem[]; fileMap: Record<string, any> } | null
-
-  constructor() {
-    this.cache = { items: [], fileMap: {} }
+export class PageMapCache {
+  cache: { items: PageMapItem[]; fileMap: FileMap } | null = {
+    items: [],
+    fileMap: Object.create(null)
   }
 
-  set(data: { items: PageMapItem[]; fileMap: Record<string, any> }) {
+  set(data: { items: PageMapItem[]; fileMap: FileMap }) {
     this.cache!.items = data.items
     this.cache!.fileMap = data.fileMap
   }
@@ -110,10 +128,7 @@ export class NextraPlugin {
           // Restore the search data from the cache.
           restoreCache()
         }
-        const result = await collectFiles(
-          findPagesDir(process.cwd()).pages,
-          '/'
-        )
+        const result = await collectFiles(findPagesDir(CWD).pages, '/')
         pageMapCache.set(result)
         callback()
       }
diff --git a/packages/nextra/src/ssg.ts b/packages/nextra/src/ssg.ts
index 785f86e18a..3b47d78c53 100644
--- a/packages/nextra/src/ssg.ts
+++ b/packages/nextra/src/ssg.ts
@@ -1,4 +1,5 @@
 import { createContext, useContext } from 'react'
+
 export const SSGContext = createContext<any>(false)
 export const useSSG = (key = 'ssg') => useContext(SSGContext)?.[key]
 
diff --git a/packages/nextra/src/types.ts b/packages/nextra/src/types.ts
index a1ae3d4a71..874910c248 100644
--- a/packages/nextra/src/types.ts
+++ b/packages/nextra/src/types.ts
@@ -3,44 +3,57 @@ import { Heading as MDASTHeading } from 'mdast'
 import { ProcessorOptions } from '@mdx-js/mdx'
 import { Options as RehypePrettyCodeOptions } from 'rehype-pretty-code'
 import { GrayMatterFile } from 'gray-matter'
+import { PageMapCache } from './plugin'
+import { MARKDOWN_EXTENSIONS, META_FILENAME } from './constants'
 
-export abstract class NextraPluginCache {
-  public cache: { items: PageMapItem[]; fileMap: Record<string, any> } | null
+type MetaFilename = typeof META_FILENAME
+type MarkdownExtension = typeof MARKDOWN_EXTENSIONS[number]
 
-  constructor() {
-    this.cache = { items: [], fileMap: {} }
-  }
-
-  set(data: { items: PageMapItem[]; fileMap: Record<string, any> }) {
-    this.cache!.items = data.items
-    this.cache!.fileMap = data.fileMap
-  }
-
-  clear() {
-    this.cache = null
-  }
-
-  get() {
-    return this.cache
-  }
-}
 export interface LoaderOptions extends NextraConfig {
   pageImport?: boolean
   locales: string[]
   defaultLocale: string
-  pageMapCache: NextraPluginCache
+  pageMapCache: PageMapCache
   newNextLinkBehavior?: boolean
 }
 
-export interface PageMapItem {
+export interface Folder<FileType = PageMapItem> {
   name: string
   route: string
+  children: FileType[]
+}
+
+export type MetaJsonFile = {
+  name: MetaFilename
   locale?: string
-  children?: PageMapItem[]
-  timestamp?: number
-  frontMatter?: Record<string, any>
-  meta?: Record<string, any>
-  active?: boolean
+  meta: {
+    [fileName: string]: Meta
+  }
+}
+
+export type FrontMatter = GrayMatterFile<string>['data']
+export type Meta = string | Record<string, any>
+
+export type MdxFile = {
+  name: string
+  route: string
+  locale?: string
+  frontMatter?: FrontMatter
+}
+
+export type MetaJsonPath = `${string}/${MetaFilename}`
+export type MdxPath = `${string}.${MarkdownExtension}`
+
+export type FileMap = {
+  [jsonPath: MetaJsonPath]: MetaJsonFile
+  [mdxPath: MdxPath]: MdxFile
+}
+
+export type PageMapItem = Folder | MdxFile | MetaJsonFile
+
+// PageMapItem without MetaJsonFile and with its meta from _meta.json
+export type Page = (MdxFile | Folder<Page>) & {
+  meta: Exclude<Meta, string>
 }
 
 export type Heading = MDASTHeading & {
@@ -48,9 +61,9 @@ export type Heading = MDASTHeading & {
 }
 
 export type PageOpts = {
-  filename: string
+  filePath: string
   route: string
-  meta: GrayMatterFile<string>['data']
+  frontMatter: FrontMatter
   pageMap: PageMapItem[]
   title: string
   headings: Heading[]
@@ -60,18 +73,13 @@ export type PageOpts = {
   newNextLinkBehavior?: boolean
 }
 
-export type PageMapResult = [
-  pageMap: PageMapItem[],
-  route: string,
-  title: string
-]
-
 type Theme = string
 type Flexsearch = boolean | { codeblocks: boolean }
 
 export type NextraConfig = {
   theme: Theme
   themeConfig?: string
+  unstable_defaultShowCopyCode?: boolean
   unstable_flexsearch?: Flexsearch
   unstable_staticImage?: boolean
   mdxOptions?: Pick<ProcessorOptions, 'rehypePlugins' | 'remarkPlugins'> & {
@@ -83,8 +91,6 @@ export type Nextra = (
   ...args: [NextraConfig] | [theme: Theme, themeConfig: string]
 ) => (nextConfig: NextConfig) => NextConfig
 
-const nextra: Nextra =
-  (...args) =>
-  nextConfig => ({})
+const nextra: Nextra = () => () => ({})
 
 export default nextra
diff --git a/packages/nextra/src/utils.ts b/packages/nextra/src/utils.ts
index 01ff6e2fc0..8be92f3272 100644
--- a/packages/nextra/src/utils.ts
+++ b/packages/nextra/src/utils.ts
@@ -1,6 +1,6 @@
-import fs from 'fs'
 import path from 'path'
 import { LOCALE_REGEX } from './constants'
+import { Meta } from './types'
 
 export function parseFileName(filePath: string): {
   name: string
@@ -32,11 +32,12 @@ export const parseJsonFile = (
   }
 }
 
-export const existsSync = (filePath: string): boolean => {
-  try {
-    fs.accessSync(filePath, fs.constants.F_OK)
-    return true
-  } catch {
-    return false
-  }
+type Truthy<T> = T extends false | '' | 0 | null | undefined ? never : T // from lodash
+
+export function truthy<T>(value: T): value is Truthy<T> {
+  return !!value
+}
+
+export function normalizeMeta(meta: Meta): Exclude<Meta, string> {
+  return typeof meta === 'string' ? { title: meta } : meta
 }
diff --git a/packages/nextra/styles/code-block.css b/packages/nextra/styles/code-block.css
index 4da5b71887..179aacbdeb 100644
--- a/packages/nextra/styles/code-block.css
+++ b/packages/nextra/styles/code-block.css
@@ -31,9 +31,6 @@ code {
 pre {
   /* content-visibility: auto; */
   contain: paint;
-  @apply bg-primary-700/5 mt-6 mb-4 overflow-x-auto rounded-xl py-4 font-medium subpixel-antialiased;
-  @apply dark:bg-primary-300/10;
-
   code {
     @apply grid min-w-full rounded-none border-none bg-transparent p-0 text-sm leading-5 text-current dark:bg-transparent;
     /* code blocks without languages don't have children that have px-4 */
@@ -47,15 +44,18 @@ pre {
   }
 }
 
-[data-nextra-code][data-filename] {
-  @apply relative block;
+[data-rehype-pretty-code-fragment] {
+  @apply relative;
+}
 
-  &:before {
-    content: attr(data-filename);
-    @apply bg-primary-700/5 text-gray-700 absolute top-0 z-[1] w-full truncate rounded-t-xl py-2 px-4 text-xs;
-    @apply dark:bg-primary-300/10 dark:text-gray-200;
-  }
-  pre {
-    @apply pt-12;
+@supports (
+  (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
+) {
+  .nextra-copy-button {
+    @apply backdrop-blur-md bg-opacity-[.85] dark:bg-opacity-80;
   }
 }
+
+.nextra-copy-button {
+  @apply border border-black/5 dark:border-white/10;
+}
diff --git a/packages/nextra/tsup.config.ts b/packages/nextra/tsup.config.ts
index cbefa6cc90..4ce1e18129 100644
--- a/packages/nextra/tsup.config.ts
+++ b/packages/nextra/tsup.config.ts
@@ -1,5 +1,6 @@
 import { defineConfig } from 'tsup'
 import tsconfig from './tsconfig.json'
+
 const { target } = tsconfig.compilerOptions
 
 export default defineConfig([
@@ -26,18 +27,17 @@ export default defineConfig([
     target
   },
   {
-    entry: ['src/compile.ts'],
+    name: 'nextra-esm',
+    entry: [
+      'src/loader.ts',
+      'src/compile.ts',
+      'src/icons/index.ts',
+      'src/components/index.ts'
+    ],
     format: 'esm',
-    name: 'nextra-mdx-compiler',
     dts: true,
-    target
-  },
-  {
-    entry: ['src/icons.ts'],
-    name: 'nextra-icons',
-    format: 'esm',
-    dts: true,
-    target
+    target,
+    clean: true
   },
   {
     entry: ['src/types.ts'],
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6d9fbc2cd7..f36decd8a7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,6 +29,7 @@ importers:
       '@edge-runtime/vm': 1.1.0-beta.23
       '@typescript-eslint/parser': ^5.32.0
       eslint: ^8.21.0
+      eslint-plugin-typescript-sort-keys: ^2.1.0
       prettier: ^2.7.1
       prettier-plugin-tailwindcss: ^0.1.13
       rimraf: ^3.0.2
@@ -39,6 +40,7 @@ importers:
       '@edge-runtime/vm': 1.1.0-beta.23
       '@typescript-eslint/parser': 5.32.0_qugx7qdu5zevzvxaiqyxfiwquq
       eslint: 8.21.0
+      eslint-plugin-typescript-sort-keys: 2.1.0_iosr3hrei2tubxveewluhu5lhy
       prettier: 2.7.1
       prettier-plugin-tailwindcss: 0.1.13_prettier@2.7.1
       rimraf: 3.0.2
@@ -134,6 +136,7 @@ importers:
       gray-matter: ^4.0.3
       next: ^12.2.4
       react: ^18.2.0
+      react-children-utilities: ^2.8.0
       react-dom: ^18.2.0
       rehype-mdx-title: ^1.0.0
       rehype-pretty-code: 0.2.4
@@ -148,6 +151,7 @@ importers:
       github-slugger: 1.4.0
       graceful-fs: 4.2.10
       gray-matter: 4.0.3
+      react-children-utilities: 2.8.0_react@18.2.0
       rehype-mdx-title: 1.0.0
       rehype-pretty-code: 0.2.4_shiki@0.10.1
       remark-gfm: 3.0.1
@@ -1128,6 +1132,19 @@ packages:
       - webpack-cli
     dev: true
 
+  /@typescript-eslint/experimental-utils/5.33.1_qugx7qdu5zevzvxaiqyxfiwquq:
+    resolution: {integrity: sha512-wk2o+4wojvKz/x3UCbsgjgXl0lyLPYQsfKP0MdRzj4jtsQr4bVtgWUWck6+N3GzThUTbUFyyKLduWPwePhh0xQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+    dependencies:
+      '@typescript-eslint/utils': 5.33.1_qugx7qdu5zevzvxaiqyxfiwquq
+      eslint: 8.21.0
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+    dev: true
+
   /@typescript-eslint/parser/5.32.0_qugx7qdu5zevzvxaiqyxfiwquq:
     resolution: {integrity: sha512-IxRtsehdGV9GFQ35IGm5oKKR2OGcazUoiNBxhRV160iF9FoyuXxjY+rIqs1gfnd+4eL98OjeGnMpE7RF/NBb3A==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -1156,11 +1173,24 @@ packages:
       '@typescript-eslint/visitor-keys': 5.32.0
     dev: true
 
+  /@typescript-eslint/scope-manager/5.33.1:
+    resolution: {integrity: sha512-8ibcZSqy4c5m69QpzJn8XQq9NnqAToC8OdH/W6IXPXv83vRyEDPYLdjAlUx8h/rbusq6MkW4YdQzURGOqsn3CA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      '@typescript-eslint/types': 5.33.1
+      '@typescript-eslint/visitor-keys': 5.33.1
+    dev: true
+
   /@typescript-eslint/types/5.32.0:
     resolution: {integrity: sha512-EBUKs68DOcT/EjGfzywp+f8wG9Zw6gj6BjWu7KV/IYllqKJFPlZlLSYw/PTvVyiRw50t6wVbgv4p9uE2h6sZrQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
+  /@typescript-eslint/types/5.33.1:
+    resolution: {integrity: sha512-7K6MoQPQh6WVEkMrMW5QOA5FO+BOwzHSNd0j3+BlBwd6vtzfZceJ8xJ7Um2XDi/O3umS8/qDX6jdy2i7CijkwQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dev: true
+
   /@typescript-eslint/typescript-estree/5.32.0_typescript@4.7.4:
     resolution: {integrity: sha512-ZVAUkvPk3ITGtCLU5J4atCw9RTxK+SRc6hXqLtllC2sGSeMFWN+YwbiJR9CFrSFJ3w4SJfcWtDwNb/DmUIHdhg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -1182,6 +1212,45 @@ packages:
       - supports-color
     dev: true
 
+  /@typescript-eslint/typescript-estree/5.33.1_typescript@4.7.4:
+    resolution: {integrity: sha512-JOAzJ4pJ+tHzA2pgsWQi4804XisPHOtbvwUyqsuuq8+y5B5GMZs7lI1xDWs6V2d7gE/Ez5bTGojSK12+IIPtXA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/types': 5.33.1
+      '@typescript-eslint/visitor-keys': 5.33.1
+      debug: 4.3.4
+      globby: 11.1.0
+      is-glob: 4.0.3
+      semver: 7.3.7
+      tsutils: 3.21.0_typescript@4.7.4
+      typescript: 4.7.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/utils/5.33.1_qugx7qdu5zevzvxaiqyxfiwquq:
+    resolution: {integrity: sha512-uphZjkMaZ4fE8CR4dU7BquOV6u0doeQAr8n6cQenl/poMaIyJtBu8eys5uk6u5HiDH01Mj5lzbJ5SfeDz7oqMQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+    dependencies:
+      '@types/json-schema': 7.0.11
+      '@typescript-eslint/scope-manager': 5.33.1
+      '@typescript-eslint/types': 5.33.1
+      '@typescript-eslint/typescript-estree': 5.33.1_typescript@4.7.4
+      eslint: 8.21.0
+      eslint-scope: 5.1.1
+      eslint-utils: 3.0.0_eslint@8.21.0
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+    dev: true
+
   /@typescript-eslint/visitor-keys/5.32.0:
     resolution: {integrity: sha512-S54xOHZgfThiZ38/ZGTgB2rqx51CMJ5MCfVT2IplK4Q7hgzGfe0nLzLCcenDnc/cSjP568hdeKfeDcBgqNHD/g==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -1190,6 +1259,14 @@ packages:
       eslint-visitor-keys: 3.3.0
     dev: true
 
+  /@typescript-eslint/visitor-keys/5.33.1:
+    resolution: {integrity: sha512-nwIxOK8Z2MPWltLKMLOEZwmfBZReqUdbEoHQXeCpa+sRVARe5twpJGHCB4dk9903Yaf0nMAlGbQfaAH92F60eg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      '@typescript-eslint/types': 5.33.1
+      eslint-visitor-keys: 3.3.0
+    dev: true
+
   /@webassemblyjs/ast/1.11.1:
     resolution: {integrity: sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw==}
     dependencies:
@@ -2421,6 +2498,24 @@ packages:
     engines: {node: '>=12'}
     dev: false
 
+  /eslint-plugin-typescript-sort-keys/2.1.0_iosr3hrei2tubxveewluhu5lhy:
+    resolution: {integrity: sha512-ET7ABypdz19m47QnKynzNfWPi4CTNQ5jQQC1X5d0gojIwblkbGiCa5IilsqzBTmqxZ0yXDqKBO/GBkBFQCOFsg==}
+    engines: {node: 10 - 12 || >= 13.9}
+    peerDependencies:
+      '@typescript-eslint/parser': ^1 || ^2 || ^3 || ^4 || ^5
+      eslint: ^5 || ^6 || ^7 || ^8
+      typescript: ^3 || ^4
+    dependencies:
+      '@typescript-eslint/experimental-utils': 5.33.1_qugx7qdu5zevzvxaiqyxfiwquq
+      '@typescript-eslint/parser': 5.32.0_qugx7qdu5zevzvxaiqyxfiwquq
+      eslint: 8.21.0
+      json-schema: 0.4.0
+      natural-compare-lite: 1.4.0
+      typescript: 4.7.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /eslint-scope/5.1.1:
     resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
     engines: {node: '>=8.0.0'}
@@ -3280,6 +3375,10 @@ packages:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
     dev: true
 
+  /json-schema/0.4.0:
+    resolution: {integrity: sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==}
+    dev: true
+
   /json-stable-stringify-without-jsonify/1.0.1:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
     dev: true
@@ -4076,6 +4175,10 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  /natural-compare-lite/1.4.0:
+    resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==}
+    dev: true
+
   /natural-compare/1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
     dev: true
@@ -4931,6 +5034,14 @@ packages:
       safe-buffer: 5.2.1
     dev: true
 
+  /react-children-utilities/2.8.0_react@18.2.0:
+    resolution: {integrity: sha512-g42oRsZLrFJgCcIdK1lad1CWujNH4gh1Cp1lsMQpHWdDjWQ8gUlaBebgy2iXofyPEpfJ4T/xt4qWrvDkgVCCNg==}
+    peerDependencies:
+      react: 18 || 17 || 16 || 15
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /react-cusdis/2.1.3_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-fUJOAUY7a3y21fNzlRWUSTr/ZMsejQAYWIWdsNuBPPZHbUrBvke/8Gw4OL5Mlrth7jLw8VTNssX0WBX5/prorQ==}
     peerDependencies: