Ecommerce with Next Js and WordPress

Building an e-commerce site API is a complex process. You can create it using various CMS strapi.js or commerce.js or you can create your own API with the help of Node Js and Express Js, but these CMS does not provide a scalable approach for an e-commerce site, whereas WordPress gives us various options which we can use and customize easily to fit our purpose.
Why WordPress
  • Woocommerce Plugin => We can easily convert our WordPress to a fully pledged e-commerce store using this plugin within few steps.
  • Custom Rest Api =>Wordpress Provide us a way to create our own Custom Rest API endpoints.
  • User-Friendly => Almost every web developer or client is familiar with WordPress.
  • Easy to set up => WordPress is fairly easy to set up, than any other CMS you will work with.
  • Setup
    WordPress Setup
    I will assume that you have knowledge of installing WordPress and MySQL on your local machine.
    After the installation of WordPress now you have to install a plugin named woocommerce which will convert your site into an e-commerce store. After that follow the following steps
  • Download and Install the Custom Rest API plugin from this link.

  • Install woocommerce and enable Rest API in woocommerce plugin .

  • This will generate an API key, copy it to env. local file as shown below

  • NEXT_PUBLIC_WP="http://localhost/wordpress/wp-json"
    NEXT_PUBLIC_WOO_COM="http://localhost/wordpress"
    #woocommerce API keys
    NEXT_PUBLIC_CUSTOMER_KEY=WoocommerceCustomerKey
    NEXT_CUSTOMER__SECRET_KEY=WoocommerceSecretKey
    
    #stripe keys 
    NEXT_STRIPE_KEY=Stripe Secret Keys
    NEXT_PUBLIC_STRIPE_KEY=Stripe Publishable key
    Why I Have Used Custom Plugin
  • Almost all the things which I am requesting from my custom API can be achieved through the current woocommerce package in next.js, but the woocommerce package also provides some unnecessary and sensitive data like the file link for digital products. This can lead to various securities issues, also the response time is reduced due to the population of unrequired data in every request.

  • Woocommerce Rest API is wonderful but it still not provide a way for us to calculate cart items
    through the rest of API, maybe this will be added in the future I guess. I have created a route in my plugin that will provide the product details. you can learn more about this in my plugin documentation.

  • For checking the validity of coupons and orders ids of the customer for some securities purposes.

  • Demo
    Home page
    Home Page
    Product page
    product page
    Account page
    Cart Page
    Checkout Page

    38

    This website collects cookies to deliver better user experience

    Ecommerce with Next Js and WordPress