Adding dokz to an existing website#

First you have to install the dependencies

bash
1
npm install dokz @emotion/react @chakra-ui/react @emotion/styled
2
# or
3
yarn add dokz @emotion/react @chakra-ui/react @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
import { ChakraProvider } from '@chakra-ui/react'
5
6
export default function App(props) {
7
    const { Component, pageProps } = props
8
    const { pathname } = useRouter()
9
    if (pathname.startsWith('/docs')) {
10
        return (
11
            <ChakraProvider resetCSS>
12
                <DokzProvider docsRootPath='pages/docs'>
13
                    <Component {...pageProps} />
14
                </DokzProvider>
15
            </ChakraProvider>
16
        )
17
    }
18
    return <Component {...pageProps} />
19
}

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