{"id":408610,"date":"2023-11-03T10:43:30","date_gmt":"2023-11-03T10:43:30","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=408610"},"modified":"2026-03-03T12:56:40","modified_gmt":"2026-03-03T12:56:40","slug":"how-to-create-product-page-using-prestashop-api-in-nextjs","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-to-create-product-page-using-prestashop-api-in-nextjs\/","title":{"rendered":"How to create Product page using Prestashop API in NextJs"},"content":{"rendered":"\n

How to use Next.JS with Prestashop<\/strong>  Hello Guys,<\/em> Today in this blog we will see all about the API integration of the Prestashop product detail page with the Next JS.<\/p>\n\n\n\n

Let’s get started, as we think you will find this blog to be interactive.<\/p>\n\n\n\n

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

First, we\u2019ll have some discussion about NextJS and begin by introducing the concept of Prestashop and its API.<\/p>\n\n\n\n

What is NextJS?<\/h3>\n\n\n\n

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.<\/p>\n\n\n\n

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

For CSS design if you want to make a good user interface you can choose your desired Dependencies for the design part.<\/p>\n\n\n\n

About Prestashop API<\/h3>\n\n\n\n

Basically, the Prestashop API<\/a> is normally the Rest API which provides the e-commerce product services and serves as the bridge between your application and the Prestashop Platform.<\/p>\n\n\n\n

Starting Out<\/h3>\n\n\n\n

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

Global Variable Setup \u2013<\/strong> We\u2019re going to create a file named .env in the root directory and add the following code.<\/p>\n\n\n\n

\/\/------------.env--------------\/\/\nPRESTASHOP_ENDPOINT=<PRESTASHOP_ENDPOINT>\nAPP_URL=https:\/\/myprestashop.com\/\nWEBSERVICE_KEY=<Webservice_Key>\nIMAGE_DOMAIN=<myprestashop.com><\/pre>\n\n\n\n
You also need to define environment variables in your next.config.js<\/strong> file.<\/strong> If<\/strong> you<\/strong> don’t<\/strong> define<\/strong> them,<\/strong> you<\/strong> won’t<\/strong> be able to use these variables in the front end.<\/p>\n\n\n\n
\/** @type {import('next').NextConfig} *\/\nconst nextConfig = {\n  env: {\n    WEBSERVICE_KEY: process.env.WEBSERVICE_KEY,\n    PRESTASHOP_ENDPOINT: process.env.PRESTASHOP_ENDPOINT,\n    IMAGE_DOMAIN: process.env.IMAGE_DOMAIN,\n  },\n  images: {\n    domains: [process.env.IMAGE_DOMAIN],\n  },\n  reactStrictMode: true,\n}\n\nmodule.exports = nextConfig<\/pre>\n\n\n\n
Ensure you have required API endpoints like getproductpage<\/strong> and authenticate. To fetch data from the PrestaShop<\/strong> API<\/strong>, use the Fetch API or a library like Axios<\/strong><\/a>.<\/p>\n\n\n\n
API Response (The mentioned image demonstrates PrestaShop’s product detail page\u2019s API response):<\/p>\n\n\n\n
\"Screenshot-from-2023-11-03-10-56-26\"<\/figure>\n\n\n\n
Create a Route file to Display the Product Detail Page:<\/strong><\/p>\n\n\n\n
The following code will be added to a file called [urlKey].js that will be created in pages\/product\/[urlKey].js.<\/p>\n\n\n\n
\/\/---------------pages\/product\/[urlkey].js-----------\/\/\n\nimport Image from "next\/image";\nimport React from "react";\n\nconst Product = ({ product }) => {\n  const { image_links, name, price, description_short, quantity } = product;\n\n  return (\n    <React.Fragment>\n      <div className="mt-6">\n        <div className="lg:px-24 md:px-12 px-3">\n          <div className="container mx-auto px-4">\n            <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">\n              <div className="lg:col-span-3 lg:row-end-1">\n                <div className="lg:order-2 ">\n                  <div className="max-w-xl overflow-hidden rounded-lg">\n                    <Image\n                      className="h-[70vh]"\n                      src={image_links?.image_link?.[0]?.large}\n                      width={500}\n                      height={230}\n                      priority={true}\n                      alt="loading"\n                    \/>\n                  <\/div>\n                <\/div>\n              <\/div>\n              <div className="lg:col-span-4 lg:row-span-2 lg:row-end-2">\n                <h1 className="sm: text-2xl font-bold text-gray-900 sm:text-3xl">\n                  {name}\n                <\/h1>\n                <div className=" mt-3">\n                  <p className=" text-sm font-medium text-gray-500">\n                    In Stock : {quantity}\n                  <\/p>\n                <\/div>\n                <h2 className="mt-3 text-base text-gray-900">Description <\/h2>\n                <div className="mt-3  flex select-none flex-wrap items-center gap-1">\n                  <section>\n                    <div\n                      dangerouslySetInnerHTML={{\n                        __html: description_short.toString(),\n                      }}\n                    ><\/div>\n                  <\/section>\n                <\/div>\n                <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">\n                  <div className="flex items-end">\n                    <h1 className="text-3xl font-bold">{price}<\/h1>\n                  <\/div>\n                  <button\n                    type="button"\n                    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"\n                  >\n                    <svg\n                      xmlns="http:\/\/www.w3.org\/2000\/svg"\n                      className="shrink-0 mr-3 h-5 w-5"\n                      fill="none"\n                      viewBox="0 0 24 24"\n                      stroke="currentColor"\n                      strokeWidth={2}\n                    >\n                      <path\n                        strokeLinecap="round"\n                        strokeLinejoin="round"\n                        d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"\n                      \/>\n                    <\/svg>\n                    Add to cart\n                  <\/button>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/React.Fragment>\n  );\n};\n\nexport default Product;\n\nexport async function getStaticPaths() {\n  let paths = [];\n  try {\n    const data = await fetchProduct();\n    const products = data?.products?.items || [];\n    paths = products.map((product) => ({\n      params: { urlKey: product?.url_key || "404" },\n    }));\n  } catch (error) {\n    console.error("Error fetching data from API:", error);\n  }\n\n  return { paths, fallback: "blocking" };\n}\n\nexport async function getStaticProps({ params }) {\n  const productInfo = await fetchProduct(params?.urlKey);\n  if (productInfo.length > 0) {\n    return {\n      notFound: true,\n    };\n  }\n  return {\n    props: {\n      product: productInfo?.product,\n    },\n    revalidate: 100,\n  };\n}\n\nconst fetchProduct = async (urlKey = null) => {\n  const URL = `${process.env.PRESTASHOP_ENDPOINT}\/getproductpage?outputformat=json&width=720&id_product=${urlKey}&ws_key=${process.env.WEBSERVICE_KEY}`;\n  const response = await fetch(URL, {\n    method: "GET",\n    headers: {\n      "Content-Type": "application\/json",\n    },\n  });\n  if (response.status !== 200) {\n    throw new Error(`API request failed with status ${response.status}`);\n  }\n  return response.json();\n};<\/pre>\n\n\n\n
You can see the result on http:\/\/localhost:3000<\/p>\n\n\n\n
\"Screenshot-from-2023-11-03-15-32-53\"<\/figure>\n\n\n\n
Start Prestashop Headless Development<\/a> with Webkul.<\/p>\n\n\n\n
Happy Coding \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/a><\/p>\n","protected":false},"author":377,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1173,198,13575,209,6357],"tags":[292,12682,2065,6883,14289],"class_list":["post-408610","post","type-post","status-publish","format-standard","hentry","category-api-2","category-javascript","category-next-js","category-prestashop","category-react-js","tag-api","tag-nextjs","tag-prestashop","tag-product-page","tag-reactjs"],"yoast_head":"\nHow to create Product page using Prestashop API in NextJs - Webkul Blog<\/title>\n<meta name=\"description\" content=\"How to use Next.JS with Prestashop\u00a0 Hello Guys,\u00a0Today in this blog we will see all about the API integration of the Prestashop product detail..\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/how-to-create-product-page-using-prestashop-api-in-nextjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create Product page using Prestashop API in NextJs - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"How to use Next.JS with Prestashop\u00a0 Hello Guys,\u00a0Today in this blog we will see all about the API integration of the Prestashop product detail..\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/how-to-create-product-page-using-prestashop-api-in-nextjs\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-03T10:43:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-03T12:56:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/11\/Screenshot-from-2023-11-03-10-56-26-1200x729.png\" \/>\n<meta name=\"author\" content=\"Rahul Chaudhary\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rahul Chaudhary\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-product-page-using-prestashop-api-in-nextjs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-product-page-using-prestashop-api-in-nextjs\/\"},\"author\":{\"name\":\"Rahul Chaudhary\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/07d5b40e4a4b5c6996d171e134826b75\"},\"headline\":\"How to create Product page using Prestashop API in NextJs\",\"datePublished\":\"2023-11-03T10:43:30+00:00\",\"dateModified\":\"2026-03-03T12:56:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-product-page-using-prestashop-api-in-nextjs\/\"},\"wordCount\":378,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-product-page-using-prestashop-api-in-nextjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/11\/Screenshot-from-2023-11-03-10-56-26-1200x729.png\",\"keywords\":[\"api\",\"nextjs\",\"prestashop\",\"product page\",\"reactjs\"],\"articleSection\":[\"API\",\"JavaScript\",\"next js\",\"prestashop\",\"react js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-create-product-page-using-prestashop-api-in-nextjs\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-product-page-using-prestashop-api-in-nextjs\/\",\"url\":\"https:\/\/webkul.com\/blog\/how-to-create-product-page-using-prestashop-api-in-nextjs\/\",\"name\":\"How to create Product page using Prestashop API in NextJs - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-product-page-using-prestashop-api-in-nextjs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-product-page-using-prestashop-api-in-nextjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/11\/Screenshot-from-2023-11-03-10-56-26-1200x729.png\",\"datePublished\":\"2023-11-03T10:43:30+00:00\",\"dateModified\":\"2026-03-03T12:56:40+00:00\",\"description\":\"How to use Next.JS with Prestashop\u00a0 Hello Guys,\u00a0Today in this blog we will see all about the API integration of the Prestashop product detail..\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-product-page-using-prestashop-api-in-nextjs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-create-product-page-using-prestashop-api-in-nextjs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-product-page-using-prestashop-api-in-nextjs\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/11\/Screenshot-from-2023-11-03-10-56-26.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/11\/Screenshot-from-2023-11-03-10-56-26.png\",\"width\":1489,\"height\":904,\"caption\":\"Screenshot-from-2023-11-03-10-56-26\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-product-page-using-prestashop-api-in-nextjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to create Product page using Prestashop API in NextJs\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/07d5b40e4a4b5c6996d171e134826b75\",\"name\":\"Rahul Chaudhary\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/40e957d926aaa241dc1de7dd09cfea4a0c86ed9fa29bb7eda51de1a8967864e7?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/40e957d926aaa241dc1de7dd09cfea4a0c86ed9fa29bb7eda51de1a8967864e7?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Rahul Chaudhary\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/rahulchaudhary766\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to create Product page using Prestashop API in NextJs - Webkul Blog","description":"How to use Next.JS with Prestashop\u00a0 Hello Guys,\u00a0Today in this blog we will see all about the API integration of the Prestashop product detail..","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/how-to-create-product-page-using-prestashop-api-in-nextjs\/","og_locale":"en_US","og_type":"article","og_title":"How to create Product page using Prestashop API in NextJs - Webkul Blog","og_description":"How to use Next.JS with Prestashop\u00a0 Hello Guys,\u00a0Today in this blog we will see all about the API integration of the Prestashop product detail..","og_url":"https:\/\/webkul.com\/blog\/how-to-create-product-page-using-prestashop-api-in-nextjs\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2023-11-03T10:43:30+00:00","article_modified_time":"2026-03-03T12:56:40+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/11\/Screenshot-from-2023-11-03-10-56-26-1200x729.png","type":"","width":"","height":""}],"author":"Rahul Chaudhary","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Rahul Chaudhary","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/how-to-create-product-page-using-prestashop-api-in-nextjs\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-product-page-using-prestashop-api-in-nextjs\/"},"author":{"name":"Rahul Chaudhary","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/07d5b40e4a4b5c6996d171e134826b75"},"headline":"How to create Product page using Prestashop API in NextJs","datePublished":"2023-11-03T10:43:30+00:00","dateModified":"2026-03-03T12:56:40+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-product-page-using-prestashop-api-in-nextjs\/"},"wordCount":378,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-product-page-using-prestashop-api-in-nextjs\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/11\/Screenshot-from-2023-11-03-10-56-26-1200x729.png","keywords":["api","nextjs","prestashop","product page","reactjs"],"articleSection":["API","JavaScript","next js","prestashop","react js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/how-to-create-product-page-using-prestashop-api-in-nextjs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/how-to-create-product-page-using-prestashop-api-in-nextjs\/","url":"https:\/\/webkul.com\/blog\/how-to-create-product-page-using-prestashop-api-in-nextjs\/","name":"How to create Product page using Prestashop API in NextJs - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-product-page-using-prestashop-api-in-nextjs\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-product-page-using-prestashop-api-in-nextjs\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/11\/Screenshot-from-2023-11-03-10-56-26-1200x729.png","datePublished":"2023-11-03T10:43:30+00:00","dateModified":"2026-03-03T12:56:40+00:00","description":"How to use Next.JS with Prestashop\u00a0 Hello Guys,\u00a0Today in this blog we will see all about the API integration of the Prestashop product detail..","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-product-page-using-prestashop-api-in-nextjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/how-to-create-product-page-using-prestashop-api-in-nextjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/how-to-create-product-page-using-prestashop-api-in-nextjs\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/11\/Screenshot-from-2023-11-03-10-56-26.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/11\/Screenshot-from-2023-11-03-10-56-26.png","width":1489,"height":904,"caption":"Screenshot-from-2023-11-03-10-56-26"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/how-to-create-product-page-using-prestashop-api-in-nextjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to create Product page using Prestashop API in NextJs"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/07d5b40e4a4b5c6996d171e134826b75","name":"Rahul Chaudhary","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/40e957d926aaa241dc1de7dd09cfea4a0c86ed9fa29bb7eda51de1a8967864e7?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/40e957d926aaa241dc1de7dd09cfea4a0c86ed9fa29bb7eda51de1a8967864e7?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Rahul Chaudhary"},"url":"https:\/\/webkul.com\/blog\/author\/rahulchaudhary766\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/408610","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/377"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=408610"}],"version-history":[{"count":11,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/408610\/revisions"}],"predecessor-version":[{"id":529168,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/408610\/revisions\/529168"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=408610"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=408610"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=408610"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}