How to add a Docusaurus website within Next.js Website as a route? It's worth $200

pnpm dlx create-next-app@latest

What is your project named? next-docusaurus
Would you like to use TypeScript? No / Yes No
Would you like to use ESLint? No / Yes Yes
Would you like to use Tailwind CSS? No / Yes No
Would you like to use `src/` directory? No / Yes No
Would you like to use App Router? (recommended) No / Yes No
Would you like to customize the default import alias (@/*)? No / Yes Yes
What import alias would you like configured? @/*

pnpm install
pnpm build
pnpm dev

├── README.md
├── jsconfig.json
├── next.config.mjs
├── package.json
├── pages
│   ├── _app.js
│   ├── _document.js
│   ├── api
│   │   └── hello.js
│   └── index.js
├── pnpm-lock.yaml
├── public
│   ├── favicon.ico
│   ├── next.svg
│   └── vercel.svg
└── styles
    ├── Home.module.css
    └── globals.css

pnpm dlx create-docusaurus@latest doc classic
cd doc
pnpm install
pnpm start

"build": "docusaurus build && rm -rf '../public/doc' && mv 'build' '../public/doc'",

{
...
"scripts": {
    "docusaurus": "docusaurus",
    "start": "docusaurus start",
    "build": "docusaurus build && rm -rf '../public/doc' && mv 'build' '../public/doc'",
    "swizzle": "docusaurus swizzle",
    "deploy": "docusaurus deploy",
    "clear": "docusaurus clear",
    "serve": "docusaurus serve",
    "write-translations": "docusaurus write-translations",
    "write-heading-ids": "docusaurus write-heading-ids"
  },
...
}

pnpm build // build docusaurus ()
cd ..
pnpm build // build next.js

README.md
├── doc
│   ├── README.md
│   ├── babel.config.js
│   ├── blog
│   │   ├── 2019-05-28-first-blog-post.md
│   │   ├── 2019-05-29-long-blog-post.md
│   │   ├── 2021-08-01-mdx-blog-post.mdx
│   │   ├── 2021-08-26-welcome
│   │   └── authors.yml
│   ├── docs
│   │   ├── intro.md
│   │   ├── tutorial-basics
│   │   └── tutorial-extras
│   ├── docusaurus.config.js
│   ├── package.json
│   ├── pnpm-lock.yaml
│   ├── sidebars.js
│   ├── src
│   │   ├── components
│   │   ├── css
│   │   └── pages
│   └── static
│       └── img
├── jsconfig.json
├── next.config.mjs
├── package.json
├── pages
│   ├── _app.js
│   ├── _document.js
│   ├── api
│   │   └── hello.js
│   └── index.js
├── pnpm-lock.yaml
├── public
│   ├── doc
│   │   ├── 404.html
│   │   ├── assets
│   │   ├── blog
│   │   ├── docs
│   │   ├── img
│   │   ├── index.html
│   │   ├── markdown-page
│   │   └── sitemap.xml
│   ├── favicon.ico
│   ├── next.svg
│   └── vercel.svg
└── styles
    ├── Home.module.css
    └── globals.css

// next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  rewrites: async () => [
    {
      source: "/doc",
      destination: "/doc/index.html",
    },
  ],
};

export default nextConfig;