E-commerce websites are among the most popular for businesses as they enable customers to purchase items from your store from the comfort of their hom

Build an E-commerce Website With Directus and Next.js

submited by

Style Pass

2024-06-07 13:00:02

E-commerce websites are among the most popular for businesses as they enable customers to purchase items from your store from the comfort of their homes. In this article, you'll build an e-commerce store with Next.js as its front end, Directus as its backend services, and Stripe for payment processing.

Before setting up Directus, let's understand how the different data models you will set up in Directus are related. You need 3 data collections - categories, products, orders. A product can only be in one category in this data model.

Open the e-com-directus project in a text editor and create a .env.local file, being sure to place the value with your Directus project URL:

In the lib directory, create a new file called apis.ts. This file will contain all the API requests the Next.js application will make to Directus.

This function searches through the products collection in Directus and returns the product(s) that matches the query and is available for purchase.