We're transitioning Studio from Beta to Early Availability

Build a Static Site with Next.js and GraphQL

In this tutorial from guest contributor, James Quick, we will learn how to build a static site with Hygraph, Next.js, and GraphQL.
James Q Quick

Written by James Q Quick

Nov 01, 2021
Static Site with Next.js and GraphQL

I'm super excited to share with you a new video on building a static site with Next.js, Hygraph, and GraphQL.

In this video we'll cover creating a schema, relations, editing content, and modifying permissions to allow public API access.

We'll then use Next.js to fetch content using Apollo Client, and build static pages with the Next.js lifecycle methods getStaticPaths, and getStaticProps.

This video is great for those who want to check out how to build a simple Hygraph project from start to finish in just around 30 minutes. It demonstrates just how easy it is to build a static site and gives folks some example tooling for that.


  • Working with the Hygraph UI to build a schema and create content models for a static site

    • Highlights some field options that are particularly helpful for this use case
    • Demonstrates how to set up field validations
  • Querying content using the GraphQL Playground within the Hygraph UI

    • Shares tips and tricks for those new to GraphQL
    • Highlights the automatic query builder within GraphQL Playground
  • Configuring permissions to allow public API access

  • Fetching content using Apollo Client and building static pages with Next.js

#Watch the video of James' tutorial

For more videos like this, be sure to check out my Youtube channel. If you followed along and would like your project to be featured on an upcoming Hygraph Community Update, submit your project to their showcase.

Blog Author

James Q Quick

James Q Quick

I'm a Fullstack Web Developer who is addicted to learning and loves working with people. I live by the motto Learn Build Teach, so I’m excited to share the things I learn with you!

Share with others

Sign up for our newsletter!

Be the first to know about releases and industry news and insights.