Nesting nextra within an existing App router application

[ukcw]

Hi.

I'd like to nest my nextra documention within a page (in terms of the App router). In particular, I want to reuse the same headers and footers from my current Next.js 13 application, not use the navbar from Nextra.

Something like:

app/
  docs/
    layout.tsx
    page.tsx

where page.tsx will render whichever .mdx page the user is on.

As well, layout.tsx will wrap the page.tsx with the necessary headers and footers.

Is this even possible?

[caffeine-addictt]

Nextra only supports the pages router. #1421 (comment)

According the NextJS docs here, you can have the pages and app router at the same time.

Although I haven't tested this myself, you could have nextra handle only the docs/ route.
Perhaps a file structure like this is what you're looking for?

app/
    other_page/
        page.tsx
        layout.tsx
pages/
    _meta.json
    docs/
        _meta.json
        index.mdx

If you do not like this 2 router approach, app router will be supported in Nextra4, you can track it here #2600.

As for layout.tsx, this is only present in the app router so it will not function in the pages directory, you could try adding "layout": "raw" to _meta.json and import a layout from a component. Nextra layout docs. Something like this should suffice:

import Layout from '@/components/customlayout'

export default function MyPage = () => {
    return <Layout>/*page contents here*/</Layout>
}

[ukcw]

Hey! Thanks for providing an answer.

I did something similar to your answer should someone come to the same problem before the App router is fully supported in Nextra.

My folder structure is as your answer suggests and I disabled the default navbar from Nextra. In app.js or app.mdx, I wrapped the Nextra application (the only thing in my pages router) with my default providers that I use in my App router too.

As you have mentioned, the layout.tsx in App router is not shared with the pages router so we have to replicate the same layout again to have the same shared layout.