Storyblok & Next.js Commerce

Demo: nextjs-bigcommerce-starter.vercel.app

Full Tutorial: storyblok.com/tp/storefront-next-bigcommerce

The all-in-one starter kit for high-performance eCommerce sites. Start right now at nextjs.org/commerce

Features

• Performant by default
• SEO Ready
• Internationalization
• Responsive
• UI Components
• Theming
• Standardized Data Hooks
• Integrations - Integrate seamlessly with the most common ecommerce platforms.
• Dark Mode Support

Goals

• Next.js Commerce should have a completely data agnostic UI
• Aware of schema: should ship with the right data schemas and types.
• All providers should return the right data types and schemas to blend correctly with Next.js Commerce.
• @framework will be the alias utilized in commerce and it will map to the ecommerce provider of preference- e.g BigCommerce, Shopify, Swell. All providers should expose the same standardized functions. Note that the same applies for recipes using a CMS + an ecommerce provider.

There is a framework folder in the root folder that will contain multiple ecommerce providers.

Additionally, we need to ensure feature parity (not all providers have e.g. wishlist) we will also have to build a feature API to disable/enable features in the UI.

People actively working on this project: @okbel & @lfades.

Troubleshoot

I already own a BigCommerce store. What should I do?

First thing you do is: set your environment variables

.env.local

BIGCOMMERCE_STOREFRONT_API_URL=<>
BIGCOMMERCE_STOREFRONT_API_TOKEN=<>
BIGCOMMERCE_STORE_API_URL=<>
BIGCOMMERCE_STORE_API_TOKEN=<>
BIGCOMMERCE_STORE_API_CLIENT_ID=<>
STORYBLOK_TOKEN=<>

If your project was started with a "Deploy with Vercel" button, you can use Vercel's CLI to retrieve these credentials.

1. Install Vercel CLI: npm i -g vercel
2. Link local instance with Vercel and Github accounts (creates .vercel file): vercel link
3. Download your environment variables: vercel env pull .env.local

Next, you're free to customize the starter. More updates coming soon. Stay tuned.

BigCommerce shows a Coming Soon page and requests a Preview Code

After Email confirmation, Checkout should be manually enabled through BigCommerce platform. Look for "Review & test your store" section through BigCommerce's dashboard.

BigCommerce team has been notified and they plan to add more detailed about this subject.