โ Frequently Asked Questions
Whether you're getting started or deep in development, this FAQ addresses the most common questions developers ask about @nextshopkit/sdk
.
๐ง Installation & Setupโ
Which version of Next.js do I need to use this SDK?
The SDK works with both the App Router and Pages Router in Next.js. For the best experience, we recommend Next.js 13.4 or higher, which introduces "use server"
and stable server component support.
That said, the SDK is also fully compatible with:
getServerSideProps
andgetStaticProps
- API routes in the Pages Router
- Route Handlers in the App Router
How do I configure environment variables?
To use the SDK, you need to set the following in your .env.local
:
SHOPIFY_ACCESS_TOKEN=your-storefront-access-token
SHOPIFY_STORE_DOMAIN=your-shop.myshopify.com
These values come from your Shopify admin under:
Apps โ Develop Apps โ Configure Storefront API.
These variables must stay on the server and will never be exposed to the client.
Which Shopify API version does this SDK use?
By default, this SDK targets:
2025-04
You can customize this in the createShopifyClient()
function using the apiVersion
option. Keeping your API version up to date ensures compatibility with the latest Shopify features and data structures.
Will the free CORE version always remain free?
โ Yes! The CORE tier is 100% open source and will always be free to use.
It includes:
- Product & collection fetching
- Cart features
- Metafield support
- Utility functions
We're committed to keeping the fundamentals accessible to everyone โ forever.
Can I enable caching?
Yes! You can enable multiple layers of caching for Shopify API responses.
When configuring createShopifyClient()
, you can pass these options:
const client = createShopifyClient({
shop: process.env.SHOPIFY_STORE_DOMAIN!,
token: process.env.SHOPIFY_ACCESS_TOKEN!,
apiVersion: "2025-04",
enableMemoryCache: true,
defaultCacheTtl: 300, // Time in seconds to cache in memory
enableVercelCache: true,
defaultRevalidate: 60, // Time in seconds to revalidate Vercel cache
});
enableMemoryCache
: keeps results in memory (great for edge/serverless runtime reuse)enableVercelCache
: uses Vercel's built-in ISR system for external fetches- You can override these settings per request (e.g., in
getProduct()
) in the PRO tier.
This helps reduce API calls, speed up builds, and protect against rate limits.
๐ Features & Usageโ
How do I fetch a product and handle errors correctly?
When calling getProduct()
, the SDK returns { data, error }
.
Example:
const { data, error } = await getProduct({ handle: "my-product" });
if (error || !data) {
return <div>Product not found.</div>;
}
return (
<>
<h1>{data.title}</h1>
<p>
{data.price.amount} {data.price.currencyCode}
</p>
<div dangerouslySetInnerHTML={{ __html: data.descriptionHtml }} />
</>
);
You should always check for error
before rendering. This keeps your UX clean and protects you from runtime crashes due to missing data.
Can I use this SDK in client components?
Yes, but with proper security considerations.
For cart functionality (required client-side usage):
NEXT_PUBLIC_SHOPIFY_ACCESS_TOKEN=your-storefront-access-token
NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=your-shop.myshopify.com
For data fetching (recommended server-side usage):
SHOPIFY_ACCESS_TOKEN=your-storefront-access-token
SHOPIFY_STORE_DOMAIN=your-shop.myshopify.com
โ Client-side usage is required for:
- Cart management (
CartProvider
,useCart()
) - Real-time inventory updates
- Interactive product configurators
โ Server-side usage is recommended for:
- Product pages and collections
- Search results and static generation
- Better performance and SEO
Security guidelines:
- Only use Storefront API tokens for client-side (never Admin API)
- Ensure minimal required permissions
- Consider rate limiting and request validation
Can I filter, sort, and paginate products?
Yes! The getCollection()
function supports:
- Filters (e.g. by price, availability, metafields)
- Sort keys like
PRICE
,TITLE
,CREATED_AT
- Pagination using cursors (
after
,before
)
This makes it perfect for building dynamic collection pages, category filters, or even faceted search.
๐ Learn more in Filters โ
How do I fetch metafields and transform them?
You can define metafields using the customMetafields
array.
To reshape or enhance them, use the transformMetafields()
option to:
- Flatten nested references
- Format or compute display values
- Create summaries or fallback text
Example:
transformMetafields: (raw, casted) => ({
...casted,
metaSummary: `Brand: ${casted["custom.brand"]} ยท ${casted["custom.weight"]} kg`,
});
This keeps rendering logic outside of your components and inside the data layer.
โ๏ธ Comparisons & Strategyโ
Why should I use this SDK instead of Shopify Hydrogen?
Hydrogen is great โ but it comes with constraints:
- Built around Vite and RSC
- Smaller community
- Custom tooling and routing
@nextshopkit/sdk
lets you:
- Stay in Next.js (the most popular React meta-framework)
- Use your own stack and deploy anywhere (Vercel, AWS, Cloudflare)
- Leverage a massive ecosystem and better hiring pool
If you want flexibility, familiarity, and scalability โ this SDK fits better.
What are the real benefits of Headless Shopify?
Headless lets you break free from Shopify's frontend limitations. You get:
- Full design freedom (no Liquid or theme constraints)
- Better performance and SEO with SSR/SSG
- Custom checkout flows or APIs
- Seamless integration with CRMs, CDPs, or other tools
And with the PRO tier, even content like landing pages or blogs can be fully managed from inside Shopify using metaobjects.
Why use this SDK over raw GraphQL or other clients?
Raw GraphQL is powerful โ but also repetitive, error-prone, and hard to type.
This SDK offers:
- Pre-built functions for 90% of your use cases
- Type-safe inputs and outputs
- Easier metafield handling
- Optional transformations and customization
Most devs spend hours debugging queries. This SDK makes your work predictable and fast.
๐ SEO & Performanceโ
Is this SDK SEO-friendly?
Yes! Since it runs on Next.js, it fully supports:
- Server-side rendering (SSR)
- Static generation (SSG)
- Dynamic routing
- Clean, crawlable URLs
Plus, features like rich_text
rendering and transformMetafields()
help you control your content for SEO without needing extra CMS tools.
Will this SDK slow down my site?
No โ it's designed for performance.
Because it's server-side only, it keeps your frontend lightweight and secure.
You can also cache or revalidate queries using:
fetch-cache
strategies- Next.js
revalidate
or ISR - Custom in-memory or edge caching
Have a question that's not here? ๐ฌ Open an issue.
Description
Frequently asked questions about @nextshopkit/sdk โ including setup, usage, headless Shopify benefits, SEO tips, and Hydrogen comparisons.