NoteThis guide is for setting up your local environment using our nextjs-commerce-agilitycms site based on the Commerce Next.js Template.
Once logged into Agility CMS, you'll want to grab your API credentials so your Next.js site can authenticate and retrieve data from your Agility Instance and Ecommerce Providers.
From your Agility CMS dashboard, click into Settings > API Keys.
Take note of your
GUID and your
Live API Key and
Preview API Key credentials and copy these somewhere temporarily as you'll need to use them later.
Get The Code
- Clone this repository, and open it in your favorite Text Editor
yarn installto install packages and dependencies
Set up Authentication
- Rename the .env.template file to
- Retrieve your
API Keys (Preview/Fetch)and
Security Keyfrom Agility CMS and place them in your
# Your Instance Id AGILITY_GUID=
# Your Live API Key AGILITY_API_FETCH_KEY=
# Your Preview API Key AGILITY_API_PREVIEW_KEY=
# Your Security Key AGILITY_SECURITY_KEY=
The next step is to configure your Ecommerce Provider:
# Available providers: bigcommerce, shopify, swell, saelor COMMERCE_PROVIDER=shopify
Depending on the Ecommerce Provider you select, you'll be required to add certain Tokens, URL's, ID's etc. For example:
#BigCommerce BIGCOMMERCE_STOREFRONT_API_URL= BIGCOMMERCE_STOREFRONT_API_TOKEN= BIGCOMMERCE_STORE_API_URL= BIGCOMMERCE_STORE_API_TOKEN= BIGCOMMERCE_STORE_API_CLIENT_ID= BIGCOMMERCE_CHANNEL_ID=
#Shopify NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN= NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN=
Start the Site
To run the site locally, run
npm run dev or
yarn run dev. If successful, Next.js will compile your pages in real-time and you will be able to access the site in your browser on http://localhost:3000.
Did you get a Build Error?
If you get an error during the build, check your log and ensure that you've entered the correct GUID and API Keys, configured your Ecommerce Provider correctly, as well as renamed the env.template file to
Deploy your new Next.js site
With your Next.js site hooked up to Agility CMS, we can get started on deploying our site. The recommended way to deploy a Next.js website to production is to use Vercel, a hosting platform from the creators of Next.js. You can get your Next.js and Agility CMS website deployed with a Preview Environment setup within minutes from your Agility CMS Manager!