How to add a Docusaurus website within Next.js Website as a route? It's worth $200
Tags: react, nextjs, docusaurus, webdev
Published: 2024-03-11 17:09:45

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](https://stackoverflow.com/questions/72544932/how-to-add-a-docusaurus-website-within-next-js-website-as-a-route/78135265#78135265)

### Installation Next.js

![Next.js](https://cdn-images-1.medium.com/max/5720/1*f-ZJHCL7jqsP1XTVC2OABg.png)

    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?

![Next.js](https://cdn-images-1.medium.com/max/5752/1*RIZIMbLP_3bU67G3rTtTnA.png)

## 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**](https://nextjs.org/docs/app/api-reference/next-config-js/rewrites)

**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](https://next-docusaurus-martinadamsdev.vercel.app/doc)

![Next.js + Docusaurus](https://cdn-images-1.medium.com/max/5760/1*8SXsRxDr3o3nHEmw7_SNvA.png)

## 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](https://twitter.com/martinadamsdev).*