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
│       └── [[...id]]
│           └── page.jsx

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

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

const contentDir = './src/content/docs';

export async function generateMetadata({ params }) {
  const name = (await params)?.id?.join('/');

  const content = await getContent(name, contentDir);

  return {
    title: {
      absolute: `${content?.meta?.title} – Title`,
      default: 'Title'
    }
  };
}

export async function generateStaticParams() {
  const ids = await getContentIds(contentDir);

  return ids.map(id => ({
    id: id.split('/')
  }));
}

export default async function Page({ params }) {
  const name = (await params)?.id?.join('/');

  const content = await getContent(name, contentDir);

  return <Shiso type="docs" content={content} config={config} />;
}

3. Write content

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