Next.js中Context组件无法读取环境变量是否需要额外配置？

AI 小北

2026-10-22

问题根因与解决方案

1. Context使用错误（最高优先级修复项）

你在_app.tsx里引入的是ShopContext上下文对象，而非你导出的ShopProvider提供者组件，这会直接导致上下文没有完成初始化，Client实例创建逻辑也不会正常执行，表现出来就是环境变量读取失败。
修复方案：修改_app.tsx的引入和组件使用逻辑：

// 把原来的import ShopContext替换为
import ShopProvider from "../src/context/ShopContext";

// 组件包裹部分也同步替换为ShopProvider
<ShopProvider>
  <AnimatePresence exitBeforeEnter>
    <Component
      {...pageProps}
      {...props}
    />
  </AnimatePresence>
</ShopProvider>

2. Next.js环境变量暴露规则问题

Next.js默认只会把前缀为NEXT_PUBLIC_的环境变量暴露到客户端运行时，你当前的SHOPIFY_ACCESS_TOKEN没有对应前缀，所以如果ShopContext代码在客户端侧执行时，会读取不到该变量，返回undefined。
可任选以下一种方案修复：

方案1：Shopify的Storefront Access Token本身就是允许公开在前端使用的，你可以直接把.env里的变量名改为NEXT_PUBLIC_SHOPIFY_ACCESS_TOKEN，代码里读取的位置同步修改为process.env.NEXT_PUBLIC_SHOPIFY_ACCESS_TOKEN即可
方案2：如果不想修改变量名，可在next.config.js中添加配置主动暴露变量：

// next.config.js
module.exports = {
  env: {
    SHOPIFY_ACCESS_TOKEN: process.env.SHOPIFY_ACCESS_TOKEN,
    SHOPIFY_DOMAIN: process.env.SHOPIFY_DOMAIN,
  },
}