/nextjs-woocommerce-restapi

A React WooCommerce Project Example With REST API

Primary LanguageJavaScriptMIT LicenseMIT

🎨 Next.js WooCommerce REST API

Project Status: Active. Stars Forks Contributors Follow

  • React WooCommerce Theme, using Decoupled Architecture in Next.js
  • Backend in WordPress
  • Front end in React.
  • Data is Fetched through REST API.

Features

  1. Home Page, Blog Page, Post Page
  2. Post Preview ( Coming Soon )
  3. Product Pagination ( Coming Soon )
  4. Load More Products ( Coming Soon )
  5. REST API endpoints.
  6. Header and Footer in Next.js fetching from WordPress Menu items.
  7. WordPress Widgets displayed on Next.js frontend.
  8. Site title, tagline, copyright text, social links sourced from WordPress.
  9. Next.js Image component, that has image optimization at request time
  10. Authentication with JWT and Http Only Cookie implementation. ( Coming Soon )
  11. Login feature for WP Post Preview in Next.js ( Coming Soon )
  12. Incremental Static (Re)generation and automatic creation of New Static post pages without having to re-build next.js the application. ( Coming Soon )
  13. Gutenberg styles support
  14. Checkout Page with Stripe Payment Gateway Integration.

Tutorial Course

Live Demo Link

Setup

First clone/fork the repo and cd into it.

git clone https://github.com/imranhsayed/nextjs-woocommerce-restapi.git
cd nextjs-woocommerce-restapi
npm ci
npm run dev

Add Headless features for WordPress

  • Install and Activate following WordPress Plugins:

Configuration 🔧

  1. (Required) Create a .env file taking reference from .env-example and update your WordPressSite URL and Frontend next.js URL.
  • NEXT_PUBLIC_WORDPRESS_URL=https://example.com
  • NEXT_PUBLIC_SITE_URL=http://localhost.com ( This will be your frontend Next.js URL)

  1. Add your WC_CONSUMER_KEY and WC_CONSUMER_SECRET to the .env by following WooCommerce > Settings > Advanced > REST API

  2. In your WordPress Dashboard, Go to Settings > General > Site Address (URL) ( Set this to Frontend URL e.g. http://localhost:3000 during development )

  3. Create the Header and Footer Menus In WordPress Dashboard and set them to HCMS Header menu and HCMS Footer Menu respectively.

Useful Links

Versioning 📑

I use Git for versioning.

Author 👤

License 📃

This project is licensed under the MIT License - see the LICENSE.md file for details