Інтеграція CMS Webflow для сайту

Інтеграція CMS Webflow для сайту

Webflow — візуальний редактор сайтів з вбудованою CMS. На відміну від Tilda, надає REST API для роботи з коллекціями контенту: створення, читання, оновлення записів програмно. Це відкриває кілька сценаріїв: синхронізація даних з зовнішніх систем, headless використання Webflow CMS як backend, або кастомний фронтенд поверх Webflow-даних.

Webflow Data API v2

З 2023 року Webflow перейшов на API v2. Аутентифікація через OAuth2 (для додатків) або Site API Token (для інтеграцій):

// lib/webflow.ts
const WEBFLOW_API_TOKEN = process.env.WEBFLOW_API_TOKEN!
const SITE_ID = process.env.WEBFLOW_SITE_ID!

const BASE_URL = 'https://api.webflow.com/v2'

async function webflowFetch<T>(
  path: string,
  options: RequestInit = {}
): Promise<T> {
  const res = await fetch(`${BASE_URL}${path}`, {
    ...options,
    headers: {
      Authorization: `Bearer ${WEBFLOW_API_TOKEN}`,
      'Content-Type': 'application/json',
      ...options.headers,
    },
    next: { tags: ['webflow'] },
  })
  if (!res.ok) {
    const err = await res.json()
    throw new Error(`Webflow API error: ${err.message}`)
  }
  return res.json()
}

// Отримати список колекцій сайту
export async function getCollections() {
  return webflowFetch<{ collections: WebflowCollection[] }>(
    `/sites/${SITE_ID}/collections`
  )
}

// Елементи колекції з пагінацією
export async function getCollectionItems(
  collectionId: string,
  params: { limit?: number; offset?: number; live?: boolean } = {}
) {
  const query = new URLSearchParams({
    limit: String(params.limit ?? 100),
    offset: String(params.offset ?? 0),
    ...(params.live ? { live: 'true' } : {}),
  })
  return webflowFetch<{ items: WebflowItem[]; pagination: WebflowPagination }>(
    `/collections/${collectionId}/items?${query}`
  )
}

Типи даних Webflow CMS

Webflow зберігає поля в fieldData. Поля створюються в дизайнері, кожному присвоюється slug:

interface BlogPost {
  id: string
  cmsLocaleId: string
  lastPublished: string
  lastUpdated: string
  createdOn: string
  isArchived: boolean
  isDraft: boolean
  fieldData: {
    name: string           // обов'язкове поле Name
    slug: string           // обов'язкове поле Slug
    'post-body': string    // Rich Text → HTML
    'post-summary': string
    'main-image': { url: string; alt: string }
    'author': string       // reference → id іншого елемента
    'publish-date': string
    'tags': string[]       // multi-reference
  }
}

Інтеграція з Next.js

// app/blog/[slug]/page.tsx
import { getCollectionItems } from '@/lib/webflow'

const BLOG_COLLECTION_ID = process.env.WEBFLOW_BLOG_COLLECTION_ID!

export async function generateStaticParams() {
  const { items } = await getCollectionItems(BLOG_COLLECTION_ID)
  return items
    .filter(item => !item.isDraft && !item.isArchived)
    .map(item => ({ slug: item.fieldData.slug }))
}

export default async function PostPage({ params }: { params: { slug: string } }) {
  const { items } = await getCollectionItems(BLOG_COLLECTION_ID)
  const post = items.find(i => i.fieldData.slug === params.slug)
  if (!post) notFound()

  return (
    <article>
      <h1>{post.fieldData.name}</h1>
      <div
        className="prose"
        dangerouslySetInnerHTML={{ __html: post.fieldData['post-body'] }}
      />
    </article>
  )
}

export const revalidate = 3600

Для великих коллекцій — постраничная загрузка:

export async function getAllItems(collectionId: string) {
  const allItems = []
  let offset = 0
  const limit = 100

  while (true) {
    const { items, pagination } = await getCollectionItems(collectionId, { offset, limit })
    allItems.push(...items)
    if (offset + limit >= pagination.total) break
    offset += limit
  }

  return allItems
}

Запис даних в Webflow CMS

Типічний випадок — форма на сайті зберігає ліда прямо в Webflow CMS колекцію:

export async function createCollectionItem(
  collectionId: string,
  fieldData: Record<string, unknown>,
  options: { live?: boolean } = {}
) {
  return webflowFetch(`/collections/${collectionId}/items`, {
    method: 'POST',
    body: JSON.stringify({
      isArchived: false,
      isDraft: !options.live,
      fieldData,
    }),
  })
}

// Використання
await createCollectionItem(LEADS_COLLECTION_ID, {
  name: formData.name,
  email: formData.email,
  message: formData.message,
  source: 'contact-form',
}, { live: false }) // чорновик, менеджер побачить в CMS

Webhook від Webflow

// app/api/webflow-webhook/route.ts
import { revalidateTag } from 'next/cache'
import crypto from 'crypto'

export async function POST(request: Request) {
  const signature = request.headers.get('x-webflow-signature')
  const body = await request.text()

  // Верифікація підпису
  const expected = crypto
    .createHmac('sha256', process.env.WEBFLOW_WEBHOOK_SECRET!)
    .update(body)
    .digest('hex')

  if (signature !== expected) {
    return new Response('Unauthorized', { status: 401 })
  }

  const payload = JSON.parse(body)
  // triggerType: collection_item_created, collection_item_changed, etc.
  if (payload.triggerType.startsWith('collection_item')) {
    revalidateTag('webflow')
  }

  return new Response('OK')
}

Webhooks настраюються в Webflow: Site Settings → Integrations → Webhooks.

Синхронізація з зовнішної системи

Поширений випадок — каталог товарів в ERP, відображення на сайті через Webflow CMS:

// scripts/sync-products.ts
import { createCollectionItem, updateCollectionItem, getCollectionItems } from '@/lib/webflow'

async function syncProducts(erpProducts: ERPProduct[]) {
  const { items: existing } = await getCollectionItems(PRODUCTS_COLLECTION_ID)
  const existingMap = new Map(existing.map(i => [i.fieldData['sku'], i.id]))

  for (const product of erpProducts) {
    const fieldData = {
      name: product.name,
      slug: product.sku.toLowerCase(),
      'product-sku': product.sku,
      'price': product.price,
      'in-stock': product.stock > 0,
      'description': product.description,
    }

    if (existingMap.has(product.sku)) {
      await updateCollectionItem(PRODUCTS_COLLECTION_ID, existingMap.get(product.sku)!, fieldData)
    } else {
      await createCollectionItem(PRODUCTS_COLLECTION_ID, fieldData, { live: true })
    }

    // API rate limit: 60 req/min
    await new Promise(r => setTimeout(r, 1100))
  }
}

Обмеження API

• Rate limit: 60 запитів на хвилину на токен
• CMS коллекції: лімит залежить від тарифу (від 2000 до 20 000 елементів)
• Rich Text поле повертає HTML, не структурований AST
• Нема транзакцій — масові операції потрібно будувати з урахуванням часткових сбоїв

Терміни

Читання даних з Webflow в Next.js з ISR: 2–3 дні. Двунаправлена синхронізація з зовнішною системою: 5–7 днів.