Using React 19 with Vite and Next.js
HTML-код
- Опубликовано: 20 авг 2024
- Learn about the latest features of React 19, like client and server actions, `useOptimistic`, and more. In this demo, we'll start with a client-only React application using Vite and walk through how React 19 simplifies your application logic and helps create a better UX. Then, we'll move to a server framework like Next.js to show how to use React Server Components, Server Actions, and more.
For a moment I thought Vercel, made NextJS work with Vite upon reading the title. At the end I was like oh this is more of a migration from Vite. 😂
Same here... but was a bit skeptical but then I realized it was a video from vercel. Just decided to watch anyway
Same here.
The first half of the video shows using React 19 features with Vite, like actions and `useOptimistic`, and the second half shows some of the features like server actions, server components, and more with a server framework like Next.js.
@@VercelHQ It think what some people would think especially with the thumbnail is Next.js is adding vite supports which isn't the case.
Same here, got excited…
I need to keep this video in a tab somewhere available at all times. Thanks.
Glad I could help!
Great video Lee!
That being said, this is a good example when your application is a small application and you are early in your dev cycle.
I would love to see the same exercise (migrating from vite to next) with a big SPA codebase with bighuge redux-toolkit slices, lots of react-router middlewares and loaders and authorizations and whatnot, big react-hook-form forms, the whole shebang and the kitchen sink. Oh, and your API is not in next or JS/TS because of course it's not.
Then u will realise how much u love your legacy code.
Great video! Can we please get a followup on unit testing (with jest & react-testing-library) forms that use the action prop?
Simple, but great video. Thanks Lee ❤
Actually, question : what is the best way programmatically to know if a component is a "server" one or a "client" one ?
(without relying on the fail import error when you try to import hooks in a server component or if the developer uses "use client", for example, I mean)
Like is there a way to get Next.js thoughts about a component and then, use it as a boolean to display a message ?
Maybe it's a weird question but I was curious ^^"
typeof window === "undefined"
🤣🤣🤣
I love the shirt, Lee!
just add vite support instead of webpack. it is really annoying to wait 10 seconds evrey time i save changes
Why is it taking 10 seconds to see your changes? I use next and I see changes in about 1 second.
Gre@t video! Are there Examples of Error Handling or Cancelled Requests or Debouncing Requests?
What VS Code theme does he use?😭
In vite, how did you set up the GET/POST handlers on the server with such minimal code? Can we get a repo?
Let's say if the user has made changes in a current page and action saved that change and redirect to some other page where that data needs to be displayed,
Will this work?
save(someData)
revalidatePath("some other page")
redirect("some other page")
lol never thought we would be seeing this
I think one of the things that is not spoken about with regards to "just fetching it from a server component", is fetching from an external API that requires authentication. I think it's a common enough use case, probably more common than a Next.js app itself interacting with a database, and yet no one ever makes examples.
Thank youuuuu.
Its so tiring
more like this please
Its really cool!
When will nextjs 19 be released?
im missing something with the useOptimistic @ 13:40 - how is the `sending` flag getting set back to false? the text conditionally displayed based on that value no?
When the data is fetched it replaces the optimistic update, consequently doesn't include the send property anymore.
@@alexandereble8179 ah right thanks!
I was curious about the "with Vite" part, but seems like we removed it altogether from package.json??
The first half of the video shows using React 19 features with Vite, like actions and `useOptimistic`, and the second half shows some of the features like server actions, server components, and more with a server framework like Next.js.
Ah right, it's not possible to use the server-side things with Vite, right?
@IlllIlIlllIIIllIl Oh wow, thank you; didn't know about that. Are there any links/resources you can share for me to check?
Super awesome!
Basically the db.js file reads, while the actions.js file writes.
And that nothing new, I'm writing CQRS software for decades, but finally liberal kids realised...
Hey, how Next.JS stuffs live without SQL or database features?
API ?
@@ben53933 Neat, we have back end teams for those purposes
Nice video.
I have two questions
1. Can I use the optimistic hook without a form and Form action ?
I use a simple textarea and on Click it will send a post request over axios to my laravel Backend.
2.When will Turbopack production be ready for next JS production builds ?
A textarea is a form component
useOptimistic should be clearing the input fields by default.
Sorry for asking this, but what theme are you using for VSCODE?
One Dark Pro Darker
@@leerob thank you very much! 😊🙏
When will React 19 be released?
Hopefully pretty soon! Have you been using the RC?
When the React team figure out how to handle fallbacks with multiple branches more gracefully!
remix baked into react19 with just a bunch of made up hooks, nice. waiting for rr7
итого просто переделал под nextjs
He's cooking
let him cook
👍🏻
чтоооо
At least wait for release lil bro