Skip to content

Latest commit

 

History

History
180 lines (112 loc) · 7.31 KB

readme-en.md

File metadata and controls

180 lines (112 loc) · 7.31 KB
Raw

Use notion to establish your own link in a minute

English | Chinese

Example

Build your ownlink through Next.js + Notion --- Live Examples

Demo： Click here to see a Demo website

My webiste Click here to see my website

Deploy to Vercel

  1. Deploy your ownlink in 1 minute, fork this repo and deploy it
  2. copy this notion template in your notion, get the notion page id like this : Notion-template id is 292e44db817d4cafb370287e59a63b93?pvs=4
  3. Edit values in site.config.ts 📝, change Notion page id to yours, that's all of it, your have your ownlink now!

The ultimate starter kit for Next.js and Notion integration.

Build Badge Prettier Badge

Introduction

Fueling my personal blog and portfolio, this repository leverages the power of Notion as a CMS via react-notion-x, Next.js, and Vercel.

Capabilities

  • Quick setup: edit just a single config file 🛠
  • Deep integration with Notion via react-notion-x
  • Tech stack: Next.js, TypeScript, React ⚙
  • Performance and SEO optimized 🚀
  • Auto-generated social images 🖼
  • Clean URLs 🌐
  • Dynamic TOCs 📚
  • Dark mode support 🌒
  • CMD+K / CMD+P for quick search 🔍
  • Mobile responsive 📱

Getting Started

Configuration is handled in site.config.ts.

  1. Fork or clone the repo 🍴
  2. Edit values in site.config.ts 📝
  3. npm install 📦
  4. npm run dev for local testing 🖥
  5. npm run deploy to push to Vercel 🚀

For the rootNotionPageId, use the last segment of your public Notion page URL. More instructions in the repo.

URL Schemes

The app adopts distinct URL paths for development and production, although any dev path will work in prod and vice-versa.

  • Development: URLs take the form /nextjs-notion-blog-d1b5dcf8b9ff425b8aef5ce6f0730202, a slugified title appended with the Notion ID. Helpful for quick ID reference.

  • Production: URLs are cleaner, like /nextjs-notion-blog, omitting the ID.

URL mapping occurs automatically during the build. If you change titles, ensure that old links remain functional. Next.js redirects can help, but we don't offer built-in detection of old links.

Refer to mapPageUrl and getCanonicalPageId for details.

Custom slugs can be defined using a Slug text property in your Notion database.

⚠️ Duplicated slugs across pages will trigger an error.

Image Optimization

Example image

We employ next/image along with optional lqip-modern for highly efficient images.

Preview images are on by default. To disable, set isPreviewImageSupportEnabled to false in site.config.ts.

Redis Caching

For faster preview image loading, enable Redis caching by setting isRedisEnabled to true in site.config.ts. Define REDIS_HOST and REDIS_PASSWORD in a .env file.

REDIS_HOST='TODO'
REDIS_PASSWORD='TODO'

Recommended Redis provider: Redis Labs (free plan available).

Preview images and Redis caching are optional; disable in config if unwanted.

Custom Styling

CSS for Notion content is in styles/notion.css, targeting classes from react-notion-x styles.css.

For specific Notion blocks:

.notion-block-260baa77f1e1428b97fb14ac99c7c385 {
  display: none;
}

Dark Theme

       

Dark mode toggle is available; click sun/moon icon in footer.

Auto-Generated Social Images

Sample social image

Open Graph and social meta tags stem from your Notion content, ensuring polished social sharing. Social images are auto-created via Vercel OG Image Generation. Modify the default React template at api/social-images.tsx.

View a live example here.

Dynamic Table of Contents

ToC Scrollspy demo

Each article features a dynamic table of contents (aside on desktop) with scrollspy functionality. If an article has fewer than minTableOfContentsItems (default 3), the ToC is hidden. It's also hidden on index pages or small windows.

For implementation details, see getPageTableOfContents.

Mobile-Responsive Design

Responsive article page

Pages adapt to various device sizes.

Web Analytics Options

Fathom

Fathom is a Google Analytics alternative. To enable, add NEXT_PUBLIC_FATHOM_ID as an environment variable (production-only).

PostHog

PostHog offers an open-source alternative. Activate it by adding NEXT_PUBLIC_POSTHOG_ID as an environment variable (production-only).

Environment Setup

For utilizing Redis, analytics, or any other services requiring environment variables, configure them in your Vercel project.

To test Redis integration with GitHub Actions, update the build action YAML to include REDIS_HOST and REDIS_PASSWORD. See this branch example for reference. These variables should also be added to your GitHub repo as encrypted secrets.

How to Contribute

Check out the contribution guide to join our list of amazing contributors.