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 GraphCMS, Next.js, and GraphQL.

james-quick-avatar
James Q Quick
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, GraphCMS, 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 GraphCMS 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 GraphCMS 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 GraphCMS 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 GraphCMS Community Update, submit your project to their showcase.

It's Easy To Get Started

GraphCMS plans are flexibly suited to accommodate your growth. Get started for free, or request a demo to discuss larger projects with more complex needs