Member-only story

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

Martin Adams
3 min readMar 9, 2024

I recently received a project worth $200.

The employer wants to use Docusaurus in a Next.js project.

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.

Martin Adams
Martin Adams

Written by Martin Adams

TechWriter, FullStack Dev, Freelancer, Content Creator, and DM for collaborations.

Responses (1)

Write a response

Hey Martin Thanks for this tutorial but I am facing this issue
Your Docusaurus site did not load properly.
A very common reason is a wrong site baseUrl configuration.
Current configured baseUrl = /api/
We suggest trying baseUrl = /api/
what could be the cause...

Recommended from Medium

Lists

See more recommendations