无头电商集成：将 Shopify Storefront API 与 Next.js 深度融合

在本系列的第一部分中，我们探讨了 Shopify 带来的商业价值、限时促销以及 SEO 增长机会。现在，是时候撸起袖子进入真正的技术实战了。

对于追求极致 UI/UX 控制力、页面加载速率和精准营销漏斗的开发者来说，“无头电商”（Headless Commerce）架构无疑是业界的终极解决方案。

通过将 Shopify Storefront API 与高性能、开箱即用的 Next.js 启动套件结合，您不仅能打造出加载秒开、交互精美的完全自定义前端商城，还能同时享受 Shopify 在后台提供的订单、仓储和物流等企业级后勤支持。

在这篇指南中，我们将从零开始，在 Next.js 中实现一套简洁、轻量的 GraphQL 接入方案，读取 Shopify 商品数据并动态渲染到前端页面中。

🛠️ 第一步：在后台生成 Storefront API 凭证

在编写 React 代码之前，您需要登录 Shopify 商家后台生成专门的 API 密钥：

登录您的 Shopify Admin 管理控制台。
依次点击 Settings（设置） > Apps and sales channels（应用和销售渠道） > Develop apps（开发应用）。
点击 Create an app（创建应用），命名为 NextJS Headless Storefront 并选择您的开发账户。
在 Configuration（配置） 选项卡下，找到 Storefront API integration 并点击 Configure。
根据业务需要勾选所需的 API 权限（例如 unauthenticated_read_product_listings，unauthenticated_read_checkout）。
点击 Save（保存），并点击右上角的 Install app（安装应用）。
在生成的 API credentials（API 凭证） 选项卡中，复制 Storefront API access token（访问令牌） 以及您的店铺专用域名（例如 your-store-name.myshopify.com）。

🔒 第二步：配置本地环境变量

将复制好的 API 密钥和域名填入 Next.js 项目根目录的 .env 文件中。如果您正在使用我们生产就绪的 SaaS 启动套件，这些变量可以轻松地注入到您在 Cloudflare 或 Vercel 上的生产部署环境里：

NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN="your-store-name.myshopify.com"
NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN="your_storefront_access_token_here"

📡 第三步：编写统一的 Shopify 请求客户端

我们来封装一个优雅的 Fetch 函数来统一向 Shopify 终结点发起 GraphQL 查询。由于 Next.js 具备极强的数据缓存和预渲染能力，我们可以让 React 服务端组件（RSC）静态或动态地调取商品名录。

在 src/lib/shopify.ts 中创建以下辅助函数：

const domain = process.env.NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN;
const token = process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN;

export async function shopifyFetch<T>({
  query,
  variables = {},
}: {
  query: string;
  variables?: Record<string, any>;
}): Promise<{ status: number; body: T }> {
  try {
    const response = await fetch(`https://${domain}/api/2024-01/graphql.json`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-Shopify-Storefront-Access-Token": token || "",
      },
      body: JSON.stringify({ query, variables }),
      next: { revalidate: 3600 }, // 将商品数据缓存 1 小时，避免频繁请求 API
    });

    return {
      status: response.status,
      body: await response.json(),
    };
  } catch (error) {
    console.error("Error fetching from Shopify:", error);
    throw error;
  }
}

📊 第四步：编写 GraphQL 查询并渲染商品

让我们编写一个简单的 GraphQL 语句，从 Shopify 后台拉取前 6 件商品的详细信息。

export interface ShopifyProduct {
  id: string;
  title: string;
  handle: string;
  description: string;
  images: {
    edges: Array<{
      node: {
        url: string;
        altText: string;
      };
    }>;
  };
  priceRange: {
    minVariantPrice: {
      amount: string;
      currencyCode: string;
    };
  };
}

interface ShopifyProductsResponse {
  data: {
    products: {
      edges: Array<{
        node: ShopifyProduct;
      }>;
    };
  };
}

export async function getProducts(): Promise<ShopifyProduct[]> {
  const query = `
    query GetProducts {
      products(first: 6) {
        edges {
          node {
            id
            title
            handle
            description
            images(first: 1) {
              edges {
                node {
                  url
                  altText
                }
              }
            }
            priceRange {
              minVariantPrice {
                amount
                currencyCode
              }
            }
          }
        }
      }
    }
  `;

  const res = await shopifyFetch<ShopifyProductsResponse>({ query });
  return res.body.data.products.edges.map((edge) => edge.node);
}

通过这一层清晰的数据结构转化，您便能利用 CSS 极速网格（Grids）渲染出完全响应式的卡片组件。这样构建的前端界面加载延迟往往小于 100 毫秒，在 Google 的 Core Web Vitals（核心网页指标）测试中可轻松拿到满分，极大提升网站的 Google SEO 自然排名。

⚡ 终极业务增收公式：Shopify + ShipSaaS

在当下的 SaaS 生态中，很多开发者不仅仅贩卖纯软件订阅，他们也善于构建 包含零售周边的综合性 SaaS 平台，或者运营数字化电商代建站机构。

例如：您可以设计一套包月的高端会员服务（由我们开箱即用的 Stripe 订阅设置负责计费），该服务能让订阅者在由 Shopify 驱动的自定义周边商城中解锁大幅折扣或购买限定实物商品。

为了实现这套跨平台的业务闭环，您需要一整套久经沙场检验的成熟技术底座：

生产级别的安全用户认证与注册。
完善的多语言国际化翻译方案（基于 next-intl）。
专为边缘计算网络优化过的数据库查询链路。
精准且支持动效的高转化率定价展示卡片。

与其在这类通用功能上重复造轮子浪费数周的开发时间，不如直接部署我们全副武装的技术栈。立即了解极具性价比的 ShipSaaS 价格方案，在今天下午就开始着手构建您的产品。

🏁 下一步行动

既然您已成功跑通了 Storefront API，后续您可以继续拓展：

编写自定义的“无头购物车”管理状态。
引导用户无缝跳转至 Shopify 的高转化率安全结账流程。
配合 Webhooks 在用户支付订单后自动开通或升级其在您 SaaS 平台中的相关权益。

无头架构代表了电商的未来趋势。立即使用它，在您的全栈 SaaS 开发旅程中尽情施展创意吧！