Next.js

Starter-ul pentru Next.js (App Router) listează o colecție, arată orice intrare după schema ta, se deschide în editorul vizual și numără vizitele cu t.js. Cel mai repede ajungi la el din admin: Conectează-ți site-ul → Next.js → Starter descarcă proiectul cu cheile deja puse în .env.

Pornirea în trei pași

1. Cheile. Copiezi .env.example în .env (în starter-ul descărcat e deja completat): id-ul proiectului, o cheie secretă (mf_test_ cât lucrezi), cheia publicabilă pentru t.js și colecția de pe prima pagină.
2. Instalarea. npm install, apoi npm run types, care scrie manifolio.d.ts din schema ta.
3. Pornirea. npm run dev și deschizi http://localhost:3000. Prima cerere face verde pasul din pornirea ghidată.

MANIFOLIO_PROJECT=01a1b2c3-0000-7000-8000-000000000000
MANIFOLIO_KEY=mf_test_cheia_ta_secreta
MANIFOLIO_SITE_KEY=mf_pk_test_cheia_site-ului
MANIFOLIO_TYPE=article

Cum citește conținutul

// lib/manifolio.ts
export function cms(preview?: string | null) {
  return preview
    ? createClient({ project, preview, fetchOptions: { cache: "no-store" } })
    : createClient({ project, key, fetchOptions: { next: { tags: ["manifolio"], revalidate: 3600 } } });
}

Paginile sunt componente de server, deci cheia nu ajunge în browser. Răspunsurile publicate stau în cache-ul Next.js sub eticheta manifolio.

Reîmprospătarea la publicare

app/api/revalidate/route.ts verifică semnătura webhook-ului și cheamă revalidateTag("manifolio", "max"). În Developers → Webhooks adaugi https://site-ul-tau/api/revalidate cu entry.published, entry.unpublished și entry.deleted, iar secretul whsec_ îl pui în MANIFOLIO_WEBHOOK_SECRET.

Editorul vizual

Cu ?mf_preview= în adresă, starter-ul citește ciornele cu tokenul, pune atributele data-mf-edit prin client.editable() și încarcă bridge-ul în locul lui t.js. Adresa de previzualizare, în Setări → Editor vizual: https://site-ul-tau/{type}/{slug}. next.config.ts permite încadrarea de către MANIFOLIO_ADMIN_ORIGIN.

Afișarea

lib/view.ts transformă orice intrare în noduri de afișat, după schema publică: text, text formatat (html), imagini prin imageUrl() cu srcset, embed-uri, liste, grupuri și secțiuni blocks. Îl înlocuiești cu componentele tale oricând; după npm run types, cms().entries("article") are tipurile complete.

Până ajunge @manifolio/sdk pe npm, starter-ul descărcat îl are în vendor/manifolio-sdk.