A JAMstack e-commerce site using Next.js, Contentful and Foxy

Live demo: https://foxy-contentful-nextjs.vercel.app/

Step-by-step guide: Build a JAMstack Ecommerce Website with Next.js, Contentful, and Foxy

🛠 Technologies used

• Next.js - Front-end framework
• Contentful - Headless CMS
• Foxy - Shopping cart
• Vercel - Deployment
• Tailwind CSS - CSS framework
• GraphQL - Query language for Contentful API

🚀 Quick start

Set up Foxy

1. Sign up or log in your Foxy admin account

2. Create a new store or use an existing one. Other settings are optional. The key thing is to have your own Foxy store subdomain.

Set up Contentful

1. Sign up or log in Contentful, and create a new empty space from the dashboard

2. From the newly created space, go to Content model and add a new content type: give it the Name Product, the Api Identifier should be product

3. Add these fields and configure all as required fields:

   • name - Text field (type short text)
   • slug - Text field. You can optionally go to the settings of this field, and under Appearance, select Slug to display it as a slug of the name field.
   • price - Number field (type Decimal)
   • image - Media field (type one file)
   • inventory - Number field (type Integer)
   • description - Rich text field
   • featured - Boolean field

4. Head to the Content tab, add a few products and publish

Get the required environment variables

From your Contentful space, go to Settings > API keys. There will be an example Content delivery / preview token - you can use these API keys or create a new key.

• CONTENTFUL_SPACE_ID should be the Space ID field of your API Key

• CONTENTFUL_ACCESS_TOKEN should be the Content Delivery API - access token field of your API key

• NEXT_PUBLIC_FOXY_SUBDOMAIN should be the Foxy store subdomain, which can be found in the Foxy admin Dashboard. For exmaple, if your store domain is foxy-demo.foxycart.com, the subdomain would be foxy-demo

• FOXY_STORE_SECRET is required only if you want to enable Foxy HMAC cart validation. To get this variable value, go to Advanced Settings in the Foxy admin. Look for the "store secret" setting, click the "Show" button, and copy the value in the text box. Also, you need to check the "would you like to enable cart validation?" option in the same section

Deploy to Vercel with one click

🏗 Want to get your hands dirty?

1. Clone this repo: git clone https://github.com/lrnxie/foxy-contentful-nextjs
2. Copy the .env.example file to .env.local, and set the variables
3. Make your changes
4. Push it to GitHub/GitLab/Bitbucket and import to Vercel.

Important: When you import your project on Vercel, make sure to click on Environment Variables and set them to match your .env.local file.