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.
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.
HighlightsAnchor
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' tutorialAnchor
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.