Componentize the docs theme

[tyrw]

Currently the themes are essentially all or nothing for a given page, which makes it harder to adopt Nextra in more advanced projects.

For our use case, we love the sidebar of the docs theme but we want to use a different navbar.

It would be wonderful if the theme followed the Next.js convention of using a file in components/layout.js, and we could do something like:

import { Default, Sidebar, Main, Footer } from "nextra-theme-docs";
import { CustomHeader } from "./custom-header.js";

export default function Layout(props) {
  const { meta, route, ...rest } = props;

  // Use custom layouts with common components anywhere
  if (route.startsWith("/custom")) {
    return function Layout({ children }) {
      return (
        <>
          <CustomHeader />
          <Sidebar />
          <Main>{ children }</Main>
          <Footer />
        </>
      );
    };
  }

  // Retain the default layout for all other routes
  return Default();
}

This would really make Nextra a killer app for us, as we would get all of the complexity of auto-generating the sidebar from the file tree, while retaining the ability to customize parts of the page directly instead of through configuration.

Also for context, our first attempt was looking at the docs theme in the core branch here. We quickly realized it would be brittle to start tweaking things and would also make it harder for us to contribute to Nextra once we had "ejected".

Nextra feels like a really powerful project, so thank you for building it!

[brendanfalk]

We would also be super interested in this @withfig - is there any way we can help?

[shuding]

I’ve been thinking about this feature recently, and will start working on it! Componentize the theme will also give us the ability to hide specific part (like the sidebar) for specific pages.

[brendanfalk]

Awesome - that’s so great to hear! Thank you so much and as I said, please let us know if we can help!

[eivindml]

I would also love this! Our use case:

We have highly custom documentation code with much more tsx than md. So the mdx format creates more trouble than what it solves. Not all editors have great mdx support, so the developer experience is not as good as it could be!

But by renaming pages from _.mdx to _.tsx we loose all of the nice stuff that nextra provides.

[AnanyaGB]

A feature like a custom navbar component using next.js conversion would be really great.