Inject Nextra documentation in existing NextJs 13 project with app feature

[mmalak7]

Is it possible to use Nextra inside NextJs 13 existing project that use app structure (beta)?

Wanted to avoid creating mono repo with separate project for documentation.

If so, then how folders should be structured so under "/docs" route there will be whole nextra documentation ?

[shuding]

Nextra doesn't support the app directory yet, but in Next.js 13 you can use app/ and pages/ at the same time (put your docs inside pages/ and your other routes in app/). There's no need to create a monorepo.

[mmalak7]

Indeed pages are working just fine as you mentioned.

For anytone who is looking for answer. Just create standard 'pages' folder on the same level as 'app' folder, and then put all the markdowns inside pages based on nextra documentation. Everything will work just fine :)

[karelnagel]

Indeed pages are working just fine as you mentioned.

For anytone who is looking for answer. Just create standard 'pages' folder on the same level as 'app' folder, and then put all the markdowns inside pages based on nextra documentation. Everything will work just fine :)

How did you configure next.config.js? I tried with this

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
};

const withNextra = require("nextra")({
  theme: "nextra-theme-docs",
  themeConfig: "./theme.config.tsx",
});

module.exports = withNextra(nextConfig);

but still gives me this warning The "app" directory is experimental. To enable, add "appDir: true" to your "next.config.js" configuration under "experimental".. With this the pages folder is working, but not the app folder. If I just use `module.exports =nextConfig then the app folder works fine. Any ideas on what I'm doing wrong or how to fix this?

[karelnagel]

Indeed pages are working just fine as you mentioned.
For anytone who is looking for answer. Just create standard 'pages' folder on the same level as 'app' folder, and then put all the markdowns inside pages based on nextra documentation. Everything will work just fine :)

How did you configure next.config.js? I tried with this

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
};

const withNextra = require("nextra")({
  theme: "nextra-theme-docs",
  themeConfig: "./theme.config.tsx",
});

module.exports = withNextra(nextConfig);

but still gives me this warning The "app" directory is experimental. To enable, add "appDir: true" to your "next.config.js" configuration under "experimental".. With this the pages folder is working, but not the app folder. If I just use `module.exports =nextConfig then the app folder works fine. Any ideas on what I'm doing wrong or how to fix this?

Okay my bad, just needed to upgrade packages 😅

[ukcw]

@karelnagel could you provide a sample directory of how you used nextra within your app directory application?

[ChristopherHButler]

I would like to second the request from @ukcw - I get the following error if I have an /app folder and /pages folder:

Conflicting app and page file was found, please remove the conflicting files to continue
"src/pages/index.mdx" - "src/app/page.tsx"

Any help would be appreciated

[ChristopherHButler]

Alright the mistake I was making was having a page.tsx file in my /app directory and a index.mdx file in my /pages directory. I changed the file name in the /pages folder and everything works. I also decided to put everything for nextra in a /docs folder but that doesn't seem to be necessary but it's a way to fence things off in my app. So for clarity, my folder structure is as follows:

/src
  / app
    page.tsx // <- entry point of my website

  / pages
    /docs
      test.mdx // <- nextra files

and just for good measure, my next.config.js file looks like this:

/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ["js", "jsx", "ts", "tsx", "mdx"],
}

const withNextra = require('nextra')({
  theme: 'nextra-theme-docs',
  themeConfig: './theme.config.jsx'
})

module.exports = withNextra(nextConfig)

[ukcw]

Yep! That's the solution I went with as well. The issue you had was due to the conflict in routes (same route in both App router and Pages router is defined, you can only have one).

[0xbid]

@ChristopherHButler @ukcw I had the same ⚠ Duplicate page detected. pages/docs/index.mdx and pages/docs/index.mdx both resolve to /docs. problem, so I changed my index.mdx to docs.mdx, and removed the docs directory.

So now my pages dir looks like:

./
├──   advanced/
│   └──   satori.mdx
├──   _meta.json
├──   about.mdx
├──   advanced.mdx
└──   docs.mdx

However, I get this error: ⚠ Duplicate page detected. pages/docs.mdx and pages/docs.mdx both resolve to /docs.. Everything works fine I think, but how do I make the solution go away?

[Marxes]

@0xbid Same problem here. I removed the line pageExtensions: ["js", "jsx", "ts", "tsx", "mdx"], in next.config.js which appears in @ChristopherHButler 's config, and then the warning is gone and for me it works just as fine.

[dinakar17]

I used the docs folder as the entry point. How do I display the sidebar without displaying the "docs" folder?

[eneskaya]

You can achieve this by having the following folder structure

app/
pages/
    docs/
       _meta.json
        index.md  
   _meta.json

and in src/pages/_meta.json put

"docs": {
  "type": "page"
}

This will make the /docs page the top-level of your documentation, reflecting it correctly on the sidebar.

[dinakar17]

Thanks for the reply. I have another question. What if I want to add NavBar items defined in the docs/_meta.json instead of pages/_meta.json? Currently as pointed in here (https://nextra.site/docs/docs-theme/page-configuration#navbar-items) one can add navbar items for the folders present in the root folder but I want to add folders present inside the docs as navbar items.