You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
[](https://vercel.com/new/clone?demo-title=Next.js%20%2B%20BigCommerce&demo-description=An%20all-in-one%20starter%20kit%20for%20high-performance%20BigCommerce%20storefronts.&demo-url=https%3A%2F%2Fnext-commerce-v2.vercel.app%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F1RzhtOHEvW7xyn9qAsdr5E%2F783c7bbd498d0f3b752637d2efa0bb6e%2FNew_Project__5_.png&from=templates&repository-url=https%3A%2F%2Fgithub.com%2Fbigcommerce%2Fnextjs-commerce&project-name=nextjs-commerce&repository-name=nextjs-commerce&integration-ids=oac_nsrwzogJLEFglVwt2060kB0y)
3
+
This is our fork of Vercel's Next.js storefront starter.
4
4
5
-
A Next.js 14 and App Router-ready headless storefront template for BigCommerce, featuring:
6
-
7
-
- Next.js App Router
8
-
- Optimized for SEO using Next.js's Metadata
9
-
-[React Server Components (RSCs)](https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) and [Suspense](https://react.dev/blog/2022/03/29/react-v18#suspense-in-data-frameworks)
10
-
- Route handlers for mutations
11
-
- Edge runtime
12
-
- New fetching and caching paradigms
13
-
- Dynamic OG images
14
-
- Styling with [Tailwind CSS](https://tailwindcss.com/)
15
-
- Automatic light/dark mode based on system settings
16
-
17
-
## 🔎 Looking for more?
18
-
19
-
Learn more about our suite of Next.js 13+ tools for enterprise commerce: https://developer.bigcommerce.com/catalyst
5
+
> [!NOTE]
6
+
> **✨ Looking for more out-of-the-box ecommerce functionality? Try Catalyst, BigCommerce's reference storefront for Next.js. ✨**
7
+
>
8
+
> Catalyst is our first-party developed and fully supported Next.js storefront, offering:
9
+
> - Deep integration with our 100s of commerce features, all powered by GraphQL
10
+
> - Fully customizable UI kit built specifically for ecommerce
11
+
> - Easily configurable multi-region and multi-lingual storefront support
12
+
>
13
+
> [Learn more at catalyst.dev →](https://catalyst.dev)
20
14
21
15
## Prerequisites
22
16
23
-
Next.js + BigCommerce requires a [BigCommerce sandbox](https://developer.bigcommerce.com/api-docs/partner/create-a-sandbox) or a [production store provisioned to run a headless storefront](https://www.bigcommerce.com/solutions/multi-store/).
17
+
This starter requires a [BigCommerce sandbox](https://start.bigcommerce.com/developer-sandbox/) or a [production store provisioned to run a headless storefront](https://www.bigcommerce.com/solutions/multi-store/).
24
18
25
19
To get started, use this README and the [example environment variable comments](https://github.com/bigcommerce/nextjs-commerce/blob/main/.env.example).
26
20
27
21
## Develop locally
28
22
29
-
To automatically clone the template repo and configure Vercel environment variables for your project, use the [Deploy with Vercel](#) button at the beginning of this README. After you complete the interactive configuration sequence, you can clone the automatically-created project to your local environment.
30
-
31
-
You can also clone the template repo manually and supply the environment variables [defined in .env.example](https://github.com/bigcommerce/nextjs-commerce/blob/main/.env.example). The best practice is to use [Vercel environment variables](https://vercel.com/docs/concepts/projects/environment-variables) for this, but a `.env` file is all that is necessary.
23
+
Clone the template repo manually and supply the environment variables [defined in .env.example](https://github.com/bigcommerce/nextjs-commerce/blob/main/.env.example). The best practice is to use [Vercel environment variables](https://vercel.com/docs/concepts/projects/environment-variables) for this, but a `.env` file is all that is necessary.
32
24
33
25
> Note: Do not commit your `.env` file. It exposes secrets that allow others to control your BigCommerce store.
34
26
@@ -65,13 +57,13 @@ The app runs on [localhost:3000](http://localhost:3000/).
65
57
66
58
## Get to know the BigCommerce GraphQL Storefront API
67
59
68
-
In addition to being compatible with BigCommerce's multi-storefront features, Next.js + BigCommerce uses the [GraphQL Storefront API](https://developer.bigcommerce.com/api-docs/storefront/graphql/graphql-api-overview). This API makes it possible for merchants to control the representation of products and categories, carts, orders, customer segmentation, and more. To get a sense of what is possible to do directly on the storefront, check out the [GraphQL Playground](https://developer.bigcommerce.com/graphql-storefront/playground).
60
+
In addition to being compatible with BigCommerce's multi-storefront features, this starter uses the [GraphQL Storefront API](https://developer.bigcommerce.com/api-docs/storefront/graphql/graphql-api-overview). This API makes it possible for merchants to control the representation of products and categories, carts, orders, customer segmentation, and more. To get a sense of what is possible to do directly on the storefront, check out the [GraphQL Playground](https://developer.bigcommerce.com/graphql-storefront/playground).
69
61
70
62
When you access the Playground through the store control panel, BigCommerce provides a valid GraphQL Storefront authentication token without any additional API calls on your part. To access the dedicated GraphQL Playground for a particular sandbox or store, sign in to its BigCommerce account and navigate to **[Settings > API](https://login.bigcommerce.com/deep-links/manage/settings-list)**, then click **Storefront API Playground**.
71
63
72
64
## Explore BigCommerce features
73
65
74
-
BigCommerce's open SaaS feature set powers your store. Visit the BigCommerce developer documentation to learn more about your options for the following features:
66
+
Visit BigCommerce's developer center to learn more about all aspects of our platform. Here are some quick links to kick off your journey:
75
67
76
68
Core store configuration:
77
69
@@ -95,4 +87,4 @@ Shopper journeys:
95
87
96
88
## Join our developer community
97
89
98
-
We invite you to give feedback and ask questions in our [Developer Community](https://developer.bigcommerce.com/community) BigCommerceDevs Slack or on our Discord server.
90
+
We'd love to see hear any feedback and answer your questions in our [Developer Community](https://developer.bigcommerce.com/community).
0 commit comments