Next.js CMS для клієнтських сайтів
Next.js CMS для клієнтських сайтів, які пише ваш агент
jtakeit — Next.js CMS на git для клієнтських сайтів: агент збирає статичний експорт у репозиторій, що залишається у вас, власник редагує текст просто на сторінці, а платформа бере на себе форми, запис, хостинг і домен.
$ npx create-next-app@latest client-site --ts --app
$ cd client-site
# next.config.mjs: output 'export', basePath from SITE_URL
$ npm run build
$ ls dist
404.html _meta.json _next index.html robots.txt sitemap.xml
$ git push origin main
# then, over MCP: validate_catalogue → commit_and_build01/ що потрібно
Що потрібно від Next.js CMS для клієнтських сайтів
Клієнтському сайту на Next.js потрібно більше, ніж місце для зберігання текстів. Власник має сам змінювати свої тексти, не телефонуючи вам, а сайт — приймати заявки й онлайн-запис і відпускати клієнта разом із його даними.
Правки, які не ламають дизайн
Власник натискає на текст на сторінці й заповнює лише поля, оголошені в каталозі. Кнопок «додати сторінку» чи «додати блок» немає — навмисно.
Контент у вашому репозиторії
Опубліковані тексти — JSON у git-репозиторії, який залишається у вас. Кожне збереження — коміт.
Форми заявок
Форми захищені від спаму, а заявки надходять у Telegram, на email або у вхідні адмін-панелі.
Запис з оплатою
Модуль запису надсилає оплачені бронювання прямо у власний Stripe бізнесу.
Прев’ю до оплати
Клієнт погоджує справжній сайт на прев’ю — ще до запуску.
Свобода піти
Заявки й записи вивантажуються в CSV і JSON. Для експорту ніколи не потрібна чинна підписка.
02/ git чи api
Git-based чи headless CMS для Next.js?
Headless CMS зберігає контент у власній базі даних і віддає його через API — це зручно, коли контент-команда публікує на сайт, у застосунок і не тільки. У клієнтського сайту один власник і один сайт, тому jtakeit зберігає його тексти в репозиторії поруч із кодом.
| Типова headless CMS | jtakeit | |
|---|---|---|
| Опублікований контент | У базі даних CMS, запитується через її API | JSON у вашому репозиторії |
| Як його отримує збірка | Запит до API зі збірки або із сервера | Файл, який платформа складає для кожної збірки |
| Збереження | Оновлення запису в базі | Коміт; чернетки залишаються в базі даних платформи |
| Де редагує власник | В окремому застосунку-адмінці | Просто на сторінці, натискаючи на текст |
| Форми, запис, хостинг | Поза CMS, підключаються окремо | Обслуговує платформа — разом із білінгом, бекапами й доменом |
| Сайт у стані на березень | Залежить від історії в CMS | Одна команда в git |
03/ статичний експорт
Статичний експорт Next.js на jtakeit
Платформа збирає кожен сайт однаково: запускає збірку проєкту, а потім віддає теку, яку ця збірка записує. Next.js підходить у режимі статичного експорту (static export): HTML пишеться під час збірки, і під час відвідування жоден сервер не працює.
// next.config.mjs
const site = new URL(process.env.SITE_URL ?? 'http://localhost:3000/');
export default {
output: 'export', // static HTML, no server at request time
basePath: site.pathname.replace(/\/$/, ''), // '' live, '/p/<slug>' in preview
trailingSlash: true, // /about/index.html, not /about.html
images: { unoptimized: true },
};
// package.json — the platform runs `npm run build` and serves dist/
"scripts": { "build": "next build && rm -rf dist && cp -R out dist" }
// public/_meta.json — copied into dist/ with the rest of public/
{ "immutable": ["/_next/static/"] }// lib/jtk.ts — runs at build time, never in the browser
import { readFileSync } from 'node:fs';
const file = process.env.JTK_CONTENT_FILE;
export const published = file ? JSON.parse(readFileSync(file, 'utf8')) : null;
// data-jtk-path only when the platform asks for it
export const tap = (path: string) =>
process.env.PUBLIC_JTK_ANNOTATE ? { 'data-jtk-path': path } : {};
// app/page.tsx
<h1 {...tap('blocks[0].title')}>{hero.title}</h1>
// app/robots.ts
export const dynamic = 'force-static';
const site = process.env.SITE_URL!.replace(/\/?$/, '/');
export default function robots() {
return { rules: { userAgent: '*', allow: '/' },
sitemap: new URL('sitemap.xml', site).href };
}Задаються для кожної збірки
SITE_URLадреса сайту: хост для canonical і sitemapPUBLIC_JTK_ANNOTATEякщо задана — позначайте кожне поле, яке може редагувати власникJTK_CONTENT_FILEде складено опублікований контент, який читає ця збірка
Що має бути в збірці
- Окрема сторінка для кожної адреси — кожна у своїй теці, а не окремий HTML-файл поруч з іншими.
- Ресурси, які працюють за адресою прев’ю. Прев’ю віддається за власним шляхом, тому базовий шлях береться з адреси сайту, яку задає платформа.
- Сторінка 404 — її статичний експорт пише сам.
- robots.txt, який пускає пошукових роботів, і sitemap на адресі сайту.
- Canonical на цей хост на кожній сторінці й жодного noindex — збірку з ним платформа не пропустить.
- Позначка для кешування, яка відмічає хешовані ресурси Next як незмінні, щоб вони кешувалися назавжди.
- Каталог того, що може редагувати власник, — написаний вручну або вашим власним інструментом і перевірений платформою. Форми надсилають заявки на платформу.
04/ пише ваш агент
Next.js, де контракт налаштовує ваш агент
Заготовка, яку дає jtakeit, — Astro. Для Next.js готового стартера немає: ви — або ваш AI-агент, наприклад Claude Code через MCP-сервер jtakeit, — розкладаєте проєкт за задокументованим контрактом, а платформа перевіряє його так само, як будь-який інший сайт.
| Заготовка Astro | Статичний експорт Next.js | |
|---|---|---|
| Відправна точка | Заготовка Astro від jtakeit | Ваш власний проєкт на Next.js |
| Каталог | Генерується й перевіряється інструментом каталогу із заготовки | Пишеться вручну або вашим інструментом |
| Форми й зразки блоків | Уже є | Робите самі; форми надсилають заявки на платформу |
| Залежності | Попередньо встановлені | Встановлюються вашою збіркою |
| Збірка | Менше хвилини | Близько 90 секунд |
Як влаштований процес із Claude Code →
Як оголошується редагування на заготовці Astro →
05/ вибір
Як обрати найкращу CMS для клієнтських сайтів на Next.js
Почніть із того, що сайт має робити, коли його відкривають. Якщо йому потрібен сервер під час запиту — incremental static regeneration, API routes, middleware, server actions або сторінки, що рендеряться на кожен запит, — jtakeit не підійде: він віддає лише статику, на будь-якому фреймворку.
Якщо сайт можна зібрати заздалегідь, лишається питання, хто його редагує. jtakeit — для розробників, чиї клієнти мають самі змінювати свої тексти — і нічого більше — без дзвінка вам, і які не хочуть самі обслуговувати форми, запис, білінг, бекапи, хостинг і домен.
Не прив’язані до Next.js? Astro CMS для клієнтських сайтів — заготовка, яку дає jtakeit, і збірка на ній триває менше хвилини. Як влаштоване редагування через git на будь-якому генераторі, розказано на сторінці статичної CMS для клієнтських сайтів.
06/ питання
Запитання про Next.js CMS
- Чи підтримує jtakeit Next.js?
- Так, у режимі статичного експорту. Платформа запускає збірку проєкту й віддає теку, яку та записує, тому сайт на Next.js підходить, якщо його заздалегідь зібрано як статичний експорт і скопійовано в цю теку. Astro — заготовка, яку дає jtakeit; на Next.js ви самі розкладаєте проєкт за тим самим задокументованим контрактом.
- Чи можна використовувати App Router?
- App Router уміє робити статичний експорт, якщо нічому на сайті не потрібен сервер під час запиту: жодної incremental static regeneration, жодних route handlers чи server actions, що виконуються на кожен запит, жодного middleware й рендерингу, який залежить від запиту. Це обмеження самого статичного експорту Next.js, тож звірте свій застосунок із документацією Next.js щодо static export.
- Чи є офіційний стартер для Next.js?
- Ні. Немає ні стартера, ні плагіна, ні SDK для Next.js. jtakeit дає заготовку на Astro. На Next.js ви — або ваш ШІ-агент — налаштовуєте задокументований контракт: збірка записує в теку, яку віддає платформа, опубліковані тексти читаються з файлу, який готує платформа, а каталог того, що може редагувати власник, пишеться вручну або вашим власним інструментом і перевіряється платформою.
- Скільки триває збірка?
- Близько 90 секунд для сайту не на заготовці Astro, бо збірка встановлює ваші власні залежності. У заготовки Astro залежності передвстановлено, і вона збирається менш ніж за хвилину.
- Як клієнт редагує сайт на Next.js?
- Натискаючи на текст на сторінці. Каталог сайту оголошує, які поля може заповнювати власник, і коли платформа про це просить, ваші сторінки позначають ці поля. Кожне збереження — коміт у ваш репозиторій, а наступна збірка читає опубліковані тексти з файлу, який готує платформа.
- Скільки це коштує?
- Реєстрація, збірка й прев’ю безкоштовні. Коли сайт запущено, ви платите оптову ціну за кожен запущений сайт, щомісяця або за рік, а з клієнта берете власну ціну — на Next.js так само, як на Astro. Цифри — на сторінці цін.
07/ безкоштовно
Спробуйте на справжньому клієнтському сайті
Зареєструйтеся в панелі та зберіть перший клієнтський сайт — на заготовці Astro або як статичний експорт Next.js. Оптову ціну ви платите, лише коли сайт запущено.
Спробувати безкоштовноadmin.jtakeit.com
- Безкоштовно, доки сайт не запущено
- Далі — оптова ціна за запущений сайт, від €5 на місяць
- Код залишається у вашому git-репозиторії