# Lesson 8.1 - Set up the frontend starter

Clone the Next.js e-commerce starter, install dependencies, and orient yourself to the repo structure before connecting it to Hygraph.

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.

**New to Next.js?:**
This lesson clones a pre-built starter. If you want to understand how to create a Next.js project from scratch, see the [Next.js documentation](https://nextjs.org/docs). Creating a Next.js app from scratch is out of scope for this tutorial.

## 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:

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

3. Navigate into the project directory:

    ```bash
    cd hygraph-next-commerce-starter
    ```

4. Install the package dependencies:

    ```bash
    npm install
    ```

Your project file tree should look like this:

![Next file tree](https://hygraph.com/images/docs/getting-started/next-file-tree.png)

## 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:

```bash
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

[Lesson 8.2 - Connect your storefront](https://hygraph.com/docs/getting-started/tutorial/tutorial-connect-storefront)

Or, go to the [Tutorial overview](https://hygraph.com/docs/getting-started/tutorial/tutorial-overview) for the full lesson list.