From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Dynamic product details rendering using API

Dynamic product details rendering using API - Next.js Tutorial

From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Start my 1-month free trial Buy for my team

Dynamic product details rendering using API

“

In the previous lecture, we have created the fetch product details API on the admin side. Now in this lecture, we will call the API and fetch the product data to render it. So first, I will navigate to the client folder and inside product actions.js, let me create the get product by ID function with async and receive ID as product ID. And let me fetch the product details by saying const response that is res is equal to await fetch base URL slash API slash products slash dollar product ID. Next I will convert the response into the JSON format, so const data await response.json and let's also return the data. Alright, now let's save and open the page JSX file, making the component asynchronous by adding an async directive. Then I will destructure the params from the props. Now I will destructure product id from params. And then I will fetch the product details by calling get product by id server action. So I'll say const product is equal to await get product by id product id. And here I…

Contents