Using React 19 with Vite and Next.js

Рет қаралды 34,070

Күн бұрын

Пікірлер: 71

@nikilk 4 ай бұрын

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. 😂

@relaxwithai 4 ай бұрын

Same here... but was a bit skeptical but then I realized it was a video from vercel. Just decided to watch anyway

@parsinta 4 ай бұрын

Same here.

@VercelHQ 4 ай бұрын

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.

@relaxwithai 4 ай бұрын

@@VercelHQ It think what some people would think especially with the thumbnail is Next.js is adding vite supports which isn't the case.

@StephenRayner 4 ай бұрын

Same here, got excited…

@LutherDePapier 4 ай бұрын

I need to keep this video in a tab somewhere available at all times. Thanks.

@leerob 4 ай бұрын

Glad I could help!

@PhilipAlexanderHassialis 4 ай бұрын

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.

@MrEnsiferum77 4 ай бұрын

Then u will realise how much u love your legacy code.

@dimasheiko 4 ай бұрын

Simple, but great video. Thanks Lee ❤

@MattChinander 4 ай бұрын

I love the shirt, Lee!

@ktcoder 26 күн бұрын

I don't understand one thing, in a Nextjs app, how client and server side 'worlds' runs on a same port (in this video example, 3000) ?

@rust1477 4 ай бұрын

Great video! Can we please get a followup on unit testing (with jest & react-testing-library) forms that use the action prop?

@yassinebenazouz4529 4 ай бұрын

just add vite support instead of webpack. it is really annoying to wait 10 seconds evrey time i save changes

@aliventurous 4 ай бұрын

Why is it taking 10 seconds to see your changes? I use next and I see changes in about 1 second.

@miervaldis42 4 ай бұрын

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 ^^"

@danke1673 4 ай бұрын

typeof window === "undefined"

@etrepro 4 ай бұрын

🤣🤣🤣

@nikilk Ай бұрын

@@miervaldis42 all components are by default a server unless marked with use client or dynamically imported as a client only component. Use client also runs on the server once and then on the client.

@miervaldis42 Ай бұрын

@@nikilk yes but I was trying to determine programmatically, so without going through the files to check if at the top, there is ''use client'' directive, maybe used incorrectly by the developer :p Like probably Next.js already does the 'go through files and check if 'use client' directive exists'. So, just want to catch the result of this check.

@nikilk Ай бұрын

@@miervaldis42 if (!window) { ... }

@koekun5817 4 ай бұрын

Its really cool!

@snivels 4 ай бұрын

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.

@spacemanXVI. 4 ай бұрын

Thank youuuuu. Its so tiring

@melcooldev 4 ай бұрын

more like this please

@r-i-ch 4 ай бұрын

Gre@t video! Are there Examples of Error Handling or Cancelled Requests or Debouncing Requests?

@flexdash 4 ай бұрын

In vite, how did you set up the GET/POST handlers on the server with such minimal code? Can we get a repo?

@marcusmanuh4288 4 ай бұрын

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?

@alexandereble8179 4 ай бұрын

When the data is fetched it replaces the optimistic update, consequently doesn't include the send property anymore.

@marcusmanuh4288 4 ай бұрын

@@alexandereble8179 ah right thanks!

@piaIy Ай бұрын

@@alexandereble8179 It explains the happy path but not how optimistic values disappear even if the server call fails or is omitted. The real answer is that optimistic values are retained until the form action returns, then the state gets reverted to whatever is passed as the first parameter to useOptimistic.

@caresbruh 4 ай бұрын

lol never thought we would be seeing this

@Ashish_singh_dev 4 ай бұрын

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")

@A41417 4 ай бұрын

Super awesome!

@avigdev 4 ай бұрын

When will nextjs 19 be released?

@farzadmf 4 ай бұрын

I was curious about the "with Vite" part, but seems like we removed it altogether from package.json??

@VercelHQ 4 ай бұрын

@farzadmf 4 ай бұрын

Ah right, it's not possible to use the server-side things with Vite, right?

@farzadmf 3 ай бұрын

@IlllIlIlllIIIllIl Oh wow, thank you; didn't know about that. Are there any links/resources you can share for me to check?

@LutherDePapier 4 ай бұрын

Basically the db.js file reads, while the actions.js file writes.

@MrEnsiferum77 4 ай бұрын

And that nothing new, I'm writing CQRS software for decades, but finally liberal kids realised...

@TechHorizonUnveiled 4 ай бұрын

What VS Code theme does he use?😭

@komariharuto4326 4 ай бұрын

Sorry for asking this, but what theme are you using for VSCODE?

@leerob 4 ай бұрын

One Dark Pro Darker

@komariharuto4326 4 ай бұрын

@@leerob thank you very much! 😊🙏

@rayorole3065 4 ай бұрын

@cannotthinkofanybetterhandle 4 ай бұрын

useOptimistic should be clearing the input fields by default.

@HarleyLam-d6j 4 ай бұрын

Hey, how Next.JS stuffs live without SQL or database features?

@ben53933 4 ай бұрын

API ?

@HarleyLam-d6j 4 ай бұрын

@@ben53933 Neat, we have back end teams for those purposes

@mauricenoever 4 ай бұрын

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 ?

@r-i-ch 4 ай бұрын

A textarea is a form component

@pyquix8576 4 ай бұрын

remix baked into react19 with just a bunch of made up hooks, nice. waiting for rr7

@magiclover9346 Ай бұрын

Dissapointing. I to wanted to ditch webpack on my NextJS sever. Have a very large SPA I'm trying to break with some NextJs islands and Federated modules. Vite Federation and Webpack federation do not play nice with each other. Can't for the life of me get my Remote (Nextjs) and Host (Vite) to share react. Yet when I go for vanilla Vite Remote no problems. Might be forced to just go something like Express or Remix that can ssr and serve the Vite federated components for hydration. NextJs continues to be ineffective for large enterprise applications.