克隆Vercel Commerce Shopify仓库后遇URL格式错误求助

克隆Vercel官方Commerce Shopify仓库后，严格按本地运行步骤操作，出现如下错误：

error {
  cause: 'TypeError [ERR_INVALID_URL]: Invalid URL',
  status: 500,
  message: 'URL is malformed "/api/2023-01/graphql.json". Please use only absolute URLs - https://nextjs.org/docs/messages/middleware-relative-urls',
  query: '\n  query getMenu($handle: String!) {\n    menu(handle: $handle) {\n      items {\n        title\n        url\n      }\n    }\n  }\n'
}
- error {
  cause: 'TypeError [ERR_INVALID_URL]: Invalid URL',
  status: 500,
  message: 'URL is malformed "/api/2023-01/graphql.json". Please use only absolute URLs - https://nextjs.org/docs/messages/middleware-relative-urls',
  query: '\n  query getCollectionProducts(\n    $handle: String!\n    $sortKey: ProductCollectionSortKeys\n    $reverse: Boolean\n  ) {\n    collection(handle: $handle) {\n      products(sortKey: $sortKey, reverse: $reverse, first: 100) {\n        edges {\n          node {\n            ...product\n          }\n        }\n      }\n    }\n  }\n  \n  fragment product on Product {\n    id\n    handle\n    availableForSale\n    title\n    description\n    descriptionHtml\n    options {\n      id\n      name\n      values\n    }\n    priceRange {\n      maxVariantPrice {\n        amount\n        currencyCode\n      }\n      minVariantPrice {\n        amount\n        currencyCode\n      }\n    }\n    variants(first: 250) {\n      edges {\n        node {\n          id\n          title\n          availableForSale\n          selectedOptions {\n            name\n            value\n          }\n          price {\n            amount\n            currencyCode\n          }\n        }\n      }\n    }\n    featuredImage {\n      ...image\n    }\n    images(first: 20) {\n      edges {\n        node {\n          ...image\n        }\n      }\n    }\n    seo {\n      ...seo\n    }\n    tags\n    updatedAt\n  }\n  \n  fragment image on Image {\n    url\n    altText\n    width\n    height\n  }\n\n  \n  fragment seo on SEO {\n    description\n    title\n  }\n\n\n'
}
- error {
  cause: 'TypeError [ERR_INVALID_URL]: Invalid URL',
  status: 500,
  message: 'URL is malformed "/api/2023-01/graphql.json". Please use only absolute URLs - https://nextjs.org/docs/messages/middleware-relative-urls',
  query: '\n  query getCollectionProducts(\n    $handle: String!\n    $sortKey: ProductCollectionSortKeys\n    $reverse: Boolean\n  ) {\n    collection(handle: $handle) {\n      products(sortKey: $sortKey, reverse: $reverse, first: 100) {\n        edges {\n          node {\n            ...product\n          }\n        }\n      }\n    }\n  }\n  \n  fragment product on Product {\n    id\n    handle\n    availableForSale\n    title\n    description\n    descriptionHtml\n    options {\n      id\n      name\n      values\n    }\n    priceRange {\n      maxVariantPrice {\n        amount\n        currencyCode\n      }\n      minVariantPrice {\n        amount\n        currencyCode\n      }\n    }\n    variants(first: 250) {\n      edges {\n        node {\n          id\n          title\n          availableForSale\n          selectedOptions {\n            name\n            value\n          }\n          price {\n            amount\n            currencyCode\n          }\n        }\n      }\n    }\n    featuredImage {\n      ...image\n    }\n    images(first: 20) {\n      edges {\n        node {\n          ...image\n        }\n      }\n    }\n    seo {\n      ...seo\n    }\n    tags\n    updatedAt\n  }\n  \n  fragment image on Image {\n    url\n    altText\n    width\n    height\n  }\n\n  \n  fragment seo on SEO {\n    description\n    title\n  }\n\n\n'
}
- error {
  cause: 'TypeError [ERR_INVALID_URL]: Invalid URL',
  status: 500,
  message: 'URL is malformed "/api/2023-01/graphql.json". Please use only absolute URLs - https://nextjs.org/docs/messages/middleware-relative-urls',
  query: '\n  query getMenu($handle: String!) {\n    menu(handle: $handle) {\n      items {\n        title\n        url\n      }\n    }\n  }\n'
}
- error [Error: Error: [object Object]] { digest: '2479588004' }
- error [Error: Error: [object Object]] { digest: '2479588004' }
- error [Error: Error: [object Object]] { digest: '2479588004' }
- error [Error: Error: [object Object]] { digest: '2479588004' }

已尝试以下操作但未解决：

• 查阅Next.js官方文档
• 搜索Vercel、NextAuth同类问题并尝试方案
• 设置VERCEL_URL为http://localhost:3000
• 删除.next文件夹，多次重新克隆仓库并严格按步骤操作
• 参考Stack Overflow相关解决方案

修复步骤 #

1. 修正Shopify环境变量
   打开.env.local文件，确保SHOPIFY_STORE_DOMAIN是完整的绝对URL，格式为https://你的店铺域名.myshopify.com，不能只填域名部分。同时确认SHOPIFY_STOREFRONT_ACCESS_TOKEN是正确的Shopify Storefront API令牌（需在Shopify后台生成并配置权限）。

2. 检查GraphQL请求URL构建逻辑
   定位代码中发起Shopify GraphQL请求的部分（通常在lib/shopify.js或类似文件），确保URL是基于SHOPIFY_STORE_DOMAIN拼接的完整路径，示例代码：

   const storeDomain = process.env.SHOPIFY_STORE_DOMAIN;
   const graphqlEndpoint = `${storeDomain}/api/2023-01/graphql.json`;
   

   避免直接使用相对路径/api/2023-01/graphql.json。

3. 排查Next.js配置异常
   检查next.config.js，如果设置了basePath或assetPrefix，需调整为适合本地开发的配置（本地开发通常不需要这两个配置），避免干扰URL解析。

4. 彻底清除缓存并重启
   执行以下命令清理缓存、重装依赖并重启开发服务：

   rm -rf .next node_modules
   npm install
   npm run dev
   

内容的提问来源于stack exchange，提问作者InverseCramer