Open Source CLIHeadless WooCommerce, Zero Boilerplate
Drehen Sie eine Next.js Storefront mit npx create-woonext-app
Ein einziger Befehl rüstet eine vollständig konfigurierte Next.js-Commerce-App – verdrahtet mit Ihrem WooGraphQL-Endpunkt, eingegeben Ende-zu-Ende und Versand mit Warenkorb, Auth und Checkout aus der Box.
$npx create-woonext-app
// Was Schiffe in der Box
Ein Storefront-Stack, vorkonfiguriert.
Kein Nachmittag mehr von npm install Beschwörungen. Die CLI-Gerüste sind eigensinnige Standardwerte, die die WooGraphQL-Maintainer tatsächlich in der Produktion verwenden.
N
Next.js 16
App-Router, Server-Komponenten, Server-Aktionen und die neuesten Next.js — install wählt die Version mit --next-version.
Reaktion 19 · Turbopack
◆
WooGraphQL-Client
graphql-request verdrahtet mit @woographql/session-utils für Session-Aware Queries. Typisiertes Schema, keine Apollo-Laufzeit.
graphql-request · session-utils
T
shadcn/ui + Tailwind
components.json initialisiert mit Tailwind v4, Sonner Toasts, Source Sans 3 + Playfair Display Fonts. Mehr hinzufügen via npx shadcn add.
shadcn/ui · Tailwind v4
{}
Typgenerierung
@woographql/codegen läuft am Dev-Start und erzeugt ein getipptes graphql-request SDK aus dem Schema Ihres Endpunktes.
@woographql/codegen
🔒
Sitzung + auth
Benutzerdefinierter SessionProvider auf WooGraphQL JWT – Wählen Sie bei der Installation Cookie- oder Browser-Speicherdaten aus. Gästewagen Thread in authentifizierten Sitzungen.
@woographql/session-utils · JWT
≡
Seiten + Server Aktionen
Warenkorb, mehrstufiger Checkout, Bestellbestätigung und Kontoseiten (Bestellungen, Abonnements, Adressen, Zahlungsmethoden) – plus 25+ api Routen.
App Router · Server Aktionen
$
Stripe Checkout
Optionale Integration von Streifenelementen — @stripe/react-stripe-js, Payment-Intent und Kundenrouten. Sauber deaktiviert, wenn Sie sich bei der Installation abmelden.
@stripe/react-stripe-js · optional
✓
Prüfungen + Storybook
Jest + Testing Library für Einheit, Playwright für Ende-zu-Ende, Storybook mit Geschichten für jedes Layout und Feature-Komponente.
Jest · Playwright · Storybook
// Von Null bis Storefront
Drei Befehle. Ein Arbeitslager.
A WooGraphQL Pro-Lizenz entsperrt die CLI und die private @woographql/* Pakete in der Registry von YeetSquad. Dann bist du weg.
— 01/Gerüst
Führen Sie die CLI
Die interaktive Eingabeaufforderung führt Sie durch Vorlage, Endpunkt und Funktionsauswahl. Wählen Sie, was Sie brauchen.
$ npx create-woonext-app
--template app-router
--endpoint \
https://shop.acme.com— 02 / Authentifizierung
Verknüpfen Sie Ihre Lizenz
Die CLI schreibt eine projektlokale .npmrc mit Ihrem lizenzierten @woographql-Registrierungstoken und führt dann die woonext-Installation auf Gerüstseiten, Layouts, Api-Routen und Codegen aus.
$ cd my-store
$ npx woonext install
# ✓ Seiten, Layouts, api
# Routen, Codegen bereit03 / Schiff
Starten Sie den Dev Server
Codegen läuft, das Schema wird introspektiert, der Dev-Server startet auf localhost:3000. Du bist live.
$ npm run dev
# ▲ Next.js 16 · Turbopack
# ✓ Ready in 1.2s// @woographql Pakete
Privatpakete, neben dem Schema beibehalten.
Lizenzinhaber erhalten Zugriff auf einen kuratierten Satz von JavaScript-Bibliotheken in der YeetSquad-Registrierung. Sie werden mit WooGraphQL selbst versioniert – wenn sich das Schema ändert, folgen die Typen.
@woographql/nächstens
App Router Server Fetcher, RSC-sichere Session + Cart-Helfer
@woographql/Reaktionshaken
Clientseitige React-Hooks — useCart, useSession, useCheckout, useAuth
@woographql/Session-Utils
WooCommerce Session + Cart Token Management mit steckbaren Speicheradaptern
@woographql/Codegen
GraphQL Code Generator Preset für WooGraphQL — typisierte Abfragen, Hooks, Server-Fetcher
import { withMarketingSession } from '@woographql/next/server'
import { ProductCard } from '@/components/product-card'
import { GetFeaturedProductsDocument } from '@/graphql/generated'
export default withMarketingSession(async ({ client }) => {
const { data } = await client.query({
query: GetFeaturedProductsDocument,
variables: { first: 12 },
})
return (
{data.products?.nodes.map((product) => (
))}
)
})
// Session-Token durch die Anfrage gefädelt - gegen Ihre
// generiertes Schema. Kein Klebecode erforderlich.
// Sehen Sie, wie es läuft
Eine komplette Storefront, Gebaut mit create-woonext-app.
Warenkorb, Checkout, Konto, Suche, Filter, Abonnementprodukte. Jede aktuelle Funktion von @woographql/next wird live bereitgestellt.
// Entsperren Sie die CLI
Die CLI Schiffe mit Jeder bezahlte Plan.
A WooGraphQL Pro-Lizenz bietet Ihnen Zugriff auf create-woonext-app und der private @woographql/* Packungen. Jährliche Abonnenten erhalten sie auf jeder Stufe.
Open Source
frei
Core Plugin für immer
$0
GPL-3 lizenziert
✓
Core WooCommerce Typen & Mutationen
✓
WPGraphQL Einstellungen & Tuning
✓
WooCommerce Cart Unterstützung
◯
Pro Erweiterungen (Bundles, Composite, Subs)
◯
create-woonext-App CLI
◯
@woographql JS Pakete
✓
Unterstützung der Gemeinschaft
persönlich
Solo
Für 1 Website
$99.99
pro Jahr
✓
1 Aktivierung der Website
✓
Unbegrenzte Updates
✓
Subscriptions, Bundles und Composite-Produkte werden unterstützt
✓
Unterstützung für Product Addons
✓
create-woonext-App CLI
✓
@woographql Pakete
✓
Jährliche Konsultationen
Professionell
Am beliebtesten
Agentur
Für bis zu 5 Websites
299 €.99
pro Jahr
✓
5 Website-Aktivierungen
✓
Unbegrenzte Updates
✓
Subscriptions, Bundles und Composite-Produkte werden unterstützt
✓
Unterstützung für Product Addons
✓
create-woonext-App CLI
✓
@woographql Pakete
✓
Jährliche Konsultationen
Geschäftsbetrieb
Unbegrenzt
Unbegrenzte Websites
449 USD.99
pro Jahr
✓
Unbegrenzte Aktivierungen
✓
Unbegrenzte Updates
✓
Subscriptions, Bundles und Composite-Produkte werden unterstützt
✓
Unterstützung für Product Addons
✓
create-woonext-App CLI
✓
@woographql Pakete
✓
Jährliche Konsultationen
von npx Live Storefront unter fünf Minuten.
Kaufen Sie einen jährlichen Pro-Plan, um die CLI und die @woographql-Pakete freizuschalten. Das kostenlose Plugin funktioniert für immer – Upgrade nur, wenn Sie bereit sind zu versenden.