yamamoto244/nextjs13-commerce

Next.js Commerce

Next.js 13とApp Routerに対応したeコマーステンプレートで、次の機能があります。

• Next.js App Router
• Next.jsのメタデータを使用した最適化されたSEO
• React Server Components（RSC）とSuspense
• ミューテーションのためのサーバーアクション
• Edge Runtime
• 新しいフェッチとキャッシュのパラダイム
• 動的OG画像
• Tailwind CSSでのスタイリング
• Shopifyでのチェックアウトと支払い
• システム設定に基づく自動ライト/ダークモード

注意：Next.js Commerce v1をお探しですか？コード、デモ、およびリリースノートをご覧ください。

プロバイダー

Vercelは、Next.js Commerceのビジョンと戦略で説明されているように、Shopifyバージョンのみを積極的にメンテナンスします。

代替プロバイダーは、lib/shopifyファイルを自分自身の実装に置き換えながら、テンプレートの残りの部分をほとんど変更せずに、このリポジトリをフォークできるはずです。

• Shopify（このリポジトリ）
• BigCommerce（デモ）
• Medusa（デモ）
• Saleor（デモ）
• Shopware（デモ）
• Swell（デモ）
• Umbraco（デモ）

注意：プロバイダーの方々、デモで同様の製品を使用したい場合は、これらのアセットをダウンロードできます。

ローカルで実行する

Next.js Commerceを実行するには、.env.exampleで定義された環境変数を使用する必要があります。これにはVercel Environment Variablesを使用することをお勧めしますが、.envファイルが必要です。

注意：.envファイルをコミットしないでください。そうすると、他の人がShopifyストアを制御できる秘密が漏れてしまいます。

1. Vercel CLIをインストールします：npm i -g vercel
2. ローカルインスタンスをVercelとGitHubアカウントにリンクします（.vercelディレクトリが作成されます）：vercel link
3. 環境変数をダウンロードします：vercel env pull

pnpm install
pnpm dev

アプリはlocalhost:3000で実行されるはずです。

Expand if you work at Vercel and want to run locally and / or contribute

1. vc linkを実行します。
2. Vercel Solutionsスコープを選択します。
3. 既存のcommerce-shopifyプロジェクトに接続します。
4. 環境変数を取得するには、vc env pullを実行します。
5. すべてが正常に動作していることを確認するには、pmpm devを実行します。

Vercel、Next.js Commerce、およびShopifyの統合ガイド

この包括的な統合ガイドを使用して、Vercel上でヘッドレスShopify CMSとしてShopifyを構成し、Next.js CommerceをヘッドレスShopifyストアフロントとして使用できます