nextra-theme-mui-docs

nextra-theme-mui-docs is a theme for Nextra that's built with the Material UI library.

Installation

yarn create next-app --example https://github.com/Janpot/mui-plus/tree/master/examples/nextra-basic

The quickest way to get set up and running is to use create-next-app with the example from the nextra-theme-mui-docs Github repository.

Run:

yarn create next-app --example https://github.com/Janpot/mui-plus/tree/master/examples/nextra-basic

Then follow the instructions to create and run the application.

Site Structure

The pages hierarchy follows the way they are laid out but can be influenced in several ways. To change the order of pages in a folder, you can use frontmatter in the index.mdx of that folder. You can eitehr just specify the page name, or an object with name/title properties.

---
title: Introduction
order:
  - index
  - name: components
    title: Components
  - name: component-api
    title: Component Api
  - name: more
    title: More
---

Built-in components

CodeExample

Add Example code blocks with the CodeExample component.

You'll need to add webpack configuration to next.config.js.

module.exports = withNextra({
  webpack: (config) => {
    config.module.rules = [
      {
        oneOf: [
          {
            resourceQuery: /raw/,
            type: 'asset/source',
          },
          {
            rules: config.module.rules,
          },
        ],
      },
    ];

    return config;
  },
});

Create some example code:

// ./Example.tsx
import * as React from 'react';
export default function MyComponent() {
  /// preview-start
  return <div>Hello World!</div>;
  /// preview-end
}

Then you can import it in your mdx files:

// ./pages/myExamplePage.ndx
import CodeExample from 'nextra-theme-mui-docs/CodeExample';

import Example from './Example';
import srcExample from './Example?raw';

<CodeExample src={srcExample}>
  <Example />
</CodeExample>;

That will render:

Hello World!
return <div>Hello World!</div>;

You can use doc comments to create source code previews. Use /// preview-start to start and /// preview-end to end a preview block. Inside jsx {/** preview-start */} and {/** preview-end */} will also work.

‹ Sparkline