gem-hunter

한국어 버전(Korean Version)

With NotionPresso, you can combine Notion's powerful content management capabilities with Next.js's modern web features 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 NotionPresso!

1. @notionpresso/cli: Extracts content from Notion pages and converts it into JSON files.
2. @notionpresso/react: Renders the extracted Notion content as React components.

• 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.

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

1. Go to your content page in Notion.
2. Click the 'Share' button in the top right corner and enable the 'Share to web' option to make the page public.
3. Copy the link. The URL will be in this format:

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

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

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

npm install -g @notionpresso/cli
npresso --page YOUR_PAGE_URL --auth YOUR_INTEGRATION_TOKEN

git clone https://github.com/notionpresso/nextjs-blog-template.git my-blog
cd my-blog
npm install

import { Notion } from "@notionpresso/react";
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;

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

For more detailed usage instructions and advanced customization options, please visit our documentation.

npm install @notionpresso/react @notionpresso/cli

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

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

NotionPresso 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.

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

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 NotionPresso! 🎉