Next.js 15 -fullstack-kehitys (App Router + Server Actions) · Oppitunti

Progressiivinen parantaminen form Action -propsilla

Liittäkää lomakkeet Server Actions -toimintoihin, jotta ne toimivat ilman JavaScriptiä ja paranevat hydratoitumisen jälkeen.

Oppitunti 1/413 vaihetta

Progressiivinen parantaminen form Action -propsilla on ilmainen Next.js 15 -fullstack-kehitys (App Router + Server Actions)-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Next.js 15 -fullstack-kehitys (App Router + Server Actions)-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Next.js 15 -fullstack-kehitys (App Router + Server Actions)-kurssilla on yhteensä 4 oppituntia.

Lomakkeet, jotka toimivat ilman JavaScriptiä

Progressiivinen parannus tarkoittaa, että lomake toimii ensin pelkän HTML:n avulla ja muuttuu paremmaksi, kun JavaScript latautuu ja React suorittaa hydraation.

Next.js 15 App Routerissa tämä tehdään välittämällä Server Action suoraan lomakkeen action-propille. Selain voi lähettää lomakkeen natiivisti palvelimelle ennen kuin mitään asiakaspuolen JavaScriptiä on saatavilla.

JavaScript ei ole vielä käytössä? Lomake lähettää silti tiedot ja palvelin vastaa.
JavaScript on hydraatioitu? React sieppaa lähetyksen ja käyttää taustalla fetch-toimintoa, joten koko sivua ei tarvitse ladata uudelleen.

Miltä Server Action näyttää

Server Action on asynkroninen funktio, joka merkitään 'use server'-direktiivillä. Se suoritetaan vain palvelimella.

Kun se välitetään muodolle <form action={...}>, Next.js yhdistää sen lomakkeeseen niin, että lomakkeen kentät saapuvat muodossa FormData.

// app/actions.ts
'use server'

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string
  const body = formData.get('body') as string
  // ...persist to your database here
  console.log('Saving:', { title, body })
}

Actionin yhdistäminen lomakkeeseen

Välittäkää Server Action suoraan action-propille. Koska kyseessä on aito HTML-lomake, jokainen syötekenttä tarvitsee name-attribuutin, jotta se päätyy FormData-objektiin.

Tämä komponentti voi olla Server Component — perustapauksessa 'use client'-direktiiviä ei tarvita.

// app/new/page.tsx
import { createPost } from '../actions'

export default function NewPostPage() {
  return (
    <form action={createPost}>
      <input name="title" placeholder="Title" required />
      <textarea name="body" placeholder="Body" />
      <button type="submit">Publish</button>
    </form>
  )
}

Miksi name-attribuutilla on merkitystä

Natiivissa lomakelähetyksessä syötekentät sarjallistetaan niiden name-arvon perusteella. Next.js muodostaa FormData-objektin näistä nimistä sekä silloin, kun JavaScript ei ole käytössä (natiivi POST), että silloin, kun se on käytössä (siepatttu fetch).

formData.get('title') lukee syötekentän, jonka nimi on title.
Ilman name-attribuuttia oleva syötekenttä ei näy palvelimelle.
Tämä on sama sopimus kuin perinteisissä HTML-lomakkeissa, minkä ansiosta lomake toimii hallitusti myös rajoitetummassa ympäristössä.

JavaScriptiton polku

Poistakaa JavaScript käytöstä selaimessa ja lähettäkää lomake. Se toimii edelleen.

Tällä polulla tapahtuu seuraavaa:

HTTP POST -pyynnön nykyiseen reittiin.
Next.js suorittaa Server Actionin palvelimella lähetetyn FormData-datan kanssa.
Jos action kutsuu redirect()- tai revalidatePath()-funktiota, palvelin vastaa päivitetyllä sivulla.

Tämä on perusta, jonka progressiivinen parannus takaa.

Uudelleenohjaus ja välimuistin päivitys lähetyksen jälkeen

Onnistuneen muutoksen jälkeen haluatte yleensä päivittää välimuistissa olevat tiedot ja siirtyä toiseen näkymään. Molemmat toimivat sekä JavaScriptittömällä että hydraatioidulla polulla.

revalidatePath('/posts') käskee Next.js:ää hakemaan kyseisen reitin tiedot uudelleen.
redirect('/posts') lähettää käyttäjän uuteen sijaintiin.

// app/actions.ts
'use server'

import { revalidatePath } from 'next/cache'
import { redirect } from 'next/navigation'

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string
  await savePost({ title })
  revalidatePath('/posts')
  redirect('/posts')
}

FormDatan validointi palvelimella

Älkää koskaan luottako asiakkaalta tulevaan syötteeseen. Validoikaa tiedot Server Actionin sisällä, jotta säännöt pätevät myös silloin, kun JavaScript ei ole käytössä.

Selkeä tapa on parsia FormData skeeman avulla ja palauttaa tyypitetty tulos, jonka lomake voi näyttää.

// app/actions.ts
'use server'

import { z } from 'zod'

const schema = z.object({
  title: z.string().min(3, 'Title too short'),
})

export async function createPost(formData: FormData) {
  const parsed = schema.safeParse({
    title: formData.get('title'),
  })
  if (!parsed.success) {
    return { error: parsed.error.flatten().fieldErrors }
  }
  await savePost(parsed.data)
  return { error: null }
}

Lomakkeen parantaminen useFormStatusilla

Kun sivu on hydraatioitu, voitte näyttää lähetyksen aikana näkyvän käyttöliittymän. useFormStatus-hook ilmoittaa, lähettääkö sitä ympäröivä lomake parhaillaan tietoja.

Sitä on kutsuttava lomakkeen lapsikomponentista, Client Componentin sisältä. Kun JavaScript ei ole käytössä, tätä koodia ei yksinkertaisesti suoriteta, ja käyttäjä näkee tavallisen painikkeen.

// app/submit-button.tsx
'use client'

import { useFormStatus } from 'react-dom'

export function SubmitButton() {
  const { pending } = useFormStatus()
  return (
    <button type="submit" disabled={pending}>
      {pending ? 'Publishing...' : 'Publish'}
    </button>
  )
}

Tilan palauttaminen useActionStatella

Voitte tuoda validointivirheet ja onnistumisviestit näkyviin käärimällä actionin useActionState-hookiin (React 19 / Next.js 15). Se välittää actionin palautusarvon takaisin komponenttiin state-arvona.

Lomake toimii edelleen ilman JavaScriptiä: sama action suoritetaan natiivilla POST-pyynnöllä, mutta tilaa ei päivitetä näkymän sisällä.

// app/post-form.tsx
'use client'

import { useActionState } from 'react'
import { createPost } from './actions'

export function PostForm() {
  const [state, formAction] = useActionState(createPost, { error: null })
  return (
    <form action={formAction}>
      <input name="title" />
      {state.error?.title && <p>{state.error.title[0]}</p>}
      <button type="submit">Publish</button>
    </form>
  )
}

Actionin allekirjoituksen mukauttaminen

Kun käytätte useActionState-hookia, Server Action saa ylimääräisen ensimmäisen argumentin: edellisen tilan. Allekirjoitus muuttuu muodosta (formData) muotoon (prevState, formData).

Pitäkää palautteen rakenne yhdenmukaisena, jotta alkutila ja kaikki tulokset vastaavat toisiaan.

// app/actions.ts
'use server'

type State = { error: string | null }

export async function createPost(
  prevState: State,
  formData: FormData,
): Promise<State> {
  const title = formData.get('title') as string
  if (!title) return { error: 'Title is required' }
  await savePost({ title })
  return { error: null }
}

JavaScriptittömän polun pitäminen toimintakunnossa

Progressiivinen parannus toimii vain, jos ette riko natiivista polkua. Kiinnittäkää huomiota seuraaviin:

Älkää luottako onClick- tai onChange-käsittelijöihin pakollisessa toiminnallisuudessa — ne tarvitsevat JavaScriptiä.
Lomakkeen lähettäminen ilman type="submit"-painiketta.
Arvojen lukeminen React-tilasta FormData-datan sijaan actionissa.

Nyrkkisääntö: action ja syötekentät muodostavat sopimuksen; asiakaspuolen hookit vain parantavat sitä. Testatkaa toiminta poistamalla JavaScript käytöstä vähintään kerran.

Pikatarkistus

Testatkaa ymmärrystänne siitä, miten Server Action mahdollistaa progressiivisen parannuksen.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Opitte rakentamaan progressiivisesti parannettuja lomakkeita Next.js 15:ssä:

Välittäkää Server Action muodolle <form action={...}>, jotta se toimii natiivilla POST-pyynnöllä jo ennen hydraatiota.
Antakaa jokaiselle syötekentälle name — tämä sopimus välittää tiedot FormData-objektiin molemmilla poluilla.
Validoikaa palvelimella, jotta säännöt pätevät myös JavaScriptin ollessa poissa käytöstä.
Käyttäkää redirect- ja revalidatePath-funktioita käyttöliittymän päivittämiseen muutoksen jälkeen.
Parantakaa käyttökokemusta useFormStatus-hookilla (lähetyksen aikainen käyttöliittymä) ja useActionState-hookilla (palautettu tila) ja muistakaa, että actionin allekirjoituksesta tulee (prevState, formData).
Pitäkää pakollinen toiminnallisuus actionissa ja syötekentissä, ei vain asiakaspuolen käsittelijöissä, ja testatkaa toiminta JavaScriptin ollessa poissa käytöstä.

Aloita maksutta

Opi TypeScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 22
Oppitunnit: 88

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Progressiivinen parantaminen form Action -propsilla” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Next.js 15 -fullstack-kehitys (App Router + Server Actions)-oppimispolun 3 oppituntia, myös oppitunnin “Progressiivinen parantaminen form Action -propsilla”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Next.js 15 -fullstack-kehitys (App Router + Server Actions)-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Progressiivinen parantaminen form Action -propsilla”?

Liittäkää lomakkeet Server Actions -toimintoihin, jotta ne toimivat ilman JavaScriptiä ja paranevat hydratoitumisen jälkeen. Harjoittelet Next.js 15 -fullstack-kehitys (App Router + Server Actions)-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Next.js 15 -fullstack-kehitys (App Router + Server Actions)-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Next.js 15 -fullstack-kehitys (App Router + Server Actions)-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”Progressiivinen parantaminen form Action -propsilla”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Next.js 15 -fullstack-kehitys (App Router + Server Actions)-oppitunnilla?

Kyllä. Jokainen Next.js 15 -fullstack-kehitys (App Router + Server Actions)-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Progressiivinen parantaminen form Action -propsilla
Odotus- ja lataustilat useFormStatusilla
Kenttäkohtaiset validointivirheet useActionStatella
Välitön palaute useOptimisticilla

← Takaisin: Next.js 15 -fullstack-kehitys (App Router + Server Actions)