Repository files navigation

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

• 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 pageswithout 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 )

First clone/fork the repo and cd into it.

git clone https://github.com/imranhsayed/nextjs-woocommerce-restapi.gitcd nextjs-woocommerce-restapinpm cinpm run dev

• Install and Activate following WordPress Plugins:

• headless-cms
• woocommerce

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)

2. Add yourWC_CONSUMER_KEY andWC_CONSUMER_SECRET to the.env by followingWooCommerce > Settings > Advanced > REST API

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

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

• Stripe
• Getting Stripe API Keys

I useGit for versioning.

• Imran Sayed

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