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

1. Woocommerce Plugin => We can easily convert our WordPress to a fully pledged e-commerce store using this plugin within few steps.
2. Custom Rest Api =>Wordpress Provide us a way to create our own Custom Rest API endpoints.
3. User-Friendly => Almost every web developer or client is familiar with WordPress.
4. 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

Product page

Account page

Cart Page

Checkout Page

Comments

[odaymusic]

Hello, can you convert my site to the next? I have some basic add-ons like WCFM multi-vendors and Feeevent for sale and reservation I want the store and these two add-ons by Next

[Sarthak Kaushik]

contact me on insta @__iamsarthak

[Jonathan Martínez]

Wow interesting. A video course on how to build it would be great!

[Sarthak Kaushik]

I know a video tutorial would be great but i am not a youtuber so it's not possible for me to create it