Can this be ran on the same nextjs app as my website?

[NotDemonix]

Hello, i dont want to run 2 diffrent nextjs apps for docs and main web, is it possible to run it as one?

[SincerelyFaust]

Yes.

[NotDemonix]

How? Any examples?

[SincerelyFaust]

To quote the docs:

If you already have Next.js installed in your project, you only need to install nextra and nextra-theme-docs as the add-ons.

The rest you can find at https://nextra.site/docs/docs-theme/start

[medkrimi]

Tried it in the same app but getting this error. I am not sure if I do miss config or there is a bug in the default docs Theme (nextra-theme-docs).

npm dependencies

    "next": "12.2.0",
    "next-seo": "^5.4.0",
    "nextjs-breadcrumbs": "^1.1.9",
    "nextra": "^2.2.1",
    "nextra-theme-docs": "^2.2.1",   
    "pre-commit": "^1.2.2",
    "react": "^18.2.0",
    "react-apexcharts": "^1.4.0",
    "react-dnd": "^16.0.1",
    "react-dnd-html5-backend": "^16.0.1",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.40.0",
    "react-icons": "^4.4.0",
    "react-infinite-scroll-component": "^6.1.0",
    "react-redux": "^8.0.2",
    "react-router-dom": "^6.3.0",
    "react-table": "^7.8.0",
    "universal-cookie": "^4.0.4",
    "yup": "^0.32.11"

theme.config.ts

import {DocsThemeConfig} from "nextra-theme-docs"
import React from "react"

const config: DocsThemeConfig = {
  logo: <span>Commerce Seller Admin</span>,
  project: {
    link: "#"
  },
  docsRepositoryBase: "#",
  footer: {
    text: "Nextra Docs Template"
  },
  i18n: []
}

export default config

next.config.js

/** @type {import('next').NextConfig} */

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

module.exports = withNextra({nextConfig})

Error Stack

Server Error
ZodError: [
  {
    "code": "custom",
    "message": "Must be React.ReactNode or React.FC",
    "path": [
      "toc",
      "extraContent"
    ]
  }
]

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
handleResult
file:///C:/Projects/sitecore-commerce/node_modules/zod/lib/index.mjs (502:23)
ZodObject.safeParse
file:///C:/Projects/sitecore-commerce/node_modules/zod/lib/index.mjs (615:16)
ZodObject.parse
file:///C:/Projects/sitecore-commerce/node_modules/zod/lib/index.mjs (595:29)
ConfigProvider
node_modules\nextra-theme-docs\dist\index.js (128:0)
renderWithHooks
file:///C:/Projects/sitecore-commerce/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5658:16)
renderIndeterminateComponent
file:///C:/Projects/sitecore-commerce/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5731:15)
renderElement
file:///C:/Projects/sitecore-commerce/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5946:7)
renderNodeDestructiveImpl
file:///C:/Projects/sitecore-commerce/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:///C:/Projects/sitecore-commerce/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderIndeterminateComponent
file:///C:/Projects/sitecore-commerce/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5785:7)

[medkrimi]

So, I did some investiguation and here is where we are: The config works well as expected with [email protected] and [email protected]. However when upgraded to the latest (2.2.0) for both packages, we got that error. Here is a sandbox based on @shuding typescript Template with [email protected] and [email protected]