Select Page

How to work with Magento’s Rest API in Next js

Rahul Chaudhary
Published: May 31, 2022

This blog will show an example of how we can implement Rest API in the next js with Magento 2.

We can easily create a REST API in our Next.js app by using the built-in API routes.

About Rest API

REST stands for Representational State Transfer. It’s a software architectural style for implementing web servicesWeb services implemented using the REST architectural style are known as the RESTful web services.

Create an app in Next js

To create the Next app you can visit our blog by clicking here.

We are also giving here commands to create the next app simply.

Searching for an experienced
Magento 2 Company ?
Read More


npx create-next-app rest_app
# or
yarn create next-app rest_app

After the installation follows the below steps to use Rest API.

Rest API implementation with Magento 2

Simply we can use Magento API using the below steps:

Create a page in pages folder pages/getToken.js and use the below code in your page.

For example, here we are getting customer token. To get the token we have to send username and password to validate at the Magento end. Details must be correct else you will get this message: “The account sign-in was incorrect or your account is disabled temporarily. Please wait and try again later.”

Let’s create a page with pages/getToken.js

import React, { useState, useEffect } from "react";
const getToken = () => {
  const [token, setToken] = useState();
  const credentials = {
    username: "email",
    password: "password",
  };
  useEffect(() => {
    try {
      fetch(
        "http://yourhost.com/rest/V1/integration/customer/token",
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(credentials),
        }
      )
        .then((res) => res.json())
        .then((data) => {
          setToken(data); // Here we are setting token in state to use in our component.
        });
    } catch (error) {
      console.error(error);
    }
  }, []);
  return (
    <div style={{ color: "green", textAlign: "center", fontWeight: "700" }}>
      {token ? "Customer Token: " + token : "Loading..."}
    </div>
  );
};
export default getToken;

Result will be like this:

Screenshot-from-2022-05-31-20-33-23
On Loading result
Screenshot-from-2022-05-31-20-33-24
Result with customer token

In the above code, we are using the useState hook to display customer token and useEffect hook is used to handle the request. We have passed a [] array to call it once.

Just copy and use it by changing your host and user credentials.

If you face any issues regarding this blog then please comment below.

Happy coding 🙂

Source: webkul.com