🧱 Installation

Install the SDK and configure your environment to start building your Shopify headless storefront with Next.js.

📦 Install the package​

Use your favorite package manager to add the SDK to your project:

npm install @nextshopkit/sdk

or​

yarn add @nextshopkit/sdk

or​

pnpm add @nextshopkit/sdk

🌐 Shopify API Access​

Configure your environment variables based on your usage:

For server-side operations (recommended for data fetching):

SHOPIFY_ACCESS_TOKEN=your-storefront-access-token
SHOPIFY_STORE_DOMAIN=your-shop.myshopify.com

For client-side operations (required for cart functionality):

NEXT_PUBLIC_SHOPIFY_ACCESS_TOKEN=your-storefront-access-token
NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=your-shop.myshopify.com

You can get the Storefront Access Token and Store Domain from your Shopify admin:

• Go to Apps > Develop Apps
• Create or use an existing private app
• Enable Storefront API access
• Copy the generated Access Token

🧠 Suggested Project Structure​

We recommend creating a centralized client for typed access and shared options.

Create your Shopify SDK wrapper under:

lib/NextShopKit/client.ts

import {
  createShopifyClient,
  FetchProductResult,
  FetchProductsResult,
  GetCollectionOptions,
  FetchCollectionResult,
  GetProductOptions,
} from "@nextshopkit/sdk";

const client = createShopifyClient({
  shop: process.env.SHOPIFY_STORE_DOMAIN!,
  token: process.env.SHOPIFY_ACCESS_TOKEN!,
  apiVersion: "2025-04",
  enableMemoryCache: true,
  defaultCacheTtl: 300,
  enableVercelCache: true,
  defaultRevalidate: 60,
});

export const getProduct = async (
  args: GetProductOptions
): Promise<FetchProductResult> => client.getProduct(args);

export const getCollection = async (
  args: GetCollectionOptions
): Promise<FetchCollectionResult> => client.getCollection(args);

export default client;

import { createShopifyClient } from "@nextshopkit/sdk";

const client = createShopifyClient({
  shop: process.env.SHOPIFY_STORE_DOMAIN,
  token: process.env.SHOPIFY_ACCESS_TOKEN,
  apiVersion: "2025-04",
  enableMemoryCache: true,
  defaultCacheTtl: 300,
  enableVercelCache: true,
  defaultRevalidate: 60,
});

export const getProduct = async (args) => client.getProduct(args);

export const getCollection = async (args) => client.getCollection(args);

export default client;

🔒 Security & Usage Guidelines​

🛡️ Server-side Usage (Recommended)​

Use private environment variables for optimal security and performance:

• Server Components (App Router)
• API routes and Route Handlers
• "use server" utilities
• Static generation and server-side rendering

⚛️ Client-side Usage (When Required)​

Use NEXT_PUBLIC_ environment variables for interactive features:

• Cart management (CartProvider, useCart())
• Real-time updates and dynamic content
• Interactive configurators

🚀 PRO Version (Coming Soon)​

The PRO version unlocks advanced features like:

• Metaobjects
• Blogs & Articles
• Product Recommendations
• Advanced Cart
• Localization
• Shopify Search

After purchase, you'll receive a unique token to unlock PRO features via environment variable.

📄 Setup instructions for PRO are in Installation: PRO →

✅ Next up: Usage →