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

#react #nextjs #docusaurus #webdev

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

https://next-docusaurus-martinadamsdev.vercel.app/doc

Feedback

Writing has always been my passion, and it gives me the pleasure of helping and inspiring people. If you have any questions, feel free to comment!

Welcome to Connect me on Twitter.

Top comments (4)

Nimit Savant • Sep 26

This is good for starters. But the use cases people have can go like.
What if I want to have all my docs inside my /docs currently with your article they're under /doc/doc I found a solution for that. Docs only mode. Also what about /blog you can copy paste your docusaurus folder and use blog only mode.