CODEWITHSUNDEEP
reactjsnext.jsdocusaurus
Bhupendra
Bhupendra

Reputation: 1286

How to add a Docusaurus website within Next.js Website as a route

Does anyone have any pointers on how to go about adding a /docs page for website documentation to a next.js app? I've looked up Docusaurus but it seems like it's already a react app itself. Is there a way to integrate it inside an existing next.js app or are there other solutions?

Many Thanks

Upvotes: 11

Views: 5087

Answers (3)

martiadamsdev
martiadamsdev

Reputation: 76

I recently came across a similar project.

The project is finally deployed here.

I am using the latest version of Next.js and Docusaurus.

The most important step is to read the Next.js documentation.

I found the override method in the Next.js documentation.

Rewrites allow you to map an incoming request path to a different destination path.

// next.config.mjs

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

export default nextConfig;

I have recorded the detailed solution process on my blog.

How to use Docusaurus in Next.js projects?

Upvotes: 3

spenceradolph
spenceradolph

Reputation: 11

One idea might be to intercept the request and send the html file that docusaurus builds out, and putting all other files in the public folder.

https://medium.com/wesionary-team/render-html-file-in-pages-of-next-js-59281c46c05

Also checkout this discussion about it. https://github.com/vercel/next.js/discussions/12373

Upvotes: 1

user2835532
user2835532

Reputation: 131

I have done this with React apps using express. But never with Next. At first it looks like it would be possible with multi-zone in Next but that doesn't seem to do the job. So my other recommendation would be to try to use a docs.domain.com instead and host it separately. Then you have a /docs url or a button that redirects to the doc domain instead.

Firebase has free hosting and allows you to setup multiple sites. So it should be fast to test this setup there

I'm going to actively try to get this to work with Next myself but I do not think it will work because of how they are developed. So I would do the above recommendation and if I find a workaround, I'll post an update.

Upvotes: 0

Related Questions