オープンソース CLIヘッドレスWooCommerce、ゼロボイラープレート
Next.js ストアフロントをスピンアップ npx create-woonext-app
単一のコマンドは、完全に構成された Next.js コマースアプリをスキャフォールドします。WooGraphQL エンドポイントにワイヤーで縛られ、エンドツーエンドをタイプし、カート、auth、およびボックスからチェックアウトして配送します。
ドルnpx create-woonext-app
// 箱の中の船
ストアフロントグレードのスタック, 事前設定
昼過ぎまで npm install インフォメーション CLI は、WooGraphQL のメンテナが実際に生産で使用していると見なされたデフォルトをスキャフォールドします。
ネクタイ
次へ.js 16
App のルーター、サーバー コンポーネント、サーバー アクション、および最新 Next.js — インストールは、バージョンと --next-versionお問い合わせ
反応19・ターボパック
◆ ◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
WooGraphQLクライアント
graphql-request ワイヤーで縛られる @woographql/session-utils session-aware の問い合わせ Apollo のランタイムはタイプされたスキーマ、いいえ。
graphql-request・セッションユーティリティ
ツイート
Shadcn/ui + テールウィンド
components.json Tailwind v4、Sonnerのトースト、Source Sans 3 + Playfair Displayフォントで初期化。 詳しくはこちら npx shadcn addお問い合わせ
shadcn/ui · テールウィンド v4
お問い合わせ
タイプ生成
@woographql/codegen dev start で実行し、エンドポイントのスキーマから型付き graphql-request SDK を生成します。
@woographql/コーディネーション
ログイン
セッション + auth
WooGraphQL JWTの上部にあるカスタムSessionProvider — インストール時にクッキーまたはブラウザストレージの認証情報を選択します。 ゲストカートは、認証されたセッションにスレッドします。
@woographql/session-utils ・ JWT
ュ
ページ + サーバーアクション
カート、マルチステップチェックアウト、注文確認、およびアカウントページ(注文、サブスクリプション、住所、支払方法)、プラス25 + apiルート。
App のルーター・サーバーの行為
ドル
ストライプチェックアウト
オプションのStripe要素の統合 — @stripe/react-stripe-js、支払意図的および顧客のルート。 インストール時にクリーンに無効化します。
@stripe/react-stripe-js・オプション
✓ ✓
テスト + ストーリーブック
ユニット用のJest +テストライブラリ, エンドツーエンドのためのPlaywright, ストーリーブックは、すべてのレイアウトと機能コンポーネントのために足場しました.
Jest・Playwright・ストーリーブック
// ゼロからストアフロントへ
3つのコマンド 1つの店。
WooGraphQLの特長 プロライセンスは、CLIとプライベートのロックを解除 @woographql/* YeetSquadのレジストリのパッケージ。 それからあなたはオフです。
— 01/足場
CLIを実行
インタラクティブなプロンプトは、テンプレート、エンドポイント、および機能選択を通してあなたを歩きます。 必要なものを選ぶ。
$ npx create-woonext-app
--template app-router
--endpoint \
https://shop.acme.com— 02/認証
ライセンスのリンク
CLI は、ライセンス スコープ @woographql レジストリ トークンで project-local .npmrc を記述し、 unext をインストールして、 saffold ページ、レイアウト、api ルート、およびコーデックス を実行します。
$ cd my-store
$ npx woonext install
# ✓ ページ、レイアウト、api
# ルート、コーデンの準備ができて— 03 / 船
dev サーバーを起動する
Codegen が実行されると、スキーマはイントロスペクトされ、 dev サーバは localhost:3000 で起動します。 ライブです。
$ npm run dev
# ▲ Next.js 16 · Turbopack
# ✓ Ready in 1.2s// @woographql パッケージ
プライベートパッケージ, スキーマと一緒にメンテナンス。
ライセンス ホルダーは、YetSquad レジストリ上の JavaScript ライブラリのキュレーションされたセットへのアクセスを取得します。 WooGraphQL 自体でバージョンアップされているため、スキーマが変更されると、タイプが続きます。
@woographql/ からのツイート次へ
App のルーター サーバー フェッチャー、RSC 安全セッション + カートのヘルパー
@woographql/ からのツイート反応ホック
クライアント側 React ホック — useCart, useSession, useCheckout, useAuth
@woographql/ からのツイートセッションユーティリティ
WooCommerceセッション + プラグイン可能なストレージアダプタによるカートトークン管理
@woographql/ からのツイートコードジェン
GraphQL コードジェネレーター プリセット WooGraphQL — 型付きクエリ, ホック, サーバー フェッチャー
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) => (
))}
)
})
// リクエストを通したセッショントークン — 対比
// 生成されたスキーマ。 接着剤コードは必要ありません。
// 実行中を見る
完全な店先、 create-woonext-app でビルドします。
カート、チェックアウト、アカウント、検索、フィルタ、サブスクリプション製品。 @woographql/next のすべての現在の機能は、ライブを展開しました。
// CLI のロック解除
CLI は、 有料プラン
WooGraphQLの特長 プロライセンスにより、アクセス可能 create-woonext-app プライベート @woographql/* パッケージ。 毎年の加入者は、すべての層でそれらを取得します。
オープンソース
無料
コアプラグイン, 永遠に
ドル
GPL-3 ライセンス
✓ ✓
コアWooCommerceタイプと変異
✓ ✓
WPGraphQLの設定とチューニング
✓ ✓
WooCommerceカートサポート
◯ ◯
プロエクステンション(バンドル、コンポジット、サブ)
◯ ◯
create-woonext-app CLI の作成
◯ ◯
@woographql JS パッケージ
✓ ✓
コミュニティサポート
パーソナル
ソロ
サイトマップ
$99 ドル.99の
1 年間
✓ ✓
1 ウェブサイトの活性化
✓ ✓
無制限のアップデート
✓ ✓
サブスクリプション、バンドル、コンポジット製品サポート
✓ ✓
製品アドオンのサポート
✓ ✓
create-woonext-app CLI の作成
✓ ✓
@woographql パッケージ
✓ ✓
年間相談コール
プロフェッショナル
人気カテゴリー
事務所案内
5サイトまで
$299(税抜).99の
1 年間
✓ ✓
5 ウェブサイトの活性化
✓ ✓
無制限のアップデート
✓ ✓
サブスクリプション、バンドル、コンポジット製品サポート
✓ ✓
製品アドオンのサポート
✓ ✓
create-woonext-app CLI の作成
✓ ✓
@woographql パッケージ
✓ ✓
年間相談コール
事業内容
無制限
無制限のウェブサイト
価格: $449.99の
1 年間
✓ ✓
無制限の活性化
✓ ✓
無制限のアップデート
✓ ✓
サブスクリプション、バンドル、コンポジット製品サポート
✓ ✓
製品アドオンのサポート
✓ ✓
create-woonext-app CLI の作成
✓ ✓
@woographql パッケージ
✓ ✓
年間相談コール
詳しくはこちら メニュー ライブストアフロントへ 以下 5分。
CLI と @woographql パッケージのロックを解除するための任意の年間プロプランを購入します。 無料のプラグインは、出荷準備が整ったらのみ、永久に作業を続けます。