[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-71348":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":21,"hasPages":21,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":30,"readmeContent":31,"aiSummary":32,"trendingCount":16,"starSnapshotCount":16,"syncStatus":33,"lastSyncTime":34,"discoverSource":35},71348,"nextjs-notion-starter-kit","transitive-bullshit\u002Fnextjs-notion-starter-kit","transitive-bullshit","Deploy your own Notion-powered website in minutes with Next.js and Vercel.","https:\u002F\u002Ftransitivebullsh.it\u002Fnextjs-notion-starter-kit",null,"TypeScript",7010,5707,35,123,0,4,6,41,"MIT License",false,"main",[24,25,26,27,28,29],"blog","nextjs","notion","portfolio","react","react-notion-x","2026-06-12 02:02:51","\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Ftransitivebullsh.it\u002Fnextjs-notion-starter-kit\">\n    \u003Cimg alt=\"Example article page\" src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F552829\u002F160132094-12875e09-41ec-450a-80fc-ae8cd488129d.jpg\" width=\"689\">\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\n# Next.js Notion Starter Kit \u003C!-- omit from toc -->\n\n> The perfect starter kit for building websites with Next.js and Notion.\n\n[![Build Status](https:\u002F\u002Fgithub.com\u002Ftransitive-bullshit\u002Fnextjs-notion-starter-kit\u002Factions\u002Fworkflows\u002Fbuild.yml\u002Fbadge.svg)](https:\u002F\u002Fgithub.com\u002Ftransitive-bullshit\u002Fnextjs-notion-starter-kit\u002Factions\u002Fworkflows\u002Fbuild.yml) [![Prettier Code Formatting](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fcode_style-prettier-brightgreen.svg)](https:\u002F\u002Fprettier.io)\n\n- [Intro](#intro)\n- [Features](#features)\n- [Demos](#demos)\n- [Setup](#setup)\n  - [Vercel Configuration](#vercel-configuration)\n- [URL Paths](#url-paths)\n- [Preview Images](#preview-images)\n  - [Redis](#redis)\n- [Styles](#styles)\n- [Dark Mode](#dark-mode)\n- [Automatic Social Images](#automatic-social-images)\n- [Automatic Table of Contents](#automatic-table-of-contents)\n- [Responsive](#responsive)\n- [Analytics](#analytics)\n  - [Fathom Analytics](#fathom-analytics)\n  - [PostHog Analytics](#posthog-analytics)\n- [Environment Variables](#environment-variables)\n- [Contributing](#contributing)\n- [License](#license)\n\n## Intro\n\nThis repo is what I use to power my personal blog and portfolio site [transitivebullsh.it](https:\u002F\u002Ftransitivebullsh.it).\n\nIt uses Notion as a CMS, [react-notion-x](https:\u002F\u002Fgithub.com\u002FNotionX\u002Freact-notion-x), [Next.js](https:\u002F\u002Fnextjs.org\u002F), and [Vercel](https:\u002F\u002Fvercel.com).\n\n## Features\n\n- Setup only takes a few minutes ([single config file](.\u002Fsite.config.ts)) 💪\n- Robust support for Notion content via [react-notion-x](https:\u002F\u002Fgithub.com\u002FNotionX\u002Freact-notion-x)\n- Built using Next.js, TS, and React\n- Excellent page speeds\n- Smooth image previews\n- Automatic social images\n- Automatic pretty URLs\n- Automatic table of contents\n- Full support for dark mode\n- Quick search via CMD+K \u002F CMD+P\n- Responsive for different devices\n- Optimized for Next.js and Vercel\n\n## Demos\n\n- [Default demo](https:\u002F\u002Fnextjs-notion-starter-kit.transitivebullsh.it) - Deployed from the `main` branch\n- [My site](https:\u002F\u002Ftransitivebullsh.it) - Deployed from the `transitive-bullshit` branch\n\n## Setup\n\n**All config is defined in [site.config.ts](.\u002Fsite.config.ts).**\n\nThis project requires a recent version of Node.js (we recommend >= 16).\n\n1. Fork \u002F clone this repo\n2. Change a few values in [site.config.ts](.\u002Fsite.config.ts)\n3. `npm install`\n4. `npm run dev` to test locally\n5. `npm run deploy` to deploy to vercel 💪\n6. Double check your [Vercel project settings](#vercel-configuration)\n\nI tried to make configuration as easy as possible — All you really need to do to get started is edit `rootNotionPageId`.\n\nWe recommend duplicating the [default page](https:\u002F\u002Fnotion.so\u002F7875426197cf461698809def95960ebf) as a starting point, but you can use any public notion page you want.\n\nMake sure your root Notion page is **public** and then copy the link to your clipboard. Extract the last part of the URL that looks like `7875426197cf461698809def95960ebf`, which is your page's Notion ID.\n\nIn order to find your Notion workspace ID (optional), just load any of your site's pages into your browser and open up the developer console. There will be a global variable that you can access called `block` which is the Notion data for the current page. If you enter `block.space_id`, it will print out your page's workspace ID.\n\nI recommend setting up a collection on your home page that contains all of your articles \u002F projects \u002F content. There are no structural constraints on your Notion workspace, however, so feel free to add content as you normally would in Notion.\n\n### Vercel Configuration\n\n**Social media preview images won't work by default on Vercel**. You'll need to ensure that your site doesn't require auth.\n\nFrom your Vercel project settings, you'll want to **disable Vercel Authentication** from `Project -> Settings -> Deployment Protection`.\n\n![How to disable Vercel Deployment Protection setting](https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fa1eb5a1f-da7a-497e-b4f6-f7e851a6cd8a 'How to disable Vercel Deployment Protection setting which causes social media preview image endpoint to return 401 Unauthorized')\n\n💡 If you forget to do this your site will return `401 Unauthorized` responses when crawlers are trying to retrieve the images.\n\n## URL Paths\n\nThe app defaults to slightly different URL paths in dev vs prod (though pasting any dev pathname into prod will work and vice-versa).\n\nIn development, it will use `\u002Fnextjs-notion-blog-d1b5dcf8b9ff425b8aef5ce6f0730202` which is a slugified version of the page's title suffixed with its Notion ID. I've found that it's really useful to always have the Notion Page ID front and center during local development.\n\nIn production, it will use `\u002Fnextjs-notion-blog` which is a bit nicer as it gets rid of the extra ID clutter.\n\nThe mapping of Notion ID to slugified page titles is done automatically as part of the build process. Just keep in mind that if you plan on changing page titles over time, you probably want to make sure old links will still work, and we don't currently provide a solution for detecting old links aside from Next.js's built-in [support for redirects](https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fapi-reference\u002Fnext.config.js\u002Fredirects).\n\nSee [mapPageUrl](.\u002Flib\u002Fmap-page-url.ts) and [getCanonicalPageId](https:\u002F\u002Fgithub.com\u002FNotionX\u002Freact-notion-x\u002Fblob\u002Fmaster\u002Fpackages\u002Fnotion-utils\u002Fsrc\u002Fget-canonical-page-id.ts) for more details.\n\nYou can override the default slug generation on a per-page basis by adding a `Slug` text property to your database. Any page which has a `Slug` property will use that as its slug.\n\nNOTE: if you have multiple pages in your workspace with the same slugified name, the app will throw an error letting you know that there are duplicate URL pathnames.\n\n## Preview Images\n\n\u003Cp align=\"center\">\n  \u003Cimg alt=\"Example preview image\" src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F552829\u002F160142320-35343317-aa9e-4710-bcf7-67e5cdec586d.gif\" width=\"458\">\n\u003C\u002Fp>\n\nWe use [next\u002Fimage](https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fapi-reference\u002Fnext\u002Fimage) to serve images efficiently, with preview images optionally generated via [lqip-modern](https:\u002F\u002Fgithub.com\u002Ftransitive-bullshit\u002Flqip-modern). This gives us extremely optimized image support for sexy smooth images.\n\nPreview images are **enabled by default**, but they can be slow to generate, so if you want to disable them, set `isPreviewImageSupportEnabled` to `false` in `site.config.ts`.\n\n### Redis\n\nIf you want to cache generated preview images to speed up subsequent builds, you'll need to first set up an external [Redis](https:\u002F\u002Fredis.io) data store. To enable redis caching, set `isRedisEnabled` to `true` in `site.config.ts` and then set `REDIS_HOST` and `REDIS_PASSWORD` environment variables to point to your redis instance.\n\nYou can do this locally by adding a `.env` file:\n\n```bash\nREDIS_HOST='TODO'\nREDIS_PASSWORD='TODO'\n```\n\nIf you're not sure which Redis provider to use, we recommend [Redis Labs](https:\u002F\u002Fredis.com), which provides a free plan.\n\nNote that preview images and redis caching are both optional features. If you’d rather not deal with them, just disable them in your site config.\n\n## Styles\n\nAll CSS styles that customize Notion content are located in [styles\u002Fnotion.css](.\u002Fstyles\u002Fnotion.css). They mainly target global CSS classes exported by react-notion-x [styles.css](https:\u002F\u002Fgithub.com\u002FNotionX\u002Freact-notion-x\u002Fblob\u002Fmaster\u002Fpackages\u002Freact-notion-x\u002Fsrc\u002Fstyles.css).\n\nEvery notion block gets its own unique classname, so you can target individual blocks like this:\n\n```css\n.notion-block-260baa77f1e1428b97fb14ac99c7c385 {\n  display: none;\n}\n```\n\n## Dark Mode\n\n\u003Cp align=\"center\">\n  \u003Cimg alt=\"Light Mode\" src=\"https:\u002F\u002Ftransitive-bs.notion.site\u002Fimage\u002Fhttps%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F83ea9f0f-4761-4c0b-b53e-1913627975fc%2Ftransitivebullsh.it_-opt.jpg?table=block&id=ed7e8f60-c6d1-449e-840b-5c7762505c44&spaceId=fde5ac74-eea3-4527-8f00-4482710e1af3&width=2000&userId=&cache=v2\" width=\"45%\">\n       \n  \u003Cimg alt=\"Dark Mode\" src=\"https:\u002F\u002Ftransitive-bs.notion.site\u002Fimage\u002Fhttps%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fc0839d6c-7141-48df-8afd-69b27fed84aa%2Ftransitivebullsh.it__(1)-opt.jpg?table=block&id=23b11fe5-d6df-422d-9674-39cf7f547523&spaceId=fde5ac74-eea3-4527-8f00-4482710e1af3&width=2000&userId=&cache=v2\" width=\"45%\">\n\u003C\u002Fp>\n\nDark mode is fully supported and can be toggled via the sun \u002F moon icon in the footer.\n\n## Automatic Social Images\n\n\u003Cp align=\"center\">\n  \u003Cimg alt=\"Example social image\" src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F552829\u002F162001133-34d4cf24-123a-4569-a540-f683b22830d1.jpeg\" width=\"600\">\n\u003C\u002Fp>\n\nAll Open Graph and social meta tags are generated from your Notion content, which makes social sharing look professional by default.\n\nSocial images are generated automatically using [Vercel OG Image Generation](https:\u002F\u002Fvercel.com\u002Fdocs\u002Fconcepts\u002Ffunctions\u002Fedge-functions\u002Fog-image-generation). You can tweak the default React template for social images by editing [api\u002Fsocial-images.tsx](.\u002Fpages\u002Fapi\u002Fsocial-image.tsx).\n\nYou can view an example social image live in production [here](https:\u002F\u002Ftransitivebullsh.it\u002Fapi\u002Fsocial-image?id=dfc7f709-ae3e-42c6-9292-f6543d5586f0).\n\n## Automatic Table of Contents\n\n\u003Cp align=\"center\">\n  \u003Cimg alt=\"Smooth ToC Scrollspy\" src=\"https:\u002F\u002Fwww.notion.so\u002Fimage\u002Fhttps%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fcb2df62d-9028-440b-964b-117711450921%2Ftoc2.gif?table=block&id=d7e9951b-289c-4ff2-8b82-b0a61fe260b1&cache=v2\" width=\"240\">\n\u003C\u002Fp>\n\nBy default, every article page will have a table of contents displayed as an `aside` on desktop. It uses **scrollspy** logic to automatically update the current section as the user scrolls through your document, and makes it really easy to jump between different sections.\n\nIf a page has less than `minTableOfContentsItems` (default 3), the table of contents will be hidden. It is also hidden on the index page and if the browser window is too small.\n\nThis table of contents uses the same logic that Notion uses for its built-in Table of Contents block (see [getPageTableOfContents](https:\u002F\u002Fgithub.com\u002FNotionX\u002Freact-notion-x\u002Fblob\u002Fmaster\u002Fpackages\u002Fnotion-utils\u002Fsrc\u002Fget-page-table-of-contents.ts) for the underlying logic).\n\n## Responsive\n\n\u003Cp align=\"center\">\n  \u003Cimg alt=\"Mobile article page\" src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F552829\u002F160132983-c2dd5830-80b3-4a0e-a8f1-abab5dbeed11.jpg\" width=\"300\">\n\u003C\u002Fp>\n\nAll pages are designed to be responsive across common device sizes.\n\n## Analytics\n\nAnalytics are an optional feature that are easy to enable if you want.\n\n### Fathom Analytics\n\n[Fathom](https:\u002F\u002Fusefathom.com\u002Fref\u002F42TFOZ) provides a lightweight alternative to Google Analytics.\n\nTo enable, just add a `NEXT_PUBLIC_FATHOM_ID` environment variable, which will only be used in production.\n\n### PostHog Analytics\n\n[PostHog](https:\u002F\u002Fposthog.com\u002F) provides a lightweight, **open source** alternative to Google Analytics.\n\nTo enable, just add a `NEXT_PUBLIC_POSTHOG_ID` environment variable, which will only be used in production.\n\n## Environment Variables\n\nIf you're using Redis, analytics, or any other feature which requires environment variables, then you'll need to [add them to your Vercel project](https:\u002F\u002Fvercel.com\u002Fdocs\u002Fconcepts\u002Fprojects\u002Fenvironment-variables).\n\nIf you want to test your redis builds with GitHub Actions, then you'll need to edit the [default build action](.\u002F.github\u002Fworkflows\u002Fbuild.yml) to add `REDIS_HOST` and `REDIS_PASSWORD`. Here is an [example from my personal branch](https:\u002F\u002Fgithub.com\u002Ftransitive-bullshit\u002Fnextjs-notion-starter-kit\u002Fblob\u002Ftransitive-bullshit\u002F.github\u002Fworkflows\u002Fbuild.yml#L17-L21). You'll also need to add these environment variables to your GitHub repo as [repository secrets](https:\u002F\u002Fdocs.github.com\u002Fen\u002Factions\u002Fsecurity-guides\u002Fencrypted-secrets).\n\n## Contributing\n\nSee the [contribution guide](contributing.md) and join our amazing list of [contributors](https:\u002F\u002Fgithub.com\u002Ftransitive-bullshit\u002Fnextjs-notion-starter-kit\u002Fgraphs\u002Fcontributors)!\n\n## License\n\nMIT © [Travis Fischer](https:\u002F\u002Ftransitivebullsh.it)\n\nSupport my open source work by \u003Ca href=\"https:\u002F\u002Fx.com\u002Ftransitive_bs\">following me on twitter \u003Cimg src=\"https:\u002F\u002Fstorage.googleapis.com\u002Fsaasify-assets\u002Ftwitter-logo.svg\" alt=\"twitter\" height=\"24px\" align=\"center\">\u003C\u002Fa>\n","Next.js Notion Starter Kit 是一个基于 Next.js 和 Notion 构建个人网站或博客的快速启动模板。其核心功能包括通过 react-notion-x 实现对 Notion 内容的强大支持，使用 TypeScript 和 React 构建，并且优化了页面加载速度和响应式设计。此外，它还提供了自动社交图片生成、漂亮的 URL 以及自动目录等功能，全面支持暗黑模式。此项目特别适合需要快速搭建并部署静态网站的开发者，尤其适用于个人博客、作品集展示等场景。利用 Vercel 进行部署仅需几分钟时间，极大地简化了从配置到上线的整个流程。",2,"2026-06-11 03:37:17","high_star"]