A developer performs code updates to align an application with the latest versions of Next.js, Material UI, and Stripe. Key tasks include refactoring authentication logic, updating Stripe checkout redirects, implementing async cookie handling, adjusting Material UI grid imports, replacing cache invalidation methods, and renaming middleware to proxy.
Length 4:25
Captions English (Generated), Spanish (Auto-translated), French (Auto-translated), Korean (Auto-translated), Portuguese (Auto-translated), Vietnamese (Auto-translated) #next.js #stripe #material-ui #refactoring #server-actions #typescript #web-development #middleware #cache-invalidation #coding-tutorial
0:00 So on the UI, there's a few changes we're gonna make 0:02 with the latest package 0:03 versions installed. 0:05 Let's go ahead and firstly head into app auth 0:09 login.ts, which is our server action for actually 0:13 logging in to the back end. So here, notice we've 0:16 refactored away from the setAuthCookie function, and 0:20 instead we're just getting the set-cookie header 0:24 here with the inline inside of the login function. 0:29 And this is to avoid a server rendering issue 0:33 where this actually wasn't getting executed on the server side. 0:36 So make sure this is all inline inside of the single login function, 0:40 so that will be executing on the server. 0:43 So once we have the cookie, we are still retrieving the token and then 0:47 setting it on our Next.js server side so that our authentication succeeds 0:51 against the Next.js backend. And then we're finally moving the redirect 0:55 to 0:55 the end here. All right, so the next change we need to make 0:58 is actually 0:58 to our checkout page. So go inside of our 1:02 checkout.tsx, where we have our function that's actually 1:05 triggering the Stripe checkout. Now, previously, Stripe offered 1:09 a redirectToCheckout function, but this has been deprecated in the 1:13 latest version. And instead, all we have to do now is 1:17 pull off the URL property that gets returned from the 1:21 session. So remember in checkout, our server action, we're simply 1:25 calling our NestJS backend. That creates a Stripe 1:29 checkout session and returns it. And on that session object 1:33 is a URL property. So without the 1:36 redirectToCheckout function, we want to trigger this redirect to 1:40 the checkout session URL ourselves. 1:43 And so that's exactly what we're doing by setting the window href 1:46 equal to the session data URL. The next change I've made 1:50 is to our common fetch functionality. 1:54 So on the latest Next.js version, this cookies function has
The rest of the transcript is for members.
Sign in 