Нужно подключить фронт к 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 (Internationalization):

   • локали минимум: 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, etc.)

• 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 должны быть расширяемыми (легко добавить новый блок).