Repository files navigation

Using Next.js, TypeScript and styled-components.

The idea behind this repo was to showcase the power ofNext.js by building a frontend forWooCommerce using nothing butWoo's REST API only. This means truly headless and secure WooCommerce without any redirects to checkouts etc. In a trueJamstack fashion.

• 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 usingSWR.
• WooCommerce REST API abstraction usingNext's API routes.
• JWT based authentication for data fetching / endpoint protection.
• Cart system usingCoCart plugin.
• Customer registration and authentication usingNextAuth.js.
• Checkout system usingStripe as a payment method example.

Tested with Wordpress v6.4.1 WooCommerce v8.3.0 and PHP v7.4.3

Install required plugins on your Wordpress:

• WooCommerce (obviously)
• JWT Authentication for WP REST API
• Password Reset with Code for WordPress REST API (to be implemented)
• CoCart - Decoupling WooCommerce Made Easy
• CoCart – CORS Support

Make sure Permalinks are set toPost Name (Settings -> Permalinks). Also make sure yourJWT Authentication for WP REST API plugin is configured correctly.You will also need to add a shipping method toLocations not covered by your other zones for now.

Lastly, you'll need to import some products. For testing you can use sample data from Woohttps://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.comNEXTAUTH_URL=http://localhost:3000 // change to actual production urlWP_JWT_AUTH_SECRET_KEY=your-random-secretNEXTAUTH_SECRET_KEY=your-another-random-secretNEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your-stripe-publishable-keySTRIPE_SECRET_KEY=your-stripe-secret-key

Notice thatNEXT_PUBLIC_WP_API_URL andNEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY should haveNEXT_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 inwp-config.php when configuring "JWT Authentication for WP REST API" plugin.

Finallynpm run dev.

• 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

MIT License