Skip to content

Getting Started

Welcome to NextPresser! This guide will help you get started with building a Next.js frontend for WordPress.

Overview

NextPresser is a modern headless e-commerce solution built with Next.js, WooCommerce, and Faust.js. This project provides a fully functional online store with authentication, cart management, checkout, and payment processing.

Features

  • Headless Architecture: Next.js frontend with WordPress/WooCommerce backend
  • Faust.js Integration: Seamless WordPress authentication and content management
  • WooCommerce Integration: Full e-commerce functionality via GraphQL
  • User Authentication: Login, registration, and account management
  • Shopping Cart: Persistent cart with session management
  • Checkout Flow: Complete checkout with billing, shipping, and payment processing
  • Stripe Integration: Secure payment processing with Stripe Elements
  • Product Catalog: Product listings, categories, and search
  • User Accounts: Order history, account details, and address management
  • Responsive Design: Mobile-first, modern UI built with Tailwind CSS

Prerequisites

Before you begin, ensure you have the following installed:

  • Node.js 20.x or higher
  • npm or yarn package manager
  • WordPress site (5.8 or higher)
  • PHP 7.4 or higher (for WordPress)
  • MySQL 5.7 or higher (for WordPress database)

Installation

Step 1: Clone the Repository

git clone <repository-url>
cd nw-nextjs-faust-woocommerce

Step 2: Install Next.js Dependencies

npm install

Step 3: Configure Environment Variables

Create a .env.local file in the root directory:

cp .env.example .env.local  # If you have an example file
# Or create .env.local manually

Add the following environment variables:

# Required: Your WordPress GraphQL endpoint
NEXT_PUBLIC_GRAPHQL_URL=http://localhost:8080/graphql

# Faust.js Configuration
# Your WordPress site URL (base URL, not the GraphQL endpoint)
NEXT_PUBLIC_WORDPRESS_URL=http://localhost:8080

# Plugin secret found in WordPress Settings->Faust
FAUST_SECRET_KEY=your-faust-secret-key-here

# Optional: Algolia Search (only if using search)
# NEXT_PUBLIC_ALGOLIA_APP_ID=your_algolia_app_id
# NEXT_PUBLIC_ALGOLIA_PUBLIC_API_KEY=your_algolia_public_key
# NEXT_PUBLIC_ALGOLIA_INDEX_NAME=your_index_name

# Optional: Placeholder images
NEXT_PUBLIC_PLACEHOLDER_SMALL_IMAGE_URL=https://via.placeholder.com/300
NEXT_PUBLIC_PLACEHOLDER_LARGE_IMAGE_URL=https://via.placeholder.com/800

# Stripe Configuration
# Publishable key - safe to use in frontend/client-side code
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...

# Stripe Gateway ID - usually 'stripe' but check your WooCommerce Stripe plugin settings
# Common values: 'stripe', 'stripe_cc', 'woocommerce_gateway_stripe'
NEXT_PUBLIC_STRIPE_GATEWAY_ID=stripe

# NOTE: The Stripe SECRET key (sk_test_...) should NOT be added here!
# Secret keys must only be stored in your WordPress/WooCommerce backend (server-side)
# Add the secret key in your WordPress admin: WooCommerce > Settings > Payments > Stripe

Step 4: Start Development Server

npm run dev

The application will be available at http://localhost:3000

WordPress Backend Setup

Required WordPress Plugins

Install and activate the following plugins in your WordPress site:

Core Plugins (Required)

Installation Order: Install and activate plugins in this order for best results.

  1. WooCommerce
  2. Purpose: E-commerce platform for WordPress
  3. Installation:
    • Go to Plugins → Add New
    • Search for "WooCommerce"
    • Click "Install Now" then "Activate"
  4. After Activation: Complete the WooCommerce setup wizard

  5. Version: Tested with WooCommerce 9.9.5+

  6. WP GraphQL

  7. Purpose: Exposes GraphQL API for WordPress
  8. Installation:
    • Go to Plugins → Add New
    • Search for "WPGraphQL"
    • Click "Install Now" then "Activate"
  9. After Activation:
    • Go to GraphQL → Settings
    • Enable "Public Introspection" (required for Faust.js)
    • Note your GraphQL endpoint URL (usually /graphql)

  10. Version: Tested with WP GraphQL 2.3.3+

  11. WP GraphQL WooCommerce

  12. Purpose: Adds WooCommerce functionality to WPGraphQL schema
  13. Installation: Download from GitHub releases and install via WordPress admin

  14. Version: Tested with WP GraphQL WooCommerce 0.19.0+

  15. WP GraphQL CORS

  16. Purpose: Enables CORS for GraphQL requests from your Next.js frontend
  17. Installation: Install via WordPress admin

  18. Critical: Must be configured correctly or Next.js won't be able to connect

  19. Faust.js WordPress Plugin

  20. Purpose: Provides authentication and API endpoints for Faust.js
  21. Installation: Install via WordPress admin
  22. After Activation: Configure Faust.js settings

Optional Plugins

  1. WPGraphQL Content Blocks
  2. Purpose: Enables Gutenberg block support in GraphQL
  3. Required: Only if you want to use WordPress blocks in your Next.js app

  4. Installation: See WPGraphQL Content Blocks Installation for detailed instructions

  5. Advanced Custom Fields (ACF)

  6. Purpose: For custom product fields and additional content fields

  7. Configuration: See WordPress Custom Fields Setup for detailed setup

  8. WooCommerce Stripe Payment Gateway

  9. Purpose: Required for Stripe payment processing
  10. Configuration: See Stripe Configuration Guide for detailed setup

For detailed WordPress plugin configuration, see the WordPress Setup Guide.

Next Steps