alexmaslarski / nextjs-woocommerce-restapi Goto Github PK

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

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 ( Coming Soon )
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 ( Coming Soon )

Coming Soon.

First clone/fork the repo and cd into it.

git clone https://github.com/imranhsayed/nextjs-woocommerce-restapi.git
cd nextjs-woocommerce-restapi
npm install
npm 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 your WC_CONSUMER_KEY and WC_CONSUMER_SECRET to the .env by following WooCommerce > 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.

I use Git for versioning.

• Imran Sayed

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