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;