Next.js WooCommerce REST API

Features

Home Page, Blog Page, Post Page
Post Preview ( Coming Soon )
Product Pagination ( Coming Soon )
Load More Products ( Coming Soon )
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.
Next.js Image component, that has image optimization at request time ( Coming Soon )
Authentication with JWT and Http Only Cookie implementation. ( Coming Soon )
Login feature for WP Post Preview in Next.js ( Coming Soon )
Incremental Static (Re)generation and automatic creation of New Static post pages
without having to re-build next.js the application. ( Coming Soon )
Gutenberg styles support ( 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

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

Add your WC_CONSUMER_KEY and WC_CONSUMER_SECRET to the .env by following WooCommerce > Settings > Advanced > REST API
In your WordPress Dashboard, Go to Settings > General > Site Address (URL) ( Set this to Frontend URL e.g. http://localhost:3000 during development )
Create the Header and Footer Menus In WordPress Dashboard and set them to HCMS Header menu and HCMS Footer Menu respectively.