Adding dokz to an existing website#

First you have to install the dependencies

bash
1
npm install dokz @emotion/core @chakra-ui/core emotion-theming @emotion/styled
2
# or
3
yarn add dokz @emotion/core @chakra-ui/core emotion-theming @emotion/styled

Add the dokz provider to the main nextjs _app.jsx component

In this example i am also using docsRootPath='pages/docs' to hide other pages outside of the docs directories in the side nav

jsx
1
// _app.jsx
2
import { DokzProvider } from 'dokz'
3
import { useRouter } from 'next/router'
4
5
export default function App(props) {
6
    const { Component, pageProps } = props
7
    const { pathname } = useRouter()
8
    if (pathname.startsWith('/docs')) {
9
        return (
10
            <DokzProvider docsRootPath='pages/docs'>
11
                <Component {...pageProps} />
12
            </DokzProvider>
13
        )
14
    }
15
    return <Component {...pageProps} />
16
}

Add withDokz in the next.config.js file

js
1
const { withDokz } = require('dokz/dist/plugin')
2
3
module.exports = withDokz()

Now you can add MDX documents in the pages/docs directory and live preview them at http://localhost:3000/docs