img

Enkel Storyblok + Next.js setup

2022-06-01

Coding on mac

Styrkorna av en Headless CMS är framhävda flertal gånger i våra artiklar. Idag ska vi se hur vi kan smidigt och enkelt bygga ditt innehåll i Storyblok och få den fungerande med Next.js

Först och främst behöver du skapa ditt Storyblok konto och lägga till ett nytt Space.

Next.js installation

Vad som ska vara i ditt presentations lager behöver förekomma i Next.js. Så för att förenkla processen, allt du behöver för att börja är att klona ner Next.js, Storyblok schablonen, GitHub Repository.

Efter att det är klart behöver vi installera alla dependencies med ett av de följande kommandona:

Ta en titt på filen placerad i: lib/storyblok.js. Du kommer att märka en variabel som heter 'accessToken'. Håll den i åtanke, vi kommer behöva den strax!

Storyblok installation

Låt oss gå vidare till det spacet du skapade i Storyblok. Då till 'Settings', kopiera din API key och klistra in det i Next.js filen som värdet av variabeln 'accessToken'. Nu är våran backend innehålls hanterare korrekt etablerad och kopplad till vårat Next.js projekt.

Starta upp din lokala server genom att använda ett av de följande kommandona:

Om vi går tillbaka till Storyblok menyn i settings, klicka på 'General' fliken och sätt förhandsgransknings domänen 'Location (default environment)' till "http://localhost:3000/"

Navigerings menyn på första sidan har en flik som heter 'Content', klicka på den och sedan klicka på en sida. Bara ett simpelt steg kvar och magin kan börja! I det övre högra hörnet klicka på config fliken för att ändra den riktiga sökvägen till startsidan ("/"). Ladda om sidan. Ditt visuella redigerings verktyg har nu implementerats.

Du kan förhandsgranska ditt innehåll och testa utseendet på ett flexibelt och betydelsefullt sätt. Klicka på en komponent och ändra innehållet utan några utvecklar kunskaper eller komplicerade procedurer. Glöm inte bort att spara och ladda om din lokala server för att visualisera det uppdaterade innehållet.

Vi gjorde en kort video för att demonstrera detta:

Sammanfattning

Att grafiskt hantera ditt innehåll är ett fantastiskt och trendigt sätt att framhäva flexibilitet och skalbarhet i dina project och att hålla allt under kontroll! Som en React.js utvecklare på Will & Skill, värderar vi verkligen prestanda och hastigheten. Så uppskattar vi helt klart den här kombinationen av Next.js och Storyblok. Några frågor eller förslag? Kom i kontakt med oss på mejl eller via Instagram.

Uppskattade du artikeln? Fundera på att dela den.