Installation

These instructions show how to set up Shiso in a Next.js project.

1. Install the package

npm install @umami/shiso

2. Create page

In your app folder, create a folder for the content section you wish to add. In this case we are creating a section for docs.

src
├── app
│   └── docs
│       └── [[...slug]]
│           └── page.jsx

In the page.jsx file, add the following code:

import { Shiso } from '@umami/shiso';
import { next } from '@umami/shiso/server';
import config from 'path/to/shiso.config.json';

const { generateMetadata, generateStaticParams, renderPage } = next('docs', config);

export { generateMetadata, generateStaticParams };

export default renderPage(props => {
  return <Shiso {...props} />;
});

3. Write content

In the folder you specified, start adding .mdx files.