Slik bruker du Next.js Server Actions

13.4-utgivelsen av Next.js kom med en stabil App-ruter og muligheten til å gjøre datamutasjoner med serverhandlinger. Denne funksjonen er en absolutt game changer fordi den lar deg utføre datamutasjoner utelukkende fra serverkomponenter. Dette gir en rekke fordeler innen områder som hastighet, sikkerhet og den generelle ytelsen til appen.

Finn ut hva serverhandlinger er og hvordan du bruker denne nye funksjonen i Next.js-applikasjonen din.

Hva er serverhandlinger?

Serverhandlinger lar deg skrive engangsfunksjoner på serversiden rett ved siden av serverkomponentene dine. Dette er stort fordi du ikke lenger trenger å skrive API-ruter når du sender inn skjemaer eller gjør noen annen form for datamutasjon, inkludert GraphQL-datamutasjoner.

Du kan ha funksjoner som kjører på serveren din, og du kan deretter kalle dem fra klient- eller serverkomponenter. Dette er en alfafunksjon i Next.js 13.4, og den er bygget på toppen av React Actions. Bruk av serverhandlinger fører til redusert JavaScript på klientsiden, og kan hjelpe deg med å lage gradvis forbedrede skjemaer.

Eksempel på serverhandlinger

Med serverhandlinger kan du utføre mutasjoner inne i Next.js, på serveren. Ta en titt på denne nye funksjonen med et eksempel på Next.js-side som gjengir et skjema som lar deg lage et innlegg.

Her er importen:

import Link fra"neste/lenke"
import FormGroup fra"@/components/FormGroup"
import { revalidateTag } fra"neste/cache"
import { omdirigere } fra"neste/navigering"

Nå for koden for å opprette innlegget. Denne funksjonen er en serverhandling; den kjører på serveren og sender posttittelen og brødteksten til APIen (som lager innlegget i databasen):

asynkronfunksjonopprette innlegg(data) {
"bruk server"
konst tittel = data.get("tittel")
konst body = data.get("kropp")
avvente hente(" http://127.0.0.1/posts", {
 Overskrift: {"Innholdstype": "applikasjon/json"},
 metode: POST,
 kropp: JSON.stringify({title, body})
 })
 revalidateTag("innlegg")
 omdirigere("/")
}

Denne funksjonen får innleggstittelen og brødteksten som den deretter sender til /posts endepunkt via en POST-forespørsel. Den tvinger deretter hurtigbufferen til å oppdatere innhold knyttet til «posts»-taggen, og omdirigerer tilbake til hjemmesiden.

Her er et skjema for å samle den nye posttittelen og brødteksten:

eksportmisligholde NewPostForm() {
komme tilbake (





"tittel">Tittel</label>
"tekst" navn="tittel" id="tittel" />
 </FormGroup>
 </div>




"tittel">Kroppen</label>
"text" name=<span>"body"</span> id=<span>"body"</span>> <span><span><<span>tekstområde</span>/>< /span></span><br> <<span>/FormGroup></span><br> <<span>/div></span><p><code> <div>
<br> <button> Lagre <<span>/button></span><br> <<span>/div></span><br> <<span>/form></span><br> )<br>}<br>  <p>Du kan se at skjemaet ikke inneholder noen logikk knyttet til opprettelsen av innlegget, bare en skjemahandling: <strong>createPost()</strong>-funksjonen. Husk at createPost-funksjonen har "bruk server"-direktivet som erklærer at alt i det funksjonen skal kjøre på serveren.</p> <p>All koden kjører på serveren, og klienten din vet ingenting om det. Dette er fordi skjemaet er en serverkomponent og det er ingenting som blir dynamisk gjengitt på klient.</p> <p>Når du klikker på <strong>Lagre</strong>-knappen, kaller Next.js opp <strong>createPost()</strong> funksjon. Dette sender tittelen og brødteksten som skjemadata, som legges til den lokale API-en for å lagre informasjonen.</p> <h2 id="revalidating-the-post"> Revalidering av innlegget </h2> <p>Nederst i <strong>createPost()</strong>-funksjonen er følgende kodelinje:</p> <pre> <code>revalidateTags(<span>"posts"</span>)< /kode> </code></pre> <p>For å forstå hva denne funksjonen gjør, se for deg at du har en innleggsside. Inne i posts-komponenten kan du kalle en funksjon kalt <strong>getPosts()</strong> for å hente alle innleggene fra databasen din og gjengi dem slik at brukeren kan se dem:</p> <pre> <code><span>eksport</span> <span>standard</span> <span>async</span> <span><span>funksjon</span> <span>Innlegg</span>() span>{<br> <span>const</span> innlegg = <span>venter</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>Funksjonen <strong>getPosts()</strong> vil se slik ut:</p> <pre> <code><span>async</span> <span><span>funksjon</span> <span>getPosts</span>() </span>{<br> <span>const</span> res = <span>vent</span> hente(<span>" https://127.0.0.1/posts? sort=title"</span>, {<br> neste: {<span>tags</span>: [<span>"posts"</span>], <span>revalidate</span>: <span>3600</span> <br> })</code><p><code> <span>retur</span> res.json()<br>}<br></code> </p></pre> <p>Denne funksjonen sender alternativet <strong>neste</strong> for å hente, slik at du kan angi en revalideringsperiode. Som standard bufres hver enkelt henteforespørsel du gjør inne i serverkomponenten for alltid. Å holde styr på cachen og oppdatere den når det er nødvendig er en viktig del av <span>hentingen av data Next.js</span>.</p> <p>Koden ovenfor forteller Next.js å ​​bufre <strong>innlegg</strong>-dataene i opptil én time (3600 sekunder). Etter en time blir dataene foreldet og Next.js oppdaterer dem for å hente de nyeste dataene fra databasen.</p> <p>Husk at funksjonen <strong>createPost()</strong> kaller <strong>revalidateTag("posts")</strong> når den har fullført resten av arbeidet. Dette tvinger Next.js til å hente disse dataene på nytt som skal inkludere det nye innlegget som appen nettopp opprettet.</p> <h2 id="proof-that-your-code-is-running-on-the-server"> Bevis på at koden din kjører på serveren </h2> <p>For å være sikker på at all koden kjører på serveren, kan du legge til følgende konsollloggsetning i <strong>createPost()</strong> funksjon:</p> <pre> <code><span>console</span>.log(<span>"Kjører på serveren"</span>)</code> </pre> <p>Prøv deretter å opprette et nytt innlegg ved å klikke på send inn-knappen. Hvis koden din kjører på serveren, vil den loggmeldingen dukke opp på terminalen din. Men hvis den kjører på klienten, vil loggen vises i nettleserkonsollen.</p> <p>Dette gjør det trygt å sette sensitiv informasjon som miljøvariabler, databasetilkoblinger og passord på serveren uten frykt for at den blir utsatt for klient. Du kan deretter <span>lese strengene fra .env-filen din</span> i Next.js-appen.</p> <p>Du kan ønsker å reservere bruk av serverhandlinger for versjoner av Next.js senere enn 13.4, spesielt i produksjon. Men det er fortsatt veldig spennende å se hvor denne funksjonen går siden den hele tiden presser hva du kan gjøre ved å flytte flere og flere ting til serveren. Det skal gjøre klientappene dine enklere å skrive, og prosessen med å utvikle dem mye morsommere.</p> <h2 id="learn-more-about-migrating-to-next-js"> Lær mer om migrering til neste .js </h2> <p>Mange front-end-utviklere bruker React for UI-utvikling. Men takket være funksjoner som gjengivelse på serversiden og generering av statisk nettsted, migrerer mange av disse utviklerne appene sine for å bruke Next.js. Denne migreringen er veldig enkel siden React er ganske lik Next.js syntaksmessig.</p> <p>Den ekstra ytelsen og sikkerhetsøkningen nødvendiggjør migreringen enda mer. Muligheten til å ha komponenter på serversiden, kombinert med de nye serverhandlingene vi nettopp har dekket, gjør Next.js til et sikrere og mer mer effektivt alternativ sammenlignet med vanlig React. Som React-utvikler bør du lære hvordan du migrerer appen din til Next.js.</p> </div></code></p></pre></button>
</div></code></p></span>