Repolode
Предложить
transitive-bullshit

transitive-bullshit/nextjs-notion-starter-kit

Стартовый набор Next.js, который превращает публичную страницу Notion в готовый к деплою блог или сайт-портфолио на базе react-notion-x и Vercel.

Open source альтернатива:Notion Sites

Открыть на GitHubСайт
Звёзды
7,040
Форки
5,637
Открытые issues
154
Последний коммит
19 дней назад

Что это?

Next.js Notion Starter Kit использует Notion в качестве системы управления контентом. Достаточно указать ID публичной страницы Notion — приложение отобразит её содержимое, включая вложенные страницы и базы данных, в виде сайта. За отображение блоков Notion отвечает react-notion-x, а проект рассчитан на деплой в Vercel.

Настройка сосредоточена в одном файле — site.config.ts, где главное обязательное значение — ID корневой страницы Notion. Для страниц автоматически создаются удобные URL; также доступны оглавление с отслеживанием прокрутки, автоматически генерируемые изображения для Open Graph, тёмная тема и поиск в стиле Command-K. При желании Redis можно использовать для кеширования сгенерированных изображений предпросмотра, чтобы ускорить сборку, а аналитику Fathom или PostHog — включить через переменные окружения.

Для работы проекта требуется Node.js 22 или новее, зависимости управляются через pnpm. Стили содержимого Notion задаются в CSS-файле, который использует классы react-notion-x и имена классов отдельных блоков.

Ключевые возможности

  • 01Использует публичную страницу Notion как источник контента; настройка выполняется в одном файле.
  • 02Отображает содержимое Notion с помощью react-notion-x.
  • 03Автоматически создаёт удобные URL и изображения для предпросмотра в соцсетях.
  • 04Включает оглавление с отслеживанием прокрутки и тёмную тему.
  • 05Поддерживает опциональное кеширование через Redis и аналитику Fathom или PostHog.

Сценарии использования

  • Запуск личного блога со статьями, написанными в Notion.
  • Создание сайта-портфолио или витрины проектов с управлением через базу данных Notion.
  • Публикация документации или открытой базы знаний из страниц Notion.

Быстрый старт

  1. 1

    Сделайте форк или клонируйте репозиторий и задайте rootNotionPageId в site.config.ts

  2. 2

    Установите зависимости (требуется Node.js версии 22 или новее)

    pnpm install
  3. 3

    Запустите локальный сервер разработки для тестирования

    pnpm dev
  4. 4

    Разверните проект на Vercel

    pnpm deploy

Что важно знать

  • Для работы сайта корневая страница Notion должна быть общедоступной.
  • Чтобы изображения для предпросмотра в соцсетях работали, отключите Vercel Authentication; иначе краулеры будут получать ошибки 401.
  • Генерация изображений для предпросмотра может быть медленной, если не настроить внешний экземпляр Redis.

Темы

#notion#nextjs#react#blog#portfolio#cms#vercel#typescript#react-notion-x

Частые вопросы

Что такое nextjs-notion-starter-kit?
Стартовый набор Next.js, который превращает публичную страницу Notion в готовый к деплою блог или сайт-портфолио на базе react-notion-x и Vercel. Next.js Notion Starter Kit использует Notion в качестве системы управления контентом. Достаточно указать ID публичной страницы Notion — приложение отобразит её содержимое, включая вложенные страницы и базы данных, в виде сайта. За отображение блоков Notion отвечает react-notion-x, а проект рассчитан на деплой в Vercel.
nextjs-notion-starter-kit можно использовать бесплатно? Какая у него лицензия?
nextjs-notion-starter-kit распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
nextjs-notion-starter-kit всё ещё поддерживается?
Активно поддерживается. Последний коммит в nextjs-notion-starter-kit — 18 окт. 2026 г..
Для чего можно использовать nextjs-notion-starter-kit?
Запуск личного блога со статьями, написанными в Notion. Создание сайта-портфолио или витрины проектов с управлением через базу данных Notion. Публикация документации или открытой базы знаний из страниц Notion.
Как установить nextjs-notion-starter-kit?
Сделайте форк или клонируйте репозиторий и задайте rootNotionPageId в site.config.ts Установите зависимости (требуется Node.js версии 22 или новее): pnpm install Запустите локальный сервер разработки для тестирования: pnpm dev Разверните проект на Vercel: pnpm deploy
Где скачать nextjs-notion-starter-kit?
Исходный код и инструкции по установке — на GitHub: https://github.com/transitive-bullshit/nextjs-notion-starter-kit

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты