Building an Independent E-commerce Site from Scratch with Codex: WordPress + Next.js + Cloudflare in Practice

Project Background and Technology Selection

Zhai Lujia (online alias Midhill), a programmer with 20 years of development experience, demonstrated in a Bilibili livestream how to use OpenAI Codex as an AI programming assistant to plan and launch an overseas independent e-commerce site from scratch. The project requirement came from an automotive wheel rim dealer who wanted to build an e-commerce site targeting overseas markets.

The core idea behind the technical architecture is: WordPress serves as a Headless CMS providing backend management and APIs, while Next.js serves as the frontend framework deployed to Cloudflare Workers. This architecture combines WordPress's powerful content management capabilities with the performance advantages of modern frontend frameworks.

A Headless CMS is an architectural pattern that completely decouples the content management backend from the frontend presentation layer. Traditional CMS platforms like WordPress are "coupled" — backend management and frontend rendering are handled by the same system. In Headless mode, the CMS is only responsible for content creation, storage, and API output, while the frontend can use any technology framework to consume these APIs and render pages. This architecture allows the same backend content to simultaneously serve websites, apps, mini-programs, and other channels, while frontend and backend teams can develop and deploy independently.

Why Not Just Use Full-Stack WordPress?

Zhai Lujia pointed out several pain points of traditional WordPress site building:

• WordPress is based on PHP, creating a non-unified frontend/backend tech stack with higher development costs
• Limited room for website performance optimization, making it difficult to achieve peak performance
• For e-commerce scenarios requiring flashy interactions and personalized design, WordPress templates lack flexibility

Wheel rim customization is a highly personalized market. Users don't simply browse product lists and place orders — they need an immersive visual experience to stimulate purchase desire. Therefore, React-based Next.js can provide better interactive experiences and development flexibility.

The Right Approach to AI Collaboration

AI Is Not an Omniscient Decision-Maker

Zhai Lujia particularly emphasized an important point during the livestream: The solutions AI provides are not necessarily optimal. AI is inherently designed to go along with the user's thinking. If the user doesn't have sufficient technical knowledge, AI may continue pushing in a suboptimal direction, ultimately producing a solution that "barely works but has a very low ceiling."

This is precisely where experienced developers add value — being able to judge the reasonableness of AI suggestions, knowing what true best practices are, and making correct technical decisions at critical junctures.

Practical Steps During the Requirements Discussion Phase

In Codex, Zhai Lujia selected Plan Mode, using the GPT-5.5 model with Medium compute. The entire process was divided into several steps:

1. Present the proposal: Describe the overall architecture concept to AI and ask it to evaluate feasibility
2. Respond to challenges: AI suggested alternatives like Shopify; Zhai Lujia responded to each based on business characteristics
3. Reach consensus: Confirm the Headless WordPress + Next.js + Cloudflare Worker architecture
4. Refine the plan: Have AI generate a specific development plan

A notable detail: during the discussion, AI confirmed that WooCommerce's REST API fully supports Headless scenarios, including shopping cart, payment, shipping, taxes, and other core e-commerce functions that can all be completed through APIs. WooCommerce is the most popular e-commerce plugin in the WordPress ecosystem, with over 5 million active installations worldwide. Its REST API provides complete e-commerce functionality interfaces covering product CRUD, category management, cart operations, order creation and management, coupon systems, shipping calculation, tax rules, customer management, and more. In Headless mode, WooCommerce essentially becomes an e-commerce middleware — all business logic is handled on the backend, and the frontend only needs to call APIs. This means merchants can continue using the familiar WordPress backend to manage products and orders while the frontend gains complete design freedom.

Final Technical Architecture in Detail

Mono Repo Project Structure

After multiple rounds of discussion, the final project adopts a Mono Repo architecture containing the following sub-projects:

• wordpress/: WooCommerce backend, deployed to VPS or Fly.io via Docker containers
• storefront/: Next.js frontend, deployed to Cloudflare Workers via OpenNext
• packages/ui/: Shared component library based on CodeUI
• shared/: Common utilities and type definitions

Mono Repo (monolithic repository) is a code organization strategy that manages multiple related projects within a single Git repository, as opposed to Multi Repo (where each project has its own independent repository). Large tech companies like Google, Meta, and Microsoft widely adopt this pattern. Its core advantages include: more convenient cross-project code sharing (such as shared UI component libraries and type definitions), unified dependency version management to avoid conflicts, and atomic commits ensuring changes across multiple sub-projects take effect simultaneously. Common Mono Repo management tools include Turborepo, Nx, pnpm workspace, etc., which provide incremental builds, task orchestration, caching, and other capabilities to address build efficiency issues in large repositories.

Key Technology Choices

Layer	Technology	Purpose
Frontend Framework	Next.js + React	User interaction interface
Deployment Platform	Cloudflare Worker	Global edge computing
Adapter Layer	OpenNext	Bridge between Next.js and Cloudflare
CMS/E-commerce	WordPress + WooCommerce	Product management, order processing
Database	TiDB Cloud	Auto backup, hybrid search
Object Storage	Cloudflare R2	Product images, media files
State Management	Zustand	Client-side state
Styling	Tailwind CSS + CodeUI	UI components and styles
Payment Gateway	Pluggable design	Flexible switching between Stripe/PayPal etc.

About Cloudflare Workers and Edge Computing: Cloudflare Workers is Cloudflare's serverless edge computing platform that allows developers to deploy code to over 300 data center nodes worldwide. Unlike traditional centralized servers, edge computing pushes application logic to the node closest to the user, dramatically reducing network latency. For an e-commerce site targeting overseas markets, this means users in the US, Europe, or Southeast Asia all get near-local access speeds. Workers run JavaScript/TypeScript code on the V8 engine with extremely short cold start times (typically under 5 milliseconds), and billing is per-request — no traffic means no charges — making it ideal for cost control in small to medium e-commerce projects.

About the OpenNext Adapter Layer: OpenNext is an open-source project designed to solve deployment compatibility issues between Next.js and non-Vercel platforms. Next.js is developed by Vercel, and many of its advanced features (such as ISR incremental static regeneration, Middleware, Server Actions, etc.) are deeply tied to Vercel's infrastructure by design. When developers want to deploy Next.js applications to Cloudflare Workers, AWS Lambda, or other platforms, OpenNext serves as an intermediate adapter layer, translating Next.js runtime behavior into formats the target platform can understand. This project was originally initiated by the SST community and currently supports multiple mainstream cloud platforms, making it critical infrastructure for using Next.js outside the Vercel ecosystem.

About Zustand State Management: Zustand is a lightweight React state management library known for its minimalist API and excellent performance. Compared to Redux's heavy boilerplate code and Context API's performance issues, Zustand doesn't require a Provider wrapping the component tree, supports accessing state outside React components, and has a bundle size of only about 1KB. In e-commerce scenarios, Zustand is ideal for managing shopping cart state, user preferences, filter conditions, and other client-side state. Its middleware system also supports state persistence (such as storing cart data in localStorage), ensuring users don't lose data after refreshing the page.

About Cloudflare R2 Object Storage: R2 is Cloudflare's S3-compatible object storage service, with its biggest selling point being zero egress traffic fees. Traditional cloud storage services (like AWS S3) charge egress bandwidth fees when data is read/downloaded, which can be a significant expense for image-heavy e-commerce sites. R2 completely eliminates this fee, charging only for storage volume and request count. For a wheel rim e-commerce site that needs large quantities of high-resolution product images, multi-angle display photos, and video materials, R2 can significantly reduce operational costs while naturally integrating with Cloudflare CDN for accelerated global edge distribution.

Why TiDB Cloud?

Zhai Lujia recommended TiDB Cloud as the database for three reasons: automatic daily snapshot backups, generous free tier, and hybrid search capability — supporting both traditional full-text search and vector semantic search (RAG) simultaneously, leaving room for future AI-powered customer service and intelligent search.

TiDB is a distributed NewSQL database developed by PingCAP that is MySQL-compatible and supports horizontal scaling and strong consistency transactions. TiDB Cloud is its fully managed cloud service version. "Hybrid search" here refers to supporting both traditional keyword full-text search (based on inverted indexes) and vector semantic search (based on vector embedding similarity calculations) within the same database. Vector search is the foundation of RAG (Retrieval-Augmented Generation) technology — by converting text into high-dimensional vectors, you can find content that is semantically similar but uses different keywords. For example, when a user searches for "large wheels suitable for off-road," even if product descriptions don't contain exactly matching keywords, vector search can find semantically related products. This lays the data foundation for future AI customer service and intelligent recommendations.

Methodology for Managing AI: agents.md

Manage AI Like You Manage People

Zhai Lujia shared a core insight: AI is much more like a human than a machine. Machines are rigid but don't make mistakes; humans are flexible but do make mistakes. Therefore, the methodology for managing AI should draw from team management experience.

The specific approach is to create an agents.md file in the project root directory as a code of conduct for AI, containing:

• Development workflow standards
• Documentation requirements (must leave documentation, outputs must be traceable)
• Code style constraints
• Environment variable usage standards

This practice is essentially similar to "coding standards documents" or "team development handbooks" in software engineering, but specifically adapted for AI programming assistants. In AI programming tools like OpenAI Codex, Cursor, and Claude, this type of instruction file (sometimes called system prompt files or rules files) has become an emerging best practice. It allows AI to reference unified standards each time it executes a task, avoiding inconsistent code styles across different sessions.

Balancing Flexibility and Standards

The key principle is that you can't give AI too many constraints (which reduces efficiency and creativity), nor can you give it complete freedom (which leads to code chaos). You need to find the balance point between flexibility, efficiency, and correctness.

Supplementing AI with Latest Knowledge

Zhai Lujia specifically pointed out that AI's knowledge base often lags behind the current state of technology. For example, Next.js cannot be deployed directly to Cloudflare and requires the OpenNext adapter layer — this is new information that AI might not know. Therefore, you need to proactively provide the latest documentation and best practices so AI can develop based on correct knowledge.

This is also the core value of experienced developers in the AI era: knowing what true best practices are and being able to point AI in the right direction. Large language models have training data cutoff dates, and the frontend technology ecosystem updates extremely fast — framework version iterations, API changes, and new tools emerge at a pace far exceeding AI knowledge update frequency. Developers need to play the role of "knowledge patches," feeding AI the latest technical documentation, changelogs, migration guides, and other information to ensure generated code is based on current version best practices rather than outdated usage.

Summary and Takeaways

This livestream demonstrated a complete "AI-assisted project launch" workflow: from requirements discussion, technology selection, architecture design to development plan formulation — all with human developers leading decisions and AI serving as an efficient execution partner. For non-technical entrepreneurs, this workflow is equally applicable — the key is understanding AI's capability boundaries and seeking professional judgment at important decision points.

Key Takeaways

• Adopts WordPress Headless CMS + Next.js + Cloudflare Worker architecture, balancing content management capability and frontend performance
• AI's solutions aren't necessarily optimal; the value of experienced developers lies in judging best practices and guiding AI in the right direction
• Use agents.md files to standardize AI behavior, finding balance between flexibility and standards
• Proactively supplement AI with latest technical knowledge (like OpenNext) to compensate for its knowledge lag
• The complete tech stack includes modern components like TiDB Cloud (hybrid search), Cloudflare suite, Zustand state management, and more