&w=3840&q=75)
Vi har hjälp StockRepublic med att bygga om deras sajt. De önskade en snabbare sajt med stark SEO och som skulle vara enkel att redigera. Vi valde därför att bygga sajten med hjälp av Next.js, React, Vercel och Tailwind. Dessa tekniker tillsammans med Storyblok, headless CMS, möjliggjorde en snabb och effektiv utveckling.
Att bygga en webbsida som är blixtsnabb, med stark SEO, enkel att redigera och som kan sättas ihop snabbt är inte alltid enkelt. Men det finns många hjälpmedel för att åstadkomma detta.
Rätt verktyg vid rätt tillfälle!
Vi använder det välbeprövade ramverket Next.js för att utveckla webbsidor med enorm snabb prestanda. Detta uppnår vi genom att bygga upp sidan på våra servrar och sedan tillhandahålla en klar sajt för besökarna. Helt enkelt, istället för att ta emot ett tomt HTML-dokument med en bunt Javascript som sen måste byggas i webbläsaren så kan vi istället få ett färdigbyggt HTML-dokument där all data från vald CMS redan är hämtat och populerat i HTML-dokumentet.
Utseende uppbyggd av legoblock.
Stylingverktyg ska bistå med en arkitektur som medför snabb utveckling och enkel förvaltning. Vi har under våra år provat många sådana koncept och landat i ett ramverk som snabbar upp utvecklingsarbetet både initialt men även under förvaltningsfasen.
Ändra direkt i design och se resultatet innan publicering
När det kommer till det verktyget som ska hantera innehållet (CMS) så finns det många alternativ. Vi har under den senaste tiden använt oss utav en Headless strategi, som bland annat medför att information som matas in i CMS:t enkelt kan delas mellan olika system. Detta tillvägagångssätt gör att vi håller sajtens utseende separat från innehållet. Resultatet är en snabbare och ger en mer effektiv arbetsprocess.
Utöver att arbetsprocessen optimeras så ger ett headless CMS oss också möjlighet att se ändringar i realtid, bekräftar att allt ser ut som förväntad och sedan publicera innehållet till den publika webbplatsen.
I Storyblok bygger du komponenter som är byggblocken för innehållet på en webbsida, dessa komponenter matchas med komponenter skrivna i tex React för att rendera ut rätt data på rätt ställe.
Efter att koden är kopplad till Storyblok och komponenterna är byggda så får du i Storyblok en realtids förhandsvisning av hur webbsidan ser ut, vilket är ett fantastiskt hjälpmedel, speciellt om du ger Storybloks komponenter möjlighet att redigera mer än bara innehåll. Tex kan du låta en Storyblok komponent styra webbsidans stil, genom att lägga till inställningar för att ändra tex färger, layout eller om en text är vänsterställd eller centrerad. Med förhandsvisningen i Storyblok kan du experimentera med komponenterna och direkt se hur resultatet ser ut.
Läs mer om StoryBlok på deras sajt https://www.storyblok.com/ .
Tankar
Att jobba med Next JS och Storyblok är väldigt intuitivt och det känns som att de är skapade för att användas tillsammans. Storyblok är relativt enkelt att komma igång med och när man väl är igång så kan man tillsammans med Next JS snabbt och enkelt sätta ihop en webbsida som är snabb och enkel att redigera med många möjligheter för att styra mer än bara webbsidans innehåll.
Vill du komma igång? Läs mer i vår artikel "Enkel StoryBlok + Next.js setup"
StockRepublic är en social handelsplattform som engagerar och inkluderar företagens kunder för att dela framgång, benchmark och vägledning.
StockRepublic använder sin webbplats för att visa upp sina produkter. För att ge de potentiella kunder en känsla av hur deras produkt fungerar så använder Figma-demos. D.v.s interaktiva prototyper som ger användaren möjlighet att testa olika funktioner som StockRepublic tillhandahåller.
Besök gärna stockrepublic.io