如何建立並使用mdx頁面？

[ghost]

請原諒~看到您來自香港，就用繁體中文了，我的英文不是很好。

看到您的文檔使用的是(home)來使用頁面的，請教下，如何使用mdx頁面當做單頁面。

像nextra那樣，可以指定頁面typesetting: 'article'。

或像vitepress一樣，sidebar: false，讓文檔頁面看起來像單頁面一樣。

[fuma-nama]

Sidebar is a part of layout.

To remove the sidebar from layout, use Non-docs Layout.

To create a separate page with MDX (similar to https://yeecord.com/privacy), you can create a page.mdx under a non-docs layout and add mdx to page extensions:

const nextConfig = {
  pageExtensions: ["ts", "tsx", "mdx"],
};

Finally in the page.mdx, add the following to apply typography styles.

export default ({ children }) => (
  <main className="container py-12">
    <div className="prose">{children}</div>
  </main>
);

Deep Dive

Under docs layout, you can't opt-out of sidebar from a specific page (e.g. MDX file). This is by design, App Router doesn't allow changing the layout from page.
If we move the docs layout to page.tsx, Next.js unmounts the previous page when navigating between pages, hence the states of sidebar cannot be retained.

I'm yet finding a proper design of this though, it's planned in the roadmap.

[ghost]

Thank you, It worked~