Nextra

Docs

Nextra

Notion to Nextra with notion-downloader.

How to set up a Nextra project that uses notion-downloader to pull content from Notion.

Notion to Nextra with notion-downloader

This guide explains how to set up a Nextra project that uses notion-downloader to pull content from Notion.

Reference template repository: https://github.com/FranciscoMoretti/notion-to-nextra.
Demo: https://notion-nextra.vercel.app/

Installation

Follow the Nextra installation guide.
Install notion-downloader:

npm install notion-downloader

Your root Notion object should be a database with a page titled "index". You can start from this template.
Get your NOTION_TOKEN and ROOT_ID from the Notion Setup guide.

Create the downloader configuration:

Run npx notion-downloader init and use these options in downloader.json created:

{
"rootObjectType": "database",
"rootDbAsFolder": true,
"revalidatePeriod": -1,
...
"conversion": {
    ...
    "markdownExtension": "mdx",
    "namingStrategy": {
        "markdown": "urlEncoding",
        "assets": "guid"
    },
    "outputPaths": {
        "markdown": "pages",
        "assets": "public"
    },
    "layoutStrategy": {
        "markdown": "hierarchical",
        "assets": "flat"
    },
    "plugins": [
        "standardVideoTransformer",
    ],
    ...
    }
...
}

Add your Notion token Refer to the Notion Token Setup guide for instructions on obtaining your Notion token. Once you have your token, you can use it in one of two ways:

a. Add it to a .env file in your project root:
```
NOTION_TOKEN=your_token_here
```
b. Use it directly with the CLI.
Run the downloader:

npx notion-downloader pull

Videos: For compatibility with server rendering, follow the Video Support guide.
Images: If any images come from external domains, update your next.config.mjs file:

import nextra from 'nextra'
 
/** @type {import('next').NextConfig} */
const withNextra = nextra({
  theme: 'nextra-theme-docs',
  themeConfig: './theme.config.tsx',
})
 
const nextConfig = {
  ...withNextra(),
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "**",
      },
    ],
  },
}
 
export default nextConfig

Run the documentation site:

npm run dev

(Optional) Update your .gitignore file with:

# notion-downloader
/.downloader

By following these steps, you'll have a Nextra project set up to pull content from Notion using notion-downloader. This integration allows you to maintain your content in Notion while leveraging Nextra's powerful documentation features.

Obsidian Docusaurus