John Polacek

Chicago Web Developer

Engineering manager and frontend lead at Howl

My product recommendations at

Shipping open source on Github

Follow me at @johnpolacek

How to Use Your on Your Project’s Docs Page

Originally published on 8/23/2020

You have a project. You want to make a Docs Page. You already wrote documentation in Do you need to have two copies of your ReadMe? Heck no!

Let’s start by cloning the Next.js MDX Example. Note, you could do this same thing with Gatsby, Create React App or anything that supports MDX.

npx create-next-app --example with-mdx with-mdx-app

Next, we create a page at pages/docs.js. Using MDXProvider, we can import and drop it on the page.

import { MDXProvider } from "@mdx-js/react"
import ReadMe from "../"
const Docs = () => (
<ReadMe />
export default Docs

Do npm run dev, go to localhost:3000/docs and there’s your README content.

Do a vercel deploy, hit return/enter a bunch of times and your docs page is live. See for example