Make documentation with React Styleguidist and Next.js

source image: https://www.frontlinecaresolutions.com

One of the first tasks that I had in my actual job was to integrate a documentation platform for our components/good practices, etc. We’re using Next.js and my first insight was Styleguidist. I had struggles to make it work, but at the end was easier than I thought

So, in this post I’m gonna show you how I made it work.

First of all, I’m not gonna show you how to configure all the Next app, so I made this repository where you can see the final and the initial app. To start you can go to this branch and clone it.

Let’s start

Let’s see what we have in the branch that we have cloned. We have a ´docs´ folder in the root where our styleguidist project lives, it’s all configured to work by itself. But we need to make some changes to integrate it with next.

Understanding the /docs folder

At this point I assume you have cloned the branch that I told you lines above, so in this project we have a /docs. This folder contains the styleguidist project and configuration.

1. Styleguide.config.js
2. Webpack.js

Add the next.js page