How to create Product page using Prestashop API in NextJs

How to use Next.JS with Prestashop Hello Guys, Today in this blog we will see all about the API integration of the Prestashop product detail page with the Next JS.

Let’s get started, as we think you will find this blog to be interactive.

PrestaShop is a free, open-source eCommerce platform that lets users quickly build and customize online stores, making website development simple, flexible, and accessible.

First, we’ll have some discussion about NextJS and begin by introducing the concept of Prestashop and its API.

What is NextJS?

Next Js is a full-stack web development react framework. Which is a free and open-source front-end react library framework for building user interfaces based on UI components.

All the features needed to create a variety of websites and apps are provided by NextJs, including routing, static and server rendering, static-side regeneration, and support for Typescript.

For CSS design if you want to make a good user interface you can choose your desired Dependencies for the design part.

About Prestashop API

Basically, the Prestashop API is normally the Rest API which provides the e-commerce product services and serves as the bridge between your application and the Prestashop Platform.

Starting Out

Start by setting up your Next.js project using a proper setup guide. The project also uses Tailwind CSS for styling and UI design.

Global Variable Setup – We’re going to create a file named .env in the root directory and add the following code.

//------------.env--------------//
PRESTASHOP_ENDPOINT=<PRESTASHOP_ENDPOINT>
APP_URL=https://myprestashop.com/
WEBSERVICE_KEY=<Webservice_Key>
IMAGE_DOMAIN=<myprestashop.com>

You also need to define environment variables in your next.config.js file. If you don’t define them, you won’t be able to use these variables in the front end.

/** @type {import('next').NextConfig} */
const nextConfig = {
  env: {
    WEBSERVICE_KEY: process.env.WEBSERVICE_KEY,
    PRESTASHOP_ENDPOINT: process.env.PRESTASHOP_ENDPOINT,
    IMAGE_DOMAIN: process.env.IMAGE_DOMAIN,
  },
  images: {
    domains: [process.env.IMAGE_DOMAIN],
  },
  reactStrictMode: true,
}

module.exports = nextConfig

Ensure you have required API endpoints like getproductpage and authenticate. To fetch data from the PrestaShop API, use the Fetch API or a library like Axios.

API Response (The mentioned image demonstrates PrestaShop’s product detail page’s API response):

Create a Route file to Display the Product Detail Page:

The following code will be added to a file called [urlKey].js that will be created in pages/product/[urlKey].js.

//---------------pages/product/[urlkey].js-----------//

import Image from "next/image";
import React from "react";

const Product = ({ product }) => {
  const { image_links, name, price, description_short, quantity } = product;

  return (
    <React.Fragment>
      <div className="mt-6">
        <div className="lg:px-24 md:px-12 px-3">
          <div className="container mx-auto px-4">
            <div className="lg:col-gap-12 xl:col-gap-16 mt-3 grid grid-cols-1 gap-12 lg:mt-12 lg:grid-cols-5 lg:gap-16">
              <div className="lg:col-span-3 lg:row-end-1">
                <div className="lg:order-2 ">
                  <div className="max-w-xl overflow-hidden rounded-lg">
                    <Image
                      className="h-[70vh]"
                      src={image_links?.image_link?.[0]?.large}
                      width={500}
                      height={230}
                      priority={true}
                      alt="loading"
                    />
                  </div>
                </div>
              </div>
              <div className="lg:col-span-4 lg:row-span-2 lg:row-end-2">
                <h1 className="sm: text-2xl font-bold text-gray-900 sm:text-3xl">
                  {name}
                </h1>
                <div className=" mt-3">
                  <p className=" text-sm font-medium text-gray-500">
                    In Stock : {quantity}
                  </p>
                </div>
                <h2 className="mt-3 text-base text-gray-900">Description </h2>
                <div className="mt-3  flex select-none flex-wrap items-center gap-1">
                  <section>
                    <div
                      dangerouslySetInnerHTML={{
                        __html: description_short.toString(),
                      }}
                    ></div>
                  </section>
                </div>
                <div className="mt-10 flex flex-col items-center justify-between space-y-4 border-t border-b py-4 sm:flex-row sm:space-y-0">
                  <div className="flex items-end">
                    <h1 className="text-3xl font-bold">{price}</h1>
                  </div>
                  <button
                    type="button"
                    className="inline-flex items-center justify-center rounded-md border-2 border-transparent bg-gray-900 bg-none px-12 py-3 text-center text-base font-bold text-white transition-all duration-200 ease-in-out focus:shadow hover:bg-gray-800"
                  >
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      className="shrink-0 mr-3 h-5 w-5"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                      strokeWidth={2}
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
                      />
                    </svg>
                    Add to cart
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
};

export default Product;

export async function getStaticPaths() {
  let paths = [];
  try {
    const data = await fetchProduct();
    const products = data?.products?.items || [];
    paths = products.map((product) => ({
      params: { urlKey: product?.url_key || "404" },
    }));
  } catch (error) {
    console.error("Error fetching data from API:", error);
  }

  return { paths, fallback: "blocking" };
}

export async function getStaticProps({ params }) {
  const productInfo = await fetchProduct(params?.urlKey);
  if (productInfo.length > 0) {
    return {
      notFound: true,
    };
  }
  return {
    props: {
      product: productInfo?.product,
    },
    revalidate: 100,
  };
}

const fetchProduct = async (urlKey = null) => {
  const URL = `${process.env.PRESTASHOP_ENDPOINT}/getproductpage?outputformat=json&width=720&id_product=${urlKey}&ws_key=${process.env.WEBSERVICE_KEY}`;
  const response = await fetch(URL, {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
    },
  });
  if (response.status !== 200) {
    throw new Error(`API request failed with status ${response.status}`);
  }
  return response.json();
};

You can see the result on http://localhost:3000