nextjs-woocommerce-restapi - GitLite

KO | EN

gitlite — search

#hacktoberfest #ai #go #android #machine-learning #linux #windows #kubernetes #awesome-list #vue #security #pytorch #openai #open-source

nextjs-woocommerce-restapi

(★ 353)

A React WooCommerce Project Example With REST API

File Explorer

Download Latest Version (.zip)

- - create-order.js
  - get-products.js
  - get-stripe-session.js
  - stripe-web-hook.js
- - [slug].js
  - index.js
- - [slug].js
- 404.js
- [...slug].js
- _app.js
- cart.js
- checkout.js
- index.js
- thank-you.js
- cart-spinner.gif
- favicon.ico
- vercel.svg
- - loading.js
- - fonts.scss
  - lato-v20-latin-700.eot
  - lato-v20-latin-700.svg
  - lato-v20-latin-700.ttf
  - lato-v20-latin-700.woff
  - lato-v20-latin-700.woff2
  - lato-v20-latin-900.eot
  - lato-v20-latin-900.svg
  - lato-v20-latin-900.ttf
  - lato-v20-latin-900.woff
  - lato-v20-latin-900.woff2
  - lato-v20-latin-900italic.eot
  - lato-v20-latin-900italic.svg
  - lato-v20-latin-900italic.ttf
  - lato-v20-latin-900italic.woff
  - lato-v20-latin-900italic.woff2
  - lato-v20-latin-regular.eot
  - lato-v20-latin-regular.svg
  - lato-v20-latin-regular.ttf
  - lato-v20-latin-regular.woff
  - lato-v20-latin-regular.woff2
- - index.scss
- - blog.js
  - icons-map.js
  - miscellaneous.js
  - pagination.js
  - products.js
  - slug.js
- - checkout.js
  - comments.js
  - is-empty.js
.env-example
.gitignore
.nvmrc
LICENSE.md
next.config.js
package-lock.json
package.json
postcss.config.js
README.md
tailwind.config.js
yarn.lock

# Installation Guide

1. Get the code

git clone https://github.com/imranhsayed/nextjs-woocommerce-restapi

Downloads the entire project code from GitHub to your computer.

cd nextjs-woocommerce-restapi

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm ci

Type this command into your terminal and run it.

npm run dev

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

## 🎨 Next.js WooCommerce REST API
[![Project Status: Active.](https://www.repostatus.org/badges/latest/active.svg)](https://www.repostatus.org/#active)
![Stars](https://img.shields.io/github/stars/imranhsayed/nextjs-woocommerce-restapi?label=%E2%AD%90%20Stars)
![Forks](https://img.shields.io/github/forks/imranhsayed/nextjs-woocommerce-restapi?color=%23ff69b4)
![Contributors](https://img.shields.io/github/contributors/imranhsayed/nextjs-woocommerce-restapi?color=blue)
![Follow](https://img.shields.io/github/followers/imranhsayed?label=Please%20follow%20%20to%20support%20my%20work%20%F0%9F%99%8F&style=social)

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

## Features
- [x] Home Page
- [x] Single Product Page With Gallery Carousel.
- [x] Cart Page
- [x] Checkout Page with Stripe Payment Gateway Integration.
- [x] REST API endpoints.
- [x] Header and Footer in Next.js fetching from WordPress Menu items.
- [x] WordPress Widgets displayed on Next.js frontend.
- [x] Site title, tagline, copyright text, social links sourced from WordPress.
- [x] Yoast SEO support
- [x] Next.js Image component, that has image optimization at request time
- [x] Incremental Static (Re)generation and automatic creation of New Static product pages
without having to re-build next.js the application.
- [x] Gutenberg styles support
- [x] Blog Page with Pagination
- [x] Single Post
- [x] Pages
- [x] 404 Page
- [x] Display Comments
- [x] 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 )

## [Tutorial Course](https://www.youtube.com/playlist?list=PLD8nQCAhR3tSRwsvzRtogv9MFkEWo5d9c)

## [Live Demo Link](https://nextjs-woocommerce-restapi-virid.vercel.app/)

## Setup

First clone/fork the repo and cd into it.

```bash
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:

* [headless-cms](https://github.com/imranhsayed/headless-cms)
* [woocommerce](https://wordpress.org/plugins/woocommerce/)

## Configuration :wrench:

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](https://woocommerce.github.io/woocommerce-rest-api-docs/#authentication)

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
- [Stripe](https://dashboard.stripe.com/)
- [Getting Stripe API Keys](https://codeytek.com/create-stripe-checkout-in-next-js-stripe-session-stripe-webhook/)

## Versioning :bookmark_tabs:

I use [Git](https://github.com/) for versioning.

## Author :bust_in_silhouette:

* **[Imran Sayed](https://twitter.com/imranhsayed)**

## License :page_with_curl:

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