NextJsCommerce-概要とガイドライン

開発者として、私たちは最新のテクノロジーに従うというこのゆるぎないニーズを持っています。 私たちは、すべての大きくて革新的なテクノロジーについて、すべて、絶対にすべてを学ぶというこの飽くなき渇望に駆り立てられています。 私たちは未来を独占的に垣間見ることを切望しています–そしてこの願望は私たちを動かし続けます。 最新のeコマーステクノロジーへの探求は、私たちを次のコマースに導きました。

Next Commerceは、Next.jsおよびVercelチームと協力してBigCommerceが提供する最新の製品です。 Next Commerceを使用すると、eコマース開発者はBigCommerceと統合された完全にヘッドレスのアプリケーションを数分でインストールできます。 これは、NextとBigCommerceの両方からのこの種の最初の取り組みです。

ヘッドレスコマースは、おそらくeコマースの未来がどのように見えるかです。 ヘッドレスコマースにより、開発者は革新的なアプリを簡単に設計および開発し、より広範なグローバル市場に参入し、eコマースストアの売上グラフを北に向けることができます。

サイトのパフォーマンスに関するレポートによると、120人のeコマースエグゼクティブの調査では、62％が、ヘッドレスコマースがコンバージョン率と顧客エンゲージメントを大幅に改善できるとの意見でした。

BigCommerce and Nextが提供するこの最新の製品を、インストールがどれほど簡単に、そして信じられないほど簡単に使用できるかをお見せできることを嬉しく思います。 このステップバイステップガイドは、NextCommerceを開始するために必要なすべてです。

概要から始めましょう。

ネクストコマースの概要

Next.jsは、広く使用されているオープンソースのWebフレームワークであり、サーバー側のレンダリングとReactを使用した静的アプリケーションの両方で独自のアプリケーションを構築できます。 現在、フレームワークはNext.jsコマースを私たちにもたらします。 これは、非常に高性能でカスタマイズ可能で魅力的なeコマースサイトを構築するために使用できる開発者キットです。 BigCommerceのような堅牢なオープンSaaSプラットフォームとともに提供されるため、NextCommerceの可能性と可能性は計り知れません。

なぜ市場はヘッドレスeコマースに向かっているのですか？

Next.jsは、eコマースサイトを構築するための強力なツールです。 これは、さまざまなeコマース実装に合わせて拡張、カスタマイズ、および構成できる、完全で堅牢なアーキテクチャです。

Next.jsには多くの利点がありますが、重要ないくつかを次に示します。

• サーバーレンダリング

  Reactコンポーネントは、HTMLをクライアントに送信する前に、サーバー側でレンダリングできます。

• ホットコードのリロード

  Next.jsが変更を検出するたびに、ページが再読み込みされます。 すべてのURLは自動的にファイルシステムにルーティングされます。 これには、構成スキルは必要ありません。 ただし、必要に応じていつでもカスタマイズできます。

• 生態系の互換性

  Next.jsは、React、Node、そしてもちろんJavaScriptと高い互換性があります。

• コードを自動的に分割する

  ページにはライブラリとJavaScriptのみが付属しています。それ以外は何もありません。 Next.jsは、すべてのアプリコードを含む単一のJavaScriptを生成する代わりに、実際にアプリをさまざまなリソースに分解して、プロセス全体を簡単にします。



• TypeScriptサポート

  Next.jsはTypeScriptで記述されているため、完全なサポートを提供します。

• プリフェッチ

  プリフェッチプロップは、ページリソースを自動的にフェッチするリンクコンポーネントによってサポートされています。自動コードスピッティングリソースも同様です。

• ハイブリッドアプリケーション

  Next.jsを使用すると、1つのプロジェクトでSSRと静的Webアプリケーションの両方を利用できます。

• 設定は必要ありません

  この本番環境に対応したフレームワークは、eコマースストアにスケーラビリティと使いやすさを提供しようとしているエンジニアリングチームに最適です。 自動コンパイルとバンドル、組み込みのCSSサポート、ファイルシステムルーティング、自動コード分割、API作成が付属しています。

展開方法の概要

Next Commerceの基本を理解したところで、よりジューシーな詳細であるデプロイメントについて簡単に説明しましょう。 前提条件から始めましょう。 Next.jsはあまりしつこくないので、最低限の要件があります。

前提条件

• IDE
• JavaScriptの代わりにTypeScript
• BigCommerceAPIの基本的なノウハウ
• /pagesおよび/publicのディレクトリ。 / pagesのディレクトリには、_app.tsxとindex.tsxがあります。
• / publicのディレクトリには、静的に提供できるメディアが含まれます。
• さらに、/ pagesには、ルートを含むeコマースストアページもあります。
• Bitbucket、GitHub、GitLabなどのGitプロバイダー。
• NPM

これらは、NextCommerce機能の基本的な要件です。 残りのディレクトリは後でいつでも再編成できます。

パッケージと構成

NPMとYarnに加えて、Next Commerceの実行では、.envファイルと.configファイルを使用して開始します。

アプリケーションが正しく機能するためには、BigCommerce StorefrontDataHooksパッケージを利用する必要があります。 フックは、コンポーネントのニーズに応じて再利用できます。 コンポーネントは/componentsディレクトリにあり、これらはページにレンダリングされます。 フックからコンポーネント、ページへのリンクには、ストアフロントからの大量のデータが必要です。 開発者のコ​​ストに大金を費やしたくない場合は、BigCommerce StorefrontDataHooksパッケージを簡単に利用できます。

このパッケージは、カテゴリ、重要な顧客データ、製品ページ、詳細などにアクセスするのに役立ちます。 パッケージを正常にインストールしたら、.env変数をBigCommerceストアフロントの適切なキーと値のペアにリンクできます。

.envファイルは自動的にVercelに保存されます。 「vercelenvpull」コマンドを使用すると、.envファイルを簡単にプルできます。 .env.localファイルを使用して、BigCommerceストアフロントAPIキーとGraphQLトークンを設定できるようになりました。

次のステップは、.configファイルの構成です。 tsconfig.jsonを使用すると、プロジェクトのJavaScriptをコンパイルでき、next.config.jsはノードモジュールです。 多くの開発者はこれを見逃していますが、特定の機能を実現したい場合は強くお勧めします。

プロジェクトの実行

開発環境サーバーでプロジェクトを実行するのは非常に簡単です。 次のコマンドを使用するだけです。

ヤーン開発またはnpm実行開発

展開

Next.jsコマースの構築もかなり簡単です。nextjs.org/commerceにアクセスして、[クローンとデプロイ]ボタンをクリックしてください。 最終的には、ストアのロゴを使用して、Vercelで独自のアプリケーションを稼働させることができるはずです。 デプロイしたら、必要に応じてストアをカスタマイズできます。

統合プロセスを一度に1ステップずつ実行します。

ステップ1：

[クローンとデプロイ]ボタンを押すと、GitプロバイダーでVercelを使用してデプロイを開始できます。

Vercelアカウントをお持ちの場合は、資格情報を使用してログインできます。

Vercelアカウントをお持ちでない場合は、選択したGitプロバイダーのいずれかを使用してアカウントを作成するように求められます。

ステップ2：

Vercelアカウントにログインすると、ドロップダウンリストのある[CloneGitRepository]ダイアログボックスが表示されます。 Vercelアカウントを選択し、表示されたフィールドにプロジェクト名を入力して、[続行]をクリックします。

ステップ3：

次のステップは、統合をインストールすることです。 BigCommerceストアをVercelプロジェクトに接続するには、[インストール]ボタンを押します。 [インストール]ボタンを押すと、[VercelプロジェクトにBigCommerceを追加]画面が表示されます。

ステップ4：

すでにBigCommerceストアをお持ちの場合は、既存のクレデンシャルを使用してログインするだけで、VercelとBigCommerceを統合できます。 ただし、BigCommerceを初めて使用する場合は、[サインアップ]をクリックします。

サインアップページでは、簡単なフォームを使用して開発者サンドボックスを作成する方法について説明します。 詳細を入力し、すべての利用規約に同意して登録してください。 BigCommerce統合タブの横に青いチェックマークが表示されたら、[続行]をクリックします。

ステップ5：

これで、リポジトリ名を入力してGitリポジトリを作成できます。 [続行]をクリックします。

ステップ6：

[プロジェクトのインポート]画面が表示されたら、プロジェクト設定を確認して[デプロイ]をクリックできるはずです。 展開全体に数分以上かかることはありません。

Vercelへの展開が完了すると、展開されたサイトのサムネイル画像を表示できるようになります。

おめでとうございます。プロジェクトは正常にデプロイされました。

React + Next.js

Next（React用のSSRジェネレーター）を使用してeコマースストアをセットアップしてから、Vercelにデプロイできます。 CrystallizeとNext.jsボイラープレートを使用すると、JamstackWeb開発eコマースストアフロントを簡単に構築できます。 次に、CrystallizeCLIを使用して新しいプロジェクトを開発します。

端末に次のコマンドを入力します。

npx @ crystallize / cli

このコマンドを使用すると、好みのボイラープレートを追加したり、独自のテナントを選択したり、デモテナントを選択してServiceAPIを追加したりできます。

Vercelに展開するには、これらの基本的な要件をコンピューターにインストールする必要があります。

• Vercel CLI
• Gitプロバイダー
• 少なくとも、バージョン10 Node.js
• Crystallizeにサインアップしてテナント

以下を使用して、開発サーバーでプロジェクトを実行します。

ヤーン開発またはnpm実行開発

これにより、開発サイトにアクセスし、アプリの構造を理解し、要件に応じてページを編集できます。

さまざまなアイテムの形状のページの作成が完了したら、Vercelへの展開を開始できます。

繰り返しになりますが、プロジェクトをVercelにデプロイするには、VercelGithubの統合を完了する必要があります。 ただし、同じように簡単に手動で展開することもできます。 コマンドラインを使用して入力します--vercellogin–Vercelダッシュボードを使用して2つの環境変数を設定します。

Vercelを使用してプロジェクトをデプロイするには、Gitプロバイダーが必要です。 プロジェクトをGitプロバイダーにプッシュすると、ほぼ完了です。デプロイが開始されます。

まとめ

ヘッドレスeコマースの時代はここにあります。 従来のeコマースサイトの開発は、よく練られたフロントエンドとバックエンドでフルスタックエクスペリエンスを提供することに重点を置いていました。 これにより、店舗はアプリケーションをすばやく起動できました。 ただし、すぐにパフォーマンスの問題が発生します。最も重要なのは、必要なだけ拡張できないことです。 しかし、ヘッドレスeコマースを使用すると、それほど苦労する必要はありません。

ヘッドレス設計により、独自のフロントエンドを最初から設計したり、事前に構築されたものを使用したりする自由が得られます。 市場の変化に迅速に対応し、それに応じてカスタマーエクスペリエンスをカスタマイズする機能があります。 最も重要なのは、バックエンドを改ざんすることなくフロントエンドに変更を加えることができることです。 これで、開発者として、eコマースの未来が確実に頭のないものであると確信している理由がわかりました。