Implementera statuslös session för Next.js med Server Actions

Introduktion#

Efter den mycket hyllade lanseringen av App Router, introducerade Next.js ytterligare en funktion, Server Actions. Denna nya innovation underlättar datamanipulation på serversidan, minskar beroendet av JavaScript på klientsidan och förbättrar formulär progressivt – allt medan man använder JavaScript och React för att skapa robusta webbapplikationer utan behov av traditionella REST API:er.

I denna artikel utnyttjar vi de många fördelarna som erbjuds av denna innovation och ser det i praktiken när vi implementerar en cookie-baserad statuslös session för Next.js. Denna artikel fungerar som en steg-för-steg-guide som leder dig genom varje fas av att skapa ett demoprojekt med App Router.

Vår praktiska demonstration kan enkelt distribueras till Vercel med Edge Runtime. Och du kan ladda ner hela källkoden från GitHub.

Att avvika från REST API:er#

Traditionellt, om vi vill skapa en Next.js web app som frågar efter databasen i backend, kan vi skapa några REST API:er för att validera auth-tillståndet och fråga efter databasen, sedan kommer front-end React appen att anropa dessa API:er. Men om det inte finns något behov av att öppna API:t för allmänheten och denna react-app är den enda klienten, verkar det överflödigt att använda REST API:er eftersom de endast kommer att anropas av oss själva.

Med Server Actions kan React-komponenten nu köra serverside-kod. Istället för att manuellt behöva skapa en API-endpunkt, skapar Server Actions automatiskt en endpunkt för Next.js att använda bakom kulisserna. När du anropar en Server Action skickar Next.js en POST-förfrågan till sidan du är på med metadata om vilken åtgärd som ska köras.

Behovet av statuslös session#

Som ett föredraget ramverk för att skapa statuslösa applikationer, innebär Next.js ofta serverless, vilket innebär att vi inte kan använda minnet för att lagra sessionsdata. Traditionella sessioner kräver användning av en extern lagringstjänst, som Redis eller en databas.

Men när sessionsdata förblir tillräckligt små har vi en alternativ väg: utforma en statuslös session med säkra krypteringsmetoder och cookies lagrade på klientsidan. Denna metod kringgår behovet av extern lagring och håller sessionsdata decentraliserad, vilket erbjuder betydande fördelar när det gäller serverbelastning och den övergripande applikationens prestanda.

Så vårt mål är en lätt och effektiv statuslös session som utnyttjar klientsidans lagringskapacitet och samtidigt säkerställer säkerheten genom välutförd kryptering.

Grundläggande sessionsimplementering#

Först och främst, vi behöver initiera ett nytt projekt:

För mer information om installationen, se den officiella guiden.

Skapa ett sessionsbibliotek#

För att göra det enklare att förstå Server Actions, kommer vi att skapa en förenklad version av sessionen först. I denna version kommer vi att använda JSON för att lagra sessionsdata i cookies.

Skapa en fil som heter session/index.ts och inkludera följande kod:

Den första raden "use server" markerar denna fils funktioner som Server Actions.

Eftersom vi inte kan komma åt request och response direkt, använder vi next/headers för att läsa och skriva cookies. Detta är endast tillgängligt i Server Actions.

Inkommande: två fler Server Actions#

Med sessionsbiblioteket på plats är det dags att implementera en logga in- och logga ut-funktion för att visa sessionens användbarhet.

Inkorporera följande kod i user/index.ts:

Här använder vi en 'låtsas'-inloggningsprocess som bara kräver ett användarnamn.

Bygga sidan#

I App Router är sidan vanligtvis en asynkron komponent, och Server Actions kan inte anropas direkt från en sådan komponent. Vi behöver skapa komponenter med "use client":

components/sign-in.tsx

components/sign-out.tsx

Slutligen, låt oss bygga vår app/page.tsx

Implementera kryptering#

Arbetet med Server Actions är klart. Nu återstår den sista delen som involverar krypteringsimplementeringen, vilket kan uppnås genom crypto.

Nästa, modifiera sessionsbiblioteket för att implementera följande:

Slutsats#

Grattis! Du har framgångsrikt implementerat en statuslös session för Next.js. Här är en online förhandsgranskning på Vercel, och du kan ladda ner hela källkoden här. Vi hoppas att denna guide hjälper dig att förstå de helt nya Server Actions.

Nästa gång utforskar vi hur man använder Server Actions för att integrera Logto för Next.js. Häng med!