Next.js Ecommerce site with WooCommerce backend

Live URL: https://next-woocommerce.dfweb.no

Table Of Contents (TOC)

• Installation
• WordPress GraphQL CORS
• Features
• Design System
• Lighthouse Performance Monitoring
• Security
• Issues
• Troubleshooting
• TODO
• Future Improvements

Installation

1. Install and activate the following required plugins, in your WordPress plugin directory:

• WooCommerce Ecommerce for WordPress.
• WPGraphQL Exposes GraphQL for WordPress.
• GraphQL for eCommerce (WooGraphQL) Adds WooCommerce functionality to a WPGraphQL schema.
• Algolia WooCommerce Indexer WordPress plugin coded by me. Sends WooCommerce products to Algolia. Required for search to work.

Optional plugin:

• headless-wordpress Disables the frontend so only the backend is accessible. (optional)

The current release has been tested and is confirmed working with the following versions:

• WordPress version 7.1.3
• WooCommerce version 11.2.1
• WP GraphQL version 2.24.0
• WooGraphQL (GraphQL for eCommerce) version 1.0.3

2. For debugging and testing, install either:

   https://addons.mozilla.org/en-US/firefox/addon/apollo-developer-tools/ (Firefox)

   https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm (Chrome)

3. Make sure WooCommerce has some products already

4. Clone or fork the repo and modify .env.example and rename it to .env

   Then set the environment variables accordingly in Vercel or your preferred hosting solution.

   See https://vercel.com/docs/environment-variables

5. Modify the values according to your setup

6. Start the server with pnpm run dev

7. Enable COD (Cash On Demand) payment method in WooCommerce

8. Add a product to the cart

9. Proceed to checkout (Gå til kasse)

10. Fill in your details and place the order

WordPress GraphQL CORS

When the storefront and WordPress use different origins, the GraphQL endpoint must explicitly allow the storefront origin and credentialed requests. A wildcard allowed origin does not work with this application's cookie-based authentication.

This repository includes a small WordPress must-use plugin for deployments that need this configuration. Install it on the WordPress server and configure the allowed origins separately for each customer and environment; the plugin does not hardcode deployment URLs or trust any origins by default.

After uploading the plugin, open Settings → GraphQL CORS in WordPress admin.

Enter one trusted frontend origin per line and save. No server configuration file edits are required.

These are frontend origins, not the WordPress backend URL. Do not include paths, trailing slashes, or wildcards. Add any other staging/preview origin explicitly only when it should be trusted. An empty list blocks cross-origin storefront requests and triggers an admin warning. Clear server/CDN caches after changing the configuration, then reload the storefront.

See the WordPress CORS setup guide for installation, sample configuration, verification, and troubleshooting. No third-party CORS plugin is required. If another plugin, web server, or CDN already manages CORS, avoid overlapping or conflicting rules. Deploying the Next.js application alone does not install the WordPress plugin.

Features

• Next.js version 16.1.6
• React version 19.2.4
• Typescript
• Tests with Playwright
• Connect to Woocommerce GraphQL API and list name, price and display image for products
• Support for simple products and variable products
• Cart handling and checkout with WooCommerce using Zustand for state management
  • Persistent cart state with localStorage sync
  • Efficient updates through selective subscriptions
  • Type-safe cart operations
  • Cash On Delivery payment method
• Algolia search (requires algolia-woo-indexer)
• Meets WCAG accessibility standards where possible
• Placeholder for products without images
• State Management:
  • Zustand for global state management
  • Apollo Client with GraphQL
• React Hook Form
• Native HTML5 form validation
• Animations with Framer motion, Styled components and Animate.css
• Loading spinner created with Styled Components
• Shows page load progress with Nprogress during navigation
• Fully responsive design
• Category and product listings
• Show stock status
• Pretty URLs with builtin Nextjs functionality
• Tailwind 3 for styling
• JSDoc comments
• Automated Lighthouse performance monitoring
  • Continuous performance, accessibility, and best practices checks
  • Automated reports on every pull request
  • Performance metrics tracking for:
    • Performance score
    • Accessibility compliance
    • Best practices adherence
    • SEO optimization
    • Progressive Web App readiness
• Product filtering:
  • Dynamic color filtering using Tailwind's color system
  • Mobile-optimized filter layout
  • Accessible form controls with ARIA labels
  • Price range slider
  • Size and color filters
  • Product type categorization
  • Sorting options (popularity, price, newest)

Design System

This project uses a custom design system built with Tailwind CSS design tokens. The system is defined in tailwind.config.js and globals.css.

Color Palette

The palette uses a muted slate-blue primary with warm neutral surfaces — chosen to feel calm, Nordic, and appropriate for a home goods store.

Token	Hex	Usage
primary	#3B6B8A	Buttons, links, focus rings, active states
primary-light	#5A8BA8	Hover accents, info states
primary-dark	#254D6B	Mobile nav, button hover, dark accents
accent	#4A8F8F	Secondary accent (teal)
surface	#FAF9F7	Page background, cards, inputs (warm off-white)
surface-alt	#F3F1ED	Image placeholders, alternating surfaces
border	#E5E2DC	All borders and dividers
text	#2C2C2C	Primary body text (warm near-black)
text-muted	#6B6862	Secondary text, descriptions
text-light	#9C9890	Tertiary text, strikethrough prices
success	#2D8A5E	Stock status, success messages
warning	#C4882A	Warning states
error	#B83B2A	Sale prices, errors, destructive actions

Typography

• Uses Tailwind's default system font stack
• Type scale defined from text-xs (0.75rem) to text-5xl (3rem)
• Hierarchy rules: product card title text-xl font-bold > price text-lg, detail page h1 text-2xl md:text-3xl font-light > card title

Accessibility

• Global focus-visible ring (2px solid primary) on all interactive elements
• prefers-reduced-motion: reduce disables all animations and transitions
• Form inputs display inline error messages with role="alert" and aria-invalid
• Required fields marked with asterisks
• Proper type (email, tel) and autocomplete attributes on checkout inputs
• Descriptive alt text on images
• disabled:cursor-not-allowed on buttons
• Semantic HTML throughout (<nav>, <main>, <section>, <label htmlFor>)

Button Variants

Variant	Appearance	Use Case
primary	Solid blue (bg-primary)	Main CTAs — KJØP, GÅ TIL KASSE, BESTILL
secondary	Solid red (bg-error)	Destructive actions — Fjern
hero	White on dark overlay	Hero section CTA
filter	Bordered, toggleable	Size filter buttons
reset	Light gray surface	Reset filters

All buttons include hover, active:scale-[0.98], focus-visible, and disabled states with duration-200 transitions.

CSS Custom Properties

Design tokens are also available as CSS custom properties in globals.css for use outside Tailwind:

var(--color-primary)      /* #3B6B8A */
var(--color-surface)      /* #FAF9F7 */
var(--color-text)         /* #2C2C2C */
var(--color-error)        /* #B83B2A */

Lighthouse Performance Monitoring

This project uses automated Lighthouse testing through GitHub Actions to ensure high-quality web performance. On every pull request:

• Performance, accessibility, best practices, and SEO are automatically evaluated
• Results are posted directly to the pull request
• Minimum score thresholds are enforced for:
  • Performance: Analyzing loading performance, interactivity, and visual stability
  • Accessibility: Ensuring WCAG compliance and inclusive design
  • Best Practices: Validating modern web development standards
  • SEO: Checking search engine optimization fundamentals
  • PWA: Assessing Progressive Web App capabilities

View the latest Lighthouse results in the GitHub Actions tab under the "Lighthouse Check" workflow.

Accessibility Testing (pa11y)

In addition to Lighthouse, this project runs dedicated accessibility testing with pa11y through GitHub Actions (the "A11y" workflow). On every push and pull request to the main/master branch:

• The app is built and started locally, then scanned with pa11y against its main public pages:
  • / (home)
  • /produkter (products)
  • /kategorier (categories)
  • /handlekurv (cart)
  • /kasse (checkout)
  • /logg-inn (login)
• Reports for each page are uploaded as workflow artifacts (pa11y-reports)
• The job fails if any accessibility errors are detected

Note: Dynamic product and category pages (/produkt/[slug], /kategori/[slug]) are not scanned in CI because they depend on a live WooCommerce GraphQL backend that may be unreachable during the workflow. Accessibility issues are almost always template-level, so scanning the shared pages above provides equivalent coverage. The authenticated account page (/min-konto) is also excluded since it requires login.

View the latest accessibility results in the GitHub Actions tab under the "A11y" workflow.

Security

This project runs automated OWASP security scanning on every push and pull request via GitHub Actions:

Scan	Tool	What It Catches
🔑 Secret Detection	gitleaks	Hardcoded API keys, passwords, tokens, private keys
🔍 SAST	Semgrep	OWASP Top 10 + React/Next.js-specific vulnerabilities
📦 Dependencies	Trivy	Known CVEs in npm packages (CRITICAL/HIGH)

Custom Semgrep rules cover OWASP categories A01–A10 including XSS prevention, injection detection, authentication checks, SSRF protection, and security misconfiguration. View results in the GitHub Actions tab under the "OWASP Security Scan" workflow.

Troubleshooting

Cross-origin GraphQL requests are blocked

Follow the WordPress CORS setup guide. Configure CORS on the GraphQL server, not through frontend response headers, and keep cookie credentials enabled for authentication.

I am getting a cart undefined error or other GraphQL errors

Check that you are using the latest version of the wp-graphql-woocommerce plugin

The products page isn't loading

Check the attributes of the products. Right now the application requires Size and Color.

Issues

Overall the application is working as intended, but it has not been tested extensively in a production environment. More testing and debugging is required before deploying it in a production environment.

With that said, keep the following in mind:

• Currently only simple products and variable products work without any issues. Other product types are not known to work.
• Only Cash On Delivery (COD) is currently supported. More payment methods may be added later.

This project is tested with BrowserStack.

TODO

• Implement UserRegistration.component.tsx in a registration page
• Add user dashboard with order history
• Add Cloudflare Turnstile on registration page
• Ensure email is real on registration page
• Add total to cart/checkout page
• Copy billing address to shipping address
• Hide products not in stock