Therracode CMS

CMS koji dolazi sa stranicom.

Svaka stranica opisuje svoj sadržaj u kodu, a njezini urednici dobivaju admin po mjeri: skice, verzije, više jezika, medije i SEO, bez zasebnog servisa koji treba održavati.

Vrsta
Naš proizvod
Stack
Next.js 16 · React 19 · Postgres 18
Nastao
2026.
Status
Pokreće ovu stranicu
Lijevo model sadržaja u cms.config.ts, desno admin koji iz njega nastaje, u CMS-ovom izgledu Terra.

Što je trebalo riješiti

Stranici tvrtke ne bi trebao developer za svaki zarez. Ipak, većina stranica završi upravo tako.

01Svaka izmjena je e-mail developeru.

02Sitni ispravci čekaju u nečijim bilješkama.

03CMS koji je to trebao riješiti svaki mjesec traži ažuriranja dodataka.

04Ili se plaća po uredniku, svaki mjesec.

05A prijevodi žive u tablici pored njega.

Htjeli smo CMS koji dolazi sa stranicom, govori svaki jezik koji joj treba i ne smeta. Zato smo ga napravili.

Htjeli smo CMS koji dolazi sa stranicom, govori svaki jezik koji joj treba i ne smeta. Zato smo ga napravili.

Kako smo to izgradili

Model u kodu, sadržaj u adminu.

01

Model živi u kodu.

Stranica svoj sadržaj opisuje u cms.config.ts: kolekcije, polja, blokove i jezike. Stranica ga čita s tipovima, pa preimenovano polje postaje greška pri buildu, a ne prazna stranica.

Admin · ovaj case study u uređivaču
02

Admin koji urednici razumiju.

Svako polje je ono što model kaže: tekst s brojačem, izbor, slika s alt tekstom, rich text, blokovi koji se dodaju i premještaju. Ništa se ne podešava u nadzornoj ploči.

Admin · stranica i njezini blokovi
03

Prvo skica, zatim objava.

Svaka izmjena počinje kao skica. Objavi je stavlja uživo već na idućem zahtjevu, a svaka objava čuva verziju koja se može vratiti.

Admin · verzije stranice
04

Svi jezici, jedan uz drugi.

Jezika može biti koliko god treba, a svaki ima svoju skicu i svoju objavu. Stranica se može kopirati iz drugog jezika i prevesti na licu mjesta.

Admin · kopiranje stranice iz engleskog
05

Mediji na jednom mjestu.

Učitane datoteke idu u jednu biblioteku, s alt tekstom, dimenzijama i stranicama koje ih koriste. Datoteka koja se koristi ne može se slučajno obrisati.

Admin · medijska biblioteka
06

Tražilice uključene.

Svaka stranica ima naslov, opis, sliku za dijeljenje i noindex u SEO panelu. Sitemap i veze između jezika slijede same.

Admin · SEO panel stranice

Kako ga stranica dobiva.

CMS je paket koji ide u stranicu, a ne servis pored nje. Jedna stranica, jedna baza, ništa drugo za održavanje.

  1. 01

    Instalacija paketa

    Dolazi iz našeg privatnog registra i donosi svoj admin, svoj API i migracije baze.

    Terminal
    $ pnpm add @therracode-dev/cms
    $ pnpm exec cms migrate
  2. 02

    Opis sadržaja

    Kolekcije, polja i blokovi, u kodu same stranice. Admin i tipovi slijede iz ove jedne datoteke.

    cms.config.ts
    import { block, collection, defineConfig, f } from "@therracode-dev/cms";
    
    const hero = block("hero", {
      label: "Naslovni blok",
      fields: {
        heading: f.text({ label: "Naslov", required: true }),
        image: f.image({ label: "Slika" }),
      },
    });
    
    export default defineConfig({
      locales: { default: "hr", available: ["hr", "en"] },
      collections: {
        pages: collection({
          label: "Stranice",
          routing: "path",
          fields: {
            title: f.text({ label: "Naslov", required: true }),
            body: f.blocks([hero], { label: "Sadržaj" }),
          },
        }),
      },
    });
  3. 03

    Admin u stranici

    lib/cms.ts od konfiguracije stvara CMS. Jedna ruta daje stranici admin na /admin, a druga API iza njega.

    app/(cms)/admin/[[...path]]/page.tsx
    import { cms } from "@/lib/cms";
    
    export default cms.AdminPage;
  4. 04

    Čitanje na stranici

    Stranice čitaju objavljeni sadržaj s tipovima izvedenima iz modela, iz cachea do iduće objave.

    app/[locale]/[[...path]]/page.tsx
    import { notFound } from "next/navigation";
    import { cms } from "@/lib/cms";
    
    type Props = PageProps<"/[locale]/[[...path]]">;
    
    export default async function Page({ params }: Props) {
      const { locale, path = [] } = await params;
      const page = await cms.findByPath(`/${path.join("/")}`, { locale });
      if (!page) notFound();
    
      return <PageBlocks blocks={page.data.body} />;
    }

Stack

Framework
Next.js 16 · React 19
Jezik
TypeScript
Baza
Postgres 18 · Kysely
Rich text
TipTap
Admin
React · MUI
Hosting
Docker · Caddy · Hetzner

Što radi

  • Tipovi za svako čitanje, izvedeni iz cms.config.ts
  • Skice i objava po jeziku
  • Verzije s vraćanjem
  • Pregled skica na pravoj stranici
  • Zaštita od brisanja svega što se još koristi
  • Uloge, pozivnice i reset lozinke
  • SEO panel, sitemap i veze između jezika
  • Noćni backup baze i datoteka

Uživo na ovoj stranici.

Svaka stranica, case study, osoba i logotip klijenta na therracode.com dolazi iz CMS-a i uređuje se u adminu koji vidiš gore.

  • Stranice, radovi, ljudi i klijenti uređuju se u adminu
  • Objava je uživo već na idućem zahtjevu
  • Ovdje engleski i hrvatski, a jezika može biti koliko god stranica treba
  • Bez naplate po uredniku
  • Svaka klijentska stranica dobiva svoju instancu i bazu

Želiš stranicu koju tim sam uređuje?

Reci nam što je na njoj. Napravit ćemo model sadržaja, prenijeti ga i uvesti tvoje urednike u admin.

Sljedeći projekt · Platforma

UK Cheerleading Association

Full-stack platforma koja vodi cijeli sport: klubove, natjecanja, tečajeve, certifikate i plaćanja na jednom mjestu.