Потрібно підключити фронт до CMS Strapi

Інтеграція фронту Next.js з Strapi CMS + мультимовність + редагування з адмінки

1. Мета

Підключити існуючий фронтенд на Next.js до Strapi CMS так, щоб:

1. контент сайту редагувався з адмін-панелі Strapi;

2. була мультимовність (мінімум 2 локалі);

3. існуючі “кабінети/внутрішні сторінки” (особисті розділи) продовжували працювати і коректно інтегрувалися з контентом CMS;

4. контентні зміни з Strapi відображалися на сайті без ручних перезаливів (через ISR/webhook).

2. Вихідні дані (що вже є)

• Готовий фронт на Next.js (сторінки, кабінети, UI, роутинг вже реалізовані).

• Потрібно підняти/налаштувати Strapi і зв'язати його з фронтом.

• Стек: Next.js + Strapi + база даних (PostgreSQL бажано).

3. Область робіт фрилансера (Scope)

3.1. Strapi (CMS)

Фрилансер повинен:

1. Розгорнути Strapi (локально і/або на сервері за домовленістю).

2. Налаштувати БД (PostgreSQL).

3. Включити і налаштувати i18n (Міжнародна локалізація):

   • локалі мінімум: en-CA і fr-CA (або ті, що вказані замовником).

4. Створити контент-моделі (див. розділ 4).

5. Налаштувати ролі і права доступу:

   • Public (публічні API на читання потрібних сутностей);

   • Authenticated (якщо буде потрібно для внутрішніх сторінок);

   • Admin (редагування).

6. Підготувати демо-контент для перевірки (мінімум: Global + Home + 1–2 сторінки + 2–3 блоки).

3.2. Next.js (Frontend)

Фрилансер повинен:

1. Підключити Next.js до Strapi через єдиний шар API (див. розділ 5).

2. Реалізувати отримання і відображення:

   • Global даних (header/footer/меню/загальні тексти);

   • сторінок за slug;

   • динамічних секцій (Dynamic Zone) з рендером компонентів на фронті.

3. Реалізувати мультимовний роутинг і запити з параметром locale.

4. Реалізувати механізм оновлення контенту без деплою:

   • ISR revalidation і/або Webhook з Strapi в Next.js endpoint.

5. Не ламати існуючі кабінети/внутрішні сторінки:

   • кабінети залишаються в поточній архітектурі;

   • за необхідності — підміна окремих текстів/SEO/меню через CMS.

4. Контент-модель Strapi (мінімально обов'язкова)

Усі сутності повинні підтримувати i18n, де це логічно.

4.1 Single Types

A) Global

• siteName (text)

• headerMenu (repeatable: title, url)

• footerMenu (repeatable: title, url)

• contacts (phone/email/address)

• socialLinks (repeatable: type, url)

• cta (title, buttonText, buttonUrl)

• defaultSeo (див. нижче)

B) SEO Defaults
(можна частиною Global)

• metaTitle

• metaDescription

• ogImage

• noindex/nofollow (boolean)

4.2 Collection Types

A) Page

• title (text)

• slug (UID)

• sections (Dynamic Zone — список компонентів)

• seo (component: metaTitle/metaDescription/ogImage/noindex)

• publishedAt

B) (Опціонально, якщо потрібно в рамках цього етапу) Product / Brand / Category
Якщо каталог вже є на фронті з інших джерел — на цьому етапі допускається не впроваджувати.
Якщо впроваджується:

• Product: sku, slug, title, description, images, downloads, brand, category, specs, seo.

4.3 Компоненти для Dynamic Zone (обов'язковий мінімум)

1. hero:

   • title, subtitle, image, buttonText, buttonUrl

2. richText:

   • html/markdown rich text

3. imageText:

   • image, title, text, layoutLeftRight (enum)

4. featuresGrid:

   • items (title, text, icon(optional))

5. accordion:

   • items (question, answer)

Фрилансер повинен реалізувати рендер цих компонентів на фронті 1:1 за структурою.

5. Вимоги до інтеграції Next.js ↔ Strapi

5.1 API шар

Створити структуру в Next.js:

• lib/strapi/strapiClient.(ts|js) — єдиний fetch клієнт

• lib/strapi/queries/* — функції запитів (getGlobal, getPageBySlug, тощо)

• lib/strapi/mappers/* — перетворення відповідей Strapi до типів фронту (щоб компоненти не залежали від raw-JSON)

Обов'язкові вимоги:

• централізована обробка помилок/таймаутів;

• можливість підключити токен (якщо потрібен приватний доступ);

• логування помилок в консоль (dev) + повернення fallback (якщо погоджено замовником).

5.2 Мультимовність

• Роутинг: /{locale}/...

• Запити в Strapi повинні завжди включати locale.

• Fallback: якщо переклад відсутній — повернути контент з default locale (або показати 404 — за погодженням).

5.3 Продуктивність

• Для публічних сторінок використовувати SSG/ISR (бажано), або SSR там, де необхідно.

• Додати revalidation:

  • ISR interval (наприклад 60–300 сек) і/або

  • webhook з Strapi для миттєвого оновлення.

6. Webhook / Revalidate (обов'язкова частина)

1. В Strapi налаштувати webhook на події:

   • create/update/publish/unpublish для Page/Global (і інших сутностей, якщо впроваджуються).

2. На Next.js створити endpoint:

   • перевірка секретного токена (shared secret)

   • запуск revalidate конкретного шляху/тегів

Результат: контент змінюється в адмінці → сайт оновлюється без ручних дій.

7. Безпека (мінімальні вимоги)

• Усі секрети (Strapi token, webhook secret) — тільки в .env, без комміту в репозиторій.

• Обмежити Public permissions в Strapi тільки на необхідні читання.

• Адмін-панель Strapi:

  • змінити дефолтний URL (опціонально),

  • включити базові заходи захисту (CORS, rate limit при наявності middleware).

8. Вимоги до якості коду

• TypeScript бажано.

• Код не повинен “розмазувати” логіку Strapi по компонентах; всі запити через lib/strapi/*.

• Переиспользуемі компоненти dynamic zone повинні бути розширювальними (легко додати новий блок).

9. Поставка (Deliverables)

Фрилансер повинен п