Hygraph
Docs
You are currently reading the Studio Docs. If you were looking for the Classic Docs check here

#Lesson 8 - Frontend connection

This section covers setting up the Next.js e-commerce starter, connecting it to your Hygraph project, and configuring a preview URL for draft content.

The work in this section is configuration only. The starter handles all the frontend code for routing, components, queries, and styling. You need to provide the environment variables that tell the starter where to find your Hygraph project and how to authenticate.

The starter uses two different ways to access your Hygraph content:

  • The Content API serves public visitors. It only returns content that has been explicitly published.
  • A Permanent Auth Token (PAT) grants the frontend access to draft content for preview purposes.

#Lessons in this section

LessonWhat you will do
8.1 Set up the frontend starterClone the Next.js e-commerce starter, install dependencies, and orient yourself to the repo structure
8.2 Connect your storefrontConfigure Content API permissions, create a PAT, and add the environment variables that connect the starter to your Hygraph project
8.3 Configure a preview URLAdd a preview button to the Product model content editor sidebar so you can preview draft product pages before publishing

#What's next

Lesson 8.1 - Set up the frontend starter

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