The developer implements server-side product data fetching in Next.js and integrates Material UI for individual product pages. The session covers adding client-side navigation, configuring public environment variables for image URLs, and using the Material UI grid system to create a responsive, well-spaced layout for product listings.
Length 14:27
Captions English (Generated), Spanish (Auto-translated), French (Auto-translated), Korean (Auto-translated), Portuguese (Auto-translated), Vietnamese (Auto-translated) #next.js #react #web development #material ui #tailwind css #typescript #routing #frontend #environment variables #coding
0:00 All right, so now we're exposing the Get Products API 0:04 from our 0:04 back end. Let's go into the UI now and actually set up 0:08 a server action to actually call this API. 0:13 So inside of our product ID folder, let's create this 0:17 getproduct.ts server 0:20 function that we know gets executed on the server, 0:23 and we're gonna call our NestJS back end. 0:27 So this is an async function getProduct that'll 0:30 pass in the product ID, 0:34 and we'll just simply go ahead and return a call to our get, 0:39 pass in products/productID. 0:44 So now we're gonna be returning the product back from the server. 0:48 Let's go ahead and utilize this by going back to our page.tsx for 0:52 the single product, and firstly, let's go ahead and now call 0:56 this server function by setting a const 1:00 product equal to await getProduct, 1:04 and we simply pass in the product ID, which we 1:08 know we can extract from the params object that Next.js 1:12 is passing into us. We simply need to coerce this into a 1:16 number, so we'll add the unary plus operator. 1:20 Now we can get some type inference for this product, as we know, by going 1:24 back to getProduct and providing the product 1:27 interface into get, so we know we're getting back the 1:31 product object now. Let's go ahead and refactor our 1:35 JSX to now actually render the product 1:39 that we are on. So to do this, I'm gonna use the Material 1:43 UI stack and give it a gap of three. 1:47 I'll also give a margin bottom of two rem just to 1:51 give some spacing at the bottom. 1:55 Now, inside of this stack, I'll firstly introduce a topography 1:59 component for Material UI, and let's use the H2 2:03 variant to output the 2:06 product.name. So we can access the 2:10 product name. Let's now go ahead and check to see just in our
The rest of the transcript is for members.
Sign in 