I recently received a project worth $200.
The employer wants to use Docusaurus in a Next.js project.
I also found the same problem on stackoverflow. Hope this article is helpful to you.
how-to-add-a-docusaurus-website-within-next-js-website-as-a-route
Installation Next.js
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
Installation Docusaurus
pnpm dlx create-docusaurus@latest doc classic
cd doc
pnpm install
pnpm start
We need to modify the build command of docusaurus.
"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"
},
...
}
Build the docusaurus project.
pnpm build // build docusaurus ()
cd ..
pnpm build // build next.js
We visit http://localhost:3000/doc. But why is 404 displayed?
Troubleshooting
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.js Options: rewrites | Next.js
I found the override method in the Next.js documentation.
// next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
rewrites: async () => [
{
source: "/doc",
destination: "/doc/index.html",
},
],
};
export default nextConfig;
DONE