Nextra

安装

先创建next.js的项目


pnpm create next-app@latest docs --yes

安装nextra依赖（多的依赖不用管）


pnpm add next react react-dom nextra nextra-theme-docs

配置nextra（next.config.ts）


import type { NextConfig } from "next";
import nextra from "nextra";
const withNextra = nextra({
  // ... Add Nextra-specific options here
});
 
export default withNextra({
  // ... Add regular Next.js options here
  turbopack: {
    root: "/Users/gegepos/Projects/yujie-mono",
  },
});

在项目根目录下创建文件mdx-components.js


import { useMDXComponents as getThemeComponents } from "nextra-theme-docs";
 
export function useMDXComponents(components) {
  return {
    ...getThemeComponents(),
    ...components,
  };
}

将布局写入app/layout.tsx中


import { Footer, Layout, Navbar } from "nextra-theme-docs";
import { Banner, Head } from "nextra/components";
import { getPageMap } from "nextra/page-map";
import "nextra-theme-docs/style.css";
 
export const metadata = {
  // Define your metadata here
  // For more information on metadata API, see: https://nextjs.org/docs/app/building-your-application/optimizing/metadata
};
 
const banner = (
  <Banner storageKey="some-key">
    Welcome to yujie-code-blogs build by Nextra 4.0 🎉
  </Banner>
);
const navbar = (
  <Navbar
    logo={<b>Nextra</b>}
    // ... Your additional navbar options
  />
);
const footer = <Footer>MIT {new Date().getFullYear()} © Nextra.</Footer>;
 
export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html
      // Not required, but good for SEO
      lang="en"
      // Required to be set
      dir="ltr"
      // Suggested by `next-themes` package https://github.com/pacocoursey/next-themes#with-app
      suppressHydrationWarning
    >
      <Head
      // ... Your additional head options
      >
        {/* Your additional tags should be passed as `children` of `<Head>` element */}
      </Head>
      <body>
        <Layout
          banner={banner}
          navbar={navbar}
          pageMap={await getPageMap()}
          docsRepositoryBase="https://github.com/shuding/nextra/tree/main/docs"
          footer={footer}
          // ... Your additional layout options
        >
          {children}
        </Layout>
      </body>
    </html>
  );
}

将page.tsx改为page.mdx，然后开始写入你的首个文档
文档的基础结构是


app
|--layout.tsx
|--page.mdx
|--js
		|-- page.mdx
		|-- filname
					|-- page.mdx