Next.js is a React meta-framework with features that simplify the process of building production-ready web apps. You will see how to build a REST API in Next.js and consume the data from that API on a Next.js page.
Create a Next.js Project Using create-next-app
You can create a new Next.js project using the create-next-app CLI tool. It installs the necessary packages and files to get you started with building a Next.js application.
Run this command in a terminal to create a new Next.js folder called api-routes. You may receive a prompt to install create-next-app.
When the command finishes, open the api-routes folder to start creating the API routes.
API Routing in Next.js
API routes run on the server and have many uses like saving user data to a database or fetching data from an API without raising the CORS policy error.
In Next.js, you must create API routes inside the /pages/api folder. Next.js generates API endpoints for each of the files in this folder. If you add user.js to /pages/api, Next.js will create an endpoint at http://localhost:3000/api/user.
A basic Next.js API route has the following syntax.
You must export the handler function for it to work.
Creating API Routes
Create a new file called todo.js in the /pages/api folder to add an API route for todo items.
Mocking the Todo Database
To get the todos, you must create a GET endpoint. For simplicity. This tutorial uses an array of todo items instead of a database but feel free to use a database like MongoDB or MySQL.
Create the todo items in todo.js in the root folder of your application then add the following data.
These todo items are from the DummyJSON website, a REST API for mock data. You can find the exact data from this DummyJSON todos endpoint.
Next, create the API route in /pages/api/todos.js and add the handler function.
This route handles the GET and POST endpoints. It returns all the todos for the GET request and adds a todo item to the todo database for a POST request. For other methods, the handler returns an error.
Consuming API Routes in the Frontend
You have created an API endpoint that returns a JSON object containing an array of todos.
To consume the API, create a function called fetchTodos that retrieves data from the API endpoint. The function uses the fetch method but you can also use Axios to make API requests. Then call this function when you click a button.
The list in this snippet displays the todo items when they are fetched.
For the POST endpoint, create a new function called saveTodo that makes a POST request to the API. The fetch request stores the new todo item in the body and returns all the todo items including the new one. The saveTodo function then stores them in the todos state.
Then, create a form with a text input bar to receive the new todo item. The submit handler function of this form will call the saveTodo function.
The handler adds a new todo to the database every time a user submits the form. Also, this function updates the todos value using the data received from the API which in turn adds the new todo item to the list.
API Routing Is Just One of Next.js’s Strengths
You have seen how you build and use a Next.js API route. Now you can create a full stack application without leaving your Next.js project folder. API routing is one of the many benefits that Next.js provides.
Next.js also offers performance optimizations such as code splitting, lazy loading, and built-in CSS support. If you are building a website that needs to be fast and SEO friendly, you should consider Next.js.
