Next.js-utvikling
Jeg bruker Next.js til webapplikasjoner der grensesnitt, innlogging og data må arbeide sammen. Egne prosjekter omfatter blant annet en læringsplattform, et publiseringsverktøy og nettstedet til Mikael's Norwegian Lessons.
Hva er Next.js – kort fortalt
Next.js er et rammeverk bygget rundt React. React brukes til grensesnittet, mens Next.js gir et oppsett for blant annet sider, navigasjon og kode som kjører på serveren. Det gjør det mulig å samle flere deler av en webapplikasjon i samme prosjekt.
Noe innhold kan lages på serveren før det sendes til nettleseren. Andre deler trenger kode i nettleseren fordi brukeren skal søke, velge eller redigere. Hvor grensen går, er et valg i utviklingen.
Rammeverket avgjør ikke hvem som skal få lese en opplysning, eller hvilken database en løsning skal bruke. Innlogging, tilgang og lagring må settes opp og kontrolleres for det konkrete produktet.
Slik bruker jeg Next.js
Jeg bruker Next.js når en nettside også skal være et arbeidsverktøy. I Mikael's Norwegian Lessons knyttes innhold til videobibliotek og læringsfunksjoner. I Memento er personlige data og tilgang etter invitasjon en del av produktmodellen.
NextPress utforsker publisering med en kjent administrasjonsflyt. Det er en egen applikasjon som ikke kan kjøre PHP-temaer eller plugins fra WordPress. CI Subtitles viser et annet oppsett: et Next.js-grensesnitt som arbeider mot en lokal backend i Python.
- Sider og navigasjon: organisere veien mellom oversikt, detaljer og handlinger.
- Server og nettleser: plassere datatilgang og interaksjon der de hører hjemme.
- Innlogging: knytte brukerens handlinger til kontroll av tilgang på serveren.
- Lagring og integrasjoner: avklare hvor data finnes, og hvordan de utveksles med andre deler.
Et slikt oppsett må velges ut fra behovet. En enkel side med kontaktinformasjon trenger ikke nødvendigvis en applikasjonsserver. En løsning som lagrer personlige data, trenger derimot mer enn et ferdig grensesnitt.
Prosjekter bygget med Next.js
Mikael's Norwegian Lessons
Min egen YouTube-kanal for norskelever – med nettside, Patreon-medlemskap og egne verktøy for undertekster, klipp og planlegging.
Status: Publisert nettside og YouTube-kanal.
NextPress
Et CMS-prosjekt som gjenskaper kjent WordPress-innlogging og administrasjon i Next.js og TypeScript.
Status: Utviklingsprosjekt med publisering og redigering.
Memento
En selvhostet læringsplattform med adaptiv repetisjon, iPad-apper, Chrome-utvidelse og apper for smartbriller.
Status: I bruk – tilgang etter invitasjon.
Kortjakten
Et samlekortspill i Discord med tidsstyrte hendelser, egen nettside for samlinger og en spillmotor med revisjonsspor.
Status: Privat samlekortspill for én Discord-server.
CI Subtitles
Et lokalt verktøy som gjør opptak om til kontrollerte norske undertekster med ordtiming – med Whisper, FastAPI og Next.js.
Status: I bruk i egen videoproduksjon.
Erfaring
Erfaringen min med Next.js kommer fra egne prosjekter. De har forskjellige krav til lagring, publisering og samspill med andre verktøy. Det gir et konkret grunnlag for å vurdere hva som bør være felles, og hva som må løses særskilt.
Mikael's Norwegian Lessons ga også en produktlæring: læringsplattformen ble lite brukt. En gjennomført teknisk løsning er derfor ikke i seg selv et bevis på at funksjonene treffer behovet. Derfor er det viktig å bli enige om mål og første leveranse tidlig.
Oppsettet for drift må følge applikasjonen. NextPress bruker for eksempel lokal SQLite-lagring og trenger en vedvarende Node.js-vert. Det er en annen forutsetning enn å publisere ferdigbygde HTML-sider.
Next.js vurderes ut fra arbeidsflyten
Hvis dere trenger et internt verktøy, en portal eller en annen løsning med egne regler, starter jeg med hva brukeren skal gjøre. På siden om skreddersydde webapplikasjoner beskriver jeg hvordan prosjektet avgrenses og overleveres.
Beskriv prosessen dere vil forbedre, så er det et utgangspunkt for å vurdere om Next.js passer. Dere trenger ikke velge rammeverk først.
Next.js-dokumentasjonen om server og nettleser forklarer den tekniske inndelingen nærmere på engelsk.