Nye Enonic.com lansert med Next.js

Etter mer enn ett år med planlegging, workshops, sprinter og feilretting lanserte vi endelig en helt ny versjon av Enonic.com i oktober 2023.

Vår innholdsplattform er fortsatt den samme, men nå er det et nytt, elegant og moderne design på toppen. Følgelig er de fleste nyhetene faktisk under panseret. Borte er teknologien fra 2015, og nytt er vår "API first"-tilnærming kombinert med frontend-rammeverket Next.js!

Hvorfor dette er viktig

Tusenkronersspørsmålet er: Hvorfor skal du bry deg? Selskaper og folk lanserer nye nettsteder hele tiden, og å skryte av det er omtrent like originalt som butler-avsløringen i et mordmysterium.

Men vi tror vi nå har en utmerket demonstrasjon på hvordan du kan bygge et moderne nettsted med et headless CMS og Next.js. Og vi vil dele det med deg.

Samtidig vil vi fremheve hvordan alle disse funksjonene har en meningsfull innvirkning på redaktør- og utvikleropplevelsene. Hvordan teknologien som er involvert kan gjøre livet lettere for dine kolleger.

Utfordringer vi ønsket å løse

Vi har tidligere diskutert hvorfor vi bygger et nytt nettsted med Next.js og headless CMS. Hvis du ikke vil lese alt dette, kan du sjekke ut hovedgrunnene våre nedenfor:

1. Forretningsmål og brukernes oppgaver

Grunnleggende sett ønsket vi et nytt nettsted for å løse såkalte "kjerneoppgaver", krysningen mellom våre forretningsmål og oppgavene som besøkende kommer for å utføre.

Vi tilpasset forretningsmål som å generere muligheter, differensiering og bygge tillit med brukeroppgaver som "kan jeg bruke dette for mitt prosjekt?", "hva koster det?" og "er denne plattformen moderne?"

Med dette i tankene kom vi opp med en nettstedsstruktur for de viktigste landingssidene, samt en rudimentær wireframe av forsiden.

2. Utvikleropplevelsen

For å realisere våre kjerneoppgaver måtte vi presentere den nyeste og beste teknologien på vårt nye nettsted. Dette var selvfølgelig headless CMS + Next.js.

Men hva løser egentlig headless og Next.js? La oss starte med å si at utviklere ikke liker å være låst til teknologi. De foretrekker å jobbe med det som passer deres preferanser, og gamle monolittiske publiseringsløsninger vil ikke akkurat gi dem frihet med verktøy og rammeverk.

Et headless CMS kutter båndet mellom innhold og presentasjon. Utviklerne kan da fokusere utelukkende på sistnevnte og bygge løsningen med sitt favoritt frontend-rammeverk.

Og fordi det er både raskere og enklere for dem, vil utviklere implementere designsystemer og UI-komponenter innenfor det samme frontend-rammeverket de har valgt.

3. Brukeropplevelsen

Imidlertid rendrer frontend-rammeverk (som React) i nettleseren. Denne prosessen er treg sammenlignet med serverside-prosessert og rendret HTML.

Det er her Next.js redder dagen. Det bruker en JavaScript-runtime under panseret, som gjør det mulig å kjøre JavaScript på serversiden.

Vi vil ikke gå inn på detaljene her (du kan gjøre det i vår Next.js-artikkel), men det er nok å si at Next.js kan forbedre brukeropplevelsen betydelig ved å gjøre nettsteder utrolig raske.

Dette er selvfølgelig gode nyheter for UX og SEO.

4. Tilpasning av Enonic-plattformen til Next.js

Vi skulle ikke oppfinne hjulet på nytt med vårt nye nettsted. Vi beholdt derfor den hodeløse Enonic-plattformen og redigeringsgrensesnittet Content Studio under frontend-teknologien.

Ved å gjøre dette måtte vi naturligvis tilpasse Enonic-plattformen til Next.js. Dette er spesielt relevant for følgende tre områder:

• Next.XP-integrasjon: Fungerer som en proxy til vår Next.js-frontend
• Forhåndsvisningsintegrasjon: Gjort enkelt med Next.XP
• Visuell redigering av landingssider: Gjort enkelt med Next.XP
• Headless API: Henter vårt strukturerte innhold

5. Design

Det nåværende nettstedet og designet stammer fra 2015 og var modent for en ny og frisk tilnærming. Vi ønsket å kvitte oss med det sentrerte designet, de store bokstavtitlene og den generelle tegneserieaktige følelsen.

Vi ønsket et design som var moderne, glatt og elegant, samtidig som det vekket tillit og sikkerhet. Ideen kulminerte i “nordisk kontor” med en lys palett. Dette ble oppgaven til en designer fra vårt byrå Avidly.

6. Topp-oppgaver

En siste utfordring var å bestemme hvilke oppgaver som skulle prioriteres først. I et nettstedsprosjekt er det potensielt en uendelig mengde ting å fikse og gjøre. Hvis vi noen gang ønsket å lansere et nytt nettsted, måtte vi prioritere – og prioritere hardt.

Som nevnt skulle det nye nettstedet ikke være en total overhaling av alt. Mesteparten av innholdet ville forbli som det var. Men et nytt design (åpenbart), nye meldinger, ny toppnivåstruktur og nye måter å presentere innholdet på ble uansett valgt som topp-oppgaver.

Selve løsningen

Nye Enonic.com ble lansert 3. oktober 2023 etter måneder med hardt arbeid fra vårt dedikerte team. Det har et elegant og moderne design med mye luft, dominert av fargene hvit og svart, sammen med oransje og blå som sekundære farger.

Det nye nettstedet er raskt og responsivt, med lynraske innlastingstider takket være en entusiastisk cache. Flere nye komponenter har blitt laget, med tillegg av en ny innholdstype. Flere utdaterte komponenter og innholdstyper har blitt avviklet og fjernet for å rydde opp på nettstedet for innholdsredaktørene.

Image element has no data-image-ref attibute!

Noen konkrete resultater

Her er litt statistikk:

• 66 landingssider
• 17 featureartikler
• 240 blogginnlegg
• 1200+ bilder
• 21 innholdstyper
• Flere komponenter

Her er Siteimprove-resultatene:

• 91,5/100 i Digital Certainty Index
• 96,6/100 i Quality Assurance
• 85,8/100 i Tilgjengelighet
• 92,3/100 i SEO

Som nevnt betyr dette et mye raskere nettsted for besøkende enn det forrige nettstedet, noe som bidrar til å forbedre UX og SEO. 

Her er et øyeblikksbilde av Google PageSpeed Insights for vår forside:

Google PageSpeed er et verktøy som hjelper deg med å forbedre hastigheten på nettstedet ditt. Det gjør dette ved å analysere nettstedet ditt og gi deg forslag til hvordan du kan fikse ytelsesproblemer. Å få toppscore i nesten alle kategorier er et flott vitnesbyrd for oss.

Når det gjelder arbeidsopplevelsen for teamet, bruker våre utviklere React og sine foretrukne verktøy med stor suksess. Samtidig får innholdsredaktørene den kjente og sammenhengende visuelle opplevelsen av å jobbe i et redaksjonelt miljø.

Frontend-utvikler Persijn hadde følgende å si om prosjektet:

“Å gjøre endringer i Next-prosjektet føles raskere, med redusert byggetid. Det er fint å jobbe på et populært rammeverk, og å ha et testprosjekt for vår Next-integrasjon er veldig nyttig for å forbedre den.”

Veien videre

Vi har nådd en viktig milepæl med lanseringen av det nye Enonic.com-nettstedet, hvor vi viser frem kraften i Next.js kombinert med den hodeløse Enonic-plattformen.

Men vi er langt fra ferdige i vår søken etter fremragende resultater.

I nær fremtid vil vi gjennomføre brukertesting på nettstedet for å ytterligere forbedre tilgjengelighet, samt meldinger og innhold. Og hvem vet hvilke tekniske underverk som venter rundt hjørnet?