Next.js Discord

Discord Forum

Need help with Nextra (docs theme) based on NextJS

Answered
Golden northern bumble bee posted this in #help-forum
Open in Discord
Golden northern bumble beeOP
I'm working with the auto-generated Nextra docs theme (https://vercel.com/templates/next.js/documentation-starter-kit). I have scoured all the doc pages on the Nextra site, but haven't found an answer yet. I'd be very grateful if someone could help me out!

My issue is is: I have all the documentation pages laid out in mdx files, and it's all working great. Now, I'm trying to add a custom homepage with a Link to the docs root. However, I cannot get rid of the Navbar that is common across all docs pages. Can we get rid of this navbar?

My project layout is so (if it helps):

<root>
pages
├── _app.tsx
├── _meta.json
├── about.mdx
├── docs // the actual documentation pages start off here
│   ├── _meta.json
│   ├── dir1
│   │   ├── _meta.json
│   │   ├── page1.mdx
│   │   └── page2.mdx
│   ├── index.mdx // the documentation index page
│   ├── dir2
│   │   ├── _meta.json
│   │   ├── page3.mdx
│   │   ├── page4.mdx
│   │   └── page5.mdx
│   └── dir3
│       ├── _meta.json
│       ├── page5.mdx
│       └── page6.mdx
└── index.mdx // this is my custom home page/landing page which still shows the Navbar


(Background: Backend dev, only slightly familiar with frontend).
Answered by Clown
https://nextra.site/docs/docs-theme/page-configuration#theme-components
View full answer

23 Replies

Clown
Yes you can
Golden northern bumble beeOP
Oh!
Clown
I assume the navbar is being used inside a layout?
Golden northern bumble beeOP
I don't seem to have an explicit layout. (Sorry if I miss something obvious, I'm a newbie)
The only layout bit I see is this one:

'use client'

import { ChakraProvider } from '@chakra-ui/react'

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

export default MyApp;


in _app.tsx
and then I have the "docs theme" via themeconfig.tsx (which I presume does the layout internally?)
I have a _meta.json file which has the about and Contact bits which appear in the common Navbar.
Have you checked this out?
Golden northern bumble beeOP
Yes, I did check it out. It gives some options to configure the Navbar itself, but not a way to block it on certain pages (which is what I'm trying to do, if possible!).
https://nextra.site/docs/docs-theme/theme-configuration includes DocsThemeConfig, which if I dig in, shows the navbar function.
The screenshot is from the nextra site itself - that's the sort of navbar which I'm referring to - it appears across all doc pages (which is great), but I am trying to find a way of providing a custom Home Page, and then link to the docs' index page, but I can't seem to make it work.
I'd like to get rid of this navbar from the home page if possible!
Answer
Clown
I think you can disable components of a page/route from this:
Golden northern bumble beeOP
Hmm.. that does look promising... let me give it a spin and see. Thanks!
@Clown https://nextra.site/docs/docs-theme/page-configuration#theme-components
Golden northern bumble beeOP
I tried setting "navbar": false in the root _meta.json, and it did get rid of the Navbar in the home page! Though the docs pages look a bit different - maybe that's something I can fix inside the docs' _meta.,json.
Tnank you so much! You're a lifesaver! 😃
@Clown
Really appreciate the time and help! Cheers! 🙏
@Golden northern bumble bee Really appreciate the time and help! Cheers! 🙏
Clown
Mark the answer if your problem has been solved :sunglasses_1:
Golden northern bumble beeOP
Sure ... ummm, how do I do that? (Don't use Discord much, sorry!)
Haha... yeah. I just saw the first post had the steps. Thanks, mate! 😃