Hur man använder Next.js Server Actions

13.4-versionen av Next.js kom med en stabil App-router och möjligheten att göra datamutationer med serveråtgärder. Den här funktionen är en absolut spelväxlare eftersom den låter dig utföra datamutationer helt från serverkomponenter. Detta ger en mängd fördelar inom områden som hastighet, säkerhet och övergripande prestanda för appen.

Lär dig vad serveråtgärder är och hur du använder den här nya funktionen i din Next.js-applikation.

Vad är serveråtgärder?

Serveråtgärder låter dig skriva engångsfunktioner på serversidan bredvid dina serverkomponenter. Detta är enormt eftersom du inte längre behöver skriva API-rutter när du skickar formulär eller gör någon annan typ av datamutation, inklusive GraphQL-datamutationer.

Du kan ha funktioner som körs på din server, och du kan sedan anropa dem från klient- eller serverkomponenter. Detta är en alfafunktion i Next.js 13.4, och den är byggd ovanpå React Actions. Att använda serveråtgärder leder till minskat JavaScript på klientsidan och kan hjälpa dig att skapa progressivt förbättrade formulär.

Exempel på serveråtgärder

Med serveråtgärder kan du utföra mutationer inuti Next.js, på servern. Ta en titt på den här nya funktionen med ett exempel på Next.js-sida som återger ett formulär som låter dig skapa ett inlägg.

Här är importen:

importera Länk från"nästa/länk"
importera FormGroup från"@/components/FormGroup"
importera { revalidateTag } från"nästa/cache"
importera { omdirigering } från"nästa/navigering"

Nu till koden för att skapa inlägget. Denna funktion är en serveråtgärd; den körs på servern och skickar inläggets titel och text till API: t (som skapar inlägget i databasen):

asynkronfungeraskapa Post(data) {
"använd server"
konst title = data.get("titel")
konst body = data.get("kropp")
vänta hämta(" http://127.0.0.1/posts", {
 rubrik: {"Innehållstyp": "applikation/json"},
 metod: POST,
 kropp: JSON.stringify({title, body})
 })
 revalidateTag("inlägg")
 dirigera om("/")
}

Denna funktion får inläggets titel och text som den sedan skickar till /posts slutpunkt via en POST-begäran. Den tvingar sedan cachen att uppdatera innehåll som är kopplat till "posts"-taggen och omdirigerar tillbaka till startsidan.

Här är ett formulär för att samla in det nya inläggets titel och text:

exporterastandard NewPostForm() {
lämna tillbaka (





"titel">Titel</label>
"text" namn="titel" id="titel" />
 </FormGroup>
 </div>




"titel">Kroppen</label>
"text" name=<span>"body"</span> id=<span>"body"</span>> <span><span><<span>textarea</span>/>< /span></span><br> <<span>/FormGroup></span><br> <<span>/div></span><p><code> <div>
<br> <button> Spara <<span>/button></span><br> <<span>/div></span><br> <<span>/form></span><br> )<br>}<br>  <p>Du kan se att formuläret inte innehåller någon logik relaterad till skapandet av inlägget, bara en formuläråtgärd: funktionen <strong>createPost()</strong>. Kom ihåg att createPost-funktionen har "använd server"-direktivet som förklarar att allt i det funktion bör köras på servern.</p> <p>All kod körs på servern, och din klient vet ingenting om det. Detta beror på att formuläret är en serverkomponent och det finns inget som renderas dynamiskt på klient.</p> <p>När du klickar på knappen <strong>Spara</strong> anropar Next.js <strong>createPost()</strong> fungera. Detta skickar titeln och brödtexten som formulärdata, som skickas till det lokala API: et för att spara informationen.</p> <h2 id="revalidating-the-post"> Omvalidering av inlägget </h2> <p>Längst ned i funktionen <strong>createPost()</strong> finns följande kodrad:</p> <pre> <code>revalidateTags(<span>"posts"</span>)< /code> </code></pre> <p>För att förstå vad den funktionen gör, föreställ dig att du har en inläggssida. Inuti posts-komponenten skulle du anropa en funktion som heter <strong>getPosts()</strong> för att hämta alla inlägg från din databas och rendera dem så att användaren kan se:</p> <pre> <code><span>export</span> <span>standard</span> <span>async</span> <span><span>funktion</span> <span>Inlägg</span>() span>{<br> <span>const</span> inlägg = <span>väntar</span> getPosts()</span></code><p><code> <span>retur</span> (<br> <div>
<br> {posts.map(<span><span>post</span> = ></span> {<br> <postcard key="{post.id}"></postcard><br> })}<br> <<span>/div></span><br> )<br>}<br>  <p>Funktionen <strong>getPosts()</strong> skulle se ut så här:</p> <pre> <code><span>async</span> <span><span>funktion</span> <span>getPosts</span>() </span>{<br> <span>const</span> res = <span>await</span> hämta(<span>" https://127.0.0.1/posts? sort=title"</span>, {<br> nästa: {<span>taggar</span>: [<span>"posts"</span>], <span>återvalidera</span>: <span>3600</span> <br> })</code><p><code> <span>retur</span> res.json()<br>}<br></code> </p></pre> <p>Den här funktionen skickar alternativet <strong>nästa</strong> för att hämta, så att du kan ställa in en förlängningsperiod. Som standard cachelagras varje enskild hämtningsbegäran du gör inuti serverkomponenten för alltid. Att hålla reda på cachen och uppdatera den vid behov är en viktig del av <span>datahämtning Next.js</span>.</p> <p>Koden ovan talar om för Next.js att cachelagra <strong>inläggsdata</strong> i upp till en timme (3 600 sekunder). Efter en timme blir data inaktuella och Next.js uppdaterar den för att hämta de senaste data från databasen.</p> <p>Kom ihåg att funktionen <strong>createPost()</strong> anropar <strong>revalidateTag("posts")</strong> när den har avslutat resten av sitt arbete. Detta tvingar Next.js att återhämta den data som ska inkludera det nya inlägget som appen just skapade.</p> <h2 id="proof-that-your-code-is-running-on-the-server"> Bevis på att din kod körs på servern </h2> <p>För att vara säker på att all kod körs på servern kan du lägga till följande konsolloggsats inuti Funktionen <strong>createPost()</strong>:</p> <pre> <code><span>console</span>.log(<span>"Körs på servern"</span>)</code> </pre> <p>Försök sedan att skapa ett nytt inlägg genom att klicka på knappen Skicka. Om din kod körs på servern kommer det loggmeddelandet att dyka upp på din terminal. Men om den körs på klienten kommer loggen att dyka upp i webbläsarkonsolen.</p> <p>Detta gör det säkert att sätta känsligt information som miljövariabler, databasanslutningar och lösenord på servern utan rädsla för att den ska utsättas för klient. Du kan sedan <span>läsa strängarna från din .env-fil</span> i din Next.js-app.</p> <p>Du kan vill reservera användning av serveråtgärder för versioner av Next.js senare än 13.4, särskilt i produktion. Men det är fortfarande riktigt spännande att se vart den här funktionen tar vägen eftersom den hela tiden driver på vad du kan göra genom att flytta fler och fler saker till servern. Det borde göra dina klientappar lättare att skriva och processen att utveckla dem mycket roligare.</p> <h2 id="learn-more-about-migrating-to-next-js"> Läs mer om migrering till nästa .js </h2> <p>Många frontend-utvecklare använder React för UI-utveckling. Men tack vare funktioner som server-side rendering och statisk webbplatsgenerering, migrerar många av dessa utvecklare sina appar för att använda Next.js. Denna migrering är mycket enkel eftersom React är ganska lik Next.js syntaxmässigt.</p> <p>Den extra prestanda- och säkerhetshöjningen kräver migreringen ännu mer. Möjligheten att ha komponenter på serversidan, tillsammans med de nya serveråtgärderna vi just täckte, gör Next.js till ett säkrare och mer prestandaalternativ jämfört med vanliga React. Som React-utvecklare bör du lära dig hur du migrerar din app till Next.js.</p> </div></code></p></pre></button>
</div></code></p></span>