Next.js

What is Next.js?Anchor

Next.js is a hybrid framework for both server-rendered and static JavaScript applications.

A framework that can be used with any back-end technology, Next.js brings the convenience of a modern framework and the performance and SEO benefits of pre-rendering to all websites and apps.

Benefits of NextJSAnchor

It's a JavaScript library that is well documented with a vibrant community with superb developer ergonomics.

Allows you to use modernized syntax. The library is built for the latest web technologies. The syntax is modern and straightforward to read. It has a lot of built-in functionality that will enable you to start using it quickly.

GraphQL and NextJSAnchor

If you're new to GraphQL, using NextJS is a good start! It offers a more REST-like API, with a few more features.

For GraphQL, check out this blog post. You can use the API to query a GraphQL database.

Why use a Headless CMS with Next.jsAnchor

Using a Headless CMS for Next.js websites and applications let's you take advantage of advanced Next.js lifecycle methods to access the data on the client, all server-rendered.

Take the power of Next.js and combine it with a headless CMS for your Progressive Web Application, eCommerce store, or Desktop app project.

Next.js boasts incredible server-side rendering, static exporting, CSS-in-JS and comes with all the boilerplate configured for an out-of-box ready experience. Paired with a Headless CMS for Nextjs, teams will reap the benefits of a highly performant site that gives more independence to the marketing team without compromising on developer experience.

Learn more about working with Hygraph and Next.jsAnchor

We've worked through several examples of working with Hygraph as a Next.js Headless CMS, here are a few to go through:

With Next.jsAnchor

This example demonstrates how to query from Hygraph with graphql-request in Next.js.

• Demo

How to Use

Download Manually

npx degit hygraph/hygraph-examples/with-nextjs with-nextjs

Install & Run:

cd with-nextjs
npm install
npm run dev
# or
cd with-nextjs
yarn
yarn dev

Run on Codesandbox

With next.js i18n RoutingAnchor

This example demonstrates how to use Next.js Internationalized Routing with localized Hygraph content.

• Demo

How to Use

Download Manually

npx degit hygraph/hygraph-examples/with-nextjs-i18n-routing with-nextjs-i18n-routing

Install & Run:

cd with-nextjs-i18n-routing
npm install
npm run dev
# or
cd with-nextjs-i18n-routing
yarn
yarn dev

Run on Codesandbox

With Next.js Image Component with Custom LoaderAnchor

This example demonstrates how to use a custom loader function with Next.js Image Component and Hygraph assets.

This allows you to perform asset transformations using the Hygraph CDN, rather than the default Next.js loader.

By using a custom loader, you will forgo the image caching provided by the default Next.js loader. Learn more here.

• Demo

How to Use

Download Manually

npx degit hygraph/hygraph-examples/with-nextjs-image-loader with-nextjs-image-loader

Install & Run:

cd with-nextjs-image-loader

npm install

npm run dev

# or

cd with-nextjs-image-loader

yarn

yarn dev

Run on Codesandbox

With Next.js Image ComponentAnchor

This example demonstrates how to use the Next.js Image Component with your Hygraph assets.

• Demo

How to Use

Download Manually

npx degit hygraph/hygraph-examples/with-nextjs-image with-nextjs-image

Install & Run:

cd with-nextjs-image

npm install

npm run dev

# or

cd with-nextjs-image

yarn

yarn dev

Run on Codesandbox

With Next.js and MDXAnchor

This example demonstrates how to use markdown fields from Hygraph with MDX in Next.js.

• Demo

How to Use

Download Manually

npx degit hygraph/hygraph-examples/with-nextjs-mdx-remote with-nextjs-mdx-remote

Install & Run:

cd with-nextjs-mdx-remote

npm install

npm run dev

# or

cd with-nextjs-mdx-remote

yarn

yarn dev

Run on Codesandbox

GraphQL, Next.js, and Hygraph are a powerful combination when building Jamstack applications.

To get up and running with querying content from Hygraph using GraphQL in your Next.js application, sign up for a free-forever developer account and start your first project!