Notebook

Notebook effortlessly transforms Notion pages into a tailored documentation app for your needs.

Report Bug · Request Feature

Sample App made from 100xdev cohort open source notion pages

100xdevs Notebook

🧰 Setup Next.js and Nextra

Create nextjs Project with default configurations

  npx create-next-app

Install Dependencies

  npm i nextra nextra-theme-docs nextra-theme-blogs @meimfhd/notebook

Create theme.config.jsx file

  export default {
    logo: <span>My Notebook </span>,
    project: {
      link: 'https://github.com/me-imfhd/notebook'
    }
    // ... other theme options
  }

Update next.config.mjs

  import withNextra from "nextra";
  const withNextraConfig = withNextra({
    theme: "nextra-theme-docs",
    themeConfig: "./theme.config.jsx",
  });

  /** @type {import('next').NextConfig} */
  const nextConfig = {}; // Your old next.js configuration if any
  export default withNextraConfig(nextConfig);

🧰 Autogenerate docs with notebook

Use notebook sdk

  import { notionToNextra } from "@meimfhd/notebook";

  const NOTION_INTEGRATION_TOKEN = process.env.NOTION_INTEGRATION_TOKEN?;
  await notionToNextra({
          pageId: "your-notion-page-id",
          rootRouteName: "docs",
          rootRouteTitle: "My Notebook",
          token: NOTION_INTEGRATION_TOKEN,
  });

🤝 Contact

My Twitter - @mefhd2