From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Unlock this course with a free trial

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

Switching from API to database data + image optimization

Switching from API to database data + image optimization

From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Start my 1-month free trial Buy for my team

Switching from API to database data + image optimization

“

Hello and welcome! In this session, we are going to take a significant step in developing our Next.js application. Our goal is to replace the static or API-fetched data on our courses page with dynamic content pulled directly from our own database. This will make our application more robust, scalable, and easier to manage. You will set up a database connection in a Next.js server component, write an SQL query to fetch the data, and then pass that data to client-side components to render a beautiful and responsive course grid. Let's get started. Let's add an import statement to bring in the database connection. By importing db, we make the connection instance available, allowing us to query the database directly. Okay, let's modify the getCourses function. The current implementation uses fetch to get data from an external API endpoint. Since our goal is to get data directly from our local database, this network request is no longer needed. Let's empty this function and clear the way to…

Contents