Developer preview
This is a developer preview of GraphCommerce. The documentation will be updated as GraphCommerce introduces new features and refines existing functionality.
This guide describes how to store environment variables in your GraphCommerce project.
You can store environment variables in the .env file in your GraphCommerce root
directory. Any variable from .env files that aren't prefixed with NEXT_PUBLIC
is treated as a server runtime variable. These variables are not exposed to the
browser.
Environment variables will be loaded into process.env
, allowing you to use
them in Next.js data fetching methods and API routes:
// /lib/graphql/GraphQLProvider.tsx
// ...
new HttpLink({
uri: process.env.NEXT_PUBLIC_GRAPHQL_ENDPOINT,
credentials: 'same-origin',
})
// ...
Expose environment variables to the browser by prefixing with NEXT_PUBLIC
.
These variables can be accessed in any component:
# Google TagManager ID
NEXT_PUBLIC_GTM_ID="GTM-000000"
// /node_modules/@graphcommerce/googleanalytics/components/GoogleAnalyticsScript.tsx
export default function GoogleAnalyticsScript() {
const id = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS
...
}
When deploying your GraphCommerce storefront to Vercel, Environment Variables can be configured in the Project Settings.