React-Notion-Custom: Create Your Custom Blog with Notion

🚀 Build Your Own Website with Notion + React!

With React-Notion-Custom, you can combine Notion's powerful content management capabilities with React's flexible UI to create a fully customizable website or blog. Stop wasting time on complex CMS or database setups. Manage your content in Notion and create a stunning website with React-Notion-Custom!

This project consists of two core tools:

notion-dump: Extracts content from Notion pages and converts it into JSON files.
react-notion-custom: Renders the extracted Notion content as React components.

🌟 Key Features

Uses Notion's Official API: Always supports stable and latest features.
Perfect Customization: Modify and style all components as you wish.
High-Quality Notion Components: Provides components that look exactly like real Notion.
Optimized Performance: Quickly loads and renders even large Notion pages.
Easy Content Management: Manage content directly in Notion and reflect it on your website in real-time.

🚀 Getting Started: Create Your Own Notion Blog

1. Prepare Your Notion Page

Create a new page in Notion and write your content.
Set the page to public and copy the share link.

2. Get Your Notion Page ID

Go to your content page in Notion.
Click the 'Share' button in the top right corner and enable the 'Share to web' option to make the page public.

Copy the link. The URL will be in this format:

https://www.notion.so/your-page-title-1234567890abcdef12345678

The last part of the URL (e.g., 1234567890abcdef12345678) is your page ID.

3. Get Your Notion Integration Token

Go to the Notion developer portal.
Click 'New integration' to create a new integration.
Set the integration name and permissions, then click 'Submit'.
Copy and save the Internal Integration Token that's generated.

4. Extract Content with notion-dump

npx notion-dump --page-id YOUR_PAGE_ID --token YOUR_INTEGRATION_TOKEN

5. Set Up React Project

npm create vite@latest my-notion-blog -- --template react-ts
cd my-notion-blog
npm install react-notion-custom

6. Render Page with React-Notion-Custom

import { Notion } from "react-notion-custom";
import notionData from "./notion-data.json";

function HomePage() {
  return (
    <Notion>
      <Notion.Cover src={notionData.cover} />
      <Notion.Body>
        <Notion.Title title={notionData.title} />
        <Notion.Blocks blocks={notionData.blocks} />
      </Notion.Body>
    </Notion>
  );
}

export default HomePage;

7. Deploy

Deploy your Next.js app to Vercel or Netlify and share your Notion blog with the world!

📚 Detailed Usage

For more detailed usage instructions and advanced customization options, please refer to [Incomplete].

🛠 Installation

npm install react-notion-custom notion-dump

🗺 Roadmap

Expand support for various Notion block types
Performance optimization including code splitting and data caching
Integrate SEO optimization tools
Enhance multilingual support

For detailed development plans, please refer to CONTRIBUTING.md.

🤝 Contributing

React-Notion-Custom welcomes your contributions! Whether it's bug reports, feature suggestions, or code contributions, please feel free to participate in any form. For more details, please check CONTRIBUTING.md.

📄 License

This project is distributed under the MIT License. For more details, please refer to the LICENSE file.

📮 Contact

If you have any questions or feedback, please create a GitHub issue or contact us via email.

Create a fantastic website with your Notion content using React-Notion-Custom! 🎉

hsol/react-notion-custom