Transitioning from Dummy APIs to Custom API Integration in Next.js

Monday, December 9, 2024 – Over the past week, I transitioned from using an online dummy JSON API to integrating a custom API into the website under development. Initially, the dummy API was instrumental in building the website’s basic layout. Once that phase was complete and a custom API was developed, I began implementing API calls into the project. However, before proceeding with the integration, I needed to synchronize data into the MongoDB database. After completing the sync, I referred to the guide shared by Mr. Peter for further implementation.

Previously, while using the dummy JSON API, I utilized a fetch function that allowed me to retrieve data without relying on useEffect, enabling the page to remain server-rendered. Unfortunately, this approach did not work with the custom API integration. After multiple attempts to implement server-side rendering for the custom API, the approach still failed. Consequently, I decided to switch to using useEffect for client-side rendering as a temporary solution, with plans to revisit and resolve the issue in the future.

Working with the API in Next.js required me some adjustment, particularly in understanding the exceptions being thrown and the proper way to handle them. The custom API created by Mr. Peter also includes admin functionalities such as updating records. By the end of the week, I was able to replace all the previous dummy API calls such as retrieving lists, fetching data by code, and updating entries with our own API.