Notion

Pages render on demand, so the site needs a server, unless you prerender them.

For a working project, see examples/notion.

SetupCopy Anchor Link

NOTION_TOKEN=ntn_...
NOTION_DATA_SOURCE_ID=...

npm i @fumadocs/notion @notionhq/client

@import "@fumadocs/notion/css/preset.css";

import { createNotion } from "@fumadocs/notion";
import notionPlugin from "@fumadocs/notion/press";
import { Client } from "@notionhq/client";

const notion = createNotion({
  client: new Client({ auth: process.env.NOTION_TOKEN }),
  dataSourceId: process.env.NOTION_DATA_SOURCE_ID!,
});

export default createPress(
  notion.dynamicSource({
    properties: {
      title: "Name",
      slug: "Slug",
      description: "Description",
    },
    query: {
      filter: {
        property: "Published",
        checkbox: { equals: true },
      },
    },
  }),
  { alwaysRevalidate: true },
).plugins(notionPlugin({ notion }));

CustomizationCopy Anchor Link

Page PropertiesCopy Anchor Link

Without properties, the source reads:

• The first Notion title property as the page title.
• A property named Slug as the URL, or a slug generated from the title.
• A property named Description, when there is one.

A slug can contain / for nested URLs. Two pages with the same path fail with an error.

URLsCopy Anchor Link

Use baseDir to place pages under a prefix, or generatePath to set each path:

notion.dynamicSource({
  baseDir: "docs",
  query: {
    sorts: [{ timestamp: "last_edited_time", direction: "descending" }],
  },
  generatePath(page, info) {
    return info.slugs.length > 0 ? `${info.slugs.join("/")}.mdx` : `${page.id}.mdx`;
  },
});

See the Fumadocs Notion integration for all source options.

Custom BlocksCopy Anchor Link

Add or replace block renderers with components:

notionPlugin({
  notion,
  components: {
    callout({ block, children, renderRichText }) {
      return (
        <aside className="rounded-lg bg-fd-muted p-4">
          {renderRichText(block.callout.rich_text)}
          {children}
        </aside>
      );
    },
  },
});

File URLsCopy Anchor Link

Notion file URLs expire after one hour, so the plugin serves them through your site. Turn off this proxy with fileProxy: false only when your content uses permanent external URLs, or a custom renderer copies files to permanent storage.

Prerendering PagesCopy Anchor Link

To deploy to a static host, set mode to force-static. The build reads the database once and prerenders its pages, so edits appear on the next build.

export default createPress(notion.dynamicSource(), {
  mode: "force-static", 
}).plugins(notionPlugin({ notion, fileProxy: false }));

The file proxy needs a server, so turn it off. Files hosted by Notion then expire one hour after the build.

Refreshing ContentCopy Anchor Link

The source is read once, so new content doesn't appear on its own. Choose when to read it again:

createPress(source, {
  alwaysRevalidate: true, 
});

Reading on every request works for low traffic. On a busier site, call the webhook when your content changes.

OptionsCopy Anchor Link