A next-generation tool to create blazing-fast documentation sites
API
created:3/15/2021
updated:3/15/2021
Below, we go over how to add a component-controls documentation site to new Nextjs projects, existing React projects, and existing Nextjs projects.
You can find a git repo and a live site.

Clone starter

The easiest way to get started is to clone the nextjs-controls-starter project
git clone https://github.com/ccontrols/nextjs-controls-starter my-nextjs-project

New project

If you want to create and configure a Nextjs documentation site from scratch instead of cloning the starter repo, the following steps are required:
mkdir my-nextjs-project && cd my-nextjs-project
Initialize the project:
yarn init
Add nextjs and react packages:
yarn add next react react-dom
Optional (but recommended), add typescript dependencies
yarn add --dev typescript @types/react @types/node

package.json

"scripts": {
"build": "next build && next export",
"start": "next",
"start-server": "next build && next start"
},
The remaining steps are the same as for existing Nextjs projects.

Existing (non-Nextjs) React project

All you have to do is add Nextjs as a dependency:
yarn add next
Then follow the steps for existing Nextjs projects.

Existing Nextjs project

Add component-controls

yarn add @component-controls/nextjs-plugin

Enable component-controls

The default options will configure component-controls to work with react apps, with react-docgen for prop-types and react-docgen-typescript for typescript props information

next.config.js

const withStories = require('@component-controls/nextjs-plugin/build');
module.exports = withStories({
future: {
webpack5: true, //use webpack 5 for nextjs
},
configPath: '.config',
....other options
});

Create content pages

Create a pages folder

mkdir pages

Application home

Create a new or edit index.tsx or index.js file in the pages folder:
view source...

pages/index.tsx

import React from 'react';
import { GetStaticProps } from 'next';
import { NextLayout, getIndexPage } from '@component-controls/nextjs-plugin';
const HomePage: typeof NextLayout = props => <NextLayout {...props} />;
export const getStaticProps: GetStaticProps = async () => {
return { props: getIndexPage() };
};
export default HomePage;

Document type home

Create a new [doctype].tsx or [doctype].js file in the pages folder:
view source...

pages/[doctype].tsx

import React from 'react';
import { GetStaticProps, GetStaticPaths } from 'next';
import {
NextLayout,
getHomePagesPaths,
getDocHomePage,
} from '@component-controls/nextjs-plugin';
const DocHome: typeof NextLayout = props => <NextLayout {...props} />;
export const getStaticPaths: GetStaticPaths = async () => {
return { paths: getHomePagesPaths(), fallback: false };
};
export const getStaticProps: GetStaticProps = async ({ params }) => {
const { doctype: basepath } = params as { doctype: string };
return { props: getDocHomePage(basepath) };
};
export default DocHome;

Document and Story pages

Create a new sub-folder [doctype] in the pages folder, and in it a new [...docid].tsx or [...docid].js file:

Create a pages folder

mkdir pages/[doctype]
view source...

pages/[doctype]/[...docid].tsx

import React from 'react';
import { GetStaticProps, GetStaticPaths } from 'next';
import {
NextLayout,
getDocPagesPaths,
getDocPage,
} from '@component-controls/nextjs-plugin';
const DocPage: typeof NextLayout = props => <NextLayout {...props} />;
export const getStaticPaths: GetStaticPaths = async () => {
return { paths: getDocPagesPaths(), fallback: false };
};
export const getStaticProps: GetStaticProps = async ({ params }) => {
const { doctype, docid } = params as { doctype: string; docid: string[] };
return { props: getDocPage(doctype, docid) };
};
export default DocPage;

Create your documentation site

Check our create a documentation site tutorial