Next.js WooCommerce Storefront Theme

Using Next.js, TypeScript and Styled-components.

WIP

The Goal

The idea behind this repo was to showcase the power of Next.js by building a frontend for WooCommerce using nothing but Woo's REST API only. This means truly headless and secure WooCommerce without any redirects to checkouts etc. In a true Jamstack fashion.

Features

• WooCommerce Storefront theme inspired responsive design.
• Static page generation using getStaticProps and getStaticPaths for SEO and performance.
• Client side fetching of dynamic data like prices / account details using SWR.
• WooCommerce REST API abstraction using Next's API routes.
• JWT based authentication for data fetching / endpoint protection.
• Cart system using CoCart plugin.
• Customer registration and authentication using NextAuth.js.
• Checkout system using Stripe as a payment method example.

Demo

Live demo: https://nextjs-woocommerce.netlify.app

How to use

Install required plugins on your Wordpress:

• WooCommerce (obviously)
• JWT Authentication for WP REST API
• Cocart Lite
• Password Reset with Code for WordPress REST API (to be implemented)

Change Permalinks to Post Name (Settings -> Permalinks). Also make sure your JWT Authentication for WP REST API plugin is configured correctly.

You'll need to import some products. For testing you can use sample data from Woo https://docs.woocommerce.com/document/importing-woocommerce-sample-data/ just like I did.

To test in-app payments you'll need to register a Stripe account for the publishable key and secret. (https://stripe.com/docs/keys)

Next clone this repo, cd into it and npm install.

Create .env.local file in the root of the project.

It should consist of

NEXT_PUBLIC_WP_API_URL=https://example.com
NEXTAUTH_URL=http://localhost:3000 // change to actual production url
WP_JWT_AUTH_SECRET_KEY=your-random-secret
NEXTAUTH_SECRET_KEY=your-another-random-secret
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your-stripe-publishable-key
STRIPE_SECRET_KEY=your-stripe-secret-key

Notice that NEXT_PUBLIC_WP_API_URL and NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY should have NEXT_PUBLIC prefix, since these variables need to be exposed to the browser.

WP_JWT_AUTH_SECRET_KEY which will be used to sign jwt should match the one you define in wp-config.php when configuring "JWT Authentication for WP REST API" plugin.

Finally npm run dev.

Note: In case you're not getting the x-cocart-api key when calling CoCart endpoint from a response header, allow cross origin headers using https://github.com/co-cart/co-cart-tweaks

Deployment

You can easily deploy on Netlify using Next.js Build Plugin.

Just make sure you set your env variables. For more details refer to https://www.netlify.com/blog/2020/12/10/environment-variables-in-next.js-and-netlify/.

Todo

• User registration and login functionality.
• Dynamic prices using SWR (client side data fetching).
• Shipping options.
• Products pagination.
• User specific cart.
• User dashboard (orders, addresses, password reset).
• Pages for categories.
• Blog page.
• Image optimization.
• Filters.
• Coupons system.
• Product reviews.
• Wishlist.
• Search.
• More payment methods.
• Tests

Contributions are welcome

MIT License