From c8605d679d363787e424d85b7a74b47d4ca41d2c Mon Sep 17 00:00:00 2001
From: Shu Ding <g@shud.in>
Date: Thu, 4 Aug 2022 01:53:58 +0200
Subject: [PATCH] New layout implementation (#631)

* refactor loader and layout resolution

* use global css import

* test ssg

* fix fast refresh

* upadte snapshot

* add changeset

* remove @edge-runtime/vm

* fix test

* fix test

* apply review suggestions

* fix string template

* update snapshot

* deprecate the Nextra.* component

* fix import

* fix import

* fix import
---
 .changeset/silent-phones-own.md               |  7 ++
 examples/blog/next.config.mjs                 | 18 +++-
 examples/blog/pages/_app.js                   |  8 --
 examples/docs/next.config.js                  | 18 +++-
 examples/docs/src/pages/get-started.mdx       | 34 ++++----
 examples/docs/src/pages/themes/docs/bleed.mdx | 24 +++---
 .../docs/src/pages/themes/docs/callout.mdx    | 30 ++++---
 examples/docs/src/pages/themes/docs/index.mdx | 41 +++++----
 examples/docs/src/pages/themes/docs/tabs.mdx  | 44 +++++-----
 examples/swr-site/next.config.js              | 16 ++++
 examples/swr-site/pages/_app.js               |  6 +-
 .../swr-site/pages/docs/change-log.en-US.mdx  | 21 +++++
 packages/nextra-theme-blog/package.json       | 31 +++----
 packages/nextra-theme-blog/postcss.config.js  |  6 +-
 packages/nextra-theme-blog/src/index.tsx      | 50 ++++++++---
 packages/nextra-theme-docs/package.json       | 29 ++++---
 packages/nextra-theme-docs/postcss.config.js  |  6 +-
 packages/nextra-theme-docs/src/index.tsx      | 67 ++++++++++-----
 packages/nextra-theme-docs/src/misc/theme.tsx | 86 +++++++++----------
 .../__snapshots__/compile.test.ts.snap        | 18 ++--
 packages/nextra/__test__/compile.test.ts      |  2 +-
 packages/nextra/src/compile.ts                |  7 +-
 packages/nextra/src/constants.ts              |  2 +
 packages/nextra/src/index.js                  | 53 ++++++++----
 packages/nextra/src/loader.ts                 | 69 +++++++++++----
 packages/nextra/src/ssg.ts                    | 23 +----
 packages/nextra/src/types.ts                  |  1 +
 pnpm-lock.yaml                                | 59 +++++++++++++
 turbo.json                                    | 10 +--
 29 files changed, 507 insertions(+), 279 deletions(-)
 create mode 100644 .changeset/silent-phones-own.md
 delete mode 100644 examples/blog/pages/_app.js

diff --git a/.changeset/silent-phones-own.md b/.changeset/silent-phones-own.md
new file mode 100644
index 0000000000..da51cf5b64
--- /dev/null
+++ b/.changeset/silent-phones-own.md
@@ -0,0 +1,7 @@
+---
+'nextra': patch
+'nextra-theme-blog': patch
+'nextra-theme-docs': patch
+---
+
+feat: New layout implementation
diff --git a/examples/blog/next.config.mjs b/examples/blog/next.config.mjs
index 6c1f3b59a9..fcbcfbfbf6 100644
--- a/examples/blog/next.config.mjs
+++ b/examples/blog/next.config.mjs
@@ -7,5 +7,21 @@ const withNextra = nextra({
 })
 
 export default withNextra({
-  reactStrictMode: true
+  reactStrictMode: true,
+  webpack(config) {
+    // To make pnpm workspace and themes work in this monorepo, we need to
+    // disable webpack's symlinks feature here. Otherwise the symlink
+    // `./node_modules/nextra-theme-docs/style.css` will be resolved as
+    // `../../packages/nextra-theme-docs/style.css`, which doesn't contain
+    // `node_modules` in its full path and webpack can't pick the correct loader
+    // for it due to:
+    // https://github.com/vercel/next.js/blob/213c42f446874d29d07fa2cca6e6b11fc9c3b711/packages/next/build/webpack/config/blocks/css/index.ts#L305
+    // This is not needed for normal usage, only a workaround for this
+    // development repository.
+    config.resolve = {
+      ...config.resolve,
+      symlinks: false
+    }
+    return config
+  }
 })
diff --git a/examples/blog/pages/_app.js b/examples/blog/pages/_app.js
deleted file mode 100644
index 7f0719e1ff..0000000000
--- a/examples/blog/pages/_app.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import 'nextra-theme-blog/style.css'
-
-export default function MyApp({ Component, pageProps }) {
-  // Use the layout defined at the page level, if available
-  const getLayout = Component.getLayout || (page => page)
-
-  return getLayout(<Component {...pageProps} />)
-}
diff --git a/examples/docs/next.config.js b/examples/docs/next.config.js
index 635ef549ec..97c69e8276 100644
--- a/examples/docs/next.config.js
+++ b/examples/docs/next.config.js
@@ -8,5 +8,21 @@ const withNextra = require('nextra')({
 })
 
 module.exports = withNextra({
-  reactStrictMode: true
+  reactStrictMode: true,
+  webpack(config) {
+    // To make pnpm workspace and themes work in this monorepo, we need to
+    // disable webpack's symlinks feature here. Otherwise the symlink
+    // `./node_modules/nextra-theme-docs/style.css` will be resolved as
+    // `../../packages/nextra-theme-docs/style.css`, which doesn't contain
+    // `node_modules` in its full path and webpack can't pick the correct loader
+    // for it due to:
+    // https://github.com/vercel/next.js/blob/213c42f446874d29d07fa2cca6e6b11fc9c3b711/packages/next/build/webpack/config/blocks/css/index.ts#L305
+    // This is not needed for normal usage, only a workaround for this
+    // development repository.
+    config.resolve = {
+      ...config.resolve,
+      symlinks: false
+    }
+    return config
+  }
 })
diff --git a/examples/docs/src/pages/get-started.mdx b/examples/docs/src/pages/get-started.mdx
index c791c9c30b..819b88aba3 100644
--- a/examples/docs/src/pages/get-started.mdx
+++ b/examples/docs/src/pages/get-started.mdx
@@ -15,43 +15,45 @@ Nextra works like a Next.js plugin, and it accepts a theme config (layout) to re
 
 1. Install Next.js, Nextra and React
 
-<Nextra.Tabs items={['npm', 'yarn', 'pnpm']} defaultIndex={1}>
-  <Nextra.Tab>
+import { Tabs, Tab } from 'nextra-theme-docs/tabs'
+
+<Tabs items={['npm', 'yarn', 'pnpm']} defaultIndex={1}>
+  <Tab>
     ```bash 
     npm i react react-dom next nextra 
     ```
-  </Nextra.Tab>
-  <Nextra.Tab>
+  </Tab>
+  <Tab>
     ```bash 
     yarn add react react-dom next nextra 
     ```
-  </Nextra.Tab>
-  <Nextra.Tab>
+  </Tab>
+  <Tab>
     ```bash 
     pnpm i react react-dom next nextra 
     ```
-  </Nextra.Tab>
-</Nextra.Tabs>
+  </Tab>
+</Tabs>
 
 2. Install the docs theme
 
-<Nextra.Tabs items={['npm', 'yarn', 'pnpm']} defaultIndex={1}>
-  <Nextra.Tab>
+<Tabs items={['npm', 'yarn', 'pnpm']} defaultIndex={1}>
+  <Tab>
     ```bash 
     npm i nextra-theme-docs 
     ```
-  </Nextra.Tab>
-  <Nextra.Tab>
+  </Tab>
+  <Tab>
     ```bash 
     yarn add nextra-theme-docs 
     ```
-  </Nextra.Tab>
-  <Nextra.Tab>
+  </Tab>
+  <Tab>
     ```bash 
     pnpm i nextra-theme-docs 
     ```
-  </Nextra.Tab>
-</Nextra.Tabs>
+  </Tab>
+</Tabs>
 
 3. Create the following Next.js config and theme config under the root directory:
 
diff --git a/examples/docs/src/pages/themes/docs/bleed.mdx b/examples/docs/src/pages/themes/docs/bleed.mdx
index 57d80d5d50..e9c3967906 100644
--- a/examples/docs/src/pages/themes/docs/bleed.mdx
+++ b/examples/docs/src/pages/themes/docs/bleed.mdx
@@ -7,21 +7,23 @@ A built-in component provided by `nextra-theme-docs`.
 When wrapping your content with `<Bleed>`, it will be slightly wider than the container
 and will overflow on both sides.
 
-<Nextra.Bleed>
+import Bleed from 'nextra-theme-docs/bleed'
+
+<Bleed>
   <div style={{ border: '1px solid #888', padding: '4rem 2.5rem', textAlign: 'center' }}>
     _There is nothing to writing. All you do is sit down at a typewriter and **bleed**._
 
     — Ernest Hemingway
 
   </div>
-</Nextra.Bleed>
+</Bleed>
 
 It provides a better reading experience when you want to present some graphical information, which normally
 looks nicer in a larger size.
 
 For example you can put text, image, video or any component inside:
 
-<Nextra.Bleed>
+<Bleed>
   <iframe
     width="100%"
     height="430"
@@ -30,33 +32,33 @@ For example you can put text, image, video or any component inside:
     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
     allowFullscreen
   />
-</Nextra.Bleed>
+</Bleed>
 
 You can even make it full-bleed using `<Bleed full>`:
 
-<Nextra.Bleed full>
+<Bleed full>
   ![Landscape](https://source.unsplash.com/eaxwP9J_V6s/1600x398)
-</Nextra.Bleed>
+</Bleed>
 
 ## Usage
 
 ### MDX component
 
 ```mdx filename="bleed.mdx"
-<Nextra.Bleed>Hey, I can use **Markdown** syntax here.</Nextra.Bleed>
+<Bleed>Hey, I can use **Markdown** syntax here.</Bleed>
 
-<Nextra.Bleed full>
+<Bleed full>
   ![Landscape](https://source.unsplash.com/eaxwP9J_V6s/1600x398)
-</Nextra.Bleed>
+</Bleed>
 
-<Nextra.Bleed full>
+<Bleed full>
   <iframe
     src="https://codesandbox.io/embed/swr-states-4une7"
     width="100%"
     height="500px"
     title="SWR-States"
   />
-</Nextra.Bleed>
+</Bleed>
 ```
 
 ### React Component
diff --git a/examples/docs/src/pages/themes/docs/callout.mdx b/examples/docs/src/pages/themes/docs/callout.mdx
index e5b5a320ba..3285b72f07 100644
--- a/examples/docs/src/pages/themes/docs/callout.mdx
+++ b/examples/docs/src/pages/themes/docs/callout.mdx
@@ -4,48 +4,50 @@ A built-in component provided by `nextra-theme-docs`.
 
 ## Example
 
-<Nextra.Callout>
+import Callout from 'nextra-theme-docs/callout'
+
+<Callout>
   A **callout** is a short piece of text intended to attract attention.
-</Nextra.Callout>
+</Callout>
 
 ## Usage
 
 ### Default
 
-<Nextra.Callout emoji="👾">
+<Callout emoji="👾">
   **Space Invaders** is a 1978 shoot 'em up arcade game developed by Tomohiro
   Nishikado.
-</Nextra.Callout>
+</Callout>
 
 ```mdx
-<Nextra.Callout emoji="👾">
+<Callout emoji="👾">
   **Space Invaders** is a 1978 shoot 'em up arcade game developed by Tomohiro
   Nishikado.
-</Nextra.Callout>
+</Callout>
 ```
 
 ### Warning
 
-<Nextra.Callout type="warning" emoji="⚠️">
+<Callout type="warning" emoji="⚠️">
   This API will be deprecated soon.
-</Nextra.Callout>
+</Callout>
 
 ```mdx
-<Nextra.Callout type="warning" emoji="⚠️">
+<Callout type="warning" emoji="⚠️">
   This API will be deprecated soon.
-</Nextra.Callout>
+</Callout>
 ```
 
 ### Error
 
-<Nextra.Callout type="error" emoji="🚫">
+<Callout type="error" emoji="🚫">
   This is a dangerous feature that can cause everything to explode.
-</Nextra.Callout>
+</Callout>
 
 ```mdx
-<Nextra.Callout type="error" emoji="️🚫">
+<Callout type="error" emoji="️🚫">
   This is a dangerous feature that can cause everything to explode.
-</Nextra.Callout>
+</Callout>
 ```
 
 ### React Component
diff --git a/examples/docs/src/pages/themes/docs/index.mdx b/examples/docs/src/pages/themes/docs/index.mdx
index a2457e2718..0512dfb8de 100644
--- a/examples/docs/src/pages/themes/docs/index.mdx
+++ b/examples/docs/src/pages/themes/docs/index.mdx
@@ -1,6 +1,9 @@
 # Docs Theme
 
-<Nextra.Callout>This website is built with the docs theme.</Nextra.Callout>
+import Callout from 'nextra-theme-docs/callout'
+import { Tabs, Tab } from 'nextra-theme-docs/tabs'
+
+<Callout>This website is built with the docs theme.</Callout>
 
 you can install the blog theme with the following commands:
 
@@ -8,43 +11,43 @@ you can install the blog theme with the following commands:
 
 1. Install Next.js, Nextra and React
 
-<Nextra.Tabs items={['npm', 'yarn', 'pnpm']} defaultIndex={1}>
-  <Nextra.Tab>
+<Tabs items={['npm', 'yarn', 'pnpm']} defaultIndex={1}>
+  <Tab>
     ```bash 
     npm i react react-dom next nextra 
     ```
-  </Nextra.Tab>
-  <Nextra.Tab>
+  </Tab>
+  <Tab>
     ```bash 
     yarn add react react-dom next nextra 
     ```
-  </Nextra.Tab>
-  <Nextra.Tab>
+  </Tab>
+  <Tab>
     ```bash 
     pnpm i react react-dom next nextra
     ```
-  </Nextra.Tab>
-</Nextra.Tabs>
+  </Tab>
+</Tabs>
 
 2. Install the docs theme
 
-<Nextra.Tabs items={['npm', 'yarn', 'pnpm']} defaultIndex={1}>
-  <Nextra.Tab>
+<Tabs items={['npm', 'yarn', 'pnpm']} defaultIndex={1}>
+  <Tab>
     ```bash 
     npm i nextra-theme-docs 
     ```
-  </Nextra.Tab>
-  <Nextra.Tab>
+  </Tab>
+  <Tab>
     ```bash 
     yarn add nextra-theme-docs 
     ```
-  </Nextra.Tab>
-  <Nextra.Tab>
+  </Tab>
+  <Tab>
     ```bash 
     pnpm i nextra-theme-docs 
     ```
-  </Nextra.Tab>
-</Nextra.Tabs>
+  </Tab>
+</Tabs>
 
 3. Create the following Next.js config and theme config under the root directory:
 
@@ -104,6 +107,6 @@ export default function Nextra({ Component, pageProps }) {
 
 ---
 
-<Nextra.Callout>
+<Callout>
 You can also use [`<style jsx>`](https://nextjs.org/docs/basic-features/built-in-css-support#css-in-js) to style elements inside `theme.config.js`.
-</Nextra.Callout>
+</Callout>
diff --git a/examples/docs/src/pages/themes/docs/tabs.mdx b/examples/docs/src/pages/themes/docs/tabs.mdx
index f0902c134f..612e01104f 100644
--- a/examples/docs/src/pages/themes/docs/tabs.mdx
+++ b/examples/docs/src/pages/themes/docs/tabs.mdx
@@ -4,62 +4,64 @@ A built-in component provided by `nextra-theme-docs`.
 
 ## Example
 
-<Nextra.Tabs items={['JavaScript', 'C++', {label:'C', disabled: true}, 'Python']} defaultIndex={1}>
-  <Nextra.Tab>
+import { Tabs, Tab } from 'nextra-theme-docs/tabs'
+
+<Tabs items={['JavaScript', 'C++', {label:'C', disabled: true}, 'Python']} defaultIndex={1}>
+  <Tab>
     ```js filename="hi.js"
     import { useState, useEffect } from 'react';
     ```
-  </Nextra.Tab>
-  <Nextra.Tab>
+  </Tab>
+  <Tab>
     ```cpp filename="hi.cpp"
     #include <iostream>
     ```
-  </Nextra.Tab>
-  <Nextra.Tab>
+  </Tab>
+  <Tab>
     ```c filename="hi.c"
     #include <stdio.h>
     ```
-  </Nextra.Tab>
-  <Nextra.Tab>
+  </Tab>
+  <Tab>
      ```python filename="hello.py"
     print('Hello, world!')
     ```
-  </Nextra.Tab>
-</Nextra.Tabs>
+  </Tab>
+</Tabs>
 
 ## Usage
 
 ### MDX component
 
 ````mdx filename="tabs.mdx"
-<Nextra.Tabs items={['JavaScript', 'C++', {label:'C', disabled: true}, 'Python']} defaultIndex={1}>
-  <Nextra.Tab>
+<Tabs items={['JavaScript', 'C++', {label:'C', disabled: true}, 'Python']} defaultIndex={1}>
+  <Tab>
     ```js filename="hi.js"
     import { useState, useEffect } from 'react';
     ```
-  </Nextra.Tab>
-  <Nextra.Tab>
+  </Tab>
+  <Tab>
     ```cpp filename="hi.cpp"
     #include <iostream>
     ```
-  </Nextra.Tab>
-  <Nextra.Tab>
+  </Tab>
+  <Tab>
     ```c filename="hi.c"
     #include <stdio.h>
     ```
-  </Nextra.Tab>
-  <Nextra.Tab>
+  </Tab>
+  <Tab>
     ```python filename="hello.py"
     print('Hello, world!')
     ```
-  </Nextra.Tab>
-</Nextra.Tabs>
+  </Tab>
+</Tabs>
 ````
 
 ### React Component
 
 ```jsx filename="tabs.jsx"
-import { Tabs, Tab } from 'nextra-docs-theme/Tabs'
+import { Tabs, Tab } from 'nextra-theme-docs/tabs'
 const items = ['1', '2', '3', '4']
 const defaultIndex = 1
 const Component = () => (
diff --git a/examples/swr-site/next.config.js b/examples/swr-site/next.config.js
index 21c1d68fd5..1794a7494f 100644
--- a/examples/swr-site/next.config.js
+++ b/examples/swr-site/next.config.js
@@ -62,6 +62,22 @@ module.exports = withNextra({
     ];
   },
   reactStrictMode: true,
+  webpack(config) {
+    // To make pnpm workspace and themes work in this monorepo, we need to
+    // disable webpack's symlinks feature here. Otherwise the symlink
+    // `./node_modules/nextra-theme-docs/style.css` will be resolved as
+    // `../../packages/nextra-theme-docs/style.css`, which doesn't contain
+    // `node_modules` in its full path and webpack can't pick the correct loader
+    // for it due to:
+    // https://github.com/vercel/next.js/blob/213c42f446874d29d07fa2cca6e6b11fc9c3b711/packages/next/build/webpack/config/blocks/css/index.ts#L305
+    // This is not needed for normal usage, only a workaround for this
+    // development repository.
+    config.resolve = {
+      ...config.resolve,
+      symlinks: false,
+    };
+    return config;
+  },
   experimental: {
     newNextLinkBehavior: true,
   },
diff --git a/examples/swr-site/pages/_app.js b/examples/swr-site/pages/_app.js
index 6d3291a3df..9622552fdc 100644
--- a/examples/swr-site/pages/_app.js
+++ b/examples/swr-site/pages/_app.js
@@ -1,9 +1,5 @@
 import "../styles.css";
-import "nextra-theme-docs/style.css";
 
 export default function MyApp({ Component, pageProps }) {
-  // Use the layout defined at the page level, if available
-  const getLayout = Component.getLayout || ((page) => page);
-
-  return getLayout(<Component {...pageProps} />);
+  return <Component {...pageProps} />;
 }
diff --git a/examples/swr-site/pages/docs/change-log.en-US.mdx b/examples/swr-site/pages/docs/change-log.en-US.mdx
index 420e6f23d0..0250b952d4 100644
--- a/examples/swr-site/pages/docs/change-log.en-US.mdx
+++ b/examples/swr-site/pages/docs/change-log.en-US.mdx
@@ -1 +1,22 @@
 # Change Log
+
+import { useSSG } from 'nextra/ssg'
+
+export const ReleasesRenderer = () => {
+  const releases = useSSG()
+  return <i>{releases}</i>
+}
+
+export const getStaticProps = ({ params }) => {
+  return ({ props: { ssg: 'Test SSG ' + Date.now() }, revalidate: 10 })
+}
+
+<ReleasesRenderer/>
+
+This page should not have the sidebar because it has
+
+```json
+"theme": {
+  "sidebar": false
+}
+```
diff --git a/packages/nextra-theme-blog/package.json b/packages/nextra-theme-blog/package.json
index 8170c3178e..79b86f4a93 100644
--- a/packages/nextra-theme-blog/package.json
+++ b/packages/nextra-theme-blog/package.json
@@ -49,8 +49,8 @@
   "peerDependencies": {
     "next": ">=9.5.3",
     "react": ">=16.13.1",
-    "react-dom": ">=16.13.1",
-    "react-cusdis": "^2.1.3"
+    "react-cusdis": "^2.1.3",
+    "react-dom": ">=16.13.1"
   },
   "peerDependenciesMeta": {
     "react-cusdis": {
@@ -58,24 +58,25 @@
     }
   },
   "devDependencies": {
-    "nextra": "workspace:*",
-    "next": ">=12",
-    "vitest": "*",
-    "react": "*",
-    "react-dom": "*",
-    "concurrently": "*",
-    "cross-env": "*",
+    "@tailwindcss/nesting": "*",
+    "@tailwindcss/typography": "*",
     "@types/react": "*",
     "@types/react-dom": "*",
-    "tsup": "*",
-    "postcss": "*",
-    "postcss-cli": "*",
     "autoprefixer": "*",
+    "concurrently": "*",
+    "cross-env": "*",
     "cssnano": "*",
+    "cssnano-preset-advanced": "^5.3.8",
+    "next": ">=12",
+    "nextra": "workspace:*",
+    "postcss": "*",
+    "postcss-cli": "*",
+    "react": "*",
+    "react-cusdis": "^2.1.3",
+    "react-dom": "*",
     "tailwindcss": "*",
-    "@tailwindcss/nesting": "*",
-    "@tailwindcss/typography": "*",
-    "react-cusdis": "^2.1.3"
+    "tsup": "*",
+    "vitest": "*"
   },
   "prettier": {
     "semi": false,
diff --git a/packages/nextra-theme-blog/postcss.config.js b/packages/nextra-theme-blog/postcss.config.js
index 7d26b530c9..19f06df42f 100644
--- a/packages/nextra-theme-blog/postcss.config.js
+++ b/packages/nextra-theme-blog/postcss.config.js
@@ -4,6 +4,10 @@ module.exports = ctx => ({
     require('tailwindcss/nesting'),
     require('tailwindcss'),
     require('autoprefixer'),
-    ctx.env === 'production' ? require('cssnano') : false
+    ctx.env === 'production'
+      ? require('cssnano')({
+          preset: 'advanced'
+        })
+      : false
   ]
 })
diff --git a/packages/nextra-theme-blog/src/index.tsx b/packages/nextra-theme-blog/src/index.tsx
index f1bdfaa7b2..43622a9102 100644
--- a/packages/nextra-theme-blog/src/index.tsx
+++ b/packages/nextra-theme-blog/src/index.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement, ReactNode } from 'react'
+import React, { ReactElement, ReactNode, FC } from 'react'
 import { ThemeProvider } from 'next-themes'
 import type { PageOpts } from 'nextra'
 import type { LayoutProps, NextraBlogTheme } from './types'
@@ -7,6 +7,7 @@ import { ArticleLayout } from './article-layout'
 import { PostsLayout } from './posts-layout'
 import { PageLayout } from './page-layout'
 import { DEFAULT_CONFIG } from './constants'
+import { useRouter } from 'next/router'
 
 const layoutMap = {
   post: ArticleLayout,
@@ -24,8 +25,8 @@ const BlogLayout = ({
   const Layout = layoutMap[type]
   if (!Layout) {
     throw new Error(
-        `Nextra-themes-blog does not support the layout type "${type}" It only supports "post", "page", "posts" and "tag"`
-      )
+      `Nextra-themes-blog does not support the layout type "${type}" It only supports "post", "page", "posts" and "tag"`
+    )
   }
   return (
     <BlogProvider opts={opts} config={config}>
@@ -34,20 +35,47 @@ const BlogLayout = ({
   )
 }
 
-const createLayout = (opts: PageOpts, config: NextraBlogTheme) => {
-  const extendedConfig = { ...DEFAULT_CONFIG, ...config }
+const nextraPageContext: {
+  [key: string]: {
+    Content: FC
+    pageOpts: PageOpts
+    themeConfig: NextraBlogTheme
+  }
+} = {}
+
+function Layout(props: any) {
+  const { route } = useRouter()
+  const context = nextraPageContext[route]
+  if (!context) throw new Error(`No content found for ${route}.`)
 
-  const Page = ({ children }: { children: ReactNode }): ReactNode => children
-  Page.getLayout = (page: ReactNode): ReactElement => (
+  const extendedConfig = { ...DEFAULT_CONFIG, ...context.themeConfig }
+
+  return (
     <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-      <BlogLayout config={extendedConfig} opts={opts}>
-        {page}
+      <BlogLayout config={extendedConfig} opts={context.pageOpts}>
+        <context.Content {...props} />
       </BlogLayout>
     </ThemeProvider>
   )
-  return Page
+}
+
+// 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 { useBlogContext } from './blog-context'
 export * from './types'
-export default createLayout
diff --git a/packages/nextra-theme-docs/package.json b/packages/nextra-theme-docs/package.json
index 532328562d..85ae3450d2 100644
--- a/packages/nextra-theme-docs/package.json
+++ b/packages/nextra-theme-docs/package.json
@@ -66,9 +66,8 @@
     "format": "prettier --ignore-path ../../.gitignore --write --list-different ."
   },
   "dependencies": {
-    "@mdx-js/react": "^2.1.2",
-    "next-themes": "^0.2.0-beta.2",
     "@headlessui/react": "^1.6.5",
+    "@mdx-js/react": "^2.1.2",
     "@reach/skip-nav": "^0.17.0",
     "classnames": "^2.3.1",
     "flexsearch": "^0.7.21",
@@ -76,6 +75,7 @@
     "github-slugger": "^1.4.0",
     "intersection-observer": "^0.12.2",
     "match-sorter": "^4.2.0",
+    "next-themes": "^0.2.0-beta.2",
     "parse-git-url": "^1.0.1",
     "scroll-into-view-if-needed": "^2.2.29",
     "title": "^3.4.2"
@@ -86,24 +86,25 @@
     "react-dom": ">=16.13.1"
   },
   "devDependencies": {
-    "next": ">=12",
-    "react": "*",
-    "react-dom": "*",
-    "vitest": "*",
-    "nextra": "workspace:*",
+    "@tailwindcss/nesting": "*",
+    "@tailwindcss/typography": "*",
     "@types/flexsearch": "^0.7.3",
-    "concurrently": "*",
-    "cross-env": "*",
     "@types/react": "*",
     "@types/react-dom": "*",
-    "tsup": "*",
-    "postcss": "*",
-    "postcss-cli": "*",
     "autoprefixer": "*",
+    "concurrently": "*",
+    "cross-env": "*",
     "cssnano": "*",
+    "cssnano-preset-advanced": "^5.3.8",
+    "next": ">=12",
+    "nextra": "workspace:*",
+    "postcss": "*",
+    "postcss-cli": "*",
+    "react": "*",
+    "react-dom": "*",
     "tailwindcss": "*",
-    "@tailwindcss/nesting": "*",
-    "@tailwindcss/typography": "*"
+    "tsup": "*",
+    "vitest": "*"
   },
   "prettier": {
     "semi": false,
diff --git a/packages/nextra-theme-docs/postcss.config.js b/packages/nextra-theme-docs/postcss.config.js
index 7d26b530c9..19f06df42f 100644
--- a/packages/nextra-theme-docs/postcss.config.js
+++ b/packages/nextra-theme-docs/postcss.config.js
@@ -4,6 +4,10 @@ module.exports = ctx => ({
     require('tailwindcss/nesting'),
     require('tailwindcss'),
     require('autoprefixer'),
-    ctx.env === 'production' ? require('cssnano') : false
+    ctx.env === 'production'
+      ? require('cssnano')({
+          preset: 'advanced'
+        })
+      : false
   ]
 })
diff --git a/packages/nextra-theme-docs/src/index.tsx b/packages/nextra-theme-docs/src/index.tsx
index 5722644914..442d759fa2 100644
--- a/packages/nextra-theme-docs/src/index.tsx
+++ b/packages/nextra-theme-docs/src/index.tsx
@@ -1,17 +1,14 @@
-import React, {
-  ReactElement,
-  ReactNode,
-  useEffect,
-  useMemo,
-  useRef,
-  useState
-} from 'react'
+import type { PageMapItem, PageOpts } from 'nextra'
+import type { FC, ReactElement, ReactNode } from 'react'
+
+import React, { useEffect, useMemo, useRef, useState } from 'react'
 import { useRouter } from 'next/router'
 import 'focus-visible'
+import scrollIntoView from 'scroll-into-view-if-needed'
 import { SkipNavContent } from '@reach/skip-nav'
 import { ThemeProvider } from 'next-themes'
-import { PageMapItem, PageOpts } from 'nextra'
 import cn from 'classnames'
+
 import Head from './head'
 import Navbar from './navbar'
 import Footer, { NavLinks } from './footer'
@@ -28,7 +25,6 @@ import { DocsThemeConfig, PageTheme } from './types'
 import './polyfill'
 import Breadcrumb from './breadcrumb'
 import renderComponent from './utils/render-component'
-import scrollIntoView from 'scroll-into-view-if-needed'
 
 let resizeObserver: ResizeObserver
 if (typeof window !== 'undefined') {
@@ -163,7 +159,7 @@ const Body = ({
   )
 }
 
-const Content = ({
+const InnerLayout = ({
   filename,
   pageMap,
   meta,
@@ -279,16 +275,29 @@ const Content = ({
   )
 }
 
-const createLayout = (opts: PageOpts, config: DocsThemeConfig) => {
+const nextraPageContext: {
+  [key: string]: {
+    Content: FC
+    pageOpts: PageOpts
+    themeConfig: DocsThemeConfig
+  }
+} = {}
+
+function Layout(props: any) {
+  const { route } = useRouter()
+  const context = nextraPageContext[route]
+
+  if (!context) throw new Error(`No content found for ${route}.`)
+
   const extendedConfig = {
     ...defaultConfig,
-    ...config,
-    unstable_flexsearch: opts.unstable_flexsearch,
-    newNextLinkBehavior: opts.newNextLinkBehavior
+    ...context.themeConfig,
+    unstable_flexsearch: context.pageOpts.unstable_flexsearch,
+    newNextLinkBehavior: context.pageOpts.newNextLinkBehavior
   }
   const nextThemes = extendedConfig.nextThemes || {}
-  const Page = ({ children }: { children: ReactNode }): ReactNode => children
-  Page.getLayout = (page: ReactNode): ReactElement => (
+
+  return (
     <ThemeConfigContext.Provider value={extendedConfig}>
       <ThemeProvider
         attribute="class"
@@ -297,13 +306,31 @@ const createLayout = (opts: PageOpts, config: DocsThemeConfig) => {
         storageKey={nextThemes.storageKey}
         forcedTheme={nextThemes.forcedTheme}
       >
-        <Content {...opts}>{page}</Content>
+        <InnerLayout {...context.pageOpts}>
+          <context.Content {...props} />
+        </InnerLayout>
       </ThemeProvider>
     </ThemeConfigContext.Provider>
   )
+}
 
-  return Page
+// 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
 }
+
 export * from './types'
 export { getComponents } from './misc/theme'
-export default createLayout
diff --git a/packages/nextra-theme-docs/src/misc/theme.tsx b/packages/nextra-theme-docs/src/misc/theme.tsx
index 88e053bf2a..33e6cbedf2 100644
--- a/packages/nextra-theme-docs/src/misc/theme.tsx
+++ b/packages/nextra-theme-docs/src/misc/theme.tsx
@@ -10,9 +10,6 @@ import 'intersection-observer'
 import { ActiveAnchor, useActiveAnchorSet } from './active-anchor'
 import { MDXProvider } from '@mdx-js/react'
 import Collapse from '../components/collapse'
-import { Tabs, Tab } from '../components/tabs'
-import Bleed from '../bleed'
-import Callout from '../callout'
 import Anchor from '../components/anchor'
 
 let observer: IntersectionObserver
@@ -85,42 +82,46 @@ if (typeof window !== 'undefined') {
 }
 
 // Anchor links
-const createHeaderLink = (Tag: `h${2 | 3 | 4 | 5 | 6}`, context: { index: number }) => function HeaderLink({
-  children,
-  id,
-  ...props
-}: {
-  tag: any
-  children: ReactNode
-  id: string
-}): ReactElement {
-  setActiveAnchor = useActiveAnchorSet()
-  const obRef = useRef<HTMLSpanElement>(null)
-
-  useEffect(() => {
-    if (!obRef.current) return
-
-    slugs.set(obRef.current, [id, (context.index += 1)])
-    if (obRef.current) observer.observe(obRef.current)
-
-    return () => {
-      observer.disconnect()
-      slugs.delete(obRef.current!)
-      setActiveAnchor(f => {
-        const ret: ActiveAnchor = { ...f }
-        delete ret[id]
-        return ret
-      })
-    }
-  }, [])
+const createHeaderLink = (
+  Tag: `h${2 | 3 | 4 | 5 | 6}`,
+  context: { index: number }
+) =>
+  function HeaderLink({
+    children,
+    id,
+    ...props
+  }: {
+    tag: any
+    children: ReactNode
+    id: string
+  }): ReactElement {
+    setActiveAnchor = useActiveAnchorSet()
+    const obRef = useRef<HTMLSpanElement>(null)
+
+    useEffect(() => {
+      if (!obRef.current) return
+
+      slugs.set(obRef.current, [id, (context.index += 1)])
+      if (obRef.current) observer.observe(obRef.current)
+
+      return () => {
+        observer.disconnect()
+        slugs.delete(obRef.current!)
+        setActiveAnchor(f => {
+          const ret: ActiveAnchor = { ...f }
+          delete ret[id]
+          return ret
+        })
+      }
+    }, [])
 
-  return (
-    <Tag {...props}>
-      <span className="subheading-anchor -mt-20" id={id} ref={obRef} />
-      <a href={`#${id}`}>{children}</a>
-    </Tag>
-  )
-}
+    return (
+      <Tag {...props}>
+        <span className="subheading-anchor -mt-20" id={id} ref={obRef} />
+        <a href={`#${id}`}>{children}</a>
+      </Tag>
+    )
+  }
 
 const Table = ({ children }: { children: ReactNode }) => {
   return (
@@ -220,14 +221,7 @@ export const getComponents = () => {
     ),
     table: Table,
     details: Details,
-    summary: Summary,
-    Nextra: {
-      Bleed,
-      Callout,
-      Tabs,
-      Tab,
-      Collapse
-    }
+    summary: Summary
   }
 }
 
diff --git a/packages/nextra/__test__/__snapshots__/compile.test.ts.snap b/packages/nextra/__test__/__snapshots__/compile.test.ts.snap
index f7000a3717..4b9c156ebb 100644
--- a/packages/nextra/__test__/__snapshots__/compile.test.ts.snap
+++ b/packages/nextra/__test__/__snapshots__/compile.test.ts.snap
@@ -41,7 +41,7 @@ exports[`process heading > code-h1 1`] = `
   ],
   "result": "/*@jsxRuntime automatic @jsxImportSource react*/
 import {useMDXComponents as _provideComponents} from \\"@mdx-js/react\\";
-export const titleText = \\"codegen.yml\\";
+const titleText = \\"codegen.yml\\";
 function _createMdxContent(props) {
   const _components = Object.assign({
     h1: \\"h1\\",
@@ -53,7 +53,7 @@ function MDXContent(props = {}) {
   const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
   return MDXLayout ? <MDXLayout {...props}><_createMdxContent {...props} /></MDXLayout> : _createMdxContent(props);
 }
-export default MDXContent;
+
 ",
   "structurizedData": {},
 }
@@ -116,7 +116,7 @@ exports[`process heading > code-with-text-h1 1`] = `
   ],
   "result": "/*@jsxRuntime automatic @jsxImportSource react*/
 import {useMDXComponents as _provideComponents} from \\"@mdx-js/react\\";
-export const titleText = \\"codegen.yml file\\";
+const titleText = \\"codegen.yml file\\";
 function _createMdxContent(props) {
   const _components = Object.assign({
     h1: \\"h1\\",
@@ -128,7 +128,7 @@ function MDXContent(props = {}) {
   const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
   return MDXLayout ? <MDXLayout {...props}><_createMdxContent {...props} /></MDXLayout> : _createMdxContent(props);
 }
-export default MDXContent;
+
 ",
   "structurizedData": {},
 }
@@ -213,7 +213,7 @@ exports[`process heading > dynamic-h1 1`] = `
   ],
   "result": "/*@jsxRuntime automatic @jsxImportSource react*/
 import {useMDXComponents as _provideComponents} from \\"@mdx-js/react\\";
-export const titleText = \\"Posts Tagged with “”\\";
+const titleText = \\"Posts Tagged with “”\\";
 import {useRouter} from 'next/router';
 export const TagName = () => {
   const {tag} = useRouter().query;
@@ -229,7 +229,7 @@ function MDXContent(props = {}) {
   const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
   return MDXLayout ? <MDXLayout {...props}><_createMdxContent {...props} /></MDXLayout> : _createMdxContent(props);
 }
-export default MDXContent;
+
 ",
   "structurizedData": {},
 }
@@ -286,7 +286,7 @@ function MDXContent(props = {}) {
   const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
   return MDXLayout ? <MDXLayout {...props}><_createMdxContent {...props} /></MDXLayout> : _createMdxContent(props);
 }
-export default MDXContent;
+
 ",
   "structurizedData": {},
 }
@@ -333,7 +333,7 @@ exports[`process heading > static-h1 1`] = `
   ],
   "result": "/*@jsxRuntime automatic @jsxImportSource react*/
 import {useMDXComponents as _provideComponents} from \\"@mdx-js/react\\";
-export const titleText = \\"Hello World\\";
+const titleText = \\"Hello World\\";
 function _createMdxContent(props) {
   const _components = Object.assign({
     h1: \\"h1\\"
@@ -344,7 +344,7 @@ function MDXContent(props = {}) {
   const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
   return MDXLayout ? <MDXLayout {...props}><_createMdxContent {...props} /></MDXLayout> : _createMdxContent(props);
 }
-export default MDXContent;
+
 ",
   "structurizedData": {},
 }
diff --git a/packages/nextra/__test__/compile.test.ts b/packages/nextra/__test__/compile.test.ts
index 3d9139af77..b68289f9f9 100644
--- a/packages/nextra/__test__/compile.test.ts
+++ b/packages/nextra/__test__/compile.test.ts
@@ -1,7 +1,7 @@
 import { compileMdx } from '../src/compile'
 import { it, describe, expect } from 'vitest'
 import path from 'path'
-import fs from 'fs/promises'
+import { promises as fs } from 'fs'
 
 type Name =
   | 'code-h1.mdx'
diff --git a/packages/nextra/src/compile.ts b/packages/nextra/src/compile.ts
index 0978e6b7cd..3d43f82865 100644
--- a/packages/nextra/src/compile.ts
+++ b/packages/nextra/src/compile.ts
@@ -72,9 +72,12 @@ export async function compileMdx(
     ].filter(Boolean)
   })
   try {
-    const result = await compiler.process(source)
+    const result = String(await compiler.process(source))
+      .replace('export const titleText =', 'const titleText =')
+      .replace('export default MDXContent;', '')
+
     return {
-      result: String(result),
+      result,
       ...(compiler.data('headingMeta') as Pick<
         PageOpts,
         'headings' | 'hasJsxInH1'
diff --git a/packages/nextra/src/constants.ts b/packages/nextra/src/constants.ts
index 2857b72603..69d322aa8e 100644
--- a/packages/nextra/src/constants.ts
+++ b/packages/nextra/src/constants.ts
@@ -5,3 +5,5 @@ export const IS_PRODUCTION = process.env.NODE_ENV === 'production'
 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']
diff --git a/packages/nextra/src/index.js b/packages/nextra/src/index.js
index 35bdab1d15..11a37fc62a 100644
--- a/packages/nextra/src/index.js
+++ b/packages/nextra/src/index.js
@@ -40,23 +40,44 @@ const nextra = (...config) =>
         config.plugins ||= []
         config.plugins.push(nextraPlugin)
 
-        config.module.rules.push({
-          test: MARKDOWN_EXTENSION_REGEX,
-          use: [
-            options.defaultLoaders.babel,
-            {
-              loader: 'nextra/loader',
-              options: {
-                ...nextraConfig,
-                locales: i18n.locales,
-                defaultLocale: i18n.defaultLocale,
-                pageMapCache,
-                newNextLinkBehavior:
-                  nextConfig.experimental?.newNextLinkBehavior
+        const nextraLoaderOptions = {
+          ...nextraConfig,
+          locales: i18n.locales,
+          defaultLocale: i18n.defaultLocale,
+          pageMapCache,
+          newNextLinkBehavior: nextConfig.experimental?.newNextLinkBehavior
+        }
+
+        config.module.rules.push(
+          {
+            // Match Markdown imports from non-pages. These imports have an
+            // issuer, which can be anything as long as it's not empty.
+            test: MARKDOWN_EXTENSION_REGEX,
+            issuer: request => !!request,
+            use: [
+              options.defaultLoaders.babel,
+              {
+                loader: 'nextra/loader',
+                options: nextraLoaderOptions
               }
-            }
-          ]
-        })
+            ]
+          },
+          {
+            // Match pages (imports without an issuer).
+            test: MARKDOWN_EXTENSION_REGEX,
+            issuer: request => !request,
+            use: [
+              options.defaultLoaders.babel,
+              {
+                loader: 'nextra/loader',
+                options: {
+                  ...nextraLoaderOptions,
+                  pageImport: true
+                }
+              }
+            ]
+          }
+        )
 
         if (typeof nextConfig.webpack === 'function') {
           return nextConfig.webpack(config, options)
diff --git a/packages/nextra/src/loader.ts b/packages/nextra/src/loader.ts
index e6cb8b14a5..b690f39bd3 100644
--- a/packages/nextra/src/loader.ts
+++ b/packages/nextra/src/loader.ts
@@ -11,7 +11,12 @@ import { parseFileName } from './utils'
 import { compileMdx } from './compile'
 import { getPageMap, findPagesDir } from './page-map'
 import { collectFiles, collectMdx } from './plugin'
-import { IS_PRODUCTION, DEFAULT_LOCALE } from './constants'
+import {
+  IS_PRODUCTION,
+  DEFAULT_LOCALE,
+  OFFICIAL_THEMES,
+  MARKDOWN_EXTENSION_REGEX
+} from './constants'
 
 // TODO: create this as a webpack plugin.
 const indexContentEmitted = new Set<string>()
@@ -50,9 +55,9 @@ async function loader(
   context: LoaderContext<LoaderOptions>,
   source: string
 ): Promise<string> {
-  context.cacheable(true)
-
+  const { resourcePath } = context
   let {
+    pageImport,
     theme,
     themeConfig,
     defaultLocale,
@@ -63,12 +68,14 @@ async function loader(
     newNextLinkBehavior
   } = context.getOptions()
 
+  context.cacheable(true)
+
   // Check if there's a theme provided
   if (!theme) {
     throw new Error('No Nextra theme found!')
   }
+  const themeIncludeStyles = OFFICIAL_THEMES.includes(theme)
 
-  const { resourcePath } = context
   if (resourcePath.includes('/pages/api/')) {
     console.warn(
       `[nextra] Ignoring ${resourcePath} because it is located in the "pages/api" folder.`
@@ -110,6 +117,15 @@ async function loader(
     },
     resourcePath
   )
+
+  // Imported as a normal component, no need to add the layout.
+  if (!pageImport) {
+    return `
+${themeIncludeStyles ? `import '${theme}/style.css'` : ''}
+${result}
+export default MDXContent`.trimStart()
+  }
+
   const [pageMap, route, title] = getPageMap(
     resourcePath,
     pageMapResult,
@@ -146,6 +162,7 @@ async function loader(
   // Relative path instead of a package name
   const layout =
     theme.startsWith('.') || theme.startsWith('/') ? path.resolve(theme) : theme
+
   const layoutConfig = themeConfig ? slash(path.resolve(themeConfig)) : ''
   const pageOpts: Omit<PageOpts, 'titleText'> = {
     filename: slash(filename),
@@ -159,34 +176,50 @@ async function loader(
     newNextLinkBehavior
   }
 
+  const pageNextRoute =
+    '/' +
+    path
+      .relative(pagesDir, resourcePath)
+      // Remove the `mdx?` extension
+      .replace(MARKDOWN_EXTENSION_REGEX, '')
+      // Remove the `*/index` suffix
+      .replace(/\/index$/, '')
+      // Remove the only `index` route
+      .replace(/^index$/, '')
+
   return `
-import { withSSG as __nextra_withSSG__ } from 'nextra/ssg'
+import { SSGContext as __nextra_SSGContext__ } from 'nextra/ssg'
+
 import __nextra_withLayout__ from '${layout}'
-${layoutConfig && `import __nextra_layoutConfig__ from '${layoutConfig}'`}
-${result.replace('export default MDXContent;', '')}
+${themeIncludeStyles ? `import '${layout}/style.css'` : ''}
+${layoutConfig ? `import __nextra_layoutConfig__ from '${layoutConfig}'` : ''}
+
+${result}
 
 const __nextra_pageOpts__ = ${JSON.stringify(pageOpts)}
 
 globalThis.__nextra_internal__ = {
   pageMap: __nextra_pageOpts__.pageMap,
-  route: __nextra_pageOpts__.route
+  route: __nextra_pageOpts__.route,
 }
 
-const NextraLayout = __nextra_withSSG__(__nextra_withLayout__({
-  titleText: typeof titleText === 'string' ? titleText : undefined,
-  ...__nextra_pageOpts__
-}, ${layoutConfig ? '__nextra_layoutConfig__' : 'null'}))
-
-function NextraPage(props) {
+function Content(props) {
   return (
-    <NextraLayout {...props}>
+    <__nextra_SSGContext__.Provider value={props}>
       <MDXContent />
-    </NextraLayout>
+    </__nextra_SSGContext__.Provider>
   )
 }
-NextraPage.getLayout = NextraLayout.getLayout
 
-export default NextraPage`.trimStart()
+export default __nextra_withLayout__(
+  ${JSON.stringify(pageNextRoute)},
+  Content,
+  {
+    titleText: typeof titleText === 'string' ? titleText : undefined,
+    ...__nextra_pageOpts__
+  },
+  ${layoutConfig ? '__nextra_layoutConfig__' : 'null'},
+)`.trimStart()
 }
 
 export default function syncLoader(
diff --git a/packages/nextra/src/ssg.ts b/packages/nextra/src/ssg.ts
index 3d46a32775..785f86e18a 100644
--- a/packages/nextra/src/ssg.ts
+++ b/packages/nextra/src/ssg.ts
@@ -1,29 +1,8 @@
-import {
-  createContext,
-  useContext,
-  ComponentClass,
-  FunctionComponent,
-  createElement
-} from 'react'
+import { createContext, useContext } from 'react'
 export const SSGContext = createContext<any>(false)
 export const useSSG = (key = 'ssg') => useContext(SSGContext)?.[key]
 
-export const withSSG = <T extends { ssg: boolean } = any>(
-  Page: FunctionComponent<T> | ComponentClass<T>
-) => {
-  function WithSSG(props: T) {
-    return createElement(
-      SSGContext.Provider,
-      { value: props },
-      createElement(Page, props)
-    )
-  }
-  WithSSG.getLayout = (Page as any).getLayout
-  return WithSSG
-}
-
 // Make sure nextra/ssg remains functional, but we now recommend this new API.
 
 export const DataContext = SSGContext
 export const useData = useSSG
-export const withData = withSSG
diff --git a/packages/nextra/src/types.ts b/packages/nextra/src/types.ts
index 508752dd8b..906ff84890 100644
--- a/packages/nextra/src/types.ts
+++ b/packages/nextra/src/types.ts
@@ -25,6 +25,7 @@ export abstract class NextraPluginCache {
   }
 }
 export interface LoaderOptions extends NextraConfig {
+  pageImport?: boolean
   locales: string[]
   defaultLocale: string
   pageMapCache: NextraPluginCache
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5393b55f34..773e1b5e76 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -161,6 +161,7 @@ importers:
       concurrently: ^7.3.0
       cross-env: ^7.0.3
       cssnano: ^5.1.12
+      cssnano-preset-advanced: ^5.3.8
       next: ^12.2.3
       next-themes: ^0.2.0-beta.2
       nextra: workspace:*
@@ -184,6 +185,7 @@ importers:
       concurrently: 7.3.0
       cross-env: 7.0.3
       cssnano: 5.1.12_postcss@8.4.14
+      cssnano-preset-advanced: 5.3.8_postcss@8.4.14
       next: 12.2.3_biqbaboplfbrettd7655fr4n2y
       nextra: link:../nextra
       postcss: 8.4.14
@@ -210,6 +212,7 @@ importers:
       concurrently: ^7.3.0
       cross-env: ^7.0.3
       cssnano: ^5.1.12
+      cssnano-preset-advanced: ^5.3.8
       flexsearch: ^0.7.21
       focus-visible: ^5.2.0
       github-slugger: ^1.4.0
@@ -252,6 +255,7 @@ importers:
       concurrently: 7.3.0
       cross-env: 7.0.3
       cssnano: 5.1.12_postcss@8.4.14
+      cssnano-preset-advanced: 5.3.8_postcss@8.4.14
       next: 12.2.3_biqbaboplfbrettd7655fr4n2y
       nextra: link:../nextra
       postcss: 8.4.14
@@ -1818,6 +1822,21 @@ packages:
     hasBin: true
     dev: true
 
+  /cssnano-preset-advanced/5.3.8_postcss@8.4.14:
+    resolution: {integrity: sha512-xUlLLnEB1LjpEik+zgRNlk8Y/koBPPtONZjp7JKbXigeAmCrFvq9H0pXW5jJV45bQWAlmJ0sKy+IMr0XxLYQZg==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      autoprefixer: 10.4.7_postcss@8.4.14
+      cssnano-preset-default: 5.2.12_postcss@8.4.14
+      postcss: 8.4.14
+      postcss-discard-unused: 5.1.0_postcss@8.4.14
+      postcss-merge-idents: 5.1.1_postcss@8.4.14
+      postcss-reduce-idents: 5.2.0_postcss@8.4.14
+      postcss-zindex: 5.1.0_postcss@8.4.14
+    dev: true
+
   /cssnano-preset-default/5.2.12_postcss@8.4.14:
     resolution: {integrity: sha512-OyCBTZi+PXgylz9HAA5kHyoYhfGcYdwFmyaJzWnzxuGRtnMw/kR6ilW9XzlzlRAtB6PLT/r+prYgkef7hngFew==}
     engines: {node: ^10 || ^12 || >=14.0}
@@ -4441,6 +4460,16 @@ packages:
       postcss: 8.4.14
     dev: true
 
+  /postcss-discard-unused/5.1.0_postcss@8.4.14:
+    resolution: {integrity: sha512-KwLWymI9hbwXmJa0dkrzpRbSJEh0vVUd7r8t0yOGPcfKzyJJxFM8kLyC5Ev9avji6nY95pOp1W6HqIrfT+0VGw==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: 8.4.14
+      postcss-selector-parser: 6.0.10
+    dev: true
+
   /postcss-import/14.1.0:
     resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==}
     engines: {node: '>=10.0.0'}
@@ -4507,6 +4536,17 @@ packages:
       yaml: 1.10.2
     dev: true
 
+  /postcss-merge-idents/5.1.1_postcss@8.4.14:
+    resolution: {integrity: sha512-pCijL1TREiCoog5nQp7wUe+TUonA2tC2sQ54UGeMmryK3UFGIYKqDyjnqd6RcuI4znFn9hWSLNN8xKE/vWcUQw==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      cssnano-utils: 3.1.0_postcss@8.4.14
+      postcss: 8.4.14
+      postcss-value-parser: 4.2.0
+    dev: true
+
   /postcss-merge-longhand/5.1.6_postcss@8.4.14:
     resolution: {integrity: sha512-6C/UGF/3T5OE2CEbOuX7iNO63dnvqhGZeUnKkDeifebY0XqkkvrctYSZurpNE902LDf2yKwwPFgotnfSoPhQiw==}
     engines: {node: ^10 || ^12 || >=14.0}
@@ -4687,6 +4727,16 @@ packages:
       postcss-value-parser: 4.2.0
     dev: true
 
+  /postcss-reduce-idents/5.2.0_postcss@8.4.14:
+    resolution: {integrity: sha512-BTrLjICoSB6gxbc58D5mdBK8OhXRDqud/zodYfdSi52qvDHdMwk+9kB9xsM8yJThH/sZU5A6QVSmMmaN001gIg==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: 8.4.14
+      postcss-value-parser: 4.2.0
+    dev: true
+
   /postcss-reduce-initial/5.1.0_postcss@8.4.14:
     resolution: {integrity: sha512-5OgTUviz0aeH6MtBjHfbr57tml13PuedK/Ecg8szzd4XRMbYxH4572JFG067z+FqBIf6Zp/d+0581glkvvWMFw==}
     engines: {node: ^10 || ^12 || >=14.0}
@@ -4752,6 +4802,15 @@ packages:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
     dev: true
 
+  /postcss-zindex/5.1.0_postcss@8.4.14:
+    resolution: {integrity: sha512-fgFMf0OtVSBR1va1JNHYgMxYk73yhn/qb4uQDq1DLGYolz8gHCyr/sesEuGUaYs58E3ZJRcpoGuPVoB7Meiq9A==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: 8.4.14
+    dev: true
+
   /postcss/8.4.14:
     resolution: {integrity: sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==}
     engines: {node: ^10 || ^12 || >=14}
diff --git a/turbo.json b/turbo.json
index 9d1465c980..82529a3997 100644
--- a/turbo.json
+++ b/turbo.json
@@ -3,9 +3,7 @@
   "npmClient": "pnpm",
   "pipeline": {
     "build": {
-      "dependsOn": [
-        "^build"
-      ],
+      "dependsOn": ["^build"],
       "outputs": [
         "dist/**/*.d.ts",
         "dist/**/*.mjs",
@@ -19,9 +17,7 @@
     },
     "build:tailwind": {
       "dependsOn": [],
-      "outputs": [
-        "style.css"
-      ]
+      "outputs": ["style.css"]
     },
     "test": {},
     "types:check": {
@@ -38,4 +34,4 @@
       "cache": false
     }
   }
-}
\ No newline at end of file
+}