Create a Server

Using Forms in Next.js (Server Actions, Revalidating

25 Less than a minute
Using Forms in Next.js (Server Actions, Revalidating

Using Forms in Next.js (Server Actions, Revalidating Data)

#Forms #Next.js #Server #Actions #Revalidating

“Lee Robinson”

Learn how to create forms and handle data mutations in the Next.js App Router. This tutorial walks through using Server Actions, creating loading and error states with useFormStatus and useFormState, as well as accessibility best practices.

0:00 – Introduction
0:06 – Demo
0:21 – Forms with Pages Router
1:05 – create-next-app
1:30 – Server Component (Data Fetching)
1:58 – Forms and action prop
3:05 – Server Actions (and useFormState)
4:32 – Progressive enhancement
5:03 – Loading states (useFormStatus)
7:13 – Revalidating data and caching
8:12 – Accessibility and error states
9:58 – Conclusion

◆ Docs:
◆ Example:
◆ React Canary Example:
◆ Server Actions:
◆ “use server” :

source

 

To see the full content, share this page by clicking one of the buttons below
25 Less than a minute

Related Articles

How To LEVEL UP INSANELY Fast in Fortnite Chapter 5

How To LEVEL UP INSANELY Fast in Fortnite Chapter 5

[LIVE] SHORT 30 MIN STREAM – MAKING DISCORD SERVER

[LIVE] SHORT 30 MIN STREAM – MAKING DISCORD SERVER

Make Automated Torrent Media Server with Emby, Sonarr,

Make Automated Torrent Media Server with Emby, Sonarr,

How to Create a Discord Server Support Ticket in 2023

How to Create a Discord Server Support Ticket in 2023

25 Comments

  2. Outstanding effort, bleeding edge-level stuff. I'm now fully engaged in working with Next.js as it appears to answer a lot of the needs and requirements of ongoing projects. Love the approach and the detailed explanation. Kudos! The solution is easy enough to implement but I have some architectural concerns that may or may not be valid. Planning on exploring these solutions further.

    1/ The trend to use remote Database Service Providers (Vercel, Mongo, et al.) is gaining momentum – a trend that I personally have not gotten on board with*; hoping you have an example that uses a local RDBMS (Oracle/mySQL/SQLServer);

    2/ The new way of doing things blur the lines delineating frontend and backend code. This is ok for smaller for smaller apps (I guess), but consolidating the code of larger apps into a branch stemming from a single root is a touchy subject.

    3/ In a typical environment I've worked in, the DB process runs on its own port with its own HTTP service separate from the frontend web-services – absolutely needed for Firewalls, load-balancing and DMZ-centered architectures.

    I'm watching your channel closely. Looking forward to future updates. Keep up the excellent presentations!

    * The risks of deploying on a 3rd party remote databases include:
    – forbidden usage in DoD/Gov't NIPR/SIPR -net applications;
    – Possible non-compliance with Sarbane's Oxley (SOX), Graham-Leech-Bliley, PII, and HIPPA requirements;
    – Single-point of failure represented by Internet Access, SP outages, DOS attacks, etc.

    Reply

  4. Lee, is there any way to simulate the following scenario: I have a component called user.tsx and another called filters.tsx, using useSearchParams I can pass a "state" to users.tsx and use this data from filter.tsx to change the data displayed on my screen. This with react query is very simple, because if there is any change in the queryKey (the filters in this case) it automatically invalidates the current query and redoes the fetch. My question is: Is there a way to obtain a similar result using only server actions and fetch making requests to a api?

    Reply

  6. Hey Lee, great content as always!

    Will you do a new video regarding next auth and providers like credentials, google and github?

    Credentials is mostly covered in the nextjs learn course, but google auth is not.

    I've been wondering if we should use api routes to handle this or is there any way using form actions as well.

    Thanks and keep up the great work!

    Reply

  7. untill now i cant use "useFormStatus" from react for adding loading state when submitting form server actions

    error message :
    'experimental_useFormStatus' is not exported from 'react-dom' (imported as 'useFormStatus')
    any sugestion or help ?

    currently i use :
    "next": "^14.0.4",
    "react-dom": "^18.2.0",

    Reply

  8. Great video. I think it's also worth noting that useFormStatus can be used inside a small client component (e.g. a button) placed inside a server component. This way, you get the benefits of a server component but still have a loading state after the page has been hydrated.

    Reply

  10. This was a great explaination… the docs were pretty hard to follow and understand. None of the examples connect together so its hard to get a full picture of what is going on.

    Reply

  11. Hi ladies and gentlemen, let me add another layer of abstraction on top of an already established and simple way of doing something, for no reason at all than to feel important!

    Reply

  19. Hey there Lee, thanks for this. I wanted to ask how can i persist the typed in value in input field? EX: i have a page.tsx in signup folder -> signup/page.tsx , this one has the form in it and is server component. When i hit the sign up button, it goes to signup/route.ts with method post in <form method="post"/> . The route.ts for signup handles all the database management plus return NextResponse.redirect() etc as required. This is also server side. Both are server side. I just want to know how can i persist the input typed value so when i click the signup button i need to persist that typed in value and not make it disappear?

    Reply

  23. is there a reason why SubmitButton is a separate component instead of just being a part of AddForm. can we not use both useFormStatus and useFormState hooks in the same component?

    Reply

Leave a Reply