NextJS implementation for docs

[slug].ts

export const getStaticPaths: GetStaticPaths = async () => {
  const filePaths = await getComponentMDXPaths();
  const paths = filePaths.map((filePath) => {
    const extension = path.extname(filePath);
    const name = path.basename(filePath, extension);
    const slug = name.toLowerCase().replace(/\s/g, '-');
    return { params: { slug } };
  });
  return {
    paths,
    fallback: false,
  };
};

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const filePaths = await getComponentMDXPaths();
  const filePath = filePaths.find((filePath) => {
    const extension = path.extname(filePath);
    const name = path.basename(filePath, extension);
    return name.toLowerCase().replace(/\s/g, '-') === params.slug;
  });
  const contents = await fs.readFile(path.resolve(filePath), 'utf-8');
  const { code, frontmatter } = await bundleMDX(contents, {
    cwd: path.dirname(filePath),
  });
  return {
    props: {
      code,
      frontmatter,
    },
  };
};

loader.js

const path = require('path');
const matter = require('gray-matter');

const getRootPath = (filePath) => path.resolve(process.cwd(), 'src', filePath);

module.exports = async function (source) {
  const callback = this.async();
  const { content, data } = matter(source);
  const code = `
import { Doc } from '${getRootPath('components/Doc')}'
export { getDocProps as getStaticProps } from '${getRootPath('utils')}'

export default (props) =>
<Doc
  title="${data.title ?? ''}"
  lead="${data.lead ?? ''}"
  category="${data.category ?? ''}"
  updated="${data.updated ?? ''}"
  {...props}
/>

${content}
`;
  return callback(null, code);
};