Skip to content

imranhsayed/nextjs-woocommerce-restapi

Repository files navigation

🎨 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

  • Home Page
  • Single Product Page With Gallery Carousel.
  • Cart Page
  • Checkout Page with Stripe Payment Gateway Integration.
  • REST API endpoints.
  • Header and Footer in Next.js fetching from WordPress Menu items.
  • WordPress Widgets displayed on Next.js frontend.
  • Site title, tagline, copyright text, social links sourced from WordPress.
  • Yoast SEO support
  • Next.js Image component, that has image optimization at request time
  • Incremental Static (Re)generation and automatic creation of New Static product pages without having to re-build next.js the application.
  • Gutenberg styles support
  • Blog Page with Pagination
  • Single Post
  • Pages
  • 404 Page
  • Display Comments
  • Post a Comment ( using a Comment Form )
  • Post Preview ( Coming Soon )
  • Product Pagination ( Coming Soon )
  • Load More Products ( Coming Soon )
  • Authentication with JWT and Http Only Cookie implementation. ( Coming Soon )
  • Login feature for WP Post Preview in Next.js ( Coming Soon )

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