Next.js

Hur TinaCMS fungerar med Next.js för serverpublicering

Denna guide förklarar hur man integrerar TinaCMS med Next.js för effektiv innehållshantering och automatisk publicering via GitHub, Vercel eller Netlify. Genom att använda ett headless CMS och Markdown- eller JSON-filer möjliggör systemet realtidsredigering och enkel deployment, vilket sparar tid och ger en smidig arbetsprocess för både utvecklare och innehållsredaktörer.

💡
Denna guide förklarar hur du integrerar TinaCMS med Next.js och kopplar det till GitHub för automatisk publicering via Vercel eller Netlify. Systemet ger en smidig innehållshantering med live-redigering och automatisk deployment.

Översikt av arkitekturen

TinaCMS fungerar som ett headless CMS som lagrar innehåll i Markdown- eller JSON-filer direkt i ditt GitHub-repo. När innehåll uppdateras via TinaCMS-gränssnittet, skapas automatiskt commits till GitHub, vilket triggar en ny build och deployment via Vercel eller Netlify.
Arbetsflöde:
  1. Innehållsredaktör gör ändringar i TinaCMS-gränssnittet
  1. TinaCMS committar ändringarna till GitHub
  1. GitHub webhook triggar automatisk build på Vercel/Netlify
  1. Ny version av sidan publiceras automatiskt

Förutsättningar

  • Ett Next.js-projekt (rekommenderat: Next.js 13+ med App Router)
  • Ett GitHub-konto och repository
  • Ett konto på Vercel eller Netlify
  • Node.js installerat lokalt

Steg 1: Installera TinaCMS i ditt Next.js-projekt

Börja med att installera nödvändiga paket:
Initiera TinaCMS i ditt projekt:
Detta kommando skapar grundläggande konfigurationsfiler och mappar som behövs för TinaCMS.

Steg 2: Konfigurera TinaCMS

Skapa eller uppdatera filen tina/config.ts med din schema-definition:

Steg 3: Koppla TinaCMS till GitHub

3.1 Skapa ett TinaCMS Cloud-konto
Gå till app.tina.io och skapa ett konto. Detta ger dig tillgång till TinaCMS backend som hanterar autentisering och GitHub-integration.
3.2 Anslut ditt GitHub-repository
  1. I TinaCMS Cloud-dashboarden, skapa ett nytt projekt
  1. Välj ditt GitHub-repository från listan
  1. Ge TinaCMS nödvändiga rättigheter för att läsa och skriva till repot
  1. Kopiera Client ID och Token som visas
3.3 Konfigurera miljövariabler
Skapa en .env.local-fil i projektets root:

Steg 4: Integrera TinaCMS i Next.js-sidorna

4.1 Skapa TinaCMS-provider
För App Router, skapa en provider-komponent:
4.2 Använd TinaCMS i dina sidor
Exempel på hur du hämtar och redigerar innehåll:

Steg 5: Konfigurera Vercel eller Netlify

Alternativ A: Vercel

  1. Gå till vercel.com och anslut ditt GitHub-repo
  1. Vercel kommer automatiskt att upptäcka Next.js-projektet
  1. Lägg till miljövariabler under Project Settings → Environment Variables:
      • NEXT_PUBLIC_TINA_CLIENT_ID
      • TINA_TOKEN
      • NEXT_PUBLIC_TINA_BRANCH
  1. Klicka på "Deploy"

Alternativ B: Netlify

  1. Gå till netlify.com och anslut ditt GitHub-repo
  1. Under Build settings, ange:
      • Build command: npm run build
      • Publish directory: .next
  1. Lägg till miljövariabler under Site settings → Build & deploy → Environment:
      • NEXT_PUBLIC_TINA_CLIENT_ID
      • TINA_TOKEN
      • NEXT_PUBLIC_TINA_BRANCH
  1. Klicka på "Deploy site"

Steg 6: Aktivera redigeringsläge

För att komma åt TinaCMS-gränssnittet, navigera till:
Här kan du logga in med ditt TinaCMS Cloud-konto och börja redigera innehåll direkt.

Hur publiceringsprocessen fungerar

1. Redigering i TinaCMS
När en redaktör gör ändringar i TinaCMS-gränssnittet och sparar, sker följande:
  • TinaCMS validerar ändringarna mot ditt schema
  • Ändringar skrivs till motsvarande Markdown/JSON-fil
  • En commit skapas automatiskt i GitHub med en beskrivande meddelande
2. GitHub webhook
När committen pushas till GitHub:
  • GitHub skickar en webhook till Vercel/Netlify
  • Detta triggar en ny build av Next.js-projektet
3. Automatisk deployment
Hosting-plattformen:
  • Klonar den senaste versionen av repot
  • Kör build-kommandot (npm run build)
  • Publicerar den nya versionen automatiskt
  • Hela processen tar vanligtvis 1-3 minuter

Fördelar med denna lösning

Användarvänlighet

  • Visuell redigering: Innehållsredaktörer ser ändringar i realtid direkt på webbplatsen
  • Ingen teknisk kunskap krävs: Användare behöver inte känna till Git eller Markdown-syntax
  • Intuitivt gränssnitt: TinaCMS ger ett modernt och lättanvänt CMS-gränssnitt

Effektivitet

  • Snabb publicering: Ändringar går live inom några minuter
  • Ingen databas behövs: Innehåll lagras som filer, vilket ger snabbare laddningstider
  • Versionskontroll: All ändringshistorik finns i Git
  • Gratis hosting: Båda Vercel och Netlify har generösa gratisplaner

Utvecklarvänlighet

  • TypeScript-stöd: Automatisk typgenerering från schema
  • Flexibelt schema: Enkelt att definiera innehållsmodeller
  • Git-baserat: Traditionellt versionskontroll-arbetsflöde
  • Lokala förhandsgranskningar: Testa ändringar lokalt innan publicering

Avancerade funktioner

Förhandsgranskningar (Preview)

Konfigurera preview-läge för att se ändringar innan publicering:

Media Manager

TinaCMS har inbyggd bildhantering som lagrar bilder i din public-mapp:

Rollbaserad åtkomst

I TinaCMS Cloud kan du konfigurera olika roller:
  • Admin: Full kontroll över innehåll och inställningar
  • Editor: Kan redigera och publicera innehåll
  • Viewer: Kan endast visa innehåll

Felsökning och vanliga problem

Problem: TinaCMS kan inte ansluta till GitHub

Lösning: Kontrollera att:
  • Miljövariablerna är korrekt konfigurerade
  • TinaCMS Cloud har rätt GitHub-rättigheter
  • Branch-namnet matchar det i konfigurationen

Problem: Ändringar syns inte efter publicering

Lösning:
  • Kontrollera build-loggen på Vercel/Netlify för eventuella fel
  • Verifiera att webhook är korrekt konfigurerad
  • Rensa cache i browsern eller på CDN-nivå

Problem: Långsam build-tid

Lösning:
  • Använd Next.js Incremental Static Regeneration (ISR)
  • Optimera bilder med Next.js Image-komponenten
  • Implementera On-Demand Revalidation för specifika sidor

Best practices

  • Använd miljöer: Skapa separata miljöer för development, staging och production
  • Validera schema: Definiera tydliga valideringsregler i ditt TinaCMS-schema
  • Backup: Git fungerar som backup, men överväg regelbundna repo-backups
  • Optimera bilder: Använd bildoptimering i TinaCMS media manager
  • Dokumentera schema: Lägg till beskrivningar i ditt schema för redaktörernas skull
  • Testa lokalt: Kör alltid npm run dev lokalt innan publicering av stora ändringar

Sammanfattning

TinaCMS med Next.js ger en kraftfull och användarvänlig lösning för innehållshantering med automatisk publicering. Genom att koppla ihop TinaCMS, GitHub och Vercel/Netlify får du:
  • ✅ Visuell redigering med live preview
  • ✅ Automatisk deployment vid varje innehållsändring
  • ✅ Git-baserad versionskontroll
  • ✅ Snabb och skalbar hosting
  • ✅ Ingen databas att underhålla
  • ✅ TypeScript-stöd för utvecklare
  • ✅ Gratis eller lågkostnadslösning
Detta upplägg är idealiskt för bloggar, dokumentationssidor, företagswebbplatser och andra content-drivna projekt där både utvecklare och innehållsredaktörer behöver ett effektivt arbetsflöde.