Next.js Notion Starter Kit

Next.js Notion Starter Kit is a boilerplate template for building Notion-powered websites with Next.js, react-notion-x, and Vercel.

What is Next.js Notion Starter Kit?

The kit turns any public Notion page into a blog or portfolio site. It takes your Notion page ID as input and generates a production-ready Next.js application with automatic page routing, social images, and table of contents. The kit is authored by Travis Fischer and powers his personal site transitivebullsh.it. The stack is Next.js with TypeScript and React, using react-notion-x to render Notion blocks.

Key Features

• Notion as CMS — Use any public Notion page as your content source with no structural constraints; duplicate the provided template page or point to your own.
• Single-file configuration — All settings live in site.config.ts; set rootNotionPageId to your public page ID and you're ready to build.
• Automatic social images — Open Graph images are generated from your Notion content via Vercel OG Image Generation; no manual image creation needed.
• Automatic table of contents — Article pages include a scrollspy ToC on desktop, hidden when fewer than three headings or on small screens.
• Full dark mode — Toggle light and dark themes with a sun/moon icon in the footer; styling is done in styles/notion.css.
• Smooth preview images — next/image with optional lqip-modern generated previews; enable Redis caching via REDIS_HOST and REDIS_PASSWORD to speed up rebuilds.
• Optional analytics — Add NEXT_PUBLIC_FATHOM_ID or NEXT_PUBLIC_POSTHOG_ID to enable privacy-friendly analytics in production only.
• Quick search — Press CMD+K or CMD+P to search your site's content.

Who is it for?

• Developers — Quickly scaffold a personal blog or portfolio with a clean Next.js codebase and TypeScript.
• Writers — Publish by simply editing pages in Notion; no need to touch code after initial setup.
• Indie makers — Get a professional-looking site deployed on Vercel in minutes, with optional analytics and caching.

What can you do with it?

• Personal bloggers — Set up a blog where every Notion article becomes a post with automatic slugs, ToC, and social share images.
• Portfolio sites — Showcase projects and writing on a responsive, dark-mode-capable site without building from scratch.
• Rapid prototypes — Use the Notion-powered setup to spin up a content-driven site for a side project.

How does it work?

Setup takes a few minutes: fork the repo, edit site.config.ts, run npm install and npm run dev, then deploy with npm run deploy to Vercel. Make your root Notion page public and copy its page ID from the URL. The build process maps Notion pages to clean slugs automatically, and you can override slugs per page with a Slug property in your database.

Pricing

Free and open source under the MIT License. You'll pay only for Vercel hosting if you deploy there, and optionally for a Redis instance if you enable preview image caching.

FAQ

Does this work with any Notion page?

Yes, as long as the page is public. Set rootNotionPageId to the page's ID, and the kit will render it as your site.

Do I need to know React to use it?

Basic familiarity helps, but configuration is just editing site.config.ts. No custom component work is required for a standard blog or portfolio.

Can I customize the URL slugs?

Yes, add a Slug text property to a Notion database, and any page with that property will use it as its slug. Duplicate slugs cause a build error.

Is dark mode built in?

Yes, the kit includes full dark mode with a toggle in the footer.

Can I use analytics?

Yes, both Fathom and PostHog are supported by setting environment variables; they only activate in production.