In this lesson, you will clone the Hygraph Next.js e-commerce starter and install its dependencies. By the end, the starter will be running locally and ready to be connected to your Hygraph project in the next lesson.

#Clone the starter

1. Open your terminal and navigate to the directory where you want the project.

2. Run the following command to clone the starter:

   git clone https://github.com/hygraph/hygraph-next-commerce-starter.git

   Copy

3. Navigate into the project directory:

   cd hygraph-next-commerce-starter

   Copy

4. Install the package dependencies:

   npm install

   Copy

Your project file tree should look like this:

Next file tree

#What's in the starter

The starter is a Next.js 13 App Router project with Tailwind CSS. Three directories contain the code that powers the storefront:

• app/: Next.js page components and dynamic routes. The product page at app/products/[slug]/page.js and the landing page at app/[slug]/page.js are the two routes your Hygraph content populates.

• utils/: GraphQL query functions. The queries you wrote in lesson 7.1 are used here to fetch content from Hygraph. Each query function maps to a page or component in the app/ directory.

• components/: UI components for navigation, product grids, CTAs, landing page sections, and product reviews.

#What's in .env.sample

The starter includes a .env.sample file in the project root. It contains the three environment variable placeholders you will populate in lessons 8.2 and 8.3:

HYGRAPH_ENDPOINT=
HYGRAPH_DEV_AUTH_TOKEN=
HYGRAPH_PREVIEW_SECRET=

Do not populate these yet. Lesson 8.2 explains what each variable controls and where to find the values.

#What's next

Or, go to the Tutorial overview for the full lesson list.